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",
}
const CAT_DESC: Record<string, string> = {
  "design-tools": "Canva Pro, Adobe CC, CorelDRAW, CapCut and more",
  "ai-tools": "ChatGPT Plus, Claude, Midjourney, AI writing tools",
  "streaming": "Netflix 4K, Disney+, Spotify, YouTube Premium",
  "productivity": "Notion, Grammarly, LinkedIn Premium, Office 365",
  "security": "NordVPN, ExpressVPN, Surfshark, antivirus software",
  "developer": "GitHub Pro, JetBrains, Vercel, hosting tools",
  "microsoft": "Office 365, Windows 11, OneDrive, Teams",
  "learning": "Udemy, Skillshare, Coursera, language apps",
  "combo-offers": "Bundled subscriptions at unbeatable prices",
}

export default function Categories() {
  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", desc: CAT_DESC[c.id] || "Premium subscriptions" }))

  return (
    <div className="min-h-screen pt-28 pb-16 px-4">
      <div className="max-w-7xl mx-auto">
        <div className="text-center mb-12"><h1 className="text-4xl md:text-5xl font-bold mb-3">Browse Categories</h1><p className="text-slate-400">Find the perfect subscription for your needs</p></div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          {cats.map(cat => (
            <Link key={cat.slug} to={`/shop?category=${cat.slug}`} className="group glass-card overflow-hidden hover:border-[#f97316]/30 transition-all duration-300">
              <div className="relative h-48 overflow-hidden"><img src={cat.image} alt={cat.name} className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" /><div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" /></div>
              <div className="p-5"><div className="flex items-center justify-between mb-2"><h3 className="text-xl font-bold group-hover:text-[#f97316] transition-colors">{cat.name}</h3><span className="px-3 py-1 rounded-full bg-[#f97316]/10 text-[#f97316] text-sm font-bold">{cat.count} products</span></div><p className="text-sm text-slate-400 mb-3">{cat.desc}</p><div className="flex items-center gap-1 text-sm text-[#f97316]"><span>Explore</span><ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" /></div></div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  )
}