"use client";

import { motion } from "framer-motion";
import Image from "next/image";

// Custom Gold Category Icons (SVG Paths)
const LeafThaliIcon = () => (
  <svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
    <path d="M17 2H7C5.9 2 5 2.9 5 4v16c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-5 18c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3zm0-8c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3z" />
  </svg>
);

const BiryaniRiceIcon = () => (
  <svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2C7 2 3 5 3 9c0 2.2 1.3 4.2 3.3 5.4C6.1 15 6 15.5 6 16c0 2.2 2.7 4 6 4s6-1.8 6-4c0-.5-.1-1-.3-1.6 2-1.2 3.3-3.2 3.3-5.4 0-4-4-7-9-7zm0 10c-3.3 0-6-1.8-6-4s2.7-4 6-4 6 1.8 6 4-2.7 4-6 4z" />
  </svg>
);

const TiffinsDosasIcon = () => (
  <svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L17.61 5.03C16.07 3.74 14.12 3 12 3zm5.66 3.44L5.03 17.61C6.48 19.06 8.57 20 11 20c4.97 0 9-4.03 9-9 0-2.43-.94-4.52-2.34-5.96z" />
  </svg>
);

const CurriesGraviesIcon = () => (
  <svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
    <path d="M22 11h-2.1c-.5-3.3-3.1-5.9-6.4-6.4V2.5C13.5 2.2 13 2 12 2s-1.5.2-1.5.5V4.6C7.2 5.1 4.6 7.7 4.1 11H2c-.6 0-1 .4-1 1s.4 1 1 1h2.1c.5 3.3 3.1 5.9 6.4 6.4v2.1c0 .3.5.5 1.5.5s1.5-.2 1.5-.5v-2.1c3.3-.5 5.9-3.1 6.4-6.4H22c.6 0 1-.4 1-1s-.4-1-1-1z" />
  </svg>
);

const SweetsDessertsIcon = () => (
  <svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm1-14.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0 5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z" />
  </svg>
);

const BeveragesIcon = () => (
  <svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
    <path d="M2 21h18v-2H2v2zM20 8h-2V5h2v3zm-4-3H4v10c0 2.21 1.79 4 4 4h8c2.21 0 4-1.79 4-4V5h-4zm2 10c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V7h12v8z" />
  </svg>
);

const TandoorSpecialsIcon = () => (
  <svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2C7.03 2 3 6.03 3 11c0 3.7 2.24 6.89 5.5 8.24V21c0 .55.45 1 1 1h5c.55 0 1-.45 1-1v-1.76c3.26-1.35 5.5-4.54 5.5-8.24 0-4.97-4.03-9-9-9zm3 10H9v-2h6v2z" />
  </svg>
);

const SeafoodDelightsIcon = () => (
  <svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14.5c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5zm-1.5-3.5c-.55 0-1-.45-1-1V8c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1z" />
  </svg>
);

const ChefSpecialsIcon = () => (
  <svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L17.61 5.03C16.07 3.74 14.12 3 12 3zm0 15c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z" />
  </svg>
);

const BanquetMenusIcon = () => (
  <svg className="w-4.5 h-4.5 text-[#bc9e65]" viewBox="0 0 24 24" fill="currentColor">
    <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" />
  </svg>
);

// Ornate Corner Leaf Ornament Vector details
const CornerOrnaments = () => (
  <>
    {/* Top Left Leaf Corner */}
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 top-2.5 left-2.5 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    {/* Top Right Leaf Corner */}
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 top-2.5 right-2.5 rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    {/* Bottom Left Leaf Corner */}
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 bottom-2.5 left-2.5 -rotate-90 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
    {/* Bottom Right Leaf Corner */}
    <svg className="absolute w-3.5 h-3.5 text-[#bc9e65]/40 bottom-2.5 right-2.5 rotate-180 pointer-events-none select-none transition-all duration-500 group-hover:text-[#bc9e65]/80" viewBox="0 0 24 24" fill="currentColor">
      <path d="M2 2h6v1.5H3.5V8H2V2zm5 5c0-1.1.9-2 2-2h4v1.5H9V11H7V7z" />
    </svg>
  </>
);

const ROW1_CATEGORIES = [
  {
    id: "thali",
    title: "Traditional Thali",
    subtitle: "FEATURED",
    desc: "A wholesome spread of authentic South Indian flavors served the traditional way.",
    image: "/images/south_indian_thali_luxury.png",
    icon: LeafThaliIcon,
    isDouble: true,
  },
  {
    id: "biryani",
    title: "Biryani & Rice",
    desc: "Aromatic, flavorful & slow-cooked to perfection.",
    image: "/images/category_biryani.jpg",
    icon: BiryaniRiceIcon,
  },
  {
    id: "dosas",
    title: "Tiffins & Dosas",
    desc: "Crisp, soft & made fresh for a perfect start.",
    image: "/images/masala_dosa_luxury.png",
    icon: TiffinsDosasIcon,
  },
  {
    id: "curries",
    title: "Curries & Gravies",
    desc: "Rich, flavorful & inspired by regional classics.",
    image: "/images/category_curries.jpg",
    icon: CurriesGraviesIcon,
  },
];

