import { Link } from "react-router"
import { ArrowRight } from "lucide-react"
import { getCategories } from "@/data/staticData"

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 CategorySection() {
  const categories = getCategories()
  const cats = categories.map(c => ({ name: CAT_NAMES[c.id] || c.name, slug: c.id, count: c.productCount, image: CAT_IMAGES[c.id] || "/prod-ai.jpg" }))

  return (
    <section className="py-20 px-4">
      <div className="max-w-7xl 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={`/shop?category=${cat.slug}`} className="group relative h-36 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-0.5">{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>
  )
}