import { Link } from "react-router";
import { trpc } from "@/providers/trpc";
import { ArrowRight } from "lucide-react";

const CAT_IMAGES: Record<string, string> = {
  "design-tools": "/cat-design-tools.jpg",
  "ai-tools": "/cat-ai-tools.jpg",
  "streaming": "/cat-streaming.jpg",
  "productivity": "/cat-productivity.jpg",
  "security": "/cat-security.jpg",
  "developer": "/cat-developer.jpg",
  "microsoft": "/cat-microsoft.jpg",
  "learning": "/cat-ai-tools.jpg",
  "combo-offers": "/prod-gaming.jpg",
};

const CAT_NAMES: Record<string, string> = {
  "design-tools": "Design Tools",
  "ai-tools": "AI Tools",
  "streaming": "Streaming",
  "productivity": "Productivity",
  "security": "Security & VPN",
  "developer": "Developer Tools",
  "microsoft": "Microsoft Office",
  "learning": "Learning",
  "combo-offers": "Combo Offers",
};

export function CategoryGrid() {
  const { data: categories } = trpc.product.getCategories.useQuery();

  const cats = (categories || []).map((c) => ({
    name: CAT_NAMES[c.category] || c.category,
    slug: c.category,
    count: c.count,
    image: CAT_IMAGES[c.category] || "/cat-design-tools.jpg",
  }));

  return (
    <section className="py-20 px-4" id="categories">
      <div className="max-w-6xl mx-auto">
        <div className="text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold mb-3">Browse by Category</h2>
          <p className="text-slate-400">Find the perfect subscription for your needs</p>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {cats.map((cat) => (
            <Link
              key={cat.slug}
              to={`/products?category=${cat.slug}`}
              className="group relative h-40 rounded-2xl overflow-hidden hover:scale-[1.02] transition-transform duration-300"
            >
              <div
                className="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110"
                style={{ backgroundImage: `url(${cat.image})` }}
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
              <div className="absolute bottom-0 left-0 right-0 p-4">
                <h3 className="font-semibold text-white mb-1">{cat.name}</h3>
                <div className="flex items-center gap-1 text-xs text-slate-300">
                  <span>{cat.count} products</span>
                  <ArrowRight className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
                </div>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}