const ROW2_CATEGORIES = [
  {
    id: "sweets",
    title: "Sweets & Desserts",
    desc: "Traditional sweets crafted to end your meal beautifully.",
    image: "/images/category_sweets.jpg",
    icon: SweetsDessertsIcon,
  },
  {
    id: "beverages",
    title: "Beverages",
    desc: "Refreshing & traditional drinks to complement every meal.",
    image: "/images/category_beverages.jpg",
    icon: BeveragesIcon,
  },
  {
    id: "tandoor",
    title: "Tandoor Specials",
    desc: "Fire-grilled delights with bold spices and irresistible aroma.",
    image: "/images/category_tandoor.jpg",
    icon: TandoorSpecialsIcon,
  },
  {
    id: "seafood",
    title: "Seafood Delights",
    desc: "Coastal flavors cooked with authenticity and passion.",
    image: "/images/category_seafood.jpg",
    icon: SeafoodDelightsIcon,
  },
  {
    id: "chef_specials",
    title: "Chef's Specials",
    desc: "Handpicked creations by our master chef, just for you.",
    image: "/images/category_chef_specials.jpg",
    icon: ChefSpecialsIcon,
  },
  {
    id: "banquet",
    title: "Banquet Menus",
    desc: "Curated menus for weddings, events & celebrations.",
    image: "/images/category_banquet.jpg",
    icon: BanquetMenusIcon,
  },
];

