"use client";

import { motion } from "framer-motion";
import Image from "next/image";
import { useState } from "react";
import AnimatedSection from "@/components/AnimatedSection";

const TABS = [
  { id: "all", label: "ALL ITEMS", noIcon: true },
  { id: "classics", label: "CLASSICS" },
  { id: "dosa", label: "DOSA" },
  { id: "rava", label: "RAVA SPL" },
  { id: "uttapam", label: "UTTAPAM" },
  { id: "breads", label: "BREADS" },
  { id: "appetizers", label: "APPETIZERS" },
  { id: "tiffin", label: "TIFFIN SPL" },
  { id: "rice", label: "RICE" },
  { id: "beverages", label: "BEVERAGES" },
  { id: "weekend", label: "WEEKEND SPL" },
  { id: "sides", label: "SIDES" },
  { id: "desserts", label: "DESSERTS" },
];

const MENU_ITEMS = [
  // ── CLASSICS ──────────────────────────────────────────────────────────
  { id: 1,  name: "IDLY (6 PCS)",         desc: "Steamed fluffy rice & lentil cakes served with sambar & chutneys.",       price: "$10.99", tag: "CLASSICS",   bg: "light" },
  { id: 2,  name: "THATTU IDLY (1 PC)",   desc: "Plate-style idly served with sambar & fresh chutneys.",                   price: "$10.99", tag: "CLASSICS",   bg: "light" },
  { id: 3,  name: "THATTU IDLY (2 PCS)",  desc: "Two plate-style idlies with sambar & fresh chutneys.",                    price: "$14.99", tag: "CLASSICS",   bg: "light" },
  { id: 4,  name: "GHEE PODI IDLY",       desc: "Soft idlies tossed in aromatic gunpowder podi with ghee.",                price: "$14.99", tag: "CLASSICS",   bg: "light" },
  { id: 5,  name: "MINI SAMBAR IDLY",     desc: "Bite-sized idlies immersed in rich, spiced sambar.",                      price: "$13.99", tag: "CLASSICS",   bg: "light" },
  { id: 6,  name: "SAMBAR IDLY",          desc: "Classic idly dunked in hot, tangy sambar.",                               price: "$9.99",  tag: "CLASSICS",   bg: "light" },
  { id: 7,  name: "MEDHU VADA",           desc: "Crispy golden lentil donuts served with sambar & chutney.",               price: "$13.99", tag: "CLASSICS",   bg: "light" },
  { id: 8,  name: "SAMBAR VADA",          desc: "Crispy vadas soaked in hearty sambar.",                                   price: "$13.99", tag: "CLASSICS",   bg: "light" },
  { id: 9,  name: "DAHI VADA",            desc: "Soft vadas topped with creamy yogurt & spiced chutneys.",                 price: "$13.99", tag: "CLASSICS",   bg: "light" },
  { id: 10, name: "1 IDLY 1 VADA COMBO",  desc: "One fluffy idly and one crispy vada with sambar & chutney.",              price: "$11.99", tag: "CLASSICS",   bg: "green" },
  { id: 11, name: "2 IDLY 1 VADA COMBO",  desc: "Two soft idlies and one crispy vada with sambar & chutney.",              price: "$12.99", tag: "CLASSICS",   bg: "green" },
  { id: 12, name: "1 IDLY 2 VADA COMBO",  desc: "One fluffy idly and two crispy vadas with sambar & chutney.",             price: "$13.99", tag: "CLASSICS",   bg: "green" },
  { id: 13, name: "RASA VADA",            desc: "Crispy vadas soaked in tangy, peppery rasam.",                            price: "$13.99", tag: "CLASSICS",   bg: "light" },
  { id: 14, name: "PARUPPU VADA",         desc: "Crispy deep-fried lentil patties seasoned with spices.",                  price: "$11.99", tag: "CLASSICS",   bg: "light" },

  // ── DOSA ──────────────────────────────────────────────────────────────
  { id: 20, name: "PLAIN DOSA",           desc: "Thin, crispy fermented rice & lentil crepe served with chutneys.",       price: "$10.99", tag: "DOSA",       bg: "light" },
  { id: 21, name: "MASALA DOSA",          desc: "Crispy dosa stuffed with spiced potato masala.",                         price: "$13.99", tag: "DOSA",       bg: "light" },
  { id: 22, name: "MYSORE DOSA",          desc: "Crispy dosa spread with fiery Mysore chutney.",                          price: "$13.99", tag: "DOSA",       bg: "light" },
  { id: 23, name: "MYSORE MASALA",        desc: "Spicy Mysore chutney spread dosa with potato masala filling.",           price: "$14.99", tag: "DOSA",       bg: "dark"  },
  { id: 24, name: "GHEE ROAST",           desc: "Dosa cooked in rich ghee till golden & irresistibly crisp.",             price: "$14.99", tag: "DOSA",       bg: "light" },
  { id: 25, name: "GHEE MASALA",          desc: "Ghee-roasted dosa generously filled with potato masala.",               price: "$15.99", tag: "DOSA",       bg: "light" },
  { id: 26, name: "ONION DOSA",           desc: "Classic dosa loaded with caramelised onions & spices.",                  price: "$13.99", tag: "DOSA",       bg: "light" },
  { id: 27, name: "ONION MASALA",         desc: "Onion dosa with a hearty spiced potato filling.",                        price: "$14.99", tag: "DOSA",       bg: "light" },
  { id: 28, name: "PODI MASALA",          desc: "Dosa smeared with spicy gunpowder podi & stuffed with masala.",          price: "$13.99", tag: "DOSA",       bg: "light" },
  { id: 29, name: "GHEE PODI MASALA",     desc: "Ghee-laced dosa with gunpowder podi and potato masala.",                price: "$15.99", tag: "DOSA",       bg: "light" },
  { id: 30, name: "GHEE PODI",            desc: "Dosa drizzled with ghee and fragrant gunpowder podi.",                   price: "$14.99", tag: "DOSA",       bg: "light" },
  { id: 31, name: "PAV BHAJI DOSA",       desc: "Crispy dosa topped with spiced Mumbai-style pav bhaji.",                 price: "$16.99", tag: "DOSA",       bg: "light" },
  { id: 32, name: "BUTTER MASALA",        desc: "Dosa slathered in butter with a spiced masala filling.",                 price: "$15.99", tag: "DOSA",       bg: "light" },
  { id: 33, name: "CHZ DOSA",             desc: "Dosa filled with gooey melted cheese & spices.",                         price: "$14.99", tag: "DOSA",       bg: "light" },
  { id: 34, name: "CHETTINAD MASALA",     desc: "Aromatic Chettinad spiced dosa with potato filling.",                    price: "$16.99", tag: "DOSA",       bg: "dark"  },
  { id: 35, name: "ANDHRA CHARA",         desc: "Fiery Andhra-style spiced dosa, bold & robust.",                         price: "$15.99", tag: "DOSA",       bg: "light" },
  { id: 36, name: "ANDHRA KARA MASALA",   desc: "Spicy Andhra kara chutney dosa with masala filling.",                    price: "$16.99", tag: "DOSA",       bg: "light" },
  { id: 37, name: "KARA DOSA",            desc: "Dosa with spicy kara chutney spread.",                                   price: "$13.99", tag: "DOSA",       bg: "light" },
  { id: 38, name: "BUTTER GARLIC",        desc: "Dosa cooked with butter and roasted garlic.",                             price: "$14.99", tag: "DOSA",       bg: "light" },
  { id: 39, name: "BUTTER GARLIC MASALA", desc: "Butter garlic dosa filled with spiced potato masala.",                   price: "$15.99", tag: "DOSA",       bg: "light" },
  { id: 40, name: "PANEER BUTTER (BURJI)", desc: "Dosa with crumbled paneer cooked in butter & spices.",                  price: "$17.99", tag: "DOSA",       bg: "dark"  },
  { id: 41, name: "BUTTER DOSA",          desc: "Simple crispy dosa lavishly spread with fresh butter.",                  price: "$13.99", tag: "DOSA",       bg: "light" },
  { id: 42, name: "KIDS DOSA",            desc: "A small, soft & mild dosa perfect for little ones.",                     price: "$9.99",  tag: "DOSA",       bg: "light" },

  // ── RAVA SPL ──────────────────────────────────────────────────────────
  { id: 50, name: "RAVA DOSA",            desc: "Thin, lacy & crispy semolina crepe served with chutneys.",               price: "$13.99", tag: "RAVA SPL",   bg: "light" },
  { id: 51, name: "RAVA MASALA",          desc: "Crispy rava dosa filled with spiced potato masala.",                     price: "$14.99", tag: "RAVA SPL",   bg: "light" },
  { id: 52, name: "ONION RAVA",           desc: "Lacy semolina crepe loaded with onions & herbs.",                        price: "$15.99", tag: "RAVA SPL",   bg: "light" },
  { id: 53, name: "ONION RAVA MASALA",    desc: "Onion rava dosa generously stuffed with potato masala.",                 price: "$16.99", tag: "RAVA SPL",   bg: "light" },

  // ── UTTAPAM ───────────────────────────────────────────────────────────
  { id: 60, name: "PLAIN UTTAPAM",        desc: "Thick, soft rice pancake served with sambar & chutneys.",                price: "$10.99", tag: "UTTAPAM",    bg: "light" },
  { id: 61, name: "ONION UTTAPAM",        desc: "Fluffy uttapam generously topped with fresh onions.",                    price: "$12.99", tag: "UTTAPAM",    bg: "light" },
  { id: 62, name: "GHEE PODI UTTAPAM",    desc: "Uttapam drizzled with ghee & aromatic gunpowder podi.",                  price: "$14.99", tag: "UTTAPAM",    bg: "light" },
  { id: 63, name: "MIX VEG UTTAPAM",      desc: "Uttapam loaded with a colourful medley of fresh vegetables.",            price: "$16.99", tag: "UTTAPAM",    bg: "green" },
  { id: 64, name: "ONION TOMATO UTTAPAM", desc: "Classic uttapam with onion and ripe tomato topping.",                    price: "$13.99", tag: "UTTAPAM",    bg: "light" },
  { id: 65, name: "ONION CHILLI UTTAPAM", desc: "Spiced uttapam topped with onions and green chillies.",                  price: "$13.99", tag: "UTTAPAM",    bg: "light" },

  // ── BREADS ────────────────────────────────────────────────────────────
  { id: 70, name: "CHAPPATHI KADALA",     desc: "Soft wheat flatbread served with spiced black chickpea curry.",          price: "$13.99", tag: "BREADS",     bg: "light" },
  { id: 71, name: "PAROTTA KADALA",       desc: "Flaky layered parotta paired with rich kadala curry.",                    price: "$14.99", tag: "BREADS",     bg: "light" },
  { id: 72, name: "POORI MASALA",         desc: "Deep-fried fluffy poori served with spiced potato masala.",              price: "$13.99", tag: "BREADS",     bg: "light" },

  // ── APPETIZERS ────────────────────────────────────────────────────────
  { id: 80, name: "GOBI 65",              desc: "Crispy spiced fried cauliflower in a tangy South Indian style.",          price: "$14.99", tag: "APPETIZERS", bg: "light" },
  { id: 81, name: "PANEER 65",            desc: "Crispy marinated paneer cubes fried with aromatic spices.",               price: "$15.99", tag: "APPETIZERS", bg: "light" },
  { id: 82, name: "CHILLI PAROTTA",       desc: "Shredded flaky parotta stir-fried with peppers & spicy sauces.",         price: "$14.99", tag: "APPETIZERS", bg: "light" },
  { id: 83, name: "KOTHU PAROTTA",        desc: "Finely chopped parotta tossed with veggies, eggs & spices.",             price: "$14.99", tag: "APPETIZERS", bg: "light" },
  { id: 84, name: "CHILLI GOBI",          desc: "Crispy cauliflower tossed in spicy Indo-Chinese chilli sauce.",           price: "$15.99", tag: "APPETIZERS", bg: "dark"  },
  { id: 85, name: "CHILLI PANEER",        desc: "Crispy paneer cubes tossed in bold Indo-Chinese chilli sauce.",           price: "$16.99", tag: "APPETIZERS", bg: "dark"  },
  { id: 86, name: "CAULIFLOWER MANCHURIAN",desc: "Crispy gobi florets in a savory, tangy Manchurian sauce.",              price: "$15.99", tag: "APPETIZERS", bg: "light" },
  { id: 87, name: "CHILLI IDLY",          desc: "Crispy fried idly pieces tossed in spicy Indo-Chinese sauce.",           price: "$13.99", tag: "APPETIZERS", bg: "light" },
  { id: 88, name: "ONION PAKODA",         desc: "Crunchy golden fritters made with onions, gram flour & spices.",         price: "$12.99", tag: "APPETIZERS", bg: "light" },

  // ── TIFFIN SPL ────────────────────────────────────────────────────────
  { id: 90, name: "GHEE PONGAL",          desc: "Comforting rice & lentil porridge cooked with ghee, ginger & pepper.",   price: "$12.99", tag: "TIFFIN SPL", bg: "light" },
  { id: 91, name: "RAVA KICHADI",         desc: "Savoury semolina upma cooked with vegetables & spices.",                  price: "$12.99", tag: "TIFFIN SPL", bg: "light" },
  { id: 92, name: "MINI TIFFIN COMBO",    desc: "A delightful assortment of mini tiffin bites – perfect sampler.",        price: "$16.99", tag: "TIFFIN SPL", bg: "green" },
  { id: 93, name: "MEGA TIFFIN COMBO",    desc: "The ultimate tiffin feast with coffee & guava included.",                price: "$19.99", tag: "TIFFIN SPL", bg: "green" },

  // ── WEEKEND SPL ───────────────────────────────────────────────────────
  { id: 100, name: "THALI SOUTH INDIAN",  desc: "A royal platter of rice, curries, sides & dessert. Sat & Sun 12–3 PM.",  price: "$21.99", tag: "WEEKEND SPL",bg: "dark"  },
  { id: 101, name: "VEG FRIED RICE / NOODLES", desc: "Wok-tossed fried rice or noodles with fresh veggies & sauces.", price: "$15.99", tag: "WEEKEND SPL",bg: "light" },
  { id: 102, name: "CHENNA BHATURA",      desc: "Fluffy deep-fried bread with spiced chickpea (chenna) curry.",           price: "$15.99", tag: "WEEKEND SPL",bg: "light" },

  // ── RICE ──────────────────────────────────────────────────────────────
  { id: 110, name: "CURD RICE",           desc: "Cooling yogurt rice seasoned with mustard, ginger & curry leaves.",      price: "$11.99", tag: "RICE",       bg: "light" },
  { id: 111, name: "SAMBAR RICE",         desc: "Flavourful rice cooked with hearty sambar & vegetables.",                price: "$13.99", tag: "RICE",       bg: "light" },
  { id: 112, name: "PULIYODARAI",         desc: "Tangy tamarind rice tempered with spices & peanuts.",                    price: "$13.99", tag: "RICE",       bg: "light" },
  { id: 113, name: "VEG PULAO",           desc: "Fragrant basmati rice cooked with vegetables & whole spices.",           price: "$15.99", tag: "RICE",       bg: "green" },
  { id: 114, name: "LEMON RICE",          desc: "Zesty rice tossed with lemon juice, turmeric & mustard seeds.",          price: "$13.99", tag: "RICE",       bg: "light" },
  { id: 115, name: "TOMATO DAAL",         desc: "Comforting lentil curry simmered with ripe tomatoes & spices.",          price: "$14.99", tag: "RICE",       bg: "light" },

  // ── BEVERAGES ─────────────────────────────────────────────────────────
  { id: 120, name: "COLD BADAM MILK",     desc: "Chilled almond-infused milk sweetened with saffron & cardamom.",        price: "$9.99",  tag: "BEVERAGES",  bg: "light" },
  { id: 121, name: "MANGO LASSI",         desc: "Refreshing yogurt drink blended with sweet Alphonso mangoes.",           price: "$8.99",  tag: "BEVERAGES",  bg: "light" },
  { id: 122, name: "ROSE MILK",           desc: "Chilled milk flavoured with rose syrup – a South Indian classic.",      price: "$7.99",  tag: "BEVERAGES",  bg: "light" },
  { id: 123, name: "POP / WATER",         desc: "Chilled soft drink or still water.",                                     price: "$2.99",  tag: "BEVERAGES",  bg: "light" },
  { id: 124, name: "MASALA CHAI",         desc: "Aromatic spiced tea brewed with ginger, cardamom & milk.",              price: "$4.99",  tag: "BEVERAGES",  bg: "light" },
  { id: 125, name: "FILTER COFFEE",       desc: "Authentic South Indian decoction coffee with frothy milk.",              price: "$4.99",  tag: "BEVERAGES",  bg: "dark"  },

  // ── SIDES ─────────────────────────────────────────────────────────────
  { id: 130, name: "SAMBAR",              desc: "Traditional South Indian lentil and vegetable stew.",                     price: "$2.50",  tag: "SIDES",      bg: "light" },
  { id: 131, name: "PODI",                desc: "Spicy and aromatic gunpowder condiment.",                                price: "$1.99",  tag: "SIDES",      bg: "light" },
  { id: 132, name: "MASALA",              desc: "Flavourful spiced potato filling.",                                      price: "$2.50",  tag: "SIDES",      bg: "light" },
  { id: 133, name: "EXTRA",               desc: "Additional accompaniments for your meal.",                               price: "$1.99",  tag: "SIDES",      bg: "light" },

  // ── DESSERTS ──────────────────────────────────────────────────────────
  { id: 140, name: "GULAB JAMUN",         desc: "Soft milk dumplings immersed in rose-scented syrup.",                    price: "$5.99",  tag: "DESSERTS",   bg: "light" },
  { id: 141, name: "RASAMALAI",           desc: "Spongy cottage cheese discs soaked in sweetened milk.",                  price: "$5.99",  tag: "DESSERTS",   bg: "light" },
  { id: 142, name: "PINEAPPLE KESARI",    desc: "Sweet semolina pudding flavoured with pineapple chunks.",                price: "$6.99",  tag: "DESSERTS",   bg: "light" },
  { id: 143, name: "PAYASAM",             desc: "Traditional rich and creamy South Indian sweet pudding.",                price: "$7.99",  tag: "DESSERTS",   bg: "light" },
];

