"use client";

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

export default function MenuPreview() {
  const leftColumnItems = [
    {
      name: "ONION RAVA DOSA",
      desc: "Crispy semolina crepe with onions, herbs & spices.",
      tag: "RAVA SPL",
      tagType: "green"
    },
    {
      name: "IDLI SAMBAR (2 PCS)",
      desc: "Steamed fluffy rice & lentil cakes with hot sambar.",
      tag: "TIFFIN SPL",
      tagType: "gold"
    },
    {
      name: "MYSORE MASALA DOSA",
      desc: "Rice crepe spread with spicy chutney & potato masala.",
      tag: "CLASSIC",
      tagType: "orange"
    },
    {
      name: "RAVA MASALA DOSA",
      desc: "Crispy semolina crepe filled with spiced potato masala.",
      tag: "RAVA SPL",
      tagType: "green"
    },
    {
      name: "PURI BHAJI (3 PCS)",
      desc: "Golden fluffy deep-fried puris with flavorful potato bhaji.",
      tag: "TIFFIN SPL",
      tagType: "gold"
    }
  ];

  const rightColumnItems = [
    {
      name: "MASALA DOSA",
      desc: "Crispy thin rice & lentil crepe stuffed with potato masala.",
      tag: "CLASSIC",
      tagType: "orange"
    },
    {
      name: "ONION RAVA MASALA DOSA",
      desc: "Semolina crepe with onions and spiced potato filling.",
      tag: "RAVA SPL",
      tagType: "green"
    },
    {
      name: "MEDU VADA (2 PCS)",
      desc: "Deep fried crispy lentil donuts served with sambar & chutney.",
      tag: "TIFFIN SPL",
      tagType: "gold"
    },
    {
      name: "PAPER ROAST DOSA",
      desc: "Extra large, paper-thin, crispy dosa served hot.",
      tag: "CLASSIC",
      tagType: "orange"
    },
    {
      name: "RAVA PLAIN DOSA",
      desc: "Crispy semolina crepe served with chutney & sambar.",
      tag: "RAVA SPL",
      tagType: "green"
    }
  ];

  const containerVariants = {
    hidden: { opacity: 0 },
    show: {
      opacity: 1,
      transition: {
        staggerChildren: 0.12
      }
    }
  } as const;

  const itemVariants = {
    hidden: { opacity: 0, y: 15 },
    show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }
  } as const;

  return (
    <section className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden bg-[#f6f3ea] border-b border-[#d8c396]/20">
      
      {/* Background Gopuram sketch (Left) */}
      <motion.div
        initial={{ opacity: 0, x: -60, scale: 0.95 }}
        whileInView={{ opacity: 0.15, x: 0, scale: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 1.8, ease: "easeOut" }}
        className="absolute top-8 left-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-none mix-blend-multiply"
      >
        <Image
          src="/images/menu_gopuram_sketch.png"
          alt="Gopuram Sketch"
          fill
          priority
          sizes="(max-width: 768px) 30vw, 20vw"
          className="object-contain filter grayscale"
        />
      </motion.div>

      {/* Background Palace sketch (Right) */}
      <motion.div
        initial={{ opacity: 0, x: 60, scale: 0.95 }}
        whileInView={{ opacity: 0.15, x: 0, scale: 1 }}
        viewport={{ once: true }}
        transition={{ duration: 1.8, ease: "easeOut" }}
        className="absolute top-8 right-4 w-[160px] h-[200px] md:w-[280px] md:h-[320px] pointer-events-none mix-blend-multiply"
      >
        <Image
          src="/images/menu_palace_sketch.png"
          alt="Palace Sketch"
          fill
          priority
          sizes="(max-width: 768px) 30vw, 20vw"
          className="object-contain filter grayscale"
        />
      </motion.div>

      <div className="container max-w-6xl mx-auto relative z-10">
        
        {/* Header Elements */}
        <div className="mb-20 flex flex-col items-center text-center">
          {/* Top traditional gold design element */}
          <div className="text-gold-dark text-xl mb-1 animate-pulse">⚜</div>
          <div className="w-16 h-[1px] bg-[#d8c396] mb-3" />
          
          <h2 className="font-serif text-4xl md:text-5xl font-black tracking-wider text-[#188754] uppercase text-glow">
            Our Menu
          </h2>
          
          {/* Double line with diamond ornament */}
          <div className="flex items-center gap-3 w-44 justify-center mt-3">
            <div className="h-[1px] flex-1 bg-gradient-to-r from-transparent to-[#d8c396]" />
            <span className="text-[#d8c396] text-[8px] animate-pulse">◆</span>
            <div className="h-[1px] flex-1 bg-gradient-to-l from-transparent to-[#d8c396]" />
          </div>

          <p className="font-sans text-[11px] sm:text-xs text-stone-600 max-w-lg mt-6 leading-relaxed tracking-wider italic font-medium">
            Explore a wide variety of authentic South Indian vegetarian dishes,<br className="hidden sm:inline" />
            crafted with traditional recipes and the finest ingredients.
          </p>
        </div>

        {/* 2-Column Menu Layout wrapper */}
        <div className="relative grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-2 px-2 md:px-6">
          
          {/* Vertical Dotted Separator in the center (Desktop only) */}
          <div className="hidden md:block absolute left-1/2 top-4 bottom-4 w-[1px] border-l border-dashed border-[#d8c396]/60 -translate-x-1/2" />

          {/* Left Column Items */}
          <motion.div
            variants={containerVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, margin: "-100px" }}
            className="flex flex-col gap-4"
          >
            {leftColumnItems.map((item, index) => (
              <motion.div
                key={index}
                variants={itemVariants}
                whileHover={{ x: 6 }}
                transition={{ duration: 0.3 }}
                className="group flex justify-between items-start py-4 border-b border-[#d8c396]/15 hover:border-[#188754]/30 transition-all duration-300 cursor-pointer"
              >
                <div className="flex-1 pr-4">
                  <div className="flex items-center">
                    {/* Double Dot Arrow Indicator */}
                    <span className="text-[#188754] font-serif font-bold text-xs tracking-tighter mr-2 transition-transform duration-300 group-hover:translate-x-1.5 inline-block">
                      ..&gt;
                    </span>
                    <h3 className="font-serif text-[14px] sm:text-[15px] font-black text-[#1e1412] tracking-wider group-hover:text-[#188754] transition-colors duration-300">
                      {item.name}
                    </h3>
                  </div>
                  <p className="font-sans text-[11px] sm:text-[12px] text-stone-600 leading-relaxed mt-1.5 pl-6 font-medium">
                    {item.desc}
                  </p>
                </div>

                {/* Status Badges on the right */}
                <div className="flex-shrink-0 pt-0.5">
                  <span className={`text-[9px] tracking-wider px-2.5 py-0.5 font-serif font-black uppercase rounded border transition-all duration-500 shadow-sm ${
                    item.tagType === "green" 
                      ? "bg-[#188754]/8 text-[#188754] border-[#188754]/25 group-hover:bg-[#188754]/12 group-hover:shadow-[#188754]/5"
                      : item.tagType === "gold"
                      ? "bg-[#d8c396]/10 text-[#bc9e65] border-[#d8c396]/35 group-hover:bg-[#d8c396]/15 group-hover:shadow-[#d8c396]/5"
                      : "bg-[#e07a5f]/8 text-[#e07a5f] border-[#e07a5f]/25 group-hover:bg-[#e07a5f]/12 group-hover:shadow-[#e07a5f]/5"
                  }`}>
                    {item.tag}
                  </span>
                </div>
              </motion.div>
            ))}
          </motion.div>

          {/* Right Column Items */}
          <motion.div
            variants={containerVariants}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, margin: "-100px" }}
            className="flex flex-col gap-4"
          >
            {rightColumnItems.map((item, index) => (
              <motion.div
                key={index}
                variants={itemVariants}
                whileHover={{ x: 6 }}
                transition={{ duration: 0.3 }}
                className="group flex justify-between items-start py-4 border-b border-[#d8c396]/15 hover:border-[#188754]/30 transition-all duration-300 cursor-pointer"
              >
                <div className="flex-1 pr-4">
                  <div className="flex items-center">
                    {/* Double Dot Arrow Indicator */}
                    <span className="text-[#188754] font-serif font-bold text-xs tracking-tighter mr-2 transition-transform duration-300 group-hover:translate-x-1.5 inline-block">
                      ..&gt;
                    </span>
                    <h3 className="font-serif text-[14px] sm:text-[15px] font-black text-[#1e1412] tracking-wider group-hover:text-[#188754] transition-colors duration-300">
                      {item.name}
                    </h3>
                  </div>
                  <p className="font-sans text-[11px] sm:text-[12px] text-stone-600 leading-relaxed mt-1.5 pl-6 font-medium">
                    {item.desc}
                  </p>
                </div>

                {/* Status Badges on the right */}
                <div className="flex-shrink-0 pt-0.5">
                  <span className={`text-[9px] tracking-wider px-2.5 py-0.5 font-serif font-black uppercase rounded border transition-all duration-500 shadow-sm ${
                    item.tagType === "green" 
                      ? "bg-[#188754]/8 text-[#188754] border-[#188754]/25 group-hover:bg-[#188754]/12 group-hover:shadow-[#188754]/5"
                      : item.tagType === "gold"
                      ? "bg-[#d8c396]/10 text-[#bc9e65] border-[#d8c396]/35 group-hover:bg-[#d8c396]/15 group-hover:shadow-[#d8c396]/5"
                      : "bg-[#e07a5f]/8 text-[#e07a5f] border-[#e07a5f]/25 group-hover:bg-[#e07a5f]/12 group-hover:shadow-[#e07a5f]/5"
                  }`}>
                    {item.tag}
                  </span>
                </div>
              </motion.div>
            ))}
          </motion.div>

        </div>

      </div>
    </section>
  );
}