export default function CulinaryCategories() {
  return (
    <section className="relative w-full py-28 px-6 sm:px-12 md:px-16 lg:px-24 overflow-hidden z-20 bg-[#06120c]">
      
      {/* Background Graphic Template Layer */}
      <div className="absolute inset-0 z-0 pointer-events-none select-none">
        <Image
          src="/images/category_bg.jpg"
          alt="Categories Backdrop"
          fill
          priority
          className="object-cover object-center"
        />
      </div>

      <div className="container max-w-[1300px] mx-auto relative z-10 flex flex-col gap-14 items-center">
        
        {/* Title Area */}
        <div className="flex flex-col items-center text-center select-text max-w-2xl">
          <div className="flex items-center gap-3 mb-3">
            <span className="text-[#bc9e65] text-xs">❧</span>
            <span className="font-sans text-[10px] sm:text-[11px] tracking-[0.35em] text-[#bc9e65] font-extrabold uppercase">
              OUR CULINARY CATEGORIES
            </span>
            <span className="text-[#bc9e65] text-xs">❧</span>
          </div>

          <h2 className="font-serif text-3xl sm:text-4xl lg:text-[46px] font-bold text-white tracking-wider leading-tight mb-4 uppercase">
            A World of Flavors,<br />
            <span className="text-[#bc9e65]">Rooted in Tradition</span>
          </h2>

          {/* Traditional Separator */}
          <div className="flex items-center gap-3 w-40 my-3 pointer-events-none select-none justify-center">
            <div className="h-[1.2px] flex-1 bg-gradient-to-r from-transparent to-[#bc9e65]" />
            <svg className="w-5 h-4 text-[#bc9e65]" viewBox="0 0 30 20" fill="currentColor">
              <path d="M 15,3 C 13,8 14,14 15,16 C 16,14 17,8 15,3 Z" />
            </svg>
            <div className="h-[1.2px] flex-1 bg-gradient-to-l from-transparent to-[#bc9e65]" />
          </div>

          <p className="font-sans text-xs sm:text-[13px] text-stone-300 leading-relaxed tracking-wider mt-2">
            From timeless South Indian classics to exclusive chef&apos;s creations, explore our diverse culinary experiences crafted for every occasion.
          </p>
        </div>

        {/* Categories Grid Container */}
        <div className="w-full flex flex-col gap-6">
          
          {/* Row 1 Grid: 5 columns on desktop */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 w-full">
            {ROW1_CATEGORIES.map((cat) => {
              const Icon = cat.icon;
              if (cat.isDouble) {
                // Double Card: Traditional Thali
                return (
                  <motion.div
                    key={cat.id}
                    initial={{ opacity: 0, y: 30 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true }}
                    transition={{ duration: 0.6 }}
                    className="col-span-1 md:col-span-2 lg:col-span-2 relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-6 pt-8 rounded-none shadow-2xl flex flex-col sm:flex-row items-center gap-6 group overflow-visible min-h-[220px]"
                  >
                    {/* Inner gold design outline and corner leaves */}
                    <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none" />
                    <CornerOrnaments />

                    {/* Gold Category Badge at top center of card with interactive outer ring */}
                    <div className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-[#06120c] border border-[#bc9e65]/60 flex items-center justify-center shadow-lg z-20 select-none">
                      {/* Rotating Outer Dashed Mandala Ring on Hover */}
                      <div className="absolute w-11 h-11 rounded-full border border-dashed border-[#bc9e65]/35 group-hover:rotate-[45deg] transition-transform duration-1000 z-10 pointer-events-none" />
                      <Icon />
                    </div>

                    {/* Radial Glow Overlay on Hover */}
                    <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,_rgba(188,158,101,0.08)_0%,_transparent_75%)] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none z-0" />

                    {/* Left: circular thali image with slow rotating mandala border */}
                    <div className="relative w-36 h-36 sm:w-40 sm:h-40 flex-shrink-0 z-10">
                      {/* Spin ring behind thali */}
                      <div className="absolute inset-[-6px] border border-dashed border-[#bc9e65]/25 rounded-full animate-[spin_60s_linear_infinite]" />
                      
                      <div className="w-full h-full rounded-full border-2 border-[#bc9e65]/40 p-1 bg-[#06120c] overflow-hidden shadow-xl relative">
                        <div className="w-full h-full rounded-full overflow-hidden relative">
                          <Image
                            src={cat.image}
                            alt={cat.title}
                            fill
                            sizes="180px"
                            className="object-cover group-hover:scale-105 transition-transform duration-[1.5s]"
                          />
                        </div>
                      </div>
                    </div>

                    {/* Right: details */}
                    <div className="flex flex-col text-center sm:text-left items-center sm:items-start flex-1 select-text relative z-10">
                      <span className="font-sans text-[9px] tracking-[0.25em] text-[#bc9e65] font-extrabold uppercase mb-1">
                        {cat.subtitle}
                      </span>
                      <h3 className="font-serif text-lg lg:text-xl font-bold text-white tracking-wider uppercase mb-2">
                        {cat.title}
                      </h3>
                      {/* Divider */}
                      <div className="h-[1px] w-16 bg-[#bc9e65]/40 mb-3" />
                      <p className="font-sans text-stone-300 text-[11px] lg:text-xs leading-relaxed tracking-wider mb-4 max-w-[240px]">
                        {cat.desc}
                      </p>
                      
                      <a
                        href="#menu"
                        className="clickable inline-flex items-center gap-2 font-sans font-bold text-[9px] tracking-[0.2em] text-[#bc9e65] uppercase hover:text-white transition-colors duration-300"
                      >
                        EXPLORE MENU <span className="text-xs group-hover:translate-x-1 transition-transform duration-300">→</span>
                      </a>
                    </div>
                  </motion.div>
                );
              }

              // Standard portrait cards in Row 1 (Arched pointed gothic frames)
              return (
                <motion.div
                  key={cat.id}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6 }}
                  className="col-span-1 lg:col-span-1 relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-5 pt-9 rounded-none shadow-2xl flex flex-col items-center text-center group overflow-visible"
                >
                  {/* Inner gold design outline and corner leaves */}
                  <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none" />
                  <CornerOrnaments />

                  {/* Gold Category Badge with rotating outer dashed border */}
                  <div className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-[#06120c] border border-[#bc9e65]/60 flex items-center justify-center shadow-lg z-20 select-none">
                    <div className="absolute w-11 h-11 rounded-full border border-dashed border-[#bc9e65]/35 group-hover:rotate-[45deg] transition-transform duration-1000 z-10 pointer-events-none" />
                    <Icon />
                  </div>

                  {/* Radial Hover Glow */}
                  <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_40%,_rgba(188,158,101,0.07)_0%,_transparent_70%)] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none z-0" />

                  {/* Arched Gothic pointed dome Food Image container */}
                  <div className="relative w-full aspect-[4/3.8] border border-[#bc9e65]/30 overflow-hidden mb-4 bg-[#06120c] shadow-md z-10"
                    style={{
                      clipPath: "polygon(50% 0%, 100% 28%, 100% 100%, 0% 100%, 0% 28%)"
                    }}
                  >
                    <Image
                      src={cat.image}
                      alt={cat.title}
                      fill
                      sizes="(max-width: 768px) 100vw, 20vw"
                      className="object-cover group-hover:scale-105 transition-transform duration-[1.5s] brightness-[0.9]"
                    />
                  </div>

                  <h3 className="font-serif text-[13px] lg:text-[14px] font-bold text-white tracking-wider uppercase mb-2 relative z-10">
                    {cat.title}
                  </h3>
                  <p className="font-sans text-stone-300 text-[10.5px] leading-relaxed tracking-wider mb-5 max-w-[170px] flex-1 relative z-10">
                    {cat.desc}
                  </p>

                  {/* Circular Explore button with slide transition */}
                  <a
                    href="#menu"
                    className="clickable w-7 h-7 rounded-full border border-[#bc9e65]/40 hover:border-[#bc9e65] flex items-center justify-center text-[#bc9e65] hover:bg-gradient-to-br hover:from-[#d8c396] hover:to-[#aa771c] hover:text-[#06120c] transition-all duration-300 shadow-md transform group-hover:scale-105 z-10"
                    aria-label={`Explore ${cat.title}`}
                  >
                    <span className="text-xs leading-none group-hover:translate-x-0.5 transition-transform duration-300">→</span>
                  </a>
                </motion.div>
              );
            })}
          </div>

          {/* Row 2 Grid: 6 columns on desktop */}
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 w-full mt-2">
            {ROW2_CATEGORIES.map((cat) => {
              const Icon = cat.icon;
              return (
                <motion.div
                  key={cat.id}
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.6 }}
                  className="col-span-1 relative bg-gradient-to-br from-[#0c2419]/90 via-[#06120c]/95 to-[#040b07]/98 border border-[#bc9e65]/40 p-4 pt-8 rounded-none shadow-2xl flex flex-col items-center text-center group overflow-visible"
                >
                  {/* Inner gold design outline and corner leaves */}
                  <div className="absolute inset-1.5 border border-[#bc9e65]/20 pointer-events-none" />
                  <CornerOrnaments />

                  {/* Gold Category Badge with rotating outer dashed border */}
                  <div className="absolute -top-4 left-1/2 -translate-x-1/2 w-8 h-8 rounded-full bg-[#06120c] border border-[#bc9e65]/60 flex items-center justify-center shadow-lg z-20 select-none">
                    <div className="absolute w-11 h-11 rounded-full border border-dashed border-[#bc9e65]/35 group-hover:rotate-[45deg] transition-transform duration-1000 z-10 pointer-events-none" />
                    <Icon />
                  </div>

                  {/* Radial Hover Glow */}
                  <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_40%,_rgba(188,158,101,0.06)_0%,_transparent_70%)] opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none z-0" />

                  {/* Arched Gothic pointed dome Food Image */}
                  <div className="relative w-full aspect-[4/3.8] border border-[#bc9e65]/30 overflow-hidden mb-3 bg-[#06120c] shadow-md z-10"
                    style={{
                      clipPath: "polygon(50% 0%, 100% 28%, 100% 100%, 0% 100%, 0% 28%)"
                    }}
                  >
                    <Image
                      src={cat.image}
                      alt={cat.title}
                      fill
                      sizes="(max-width: 768px) 50vw, 15vw"
                      className="object-cover group-hover:scale-105 transition-transform duration-[1.5s] brightness-[0.9]"
                    />
                  </div>

                  <h3 className="font-serif text-[12px] font-bold text-white tracking-wider uppercase mb-1.5 relative z-10">
                    {cat.title}
                  </h3>
                  <p className="font-sans text-stone-300 text-[10px] leading-relaxed tracking-wider mb-4 max-w-[140px] flex-1 relative z-10">
                    {cat.desc}
                  </p>

                  {/* Circular Explore button */}
                  <a
                    href="#menu"
                    className="clickable w-6 h-6 rounded-full border border-[#bc9e65]/40 hover:border-[#bc9e65] flex items-center justify-center text-[#bc9e65] hover:bg-gradient-to-br hover:from-[#d8c396] hover:to-[#aa771c] hover:text-[#06120c] transition-all duration-300 shadow-md transform group-hover:scale-105 z-10"
                    aria-label={`Explore ${cat.title}`}
                  >
                    <span className="text-[10px] leading-none group-hover:translate-x-0.5 transition-transform duration-300">→</span>
                  </a>
                </motion.div>
              );
            })}
          </div>

        </div>

        {/* Bottom Banner */}
        <div className="w-full bg-[#0a4a2b]/30 backdrop-blur-sm border border-[#bc9e65]/45 py-3.5 px-6 pointer-events-none select-none z-10 mt-4 rounded-none shadow-md">
          <div className="text-center">
            <span className="font-serif text-[8.5px] sm:text-[10.5px] tracking-[0.25em] text-[#bc9e65] font-semibold uppercase flex items-center justify-center gap-2">
              ❧ AUTHENTIC RECIPES • FINEST INGREDIENTS • TIME-HONORED TRADITIONS • MADE WITH LOVE ☙
            </span>
          </div>
        </div>

      </div>
    </section>
  );
}