import Image from "next/image";
import { MaterialIcon } from "@/components/ui/MaterialIcon";

const CATEGORIES = [
  {
    name: "Hot Food",
    image: "/images/cat-hot-food.png",
    tag: "Popular",
    tagStyle: "bg-brand-accent text-brand-dark",
    desc: "Fresh meals, bakes & street favorites",
    stats: "★ 4.8 (250+ kitchens)",
    cta: "Order Now",
  },
  {
    name: "Daily Essentials",
    image: "/images/cat-daily-essentials.png",
    tag: "15 Mins",
    tagStyle: "bg-secondary text-white",
    desc: "Groceries, fresh fruits & veggies",
    stats: "★ 4.9 (180+ stores)",
    cta: "Shop Fresh",
  },
  {
    name: "Health & Wellness",
    image: "/images/cat-health-wellness.png",
    tag: "24/7 Delivery",
    tagStyle: "bg-primary text-white",
    desc: "Medicines & daily health supplies",
    stats: "★ 4.7 (95+ pharmacies)",
    cta: "Order Meds",
  },
  {
    name: "Home Services",
    image: "/images/cat-home-services.png",
    tag: "Verified Professionals",
    tagStyle: "bg-blue-600 text-white",
    desc: "Electricians, cleaning & repairs",
    stats: "★ 4.9 (340+ experts)",
    cta: "Book Service",
  },
  {
    name: "Pet Essentials",
    image: "/images/cat-pet-essentials.png",
    tag: "Express",
    tagStyle: "bg-orange-500 text-white",
    desc: "Pet food, toys & grooming care",
    stats: "★ 4.8 (60+ partners)",
    cta: "Shop Pet",
  },
  {
    name: "More Services",
    image: null,
    tag: "Hyperlocal",
    tagStyle: "bg-surface-variant text-on-surface",
    desc: "Laundry, car wash, tailoring & more",
    stats: "★ 5.0 (500+ services)",
    cta: "Explore All",
  },
];

export function ServiceCategories() {
  return (
    <section className="bg-background pt-28 pb-16 px-margin-mobile md:px-margin-desktop">
      <div className="max-w-container-max mx-auto">
        {/* Header Section */}
        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-12 gap-4">
          <div>
            <span className="text-label-sm text-primary uppercase tracking-widest font-black bg-primary/5 px-3 py-1 rounded-full">
              Neighborhood Offerings
            </span>
            <h2 className="text-display text-brand-dark mt-3 leading-tight">
              Popular Services <span className="text-primary font-normal">Near You</span>
            </h2>
            <p className="text-body-lg text-on-surface-variant mt-2 max-w-xl">
              From fresh groceries to emergency services, everything in your 2km radius delivered instantly.
            </p>
          </div>
          <a
            href="#"
            className="text-primary text-label-md font-black flex items-center gap-1 hover:gap-2 transition-all group"
          >
            View All Categories
            <MaterialIcon icon="arrow_forward" size={18} className="transition-transform group-hover:translate-x-1" />
          </a>
        </div>

        {/* Categories Premium Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {CATEGORIES.map((cat) => (
            <div
              key={cat.name}
              className="bg-white rounded-[2rem] border border-outline-variant/10 shadow-lg overflow-hidden premium-card flex flex-col group h-full"
            >
              {/* Image Container */}
              <div className="relative aspect-[4/3] w-full overflow-hidden bg-surface-container/30">
                {cat.image ? (
                  <Image
                    src={cat.image}
                    alt={cat.name}
                    width={400}
                    height={300}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                  />
                ) : (
                  <div className="w-full h-full bg-gradient-to-br from-primary/10 to-brand-accent/15 flex flex-col items-center justify-center text-primary">
                    <div className="w-16 h-16 rounded-full bg-white/80 shadow-md flex items-center justify-center animate-pulse-subtle">
                      <MaterialIcon icon="grid_view" size={32} />
                    </div>
                  </div>
                )}

                {/* Overlaid Badge */}
                <div className={`absolute top-4 left-4 text-[10px] font-black uppercase tracking-wider px-3.5 py-1.5 rounded-full shadow-md z-10 ${cat.tagStyle}`}>
                  {cat.tag}
                </div>
              </div>

              {/* Card Body */}
              <div className="p-6 flex flex-col flex-grow">
                <div className="flex items-center justify-between mb-2">
                  <h3 className="text-headline-md font-black text-brand-dark group-hover:text-primary transition-colors">
                    {cat.name}
                  </h3>
                  <span className="text-[11px] font-bold text-on-surface-variant bg-surface-container px-2.5 py-1 rounded-full">
                    {cat.stats}
                  </span>
                </div>
                <p className="text-body-md text-on-surface-variant mb-6 flex-grow leading-relaxed">
                  {cat.desc}
                </p>

                {/* Interactive Action Button */}
                <div className="flex items-center justify-between pt-4 border-t border-dashed border-outline-variant/25">
                  <span className="text-label-sm text-primary font-black uppercase tracking-wider group-hover:underline">
                    {cat.cta}
                  </span>
                  <div className="w-10 h-10 rounded-full bg-brand-dark text-white flex items-center justify-center group-hover:bg-brand-accent group-hover:text-brand-dark transition-colors duration-300 shadow-md">
                    <MaterialIcon icon="chevron_right" size={20} className="font-bold" />
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
