import { Link } from "react-router-dom";
import { categories } from "@/lib/data";

const CategoryGrid = () => {
  return (
    <section id="categories" className="py-20 lg:py-28 bg-[#1a1a1a]">
      <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-14">
          <p className="font-oswald text-[#d35400] text-sm uppercase tracking-[0.4em] mb-3">
            Browse Our Selection
          </p>
          <h2 className="font-playfair text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-4">
            Shop by Category
          </h2>
          <div className="w-20 h-1 bg-[#d35400] mx-auto rounded-full" />
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
          {categories.map((cat) => (
            <Link
              key={cat.name}
              to={`/products?category=${cat.slug}`}
              className="group relative overflow-hidden rounded-lg aspect-[4/3] cursor-pointer"
            >
              <img
                src={cat.image}
                alt={cat.name}
                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                loading="lazy"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-[#1a1a1a]/95 via-[#1a1a1a]/40 to-transparent transition-all duration-500 group-hover:from-[#d35400]/80 group-hover:via-[#d35400]/20" />
              <div className="absolute bottom-0 left-0 right-0 p-6">
                <h3 className="font-oswald text-xl sm:text-2xl font-bold text-white uppercase tracking-wider mb-1">
                  {cat.name}
                </h3>
                <span className="font-oswald text-xs text-[#d35400] group-hover:text-white uppercase tracking-widest transition-colors">
                  {cat.count} Products →
                </span>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
};

export default CategoryGrid;