"use client";

import Link from "next/link";
import { Hero } from "@/components/sections/hero";
import { CompanyIntro } from "@/components/sections/company-intro";
import { Products } from "@/components/sections/products";
import { VideoCTA } from "@/components/sections/video-cta";
import { WhyUnipam } from "@/components/sections/why-unipam";
import { About } from "@/components/sections/about";
import { IraqCampaignGallery } from "@/components/sections/iraq-campaign-gallery";
import { StatsSection } from "@/components/sections/stats-section";
import { DiaperAdvisor } from "@/components/sections/diaper-advisor";

export default function Home() {
  return (
    <div className="flex flex-col">
      <Hero />
      
      <CompanyIntro />

      <VideoCTA />
      
      {/* Product Highlights Section */}
      <section className="bg-white">
        <Products />
        <div className="flex justify-center pb-16">
          <Link href="/products" className="btn-secondary">
            View All Sizes
          </Link>
        </div>
      </section>

      {/* Why UNIPAM Sneak Peek */}
      <div className="bg-section-teal">
        <WhyUnipam />
        <div className="flex justify-center pb-16">
          <Link href="/why-unipam" className="btn-primary">
            Explore All Benefits
          </Link>
        </div>
      </div>

      {/* Stats, Testimonials & How It Works */}
      <StatsSection />

      {/* Interactive Advisor */}
      <div className="bg-light-gray/30">
        <DiaperAdvisor />
      </div>

      {/* About Sneak Peek */}
      <section className="bg-white">
        <About />
        <div className="flex justify-center pb-16">
          <Link href="/about" className="btn-secondary">
            Read Our Story
          </Link>
        </div>
      </section>

      <IraqCampaignGallery />
    </div>
  );
}