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

export default function UnisexPage() {
  // Mock unisex products data
  const unisexProducts = [
    {
      id: "17",
      name: "Organic Cotton Hoodie",
      price: 89,
      originalPrice: 119,
      image: "/api/placeholder/400/500",
      images: ["/api/placeholder/400/500", "/api/placeholder/400/500"],
      rating: 4.7,
      reviewCount: 342,
      isNew: true,
      isSale: true,
      category: "Hoodies",
      colors: ["#000000", "#FFFFFF", "#6B7280", "#059669"],
      sizes: ["XS", "S", "M", "L", "XL", "XXL"],
    },
    {
      id: "18",
      name: "Minimalist T-Shirt",
      price: 39,
      originalPrice: 49,
      image: "/api/placeholder/400/500",
      rating: 4.5,
      reviewCount: 567,
      isSale: true,
      category: "T-Shirts",
      colors: ["#FFFFFF", "#000000", "#6B7280", "#1E40AF"],
      sizes: ["XS", "S", "M", "L", "XL", "XXL"],
    },
    {
      id: "19",
      name: "Relaxed Fit Jeans",
      price: 119,
      image: "/api/placeholder/400/500",
      rating: 4.6,
      reviewCount: 234,
      isNew: true,
      category: "Jeans",
      colors: ["#4169E1", "#000000", "#6B7280"],
      sizes: ["26", "28", "30", "32", "34", "36"],
    },
    {
      id: "20",
      name: "Oversized Sweatshirt",
      price: 79,
      originalPrice: 99,
      image: "/api/placeholder/400/500",
      rating: 4.8,
      reviewCount: 189,
      isSale: true,
      category: "Sweatshirts",
      colors: ["#F5F5DC", "#000000", "#6B7280", "#059669"],
      sizes: ["XS", "S", "M", "L", "XL", "XXL"],
    },
    {
      id: "21",
      name: "Canvas Backpack",
      price: 89,
      image: "/api/placeholder/400/500",
      rating: 4.4,
      reviewCount: 156,
      category: "Accessories",
      colors: ["#000000", "#8B4513", "#6B7280", "#FFFFFF"],
      sizes: ["One Size"],
    },
    {
      id: "22",
      name: "Cargo Joggers",
      price: 99,
      originalPrice: 129,
      image: "/api/placeholder/400/500",
      rating: 4.3,
      reviewCount: 278,
      isSale: true,
      category: "Pants",
      colors: ["#000000", "#6B7280", "#059669", "#8B4513"],
      sizes: ["XS", "S", "M", "L", "XL", "XXL"],
    },
    {
      id: "23",
      name: "Bomber Jacket",
      price: 159,
      image: "/api/placeholder/400/500",
      rating: 4.9,
      reviewCount: 123,
      isNew: true,
      category: "Outerwear",
      colors: ["#000000", "#1E40AF", "#6B7280", "#8B4513"],
      sizes: ["XS", "S", "M", "L", "XL", "XXL"],
    },
    {
      id: "24",
      name: "Classic Sneakers",
      price: 129,
      originalPrice: 159,
      image: "/api/placeholder/400/500",
      rating: 4.6,
      reviewCount: 445,
      isSale: true,
      category: "Shoes",
      colors: ["#FFFFFF", "#000000", "#6B7280"],
      sizes: ["36", "37", "38", "39", "40", "41", "42", "43", "44"],
    },
  ];

  return (
    <>
      <Header />
      <main className="min-h-screen bg-background">
        {/* Hero Section */}
        <section className="relative h-96 bg-gradient-to-r from-neutral-100 to-neutral-200 dark:from-neutral-800 dark:to-neutral-900 flex items-center justify-center">
          <div className="text-center space-y-4">
            <h1 className="text-4xl md:text-6xl font-bold text-foreground">Unisex Collection</h1>
            <p className="text-lg md:text-xl max-w-2xl mx-auto px-4 text-muted-foreground">
              Gender-neutral fashion for everyone. Discover versatile pieces designed for all body types and styles
            </p>
          </div>
        </section>

        {/* Filter Section */}
        <section className="border-b dark:border-neutral-800 py-6">
          <div className="container mx-auto px-4">
            <div className="flex flex-wrap items-center justify-between gap-4">
              <div className="flex items-center space-x-4">
                <span className="text-sm text-muted-foreground">
                  Showing {unisexProducts.length} products
                </span>
              </div>
              <div className="flex items-center space-x-4">
                <select className="px-3 py-2 border rounded-lg text-sm bg-background">
                  <option>Sort by: Featured</option>
                  <option>Price: Low to High</option>
                  <option>Price: High to Low</option>
                  <option>Newest First</option>
                  <option>Best Rating</option>
                </select>
              </div>
            </div>
          </div>
        </section>

        {/* Products Grid */}
        <section className="py-12">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
              {unisexProducts.map((product) => (
                <ProductCard key={product.id} {...product} />
              ))}
            </div>
          </div>
        </section>

        {/* Load More Section */}
        <section className="py-12 border-t dark:border-neutral-800">
          <div className="container mx-auto px-4 text-center">
            <button className="px-8 py-3 border border-primary text-primary hover:bg-primary hover:text-primary-foreground transition-colors rounded-lg">
              Load More Products
            </button>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}

export async function generateMetadata() {
  return {
    title: "Unisex Fashion Collection | blcklst",
    description: "Shop gender-neutral fashion at blcklst. Versatile, inclusive clothing designed for all body types and personal styles.",
  };
}