"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: "dosa", label: "DOSA", active: true },
  { id: "idli", label: "IDLI" },
  { id: "vada", label: "VADA" },
  { id: "uttapam", label: "UTTAPAM" },
  { id: "tiffin", label: "TIFFIN" },
  { id: "rice", label: "RICE" },
  { id: "curry", label: "CURRY" },
  { id: "beverages", label: "BEVERAGES" }
];

const MENU_ITEMS = [
  {
    id: 1,
    name: "ONION RAVA DOSA",
    desc: "Crispy semolina crepe with onions, herbs & spices.",
    price: "$9.99",
    tag: "RAVA SPL",
    bg: "light",
  },
  {
    id: 2,
    name: "MASALA DOSA",
    desc: "Crispy thin rice & lentil crepe stuffed with potato masala.",
    price: "$8.99",
    tag: "CLASSIC",
    bg: "light",
  },
  {
    id: 3,
    name: "IDLI SAMBAR (2 PCS)",
    desc: "Steamed fluffy rice & lentil cakes with hot sambar.",
    price: "$6.49",
    tag: "TIFFIN SPL",
    bg: "green",
  },
  {
    id: 4,
    name: "ONION RAVA MASALA DOSA",
    desc: "Semolina crepe with onions and spiced potato filling.",
    price: "$9.49",
    tag: "RAVA SPL",
    bg: "light",
  },
  {
    id: 5,
    name: "MYSORE MASALA",
    desc: "Rice crepe spread with spicy chutney & potato masala.",
    price: "$9.49",
    tag: "CLASSIC",
    bg: "dark",
  },
  {
    id: 6,
    name: "MEDU VADA (2 PCS)",
    desc: "Deep fried crispy lentil donuts served with sambar & chutney.",
    price: "$6.49",
    tag: "TIFFIN SPL",
    bg: "light",
  },
  {
    id: 7,
    name: "PAPER ROAST DOSA",
    desc: "Extra large, paper-thin, crispy dosa served hot.",
    price: "$10.49",
    tag: "CLASSIC",
    bg: "light",
  },
  {
    id: 8,
    name: "RAVA MASALA DOSA",
    desc: "Crispy semolina crepe filled with spiced potato masala.",
    price: "$9.49",
    tag: "RAVA SPL",
    bg: "light",
  }
];

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

  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">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 items-center gap-2 overflow-x-auto pb-6 hide-scrollbar justify-start md:justify-center items-end">
          {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">
          {MENU_ITEMS.map((item, index) => (
            <AnimatedSection key={item.id} variant="fadeUp" delay={index * 0.08}>
            <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]"
            >
              {/* 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">

                <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 min-h-[32px] leading-relaxed text-stone-500 group-hover:text-stone-300 transition-colors duration-500">
                  {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>
  );
}
