"use client";

import Image from "next/image";
import Link from "next/link";
import { motion } from "framer-motion";
import { MaterialIcon } from "@/components/ui/MaterialIcon";
import { fadeUp, fadeIn, staggerContainer, viewport } from "@/lib/animations";

const MotionLink = motion.create(Link);

const CATEGORIES = [
  {
    name: "Groceries & Daily Essentials",
    image: "/images/cat-daily-essentials.png",
    tag: "Local Store",
    tagStyle: "bg-secondary text-white",
    desc: "Fresh groceries, dairy, and household essentials from nearby shops.",
    cta: "Shop Fresh",
  },
  {
    name: "Medicines & Pharmacy",
    image: "/images/cat-health-wellness.png",
    tag: "Available Near You",
    tagStyle: "bg-primary text-white",
    desc: "Prescription medicines and wellness supplies from verified pharmacies.",
    cta: "Order Meds",
  },
  {
    name: "Food & Snacks",
    image: "/images/cat-hot-food.png",
    tag: "Nearby",
    tagStyle: "bg-brand-accent text-brand-dark",
    desc: "Fresh meals, bakes, and local snacks from neighbourhood kitchens.",
    cta: "Order Now",
  },
  {
    name: "Fresh Fruits & Vegetables",
    image: "/images/cat-daily-essentials.png",
    tag: "Local Store",
    tagStyle: "bg-secondary text-white",
    desc: "Farm-fresh fruits and vegetables from trusted local vendors.",
    cta: "Browse Fresh",
  },
  {
    name: "Home Needs",
    image: "/images/cat-pet-essentials.png",
    tag: "Available Near You",
    tagStyle: "bg-orange-500 text-white",
    desc: "Kitchen supplies, household cleaners, and daily utilities.",
    cta: "Shop Needs",
  },
  {
    name: "Local Services",
    image: "/images/cat-home-services.png",
    tag: "Nearby",
    tagStyle: "bg-blue-600 text-white",
    desc: "Verified local handymen, laundry, tailors, and household help.",
    cta: "Book Service",
  },
];

export function ServiceCategories() {
  return (
    <section className="section bg-white w-full">
      <div className="page-container">
        {/* Header Section */}
        <motion.div
          className="flex flex-col md:flex-row justify-between items-start md:items-end mb-10 md:mb-12 xl:mb-10 gap-6"
          variants={fadeUp}
          initial="hidden"
          whileInView="visible"
          viewport={viewport}
        >
          <div>
            <span className="text-xs text-primary uppercase tracking-widest font-black bg-primary/10 px-3 py-1.5 rounded-full">
              Neighbourhood Offerings
            </span>
            <h2 className="text-4xl md:text-5xl lg:text-[54px] font-display font-black text-brand-dark mt-4 leading-tight tracking-tight">
              Explore Stores <span className="text-primary font-normal">Near To You</span>
            </h2>
            <p className="text-body-lg text-on-surface-variant mt-4 max-w-xl">
              Groceries, medicines, food, and everyday essentials from nearby local shops.
            </p>
          </div>
          <Link
            href="/people"
            className="text-primary text-sm md:text-base font-black flex items-center gap-1 hover:gap-2 transition-all group shrink-0"
          >
            View All Categories
            <MaterialIcon icon="arrow_forward" size={18} className="transition-transform group-hover:translate-x-1" />
          </Link>
        </motion.div>

        {/* Categories Premium Grid */}
        {/* fadeIn (opacity only) preserves .premium-card:hover CSS transform */}
        <motion.div
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
          variants={staggerContainer}
          initial="hidden"
          whileInView="visible"
          viewport={viewport}
        >
          {CATEGORIES.map((cat) => (
            <MotionLink
              key={cat.name}
              href="/people"
              variants={fadeIn}
              className="bg-white rounded-[2rem] border border-outline-variant/10 shadow-lg overflow-hidden premium-card flex flex-col group h-full cursor-pointer"
              whileHover={{ y: -4, scale: 1.02, transition: { duration: 0.22, ease: [0.22, 1, 0.36, 1] } }}
              whileTap={{ scale: 0.98, transition: { duration: 0.1 } }}
            >
              {/* 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-xs 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 justify-between min-h-[160px]">
                <div>
                  <h3 className="text-lg md:text-xl font-black text-brand-dark group-hover:text-primary transition-colors mb-2">
                    {cat.name}
                  </h3>
                  <p className="text-sm md:text-base text-on-surface-variant leading-relaxed mb-6">
                    {cat.desc}
                  </p>
                </div>

                {/* Interactive Action Button */}
                <div className="flex items-center justify-between pt-4 border-t border-dashed border-outline-variant/25">
                  <span className="text-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>
            </MotionLink>
          ))}
        </motion.div>
      </div>
    </section>
  );
}
