import Link from "next/link";
import { Laptop, Smartphone, Headphones, Monitor, Gamepad2, Package } from "lucide-react";

const categories = [
  {
    label: "Laptops",
    icon: Laptop,
    href: "/laptops",
    color: "from-sky-500 to-blue-600",
    bg: "bg-sky-50 hover:bg-sky-100",
    count: "50+ Models",
  },
  {
    label: "iPhones",
    icon: Smartphone,
    href: "/iphones",
    color: "from-indigo-500 to-purple-600",
    bg: "bg-indigo-50 hover:bg-indigo-100",
    count: "All Models",
  },
  {
    label: "Gaming",
    icon: Gamepad2,
    href: "/laptops?tag=gaming",
    color: "from-red-500 to-orange-600",
    bg: "bg-red-50 hover:bg-red-100",
    count: "High Performance",
  },
  {
    label: "MacBooks",
    icon: Laptop,
    href: "/laptops?brand=apple",
    color: "from-slate-600 to-slate-800",
    bg: "bg-slate-50 hover:bg-slate-100",
    count: "M1, M2, M3",
  },
  {
    label: "Accessories",
    icon: Headphones,
    href: "/products?category=accessories",
    color: "from-emerald-500 to-teal-600",
    bg: "bg-emerald-50 hover:bg-emerald-100",
    count: "All Brands",
  },
  {
    label: "Monitors",
    icon: Monitor,
    href: "/products?category=monitors",
    color: "from-violet-500 to-purple-600",
    bg: "bg-violet-50 hover:bg-violet-100",
    count: "4K & Full HD",
  },
];

export default function CategorySection() {
  return (
    <section className="py-10">
      <div className="max-w-7xl mx-auto px-4">
        <div className="flex items-center justify-between mb-6">
          <div>
            <h2 className="text-2xl font-black text-slate-900">Shop by Category</h2>
            <p className="text-slate-500 text-sm mt-1">Find exactly what you&apos;re looking for</p>
          </div>
          <Link href="/products" className="text-sky-600 hover:text-sky-700 text-sm font-medium flex items-center gap-1">
            View all <Package className="w-4 h-4" />
          </Link>
        </div>

        <div className="grid grid-cols-3 sm:grid-cols-3 lg:grid-cols-6 gap-3">
          {categories.map((cat) => (
            <Link
              key={cat.label}
              href={cat.href}
              className="group flex flex-col items-center gap-3 p-4 rounded-2xl border border-slate-100 hover:border-sky-200 hover:shadow-lg transition-all duration-300 bg-white"
            >
              <div className={`w-14 h-14 rounded-2xl bg-gradient-to-br ${cat.color} flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300`}>
                <cat.icon className="w-7 h-7 text-white" />
              </div>
              <div className="text-center">
                <p className="text-sm font-bold text-slate-800 group-hover:text-sky-700 transition-colors">{cat.label}</p>
                <p className="text-xs text-slate-400 mt-0.5">{cat.count}</p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </section>
  );
}