import { Header } from "@/components/header"
import { HeroCarousel } from "@/components/hero-carousel"
import { CategoryRow } from "@/components/category-row"
import { ProductGrid } from "@/components/product-grid"
import { FeaturesBand } from "@/components/features-band"
import { GetBabyBanner } from "@/components/get-baby-banner"
import { PremiumCollection } from "@/components/premium-collection"
import { CoursesLinks } from "@/components/courses-links"
import { Footer } from "@/components/footer"
import { CartProvider } from "@/lib/cart-context"
import { products } from "@/lib/data"

export default function HomePage() {
  const featuredProducts = products.slice(0, 8)
  const newArrivals = products.slice(4, 12)

  return (
    <CartProvider>
      <div className="min-h-screen flex flex-col">
        <Header />
        <main className="flex-1">
          <HeroCarousel />
          <CategoryRow />
          <FeaturesBand />

          <CoursesLinks />

          <PremiumCollection />

          <ProductGrid products={newArrivals} title="New Arrivals" />

          {/* Promo Banner */}
          <section className="py-10">
            <div className="container mx-auto px-4">
              <div className="bg-gradient-to-r from-primary to-primary/80 rounded-2xl p-8 md:p-12 text-primary-foreground">
                <div className="max-w-2xl">
                  <h2 className="text-2xl md:text-4xl font-bold mb-4 text-balance">Get 20% Off Your First Order</h2>
                  <p className="text-lg opacity-90 mb-6 text-pretty">
                    Use code <span className="font-bold bg-accent px-2 py-1 rounded">FIRST20</span> at checkout
                  </p>
                  <button className="bg-accent hover:bg-accent/90 text-accent-foreground px-8 py-3 rounded-full font-semibold transition-all hover:scale-105">
                    Shop Now
                  </button>
                </div>
              </div>
            </div>
          </section>

          {/* Trust Badges */}
          <section className="py-10 bg-muted">
            <div className="container mx-auto px-4">
              <h2 className="text-2xl md:text-3xl font-bold text-center mb-8 text-foreground">
                Why Choose Khan Traders?
              </h2>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
                <TrustBadge number="10K+" label="Happy Customers" icon="😊" />
                <TrustBadge number="500+" label="Products" icon="📦" />
                <TrustBadge number="100%" label="Genuine Products" icon="✅" />
                <TrustBadge number="24/7" label="Customer Support" icon="🎧" />
              </div>
            </div>
          </section>

          <GetBabyBanner />
        </main>
        <Footer />
      </div>
    </CartProvider>
  )
}

function TrustBadge({
  number,
  label,
  icon,
}: {
  number: string
  label: string
  icon: string
}) {
  return (
    <div className="bg-card rounded-xl p-6 text-center shadow-sm border border-border">
      <div className="text-4xl mb-2">{icon}</div>
      <div className="text-2xl md:text-3xl font-bold text-primary">{number}</div>
      <div className="text-muted-foreground text-sm">{label}</div>
    </div>
  )
}
