import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/badge";
import Image from "next/image";

const products = [
  {
    name: "Hand-Woven Silk Scarf",
    seller: "Amina K.",
    price: "$45",
    category: "Fashion",
    image: "https://images.unsplash.com/photo-1584030373081-f37b7bb4cb8e?q=80&w=800&auto=format&fit=crop",
  },
  {
    name: "Organic Lavender Soap",
    seller: "Sarah J.",
    price: "$12",
    category: "Wellness",
    image: "https://images.unsplash.com/photo-1600857062241-98e5dba7f214?q=80&w=800&auto=format&fit=crop",
  },
  {
    name: "Ceramic Coffee Mug",
    seller: "Elena R.",
    price: "$28",
    category: "Home Decor",
    image: "https://images.unsplash.com/photo-1514228742587-6b1558fcca3d?q=80&w=800&auto=format&fit=crop",
  },
  {
    name: "Embroidered Wall Art",
    seller: "Priya M.",
    price: "$65",
    category: "Art",
    image: "https://images.unsplash.com/photo-1611486212335-132bb537d4e6?q=80&w=800&auto=format&fit=crop",
  },
];

export function ProductGrid() {
  return (
    <section id="explore" className="py-20">
      <Container>
        <div className="flex flex-col md:flex-row justify-between items-end mb-12 gap-4">
          <div className="max-w-2xl">
            <Heading>Featured Creations</Heading>
            <Subheading className="mt-2">
              Handpicked treasures from our verified women artists and housewives.
            </Subheading>
          </div>
          <Button variant="link" className="text-pink-600 font-semibold p-0 h-auto">
            View all products →
          </Button>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
          {products.map((product, index) => (
            <div key={index} className="group cursor-pointer">
              <div className="relative aspect-square overflow-hidden rounded-2xl bg-neutral-100 mb-4">
                <Image
                  src={product.image}
                  alt={product.name}
                  fill
                  className="object-cover transition-transform duration-500 group-hover:scale-110"
                />
                <div className="absolute top-3 left-3">
                  <Badge className="bg-white/90 text-black backdrop-blur-sm border-none">
                    {product.category}
                  </Badge>
                </div>
              </div>
              <h3 className="font-bold text-lg text-neutral-900">{product.name}</h3>
              <p className="text-neutral-500 text-sm mb-2">by {product.seller}</p>
              <div className="flex justify-between items-center">
                <span className="font-bold text-pink-600">{product.price}</span>
                <Button size="sm" variant="outline" className="rounded-full h-8 px-4 text-xs">
                  Add to Cart
                </Button>
              </div>
            </div>
          ))}
        </div>
      </Container>
    </section>
  );
}