import MainSec3Footer from "@/components/common/main-sec3-footer";
import SiteHeader from "@/components/common/site-header";
import type { Metadata } from "next";
import BlogDetailHero from "@/components/blog-detail/BlogDetailHero";
import BlogContent from "@/components/blog-detail/BlogContent";
import BlogTags from "@/components/blog-detail/BlogTags";
import BlogAuthorBox from "@/components/blog-detail/BlogAuthorBox";
import BlogNavigation from "@/components/blog-detail/BlogNavigation";
import BlogComments from "@/components/blog-detail/BlogComments";
import BlogSidebar from "@/components/blog/BlogSidebar";

export const metadata: Metadata = {
  title: "Blog Detail",
  description: "Articles and updates — mapped from blog-standard.html",
};

export default function BlogDetailPage() {
  return (
    <>
      <SiteHeader />
      {/* main-sec4 */}
      <section className="main-sec4 v2">
        <BlogDetailHero />

        {/* blog-sec2 */}
        <div className="blog-sec2 space">
          <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 />
                  <BlogAuthorBox />
                  <BlogNavigation />
                  <BlogComments />
                </div>
              </div>
              <div className="col-lg-4">
                <BlogSidebar />
              </div>
            </div>
          </div>
        </div>
        {/* End blog-sec2 */}
      </section>
      {/* End main-sec4 */}
      <MainSec3Footer />
    </>
  );
}