export default function MenuPageContent() {
  const [activeTab, setActiveTab] = useState("classics");

  // Map tab ids → item tag values
  const TAB_TAG_MAP: Record<string, string> = {
    classics:   "CLASSICS",
    dosa:       "DOSA",
    rava:       "RAVA SPL",
    uttapam:    "UTTAPAM",
    breads:     "BREADS",
    appetizers: "APPETIZERS",
    tiffin:     "TIFFIN SPL",
    rice:       "RICE",
    beverages:  "BEVERAGES",
    weekend:    "WEEKEND SPL",
    sides:      "SIDES",
    desserts:   "DESSERTS",
  };

  const filteredItems =
    activeTab === "all"
      ? MENU_ITEMS
      : MENU_ITEMS.filter((item) => item.tag === TAB_TAG_MAP[activeTab]);

  return (
    <div className="bg-[#faf7f2] font-sans pb-24 text-stone-800">
      {/* Header Section */}
      <div className="relative pt-24 px-6 flex flex-col items-center text-center overflow-hidden">
        {/* Background Sketch (using a subtle pattern or existing image if available, else CSS) */}
        <div className="absolute inset-0 opacity-10 pointer-events-none" style={{ backgroundImage: 'url("/images/home/menu/our-menu-bg.webp")', backgroundSize: 'cover', backgroundPosition: 'center top' }}></div>
      </div>

              {/* Section Title */}
        <div className="flex flex-col items-center mb-10">
          <div className="flex items-center gap-6">
            <span className="text-[#bc9e65]">❧</span>
            <h2 className="font-serif text-3xl font-bold text-[#0f3f26] uppercase tracking-widest">MY DOSA SPECIALTIES</h2>
            <span className="text-[#bc9e65] scale-x-[-1]">❧</span>
          </div>
          <div className="flex items-center gap-3 mt-3 text-sm font-semibold tracking-wide text-stone-600">
            <span className="w-8 h-[1px] bg-[#bc9e65]/60"></span>
            Crispy <span className="text-[#bc9e65] text-xs">●</span> Flavorful <span className="text-[#bc9e65] text-xs">●</span> Authentic
            <span className="w-8 h-[1px] bg-[#bc9e65]/60"></span>
          </div>
        </div>

      {/* Tabs */}
      <AnimatedSection variant="fadeUp" delay={0}>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-16 relative z-10">
        <div className="flex flex-wrap items-center gap-2 justify-center">
          {TABS.map((tab) => {
            const isActive = activeTab === tab.id;
            const isAllItems = tab.id === "all";

            if (isAllItems) {
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`relative flex items-center gap-3 px-6 rounded-[20px] whitespace-nowrap transition-all duration-300 font-serif font-bold text-xs uppercase tracking-wider
                    ${isActive
                      ? "bg-[#0a4a2b] text-white border-[3px] border-[#bc9e65] py-2.5 shadow-[0_4px_15px_rgba(188,158,101,0.3)] z-10"
                      : "bg-[#0a4a2b] text-white border-[3px] border-transparent py-2.5 hover:bg-[#073820]"
                    }`}
                >
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="3" y="3" width="7" height="7" rx="1.5" />
                    <rect x="14" y="3" width="7" height="7" rx="1.5" />
                    <rect x="14" y="14" width="7" height="7" rx="1.5" />
                    <rect x="3" y="14" width="7" height="7" rx="1.5" />
                  </svg>
                  {tab.label}
                  {isActive && (
                    <div className="absolute -bottom-[6px] left-1/2 -translate-x-1/2 w-2.5 h-2.5 bg-[#bc9e65] rotate-45 z-20"></div>
                  )}
                </button>
              );
            }

            return (
              <button
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                className={`relative flex items-center gap-3 px-2 whitespace-nowrap transition-all duration-300 font-serif font-bold text-[11px] uppercase tracking-wider rounded-[20px]
                  ${isActive
                    ? "bg-[#0a4a2b] text-white border-[3px] border-[#bc9e65] py-2 shadow-[0_4px_15px_rgba(188,158,101,0.3)] z-10"
                    : "bg-[#fdfcf9] text-[#0f3f26] border border-[#eaddc4] py-2.5 hover:bg-white hover:shadow-md"
                  }`}
              >
                <div className={`w-8 h-8 flex items-center justify-center rounded-full ${isActive ? 'opacity-100' : 'opacity-90'}`}>
                  <Image src="/images/menu/tab-icon.png" alt="" width={38} height={38} className="object-contain drop-shadow-sm" />
                </div>
                {tab.label}

                {/* Gold Diamond for Active Tab */}
                {isActive && (
                  <div className="absolute -bottom-[6px] left-1/2 -translate-x-1/2 w-2.5 h-2.5 bg-[#bc9e65] rotate-45 z-20"></div>
                )}
              </button>
            )
          })}
        </div>
      </div>
      </AnimatedSection>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">

        {/* Card Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          {filteredItems.map((item, index) => (
            <AnimatedSection key={item.id} variant="fadeUp" delay={index * 0.08} className="h-full">
            <div
              className="relative rounded-3xl overflow-hidden shadow-lg group transition-all duration-500 hover:-translate-y-1 hover:shadow-2xl border bg-white text-stone-800 border-stone-200 hover:bg-[#0a4a2b] hover:border-[#0a4a2b] flex flex-col h-full"
            >
              {/* Image Section */}
              <div className="relative h-30 w-full bg-[#111]">
                <Image
                  src="/images/menu/card-img.png"
                  alt={item.name}
                  fill
                  className="object-cover transition-transform duration-700 group-hover:scale-105"
                />
                {/* Curve Overlay */}
                <div className="absolute top-0 right-0 w-20 h-20 bg-transparent pointer-events-none">
                  <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg" className="absolute w-full h-full top-0 right-0 scale-x-[1] scale-y-[1] text-white group-hover:text-[#0a4a2b] transition-colors duration-500">
                    <path d="M100,0 V100 C100,44.77 55.23,0 0,0 H100 Z" fill="currentColor" />
                  </svg>
                </div>

                {/* Floating Icon */}
                <div className="absolute -bottom-6 left-6 w-14 h-14 rounded-full flex items-center justify-center shadow-lg border-3 z-10 bg-[#fdfcf9] border-[#eaddc4] group-hover:border-[#bc9e65] transition-colors duration-500">
                  <Image src="/images/menu/card-icon.png" alt="icon" width={38} height={38} className="object-contain" />
                </div>
              </div>

              {/* Content Section */}
              <div className="pt-10 pb-6 px-6 relative flex flex-col flex-grow">

                <h3 className="font-serif text-lg font-bold tracking-wider mb-2 pr-6 text-[#0f3f26] group-hover:text-white transition-colors duration-500">
                  {item.name}
                </h3>

                {/* Little Leaf / Accent */}
                <div className="absolute top-10 right-6 text-[#188754] group-hover:text-[#bc9e65] transition-colors duration-500">
                  🌿
                </div>

                <p className="text-[11px] font-sans mb-6 leading-relaxed text-stone-500 group-hover:text-stone-300 transition-colors duration-500 flex-grow">
                  {item.desc}
                </p>

                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    {/* <span className="font-serif text-lg font-bold text-[#0f3f26] group-hover:text-white transition-colors duration-500">
                      {item.price}
                    </span> */}
                    <span className={`text-[8px] font-bold uppercase tracking-wider px-2 py-1 rounded-full flex items-center gap-1 border transition-colors duration-500
                      ${item.tag.includes('RAVA') ? 'bg-[#e8f5e9] text-[#1b5e20] border-[#a5d6a7]/70 group-hover:bg-white/20 group-hover:text-white group-hover:border-white/30' :
                        item.tag.includes('CLASSIC') ? 'bg-[#fbe9e7] text-[#c62828] border-[#ffab91]/70 group-hover:bg-white/20 group-hover:text-white group-hover:border-white/30' :
                          'bg-[#fff8e1] text-[#b78103] border-[#ffe082]/70 group-hover:bg-white/20 group-hover:text-white group-hover:border-white/30'}`}
                    >
                      <span className="text-[10px] leading-none">
                        {item.tag.includes('RAVA') ? '✓' : item.tag.includes('CLASSIC') ? '●' : '★'}
                      </span>
                      {item.tag}
                    </span>
                  </div>

                  {/* <button className="w-6 h-6 rounded-full flex items-center justify-center font-bold text-sm transition-all hover:scale-110 bg-[#0f3f26] text-white group-hover:bg-[#bc9e65] group-hover:text-[#0a4a2b]">
                    +
                  </button> */}
                </div>
              </div>
            </div>
            </AnimatedSection>
          ))}
        </div>

      </div>
    </div>
  );
}
