import Link from "next/link"
import Image from "next/image"

export default function CategorySection() {
  const categories = [
    {
      name: "Streetwear",
      slug: "streetwear",
      image:
        "https://images.pexels.com/photos/9522954/pexels-photo-9522954.jpeg?auto=compress&cs=tinysrgb&h=350",
      count: "24 items",
    },
    {
      name: "Casual",
      slug: "casual",
      image:
        "https://images.pexels.com/photos/9522954/pexels-photo-9522954.jpeg?auto=compress&cs=tinysrgb&h=350",
      count: "18 items",
    },
    {
      name: "Accessories",
      slug: "accessories",
      image:
        "https://images.pexels.com/photos/13408576/pexels-photo-13408576.jpeg?auto=compress&cs=tinysrgb&h=350",
      count: "12 items",
    },
  ]

  return (
    <section data-vula-section="category" className="py-20 lg:py-28 bg-neutral-50" id="categories">
      <div className="container mx-auto px-6 max-w-6xl">
        <h2 className="text-3xl lg:text-4xl font-semibold tracking-tight text-[#0a0a0a] mb-12">
          Shop by Category
        </h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          {categories.map((cat) => (
            <Link
              key={cat.slug}
              href={`/products?category=${cat.slug}`}
              className="group relative overflow-hidden rounded-none aspect-[4/5] bg-neutral-100 block"
            >
              <Image
                src={cat.image}
                alt={`${cat.name} category`}
                fill
                sizes="(max-width: 768px) 100vw, 33vw"
                className="object-cover group-hover:scale-105 transition-transform duration-500 ease-out"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0a]/70 via-[#0a0a0a]/20 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 p-6">
                <h3 className="text-2xl font-bold text-white">{cat.name}</h3>
                <p className="text-sm text-neutral-300 mt-1">{cat.count}</p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  )
}