import type { Metadata } from "next";
import Header from "@/components/shared/Header";
import Footer from "@/components/shared/Footer";
import BlogHero from "@/components/blog-details/BlogHero";
import BlogContent from "@/components/blog-details/BlogContent";
import BlogTags from "@/components/blog-details/BlogTags";
import BlogAuthor from "@/components/blog-details/BlogAuthor";
import RelatedPosts from "@/components/blog-details/RelatedPosts";
import BlogComments from "@/components/blog-details/BlogComments";
import CommentForm from "@/components/blog-details/CommentForm";
import Sidebar from "@/components/blog-details/Sidebar";

export const metadata: Metadata = {
  title: "Blog Details",
  description:
    "Deep dive into a Sasico blog post with detailed insights, author profile, related posts, comments, and sidebar resources.",
};

export default function Home() {
  return (
    <div className="wrapper">
      <section className="main-sec3">
        <Header />
        <BlogHero />
      </section>
      <section className="blog-detail-sec space-bottom">
        <div className="carousel-container">
          <div className="row">
            <div className="col-lg-8">
              <div
                className="blog-detail-content"
                data-aos="fade-up"
                data-aos-duration={900}
                data-aos-delay={200}
              >
                <BlogContent />
                <BlogTags />
                <BlogAuthor />
                <RelatedPosts />
                <BlogComments />
                <CommentForm />
              </div>
            </div>
            <div className="col-lg-4">
              <Sidebar />
            </div>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
}