import { Header } from "@/components/header";
import { HeroSection } from "@/components/hero-section";
import { ProductCard } from "@/components/product-card";
import { Footer } from "@/components/footer";

export default function Home() {
  // Sample product data for demonstration
  const featuredProducts = [
    {
      id: "1",
      name: "Premium Cotton T-Shirt",
      price: 29.99,
      originalPrice: 39.99,
      image: "/api/placeholder/400/500",
      rating: 4.8,
      reviewCount: 124,
      isNew: true,
      isSale: true,
      category: "Men's Clothing",
      colors: ["#000000", "#FFFFFF", "#808080", "#000080"],
      sizes: ["S", "M", "L", "XL"],
    },
    {
      id: "2",
      name: "Elegant Summer Dress",
      price: 89.99,
      originalPrice: 119.99,
      image: "/api/placeholder/400/500",
      rating: 4.9,
      reviewCount: 89,
      isSale: true,
      category: "Women's Clothing",
      colors: ["#FF69B4", "#000000", "#800080"],
      sizes: ["XS", "S", "M", "L"],
    },
    {
      id: "3",
      name: "Classic Denim Jacket",
      price: 79.99,
      image: "/api/placeholder/400/500",
      rating: 4.7,
      reviewCount: 156,
      isNew: true,
      category: "Outerwear",
      colors: ["#4169E1", "#000000", "#708090"],
      sizes: ["S", "M", "L", "XL", "XXL"],
    },
    {
      id: "4",
      name: "Comfortable Sneakers",
      price: 99.99,
      originalPrice: 129.99,
      image: "/api/placeholder/400/500",
      rating: 4.6,
      reviewCount: 203,
      isSale: true,
      category: "Footwear",
      colors: ["#FFFFFF", "#000000", "#FF0000"],
      sizes: ["7", "8", "9", "10", "11", "12"],
    },
    {
      id: "5",
      name: "Cozy Winter Sweater",
      price: 69.99,
      image: "/api/placeholder/400/500",
      rating: 4.8,
      reviewCount: 78,
      isNew: true,
      category: "Knitwear",
      colors: ["#8B4513", "#000000", "#008000", "#800080"],
      sizes: ["S", "M", "L", "XL"],
    },
    {
      id: "6",
      name: "Stylish Crossbody Bag",
      price: 45.99,
      originalPrice: 59.99,
      image: "/api/placeholder/400/500",
      rating: 4.5,
      reviewCount: 92,
      isSale: true,
      category: "Accessories",
      colors: ["#000000", "#8B4513", "#800080"],
      sizes: ["One Size"],
    },
  ];

  return (
    <div className="min-h-screen bg-background">
      <Header />
      
      <main>
        <HeroSection />
        
        {/* Featured Products Section */}
        <section className="py-16 bg-white">
          <div className="container mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold mb-4">Featured Products</h2>
              <p className="text-muted-foreground max-w-2xl mx-auto">
                Discover our handpicked selection of trending items that our customers love most.
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {featuredProducts.map((product) => (
                <ProductCard key={product.id} {...product} />
              ))}
            </div>
            
            <div className="text-center mt-12">
              <button className="bg-primary text-primary-foreground px-8 py-3 rounded-lg font-medium hover:bg-primary/90 transition-colors">
                View All Products
              </button>
            </div>
          </div>
        </section>

        {/* Categories Section */}
        <section className="py-16 bg-neutral-50">
          <div className="container mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-bold mb-4">Shop by Category</h2>
              <p className="text-muted-foreground">
                Explore our diverse range of fashion categories
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {[
                { name: "Women", image: "/api/placeholder/600/400", count: "2,345+ items" },
                { name: "Men", image: "/api/placeholder/600/400", count: "1,892+ items" },
                { name: "Kids", image: "/api/placeholder/600/400", count: "756+ items" },
              ].map((category) => (
                <div
                  key={category.name}
                  className="relative group cursor-pointer overflow-hidden rounded-lg bg-gradient-to-br from-neutral-200 to-neutral-300 aspect-[4/3]"
                >
                  <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-colors" />
                  <div className="absolute inset-0 flex flex-col justify-end p-6 text-white">
                    <h3 className="text-2xl font-bold mb-1">{category.name}</h3>
                    <p className="text-sm opacity-90">{category.count}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
      
      <Footer />
    </div>
  );
}