"use client";

import { motion, useScroll, useTransform, AnimatePresence } from "framer-motion";
import { useRef, useState, useEffect } from "react";
import type { DemoData } from "@/data/demos";
import AnimatedCounter from "@/components/ui/AnimatedCounter";

const fadeUp = {
  hidden: { opacity: 0, y: 35 },
  show: { opacity: 1, y: 0, transition: { duration: 0.75, ease: [0.25, 0.46, 0.45, 0.94] as [number, number, number, number] } },
};

const stagger = {
  hidden: {},
  show: { transition: { staggerChildren: 0.1 } },
};

const translations = {
  tr: {
    navStory: "Hikayemiz",
    navMenu: "Makarna & Pizza",
    navOrchard: "Limon Bahçesi",
    navServices: "Hizmetlerimiz",
    navBook: "Rezervasyon",
    bookTable: "Masa Ayırt",
    discoverMenu: "Menüyü Keşfet",
    badge: "SİCİLYA ZANAATKAR MUTFAĞI",
    heroTitlePart1: "Keten, Limonlar",
    heroTitlePart2: "& Odun Ateşinde",
    heroDesc: "Karaköy limanında, Sicilya rüzgarları esiyor. El yapımı makarnalar, taze baharatlar ve odun ateşinde karamelize olan lezzetler.",
    storySubtitle: "Sicilya Fırıncılık Mirası",
    storyTitle: "Hikayemiz",
    storyDesc: "Odun ateşinin alevi ve zeytin ağacı közlerinin aroması. Sicilia Tavola, nesiller boyu aktarılan İtalyan tariflerini zanaatkar ellerle buluşturuyor. Her pizza taş fırınımızda 485 derecede saniyeler içinde mükemmelleşiyor.",
    menuSubtitle: "Taze Seçeneklerimiz",
    menuTitle: "Makarna & Pizza",
    lemonSubtitle: "Limon, Keten & Zeytinyağı",
    lemonTitle: "Limon Bahçesi",
    lemonDesc: "Bizim zeytinyağlarımız ve limonlarımız doğrudan Sicilya bahçelerimizden gelir. %100 soğuk sıkım, organik ve asit oranı sıfıra yakın. Her yemeğin can damarı.",
    lemonBadgeText: "ORGANİK NARENCİYE • SOĞUK SIKIM SIZMA ZEYTİNYAĞI •",
    lemonBottomText: "Siracusa'daki biyolojik tarım ortaklarımızdan elde edilen, elle toplanmış organik limonlar ve zeytinyağları kullanıyoruz.",
    servicesSubtitle: "Ayrıcalıklarımız",
    servicesTitle: "Hizmetlerimiz",
    testimonialsSubtitle: "Misafir Hikayeleri",
    testimonialsTitle: "Misafir Yorumları",
    bookingSubtitle: "Masa Rezervasyonu",
    bookingTitle: "Masa Rezervasyonu",
    bookingDesc: "Karaköy Trattoria'mızda unutulmaz bir akşam yemeği için yerinizi ayırtın.",
    formName: "Ad Soyad",
    formNamePlaceholder: "Adınız Soyadınız",
    formPhone: "Telefon",
    formPhonePlaceholder: "05xx xxx xx xx",
    formDate: "Tarih",
    formTime: "Saat",
    formGuests: "Kişi Sayısı",
    formNotes: "Özel Notlar",
    formNotesPlaceholder: "Diyet sınırlandırmaları veya özel kutlamalar...",
    formSubmit: "Masa Ayırt",
    footerDesc: "Siracusa bahçelerinden Karaköy limanına.",
    footerRights: "Tüm hakları saklıdır.",
    footerPrivacy: "Gizlilik Politikası · Çerez Ayarları",
    quickBookTitle: "Hızlı Rezervasyon",
    quickBookDesc: "Karaköy Trattoria Hattı",
    quickBookSubmit: "Rezervasyon Gönder",
    conceptBanner: "Bu web sitesi Ayris Tech tarafından hazırlanmış bir konsept çalışmasıdır."
  },
  en: {
    navStory: "Our Story",
    navMenu: "Pasta & Pizza",
    navOrchard: "Lemon Orchard",
    navServices: "Services",
    navBook: "Book Table",
    bookTable: "Book Table",
    discoverMenu: "Discover Menu",
    badge: "SICILIAN ARTISANAL KITCHEN",
    heroTitlePart1: "Linen, Lemons",
    heroTitlePart2: "& Wood-fired",
    heroDesc: "Sicilian winds blow over the Istanbul port. Hand-rolled pastas, fresh aromatic herbs, and rich flavors caramelized in our wood-fired stone oven.",
    storySubtitle: "Sicilian Baking Heritage",
    storyTitle: "Our Story",
    storyDesc: "The flicker of wood fire and the warm aroma of olive branch embers. Sicilia Tavola blends generations of authentic Italian culinary secrets with modern artisanal hands. Each pizza reaches crispy perfection inside our 485-degree stone oven in seconds.",
    menuSubtitle: "Our Fresh Selections",
    menuTitle: "Pasta & Pizza",
    lemonSubtitle: "Lemons, Linen & Olives",
    lemonTitle: "Lemon Orchard",
    lemonDesc: "Our signature olive oils and organic lemons are sourced directly from our private biological orchards in Sicily. 100% cold-pressed, completely natural, and low acidity. The soul of every dish.",
    lemonBadgeText: "ORGANIC CITRUS • COLD PRESSED EXTRA VIRGIN •",
    lemonBottomText: "We use only hand-picked organic lemons and olive oils sourced from biological farming partners in Siracusa.",
    servicesSubtitle: "Our Offerings",
    servicesTitle: "Our Services",
    testimonialsSubtitle: "Guest Stories",
    testimonialsTitle: "Guest Reviews",
    bookingSubtitle: "Tavola Reservation",
    bookingTitle: "Table Reservation",
    bookingDesc: "Book your exclusive slot for an unforgettable dining experience in our Karaköy Trattoria.",
    formName: "Name & Surname",
    formNamePlaceholder: "Your full name",
    formPhone: "Phone Number",
    formPhonePlaceholder: "Phone number",
    formDate: "Date",
    formTime: "Time",
    formGuests: "Guests",
    formNotes: "Special Notes",
    formNotesPlaceholder: "Dietary restrictions or special celebrations...",
    formSubmit: "Book Table Now",
    footerDesc: "From Siracusa orchards directly to Karaköy port.",
    footerRights: "All rights reserved.",
    footerPrivacy: "Privacy Policy · Cookie Settings",
    quickBookTitle: "Quick Reservation",
    quickBookDesc: "Karaköy Trattoria Dispatch Line",
    quickBookSubmit: "Submit Details",
    conceptBanner: "This website is a premium concept prototype designed by Ayris Tech."
  }
};

export default function RestoranTemplate2({ data }: { data: DemoData }) {
  const { firma, istatistikler, hizmetler, menu = [], yorumlar = [] } = data;
  const heroRef = useRef<HTMLDivElement>(null);
  
  const { scrollYProgress } = useScroll({ target: heroRef, offset: ["start start", "end start"] });
  const heroY = useTransform(scrollYProgress, [0, 1], ["0%", "20%"]);

  const [aktifKategori, setAktifKategori] = useState(0);
  const [showBookingModal, setShowBookingModal] = useState(false);
  const [lang, setLang] = useState<"tr" | "en">("tr");
  const [preloader, setPreloader] = useState(true);

  const t = translations[lang];

  // 1. Lenis Smooth Scroll Setup
  useEffect(() => {
    let lenis: any;
    import("@studio-freight/lenis").then(({ default: Lenis }) => {
      lenis = new Lenis({ duration: 1.2, easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) });
      function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
      requestAnimationFrame(raf);
    });
    return () => lenis?.destroy();
  }, []);

  // 2. Preloader curtain timer
  useEffect(() => {
    const timer = setTimeout(() => {
      setPreloader(false);
    }, 1500);
    return () => clearTimeout(timer);
  }, []);

  // Dynamic localization handlers
  const getLocalizedStat = (etiket: string) => {
    if (etiket.toLowerCase().includes("baking")) return lang === "tr" ? "Sicilya Fırıncılık Kökleri" : "Sicilian Baking Roots";
    if (etiket.toLowerCase().includes("pressed")) return lang === "tr" ? "Organik Soğuk Sıkım Yağ" : "Organic Cold Pressed Oil";
    if (etiket.toLowerCase().includes("gastronomy")) return lang === "tr" ? "Ortalama Gastronomi Puanı" : "Average Gastronomy Rating";
    return lang === "tr" ? "Yıllık Mutlu Misafir" : "Happy Diners Annually";
  };

  const getLocalizedService = (baslik: string, aciklama: string) => {
    if (baslik.toLowerCase().includes("carte")) {
      return {
        title: lang === "tr" ? "À la Carte Gastronomi" : "À la Carte Gastronomy",
        desc: lang === "tr" ? "Odun ateşinde pişen taze makarnalar, taze deniz mahsulleri ve Sicilya klasikleri." : "Wood-fired fresh pasta, coastal seafood selections, and authentic Sicilian classics."
      };
    }
    if (baslik.toLowerCase().includes("trattoria") || baslik.toLowerCase().includes("geceleri")) {
      return {
        title: lang === "tr" ? "Trattoria Geceleri" : "Trattoria Evenings",
        desc: lang === "tr" ? "Özel canlı akordeon dinletileri ve şefin tadım menüleri eşliğinde Sicilya akşamları." : "Accordion acoustic performances coupled with custom tasting menus for starry Sicilian nights."
      };
    }
    if (baslik.toLowerCase().includes("zeytinyağı") || baslik.toLowerCase().includes("oil")) {
      return {
        title: lang === "tr" ? "Zeytinyağı Tadımı" : "Olive Oil Tastings",
        desc: lang === "tr" ? "Kendi bahçelerimizden gelen %100 soğuk sıkım sızma zeytinyağlarımızı keşfedin." : "Discover 100% biological cold-pressed extra virgin olive oils directly from our Siracusa orchards."
      };
    }
    return {
      title: lang === "tr" ? "Tavola Evinizde" : "Tavola at Home",
      desc: lang === "tr" ? "Özel korumalı kuryelerimizle en taze gurme lezzetleri kapınıza getiriyoruz." : "Gourmet biological flavors safely packaged and dispatched directly to your doorstep."
    };
  };

  const getLocalizedMenuCategory = (kategori: string) => {
    if (kategori.toLowerCase().includes("primi")) return lang === "tr" ? "Primi Piatti (Başlangıç)" : "Primi Piatti";
    if (kategori.toLowerCase().includes("secondi")) return lang === "tr" ? "Secondi (Ana Yemek)" : "Secondi";
    return lang === "tr" ? "Dolci (Tatlı)" : "Dolci";
  };

  const getLocalizedMenuItem = (ad: string, aciklama: string) => {
    if (ad.toLowerCase().includes("caprese")) {
      return {
        ad: "Caprese di Burrata",
        desc: lang === "tr" ? "Manda burrata, pembe domates dilimleri, taze fesleğen ve sızma zeytinyağı" : "Buffalo burrata, heirloom tomato fillets, aromatic fresh basil, and cold-pressed olive oil"
      };
    }
    if (ad.toLowerCase().includes("carpaccio")) {
      return {
        ad: "Carpaccio di Polpo",
        desc: lang === "tr" ? "İnce dilimlenmiş marine ahtapot, kapari, bebek roka ve limon emülsiyonu" : "Wafer-thin octopus slices, wild capers, organic baby arugula, and lemon emulsion"
      };
    }
    if (ad.toLowerCase().includes("focaccia")) {
      return {
        ad: "Focaccia al Rosmarino",
        desc: lang === "tr" ? "Taş fırından yeni çıkmış deniz tuzu, taze biberiye ve sızma zeytinyağlı" : "Stone-oven fresh rosemary focaccia topped with coarse sea salt crystals and olive oil mist"
      };
    }
    if (ad.toLowerCase().includes("tagliatelle")) {
      return {
        ad: "Tagliatelle al Ragu di Polpo",
        desc: lang === "tr" ? "Ağır ateşte pişmiş ahtapot ragu, taze el yapımı tagliatelle" : "Slow-braised octopus ragout layered over fresh hand-rolled organic egg tagliatelle"
      };
    }
    if (ad.toLowerCase().includes("margherita")) {
      return {
        ad: "Pizza Margherita DOP",
        desc: lang === "tr" ? "Odun ateşinde taş fırın pizza, San Marzano domates, taze mozzarella di bufala" : "Authentic San Marzano tomato pulp, creamy mozzarella di bufala, and stone-oven charred crust"
      };
    }
    if (ad.toLowerCase().includes("polpo alla griglia")) {
      return {
        ad: "Polpo alla Griglia",
        desc: lang === "tr" ? "Izgara ahtapot kolları, kapari, cherry domates ve ezilmiş sarımsaklı bebek patates" : "Tender charred octopus arms paired with capers, blistered cherry tomatoes, and garlic fingerlings"
      };
    }
    if (ad.toLowerCase().includes("cannoli")) {
      return {
        ad: "Cannoli Siciliani",
        desc: lang === "tr" ? "Çıtır hamur tüpleri içinde tatlı ricotta kreması, çikolata parçacıkları ve Antep fıstığı" : "Crispy pastry tubes stuffed with sweet sheep's milk ricotta, dark chocolate curls, and Bronte pistachio"
      };
    }
    if (ad.toLowerCase().includes("tiramisu")) {
      return {
        ad: "Tiramisu al Limone",
        desc: lang === "tr" ? "Limon likörlü hafif mascarpone kreması, taze limon kabuğu rendesi ile" : "Light lemon-liqueur soaked ladyfingers covered in delicate lemon-mascarpone whipped cream"
      };
    }
    return {
      ad: "Gelato di Pistacchio",
      desc: lang === "tr" ? "Kendi imalatımız gerçek Bronte Antep fıstıklı İtalyan dondurması" : "House-churned organic Sicilian pistachio gelato made with 100% biological Bronte pistachios"
    };
  };

  const getLocalizedTestimonial = (yazar: string, yorum: string) => {
    if (yazar.toLowerCase().includes("ender")) {
      return lang === "tr" ? "Limon kokuları ve çalan müzikler eşliğinde kendimizi Sicilya'da hissettik. Ahtapot makarna tek kelimeyle kusursuzdu." : "We felt completely transported to Siracusa with the lemon breeze and acoustic accordion. The octopus pasta was sheer culinary perfection.";
    }
    return lang === "tr" ? "Focaccia ekmeği ve sızma zeytinyağının kalitesi buranın zanaatkarlığını kanıtlıyor. Mutlaka rezervasyon yaptırın." : "The sheer crumb of the rosemary focaccia paired with biological extra virgin olive oil speaks volumes. A must-visit Karaköy gem.";
  };

  const css = `
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

    :root {
      --color-cobalt: #0038A8;
      --color-cobalt-muted: rgba(0, 56, 168, 0.15);
      --color-linen: #FDFBF7;
      --color-linen-dark: #F5F2EB;
      --color-text-dark: #121C22;
      --color-leaf: #3C5A48;
    }

    .font-serif-sicilia {
      font-family: 'Playfair Display', Georgia, serif;
    }

    .font-sans-clean {
      font-family: 'Inter', sans-serif;
    }

    .spinning-lemon {
      animation: spin 20s linear infinite;
    }

    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }

    .dappled-sunlight {
      background-image: radial-gradient(circle at 80% 20%, rgba(253, 251, 247, 0.1) 0%, transparent 60%);
      opacity: 0.85;
      mix-blend-mode: multiply;
    }

    .hero-title-clamp {
      font-size: clamp(38px, 6.2vw, 92px);
      letter-spacing: -0.02em;
      line-height: 0.95;
    }
  `;

  const getIconSvg = (name: string) => {
    switch (name) {
      case "alacarte":
        return (
          <svg className="w-6 h-6 stroke-[#0038A8]" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25" />
          </svg>
        );
      case "special":
        return (
          <svg className="w-6 h-6 stroke-[#0038A8]" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z" />
          </svg>
        );
      case "catering":
        return (
          <svg className="w-6 h-6 stroke-[#0038A8]" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v18M3 12h18" />
          </svg>
        );
      case "delivery":
        return (
          <svg className="w-6 h-6 stroke-[#0038A8]" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0ZM19.5 18.75a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
            <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272" />
          </svg>
        );
      default:
        return (
          <svg className="w-6 h-6 stroke-[#0038A8]" viewBox="0 0 24 24" fill="none" strokeWidth="1.5">
            <path strokeLinecap="round" d="M12 21a9.004 9.004 0 0 0 8.716-6.747M12 21" />
          </svg>
        );
    }
  };

  return (
    <>
      <style>{css}</style>

      {/* ── IMZA AN: CURTAIN REVEAL PRELOADER ── */}
      <AnimatePresence>
        {preloader && (
          <motion.div 
            className="fixed inset-0 z-50 bg-[#002266] flex flex-col items-center justify-center p-6"
            exit={{ 
              clipPath: "polygon(0 0, 100% 0, 100% 0, 0 0)", 
              transition: { duration: 0.85, ease: [0.16, 1, 0.3, 1] } 
            }}
          >
            <div className="max-w-md text-center space-y-6">
              <motion.span 
                className="text-[9px] font-black tracking-[4px] uppercase text-white/90 block font-sans-clean"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
              >
                {firma.adi.toUpperCase()}
              </motion.span>
              <div className="h-[1px] w-48 bg-white/10 mx-auto relative overflow-hidden">
                <motion.div 
                  className="absolute inset-y-0 left-0 bg-white"
                  initial={{ width: "0%" }}
                  animate={{ width: "100%" }}
                  transition={{ duration: 1.2, ease: "easeInOut" }}
                />
              </div>
              <motion.h2 
                className="font-serif-sicilia text-[#FAF8F5] text-lg italic font-light tracking-wider"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.4, duration: 0.5 }}
              >
                interactive prototype
              </motion.h2>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      {/* ── MANDATORY FLOATING DEMO BANNER ── */}
      <div className="fixed bottom-4 left-4 z-40 bg-[#002266]/90 backdrop-blur-md border border-white/10 px-4 py-2.5 rounded-xl shadow-2xl flex items-center gap-2.5 max-w-sm pointer-events-none select-none">
        <div className="w-1.5 h-1.5 rounded-full bg-[#0038A8] animate-pulse" />
        <span className="text-[9px] font-black uppercase tracking-[1.5px] text-white/90 font-sans-clean">
          {t.conceptBanner}
        </span>
      </div>

      {/* ── SUN-DRENCHED OLIVE BRANCH LEAF OVERLAYS (WILMA & SICILIA INSPIRED) ── */}
      <div className="absolute inset-0 pointer-events-none z-20 overflow-hidden">
        {/* Top-Left Olive Branch SVG Overlay */}
        <div className="absolute top-[6%] -left-[4%] w-[320px] h-[320px] opacity-[0.15] lg:opacity-[0.22] rotate-[15deg]">
          <svg viewBox="0 0 200 200" fill="#3C5A48" xmlns="http://www.w3.org/2000/svg">
            <path d="M20,100 C60,80 120,80 180,100" stroke="#3C5A48" strokeWidth="2" fill="none" />
            <path d="M50,90 C45,70 65,60 80,75 C95,90 70,100 50,90 Z" />
            <path d="M90,92 C95,72 115,62 130,77 C145,92 120,102 90,92 Z" />
            <path d="M130,95 C135,75 155,65 170,80 C185,95 160,105 130,95 Z" />
            <path d="M60,108 C55,128 75,138 90,123 C105,108 80,98 60,108 Z" />
            <path d="M110,105 C105,125 125,135 140,120 C155,105 130,95 110,105 Z" />
          </svg>
        </div>
        {/* Mid-Right Olive Branch */}
        <div className="absolute top-[48%] -right-[3%] w-[360px] h-[360px] opacity-[0.15] lg:opacity-[0.22] -rotate-[45deg] scale-x-[-1]">
          <svg viewBox="0 0 200 200" fill="#3C5A48" xmlns="http://www.w3.org/2000/svg">
            <path d="M20,100 C60,80 120,80 180,100" stroke="#3C5A48" strokeWidth="2" fill="none" />
            <path d="M50,90 C45,70 65,60 80,75 Z" />
            <path d="M90,92 C95,72 115,62 130,77 Z" />
            <path d="M60,108 C55,128 75,138 90,123 Z" />
          </svg>
        </div>
      </div>

      {/* ── HEADER ── */}
      <motion.header
        className="fixed top-4 left-4 right-4 z-50 px-4"
        initial={{ y: -80, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{ duration: 0.7, ease: "easeOut" }}
      >
        <div className="mx-auto max-w-7xl h-20 flex items-center justify-between px-8 bg-[#FDFBF7]/90 backdrop-blur-xl border border-[#0038A8]/10 rounded-2xl shadow-lg">
          {/* Logo */}
          <a href="#" className="flex items-center gap-2">
            <span className="text-xl font-bold tracking-tight text-[#0038A8] font-serif-sicilia flex items-center gap-2.5 uppercase">
              <svg className="w-5 h-5 fill-[#0038A8]" viewBox="0 0 24 24">
                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 1.83-.62 3.52-1.66 4.93z" />
              </svg>
              {firma.adi}
            </span>
          </a>

          {/* Navigation Links */}
          <nav className="hidden lg:flex items-center gap-8">
            {[
              { label: t.navStory, href: "#story" },
              { label: t.navMenu, href: "#pasta-pizza" },
              { label: t.navOrchard, href: "#lemon" },
              { label: t.navServices, href: "#services" },
              { label: t.navBook, href: "#randevu" }
            ].map(item => (
              <a 
                key={item.label} 
                href={item.href}
                className="text-[11px] font-sans-clean font-bold tracking-[1.5px] uppercase text-[#0038A8]/70 hover:text-[#0038A8] transition-colors"
              >
                {item.label}
              </a>
            ))}
          </nav>

          {/* Action button & Lang selector */}
          <div className="flex items-center gap-4">
            {/* Language Switcher */}
            <div className="flex items-center gap-1 bg-[#0038A8]/5 border border-[#0038A8]/10 rounded-xl p-1 shrink-0">
              <button
                onClick={() => setLang("tr")}
                className={`text-[9px] font-black px-2.5 py-1.5 rounded-lg transition-all cursor-pointer font-sans-clean ${
                  lang === "tr" ? "bg-[#0038A8] text-white shadow-sm" : "text-[#0038A8]/60 hover:text-[#0038A8]"
                }`}
              >
                TR
              </button>
              <button
                onClick={() => setLang("en")}
                className={`text-[9px] font-black px-2.5 py-1.5 rounded-lg transition-all cursor-pointer font-sans-clean ${
                  lang === "en" ? "bg-[#0038A8] text-white shadow-sm" : "text-[#0038A8]/60 hover:text-[#0038A8]"
                }`}
              >
                EN
              </button>
            </div>

            <motion.button
              onClick={() => setShowBookingModal(true)}
              className="text-[11px] font-sans-clean font-black tracking-[2px] uppercase text-white bg-[#0038A8] hover:bg-[#002266] px-6 py-3.5 rounded-xl transition-all cursor-pointer shadow-md shadow-[#0038A8]/20 hidden sm:block"
              whileHover={{ scale: 1.03 }}
              whileTap={{ scale: 0.98 }}
            >
              {t.bookTable}
            </motion.button>
          </div>
        </div>
      </motion.header>

      {/* ── HERO SECTION ── */}
      <section ref={heroRef} className="relative min-h-screen flex items-center bg-[#FDFBF7] pt-24">
        
        {/* Parallax sun-drenched backdrop container */}
        <div className="absolute inset-0 pointer-events-none z-10 dappled-sunlight" />

        <div className="relative z-10 max-w-7xl mx-auto px-6 w-full py-12">
          <div className="grid lg:grid-cols-12 gap-12 items-center">
            
            {/* Left Content */}
            <motion.div 
              className="lg:col-span-6 z-20"
              variants={stagger}
              initial="hidden"
              animate="show"
            >
              <motion.div 
                variants={fadeUp}
                className="inline-flex items-center gap-2 text-[10px] font-sans-clean font-black uppercase tracking-widest text-[#0038A8]/60 mb-6 bg-[#0038A8]/5 border border-[#0038A8]/10 px-4 py-2 rounded-full"
              >
                <span className="w-1.5 h-1.5 rounded-full bg-[#0038A8]" />
                {t.badge}
              </motion.div>

              <motion.h1 
                variants={fadeUp}
                className="font-serif-sicilia font-black text-[#0038A8] mb-8 hero-title-clamp"
              >
                {t.heroTitlePart1}
                <br />
                <span className="italic font-light opacity-90 text-[#3C5A48]">{t.heroTitlePart2}</span>
              </motion.h1>

              <motion.p 
                variants={fadeUp}
                className="text-gray-600 font-sans-clean text-sm lg:text-base leading-relaxed max-w-md mb-12 font-medium"
              >
                {t.heroDesc}
              </motion.p>

              <motion.div variants={fadeUp}>
                <motion.a 
                  href="#pasta-pizza"
                  className="inline-flex items-center gap-3 px-8 py-4 rounded-full bg-[#0038A8] hover:bg-[#002266] text-white font-sans-clean font-black text-xs transition-all shadow-lg shadow-[#0038A8]/30 cursor-pointer"
                  whileHover={{ scale: 1.04 }}
                  whileTap={{ scale: 0.97 }}
                >
                  {t.discoverMenu} <span className="text-[10px]">→</span>
                </motion.a>
              </motion.div>
            </motion.div>

            {/* Right Content: Hand-crafted Sun-Drenched Image in offset frame */}
            <div className="lg:col-span-6 relative flex justify-center lg:justify-end">
              <motion.div 
                className="relative w-full max-w-md lg:max-w-lg h-[500px] lg:h-[600px] rounded-[36px] overflow-hidden shadow-2xl border-4 border-[#0038A8]/5 group"
                style={{ y: heroY }}
                initial={{ opacity: 0, scale: 0.95 }}
                animate={{ opacity: 1, scale: 1 }}
                transition={{ duration: 0.85, ease: "easeOut" }}
              >
                {/* Main Generated High-Fidelity Table Image */}
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img 
                  src="/sicilia_hero_table.png" 
                  alt="Sicilia Tavola Fresh Tomato Pasta" 
                  className="w-full h-full object-cover object-center scale-102 group-hover:scale-105 transition-transform duration-[4000ms]"
                />
              </motion.div>
            </div>

          </div>
        </div>
      </section>

      {/* ── SECTION 2: OUR STORY / WOOD OVEN (DOUBLE SPLIT) ── */}
      <section id="story" className="py-32 bg-[#F5F2EB] px-6 relative z-10 border-t border-[#0038A8]/5">
        <div className="max-w-7xl mx-auto">
          
          <div className="grid lg:grid-cols-12 gap-16 items-center">
            
            {/* Left Col: Stone Oven Photo */}
            <div className="lg:col-span-6 relative">
              <motion.div 
                className="relative rounded-[36px] overflow-hidden shadow-2xl border-2 border-white h-[450px] lg:h-[520px] group"
                initial={{ opacity: 0, x: -40 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.7 }}
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img 
                  src="/sicilia_wood_oven.png" 
                  alt="Trattoria Stone Wood-Fired Oven" 
                  className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-[4000ms]"
                />
              </motion.div>
            </div>

            {/* Right Col: Story detail and chalkboard metrics */}
            <motion.div 
              className="lg:col-span-6"
              initial="hidden"
              whileInView="show"
              viewport={{ once: true, amount: 0.2 }}
              variants={stagger}
            >
              <motion.span 
                variants={fadeUp}
                className="text-[#0038A8] font-serif-sicilia italic text-base tracking-wider block mb-4"
              >
                {t.storySubtitle}
              </motion.span>
              <motion.h2 
                variants={fadeUp}
                className="font-serif-sicilia text-4xl lg:text-5xl font-black tracking-tight text-[#0038A8] uppercase mb-8"
              >
                {t.storyTitle}
              </motion.h2>

              <motion.p 
                variants={fadeUp}
                className="text-gray-600 font-sans-clean text-xs leading-relaxed mb-12 max-w-md font-medium"
              >
                {t.storyDesc}
              </motion.p>

              {/* Grid Metrics - Chalkboard Styled */}
              <motion.div 
                variants={fadeUp}
                className="grid grid-cols-2 gap-4"
              >
                {istatistikler.slice(0, 2).map((s, i) => (
                  <div key={i} className="bg-white/60 backdrop-blur-md p-6 rounded-2xl border border-[#0038A8]/5">
                    <div className="text-3xl font-black text-[#0038A8] font-serif-sicilia">
                      {s.deger}
                    </div>
                    <div className="text-gray-400 text-[10px] uppercase font-sans-clean font-bold tracking-widest mt-1">
                      {getLocalizedStat(s.etiket)}
                    </div>
                  </div>
                ))}
              </motion.div>
            </motion.div>

          </div>

        </div>
      </section>

      {/* ── SECTION 3: PASTA & PIZZA MENU (EDITORIAL BLUE DOTTED connectors) ── */}
      <section id="pasta-pizza" className="py-32 bg-[#FDFBF7] relative z-10 px-6 border-t border-[#0038A8]/5">
        <div className="max-w-7xl mx-auto">
          
          <div className="grid lg:grid-cols-12 gap-16 items-center">
            
            {/* Left Col: Dotted Menu List */}
            <motion.div 
              className="lg:col-span-6 flex flex-col justify-center"
              initial="hidden"
              whileInView="show"
              viewport={{ once: true, amount: 0.2 }}
              variants={stagger}
            >
              <motion.span 
                variants={fadeUp}
                className="text-[#0038A8] font-serif-sicilia italic text-base tracking-wider block mb-4"
              >
                {t.menuSubtitle}
              </motion.span>
              <motion.h2 
                variants={fadeUp}
                className="font-serif-sicilia text-4xl lg:text-5xl font-black tracking-tight text-[#0038A8] uppercase mb-16"
              >
                {t.menuTitle}
              </motion.h2>

              <div className="space-y-6">
                {menu[aktifKategori]?.urunler.map((item) => {
                  const locItem = getLocalizedMenuItem(item.ad, item.aciklama);
                  return (
                    <motion.div 
                      key={item.ad}
                      variants={fadeUp}
                      className="flex flex-col cursor-pointer group"
                    >
                      <div className="flex items-end justify-between gap-4">
                        <span className="font-serif-sicilia text-base lg:text-lg font-bold text-[#0038A8] group-hover:opacity-80 transition-opacity uppercase">
                          {locItem.ad}
                        </span>
                        {/* Dotted lines connector */}
                        <div className="grow border-b border-dashed border-[#0038A8]/20 mb-2 transition-colors mx-2" />
                        <span className="font-serif-sicilia text-base font-black text-[#0038A8] shrink-0">
                          {item.fiyat}
                        </span>
                      </div>
                      <p className="text-gray-500 font-sans-clean text-[11px] mt-1 leading-relaxed max-w-sm">
                        {locItem.desc}
                      </p>
                    </motion.div>
                  );
                })}
              </div>

              {/* Category Tab Buttons below the menu */}
              <motion.div 
                variants={fadeUp}
                className="flex items-center gap-4 mt-16 flex-wrap"
              >
                {menu.map((kat, idx) => (
                  <button 
                    key={kat.kategori}
                    onClick={() => setAktifKategori(idx)}
                    className="text-[10px] font-sans-clean font-bold tracking-[1.5px] uppercase px-5 py-3 rounded-lg border transition-all cursor-pointer"
                    style={aktifKategori === idx 
                      ? { backgroundColor: "#0038A8", color: "white", borderColor: "#0038A8" }
                      : { backgroundColor: "transparent", color: "rgba(0, 56, 168, 0.6)", borderColor: "rgba(0, 56, 168, 0.2)" }
                    }
                  >
                    {getLocalizedMenuCategory(kat.kategori)}
                  </button>
                ))}
              </motion.div>
            </motion.div>

            {/* Right Col: Active Roasted Octopus Blue Plate image */}
            <div className="lg:col-span-6 relative flex justify-center lg:justify-end">
              <motion.div 
                className="relative w-full max-w-md lg:max-w-lg h-[500px] lg:h-[600px] rounded-[36px] overflow-hidden shadow-2xl border-4 border-white group"
                initial={{ opacity: 0, x: 50 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.85, ease: "easeOut" }}
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img 
                  src="/sicilia_octopus_plate.png" 
                  alt="Roasted Octopus blue plate" 
                  className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-[4000ms]"
                />
              </motion.div>
            </div>

          </div>

        </div>
      </section>

      {/* ── SECTION 4: LEMON ORCHARD STORY CARD (SICILIA LEMON & LINEN OVERLAYS) ── */}
      <section id="lemon" className="py-32 bg-[#F5F2EB] relative z-10 px-6 border-t border-[#0038A8]/5">
        <div className="max-w-7xl mx-auto">
          
          <div className="grid lg:grid-cols-12 gap-16 items-center">
            
            {/* Left Col: Lemon Flatlay Image */}
            <div className="lg:col-span-6 relative">
              <motion.div 
                className="relative rounded-[36px] overflow-hidden shadow-2xl border-2 border-white h-[450px] lg:h-[520px] group"
                initial={{ opacity: 0, x: -40 }}
                whileInView={{ opacity: 1, x: 0 }}
                viewport={{ once: true }}
                transition={{ duration: 0.7 }}
              >
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img 
                  src="/sicilia_lemon_heritage.png" 
                  alt="Organic lemons flatlay olive branches" 
                  className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-[4000ms]"
                />
              </motion.div>
            </div>

            {/* Right Col: Spinning lemon text badge and heritage content */}
            <motion.div 
              className="lg:col-span-6"
              initial="hidden"
              whileInView="show"
              viewport={{ once: true, amount: 0.2 }}
              variants={stagger}
            >
              <motion.span 
                variants={fadeUp}
                className="text-[#0038A8] font-serif-sicilia italic text-base tracking-wider block mb-4"
              >
                {t.lemonSubtitle}
              </motion.span>
              
              <motion.h2 
                variants={fadeUp}
                className="font-serif-sicilia text-4xl lg:text-5xl font-black tracking-tight text-[#0038A8] uppercase mb-8"
              >
                {t.lemonTitle}
              </motion.h2>

              <motion.p 
                variants={fadeUp}
                className="text-gray-600 font-sans-clean text-xs leading-relaxed mb-10 max-w-md font-medium"
              >
                {t.lemonDesc}
              </motion.p>

              {/* Spinning Seal badge */}
              <motion.div 
                variants={fadeUp}
                className="flex items-center gap-6"
              >
                <div className="relative w-24 h-24 shrink-0 flex items-center justify-center">
                  <svg className="absolute w-full h-full spinning-lemon" viewBox="0 0 100 100">
                    <path id="lemonPath" d="M 50, 50 m -37, 0 a 37,37 0 1,1 74,0 a 37,37 0 1,1 -74,0" fill="none" />
                    <text className="font-sans-clean font-black text-[8px] fill-[#0038A8] tracking-[1.5px]">
                      <textPath xlinkHref="#lemonPath">
                        {t.lemonBadgeText}
                      </textPath>
                    </text>
                  </svg>
                  <span className="text-xl text-[#0038A8] font-black">🍋</span>
                </div>
                <div className="text-xs font-bold text-gray-500 leading-relaxed max-w-xs">
                  {t.lemonBottomText}
                </div>
              </motion.div>
            </motion.div>

          </div>

        </div>
      </section>

      {/* ── SECTION 5: SERVICES (PURE SVGS - NO EMOJIS) ── */}
      <section id="services" className="py-24 bg-[#FDFBF7] border-t border-[#0038A8]/5 relative z-10 px-6">
        <div className="max-w-7xl mx-auto">
          
          <div className="text-center mb-16">
            <span className="text-[#0038A8] font-serif-sicilia italic text-base tracking-wider block mb-3">{t.servicesSubtitle}</span>
            <h2 className="font-serif-sicilia text-3xl lg:text-4xl font-black tracking-tight text-[#0038A8] uppercase">
              {t.servicesTitle}
            </h2>
          </div>

          <div className="grid md:grid-cols-4 gap-6">
            {hizmetler.map((h, i) => {
              const locServ = getLocalizedService(h.baslik, h.aciklama);
              return (
                <motion.div 
                  key={h.baslik}
                  className="bg-white rounded-2xl p-8 border border-[#0038A8]/5 hover:border-[#0038A8]/30 hover:bg-[#FDFBF7] transition-all duration-300 flex flex-col items-center text-center group cursor-default shadow-sm"
                  initial={{ opacity: 0, y: 20 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: i * 0.1 }}
                  whileHover={{ y: -4 }}
                >
                  <div className="w-14 h-14 rounded-full bg-[#0038A8]/5 flex items-center justify-center mb-5 transition-transform group-hover:scale-110">
                    {getIconSvg(h.ikon)}
                  </div>
                  <h3 className="font-serif-sicilia font-bold text-[#0038A8] text-sm mb-3 uppercase tracking-wider leading-snug">
                    {locServ.title}
                  </h3>
                  <p className="text-gray-400 font-sans-clean text-[10px] leading-relaxed">
                    {locServ.desc}
                  </p>
                </motion.div>
              );
            })}
          </div>

        </div>
      </section>

      {/* ── SECTION 6: TESTIMONIALS (YORUMLAR) ── */}
      <section id="yorumlar" className="py-28 bg-[#F5F2EB] border-t border-[#0038A8]/5 px-6">
        <div className="max-w-7xl mx-auto">
          
          <div className="text-center mb-16">
            <span className="text-[#0038A8] font-serif-sicilia italic text-base tracking-wider block mb-3">{t.testimonialsSubtitle}</span>
            <h2 className="font-serif-sicilia text-3xl lg:text-4xl font-black tracking-tight text-[#0038A8] uppercase">
              {t.testimonialsTitle}
            </h2>
          </div>

          <div className="grid md:grid-cols-2 gap-8">
            {yorumlar.map((y, i) => {
              const locComment = getLocalizedTestimonial(y.yazar, y.yorum);
              return (
                <motion.div 
                  key={y.yazar}
                  className="bg-white border border-[#0038A8]/5 rounded-[28px] p-8 flex flex-col justify-between shadow-sm"
                  initial={{ opacity: 0, y: 30 }}
                  whileInView={{ opacity: 1, y: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.5, delay: i * 0.1 }}
                  whileHover={{ y: -4, borderColor: "rgba(0, 56, 168, 0.3)" }}
                >
                  {/* SVG Golden Stars */}
                  <div className="flex gap-1 mb-6">
                    {[...Array(y.puan)].map((_, j) => (
                      <svg key={j} className="w-4 h-4 fill-[#0038A8] stroke-[#0038A8]" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.907c.969 0 1.371 1.24.588 1.81l-3.97 2.883a1 1 0 00-.364 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.971-2.883a1 1 0 00-1.18 0l-3.97 2.883c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.364-1.118L2.98 10.1c-.783-.57-.38-1.81.588-1.81h4.906a1 1 0 00.951-.69l1.519-4.674z" />
                      </svg>
                    ))}
                  </div>

                  <p className="text-gray-600 font-sans-clean text-xs leading-relaxed italic mb-8 font-medium">
                    &ldquo;{locComment}&rdquo;
                  </p>

                  <div className="flex items-center gap-3">
                    <div className="w-10 h-10 rounded-full border border-[#0038A8]/20 flex items-center justify-center text-xs bg-[#FDFBF7] shrink-0 select-none shadow-sm font-sans-clean font-bold text-[#0038A8]">
                      {y.yazar.charAt(0)}
                    </div>
                    <div>
                      <h4 className="font-serif-sicilia text-[#0038A8] text-xs font-bold uppercase tracking-wider">
                        {y.yazar}
                      </h4>
                      <span className="font-sans-clean text-[9px] text-gray-400 uppercase tracking-widest">
                        {y.tarih}
                      </span>
                    </div>
                  </div>
                </motion.div>
              );
            })}
          </div>

        </div>
      </section>

      {/* ── SECTION 7: RANDEVU AL / RESERVATION ── */}
      <section id="randevu" className="py-32 bg-[#FDFBF7] border-t border-[#0038A8]/5 relative z-10 px-6">
        <div className="max-w-3xl mx-auto">
          
          <div className="bg-white rounded-[36px] p-8 md:p-12 shadow-2xl border border-[#0038A8]/10">
            <div className="text-center mb-10">
              <span className="text-[#0038A8] font-serif-sicilia italic text-base tracking-wider block mb-3">{t.bookingSubtitle}</span>
              <h2 className="font-serif-sicilia text-3xl md:text-4xl font-black tracking-tight text-[#0038A8] uppercase">
                {t.bookingTitle}
              </h2>
              <p className="text-gray-400 font-sans-clean text-xs mt-2 leading-relaxed font-medium">
                {t.bookingDesc}
              </p>
            </div>

            <div className="grid grid-cols-2 gap-5">
              {[
                { label: t.formName, placeholder: t.formNamePlaceholder, type: "text", full: false },
                { label: t.formPhone, placeholder: t.formPhonePlaceholder, type: "tel", full: false },
                { label: t.formDate, placeholder: "", type: "date", full: false },
                { label: t.formTime, placeholder: "", type: "time", full: false },
                { label: t.formGuests, placeholder: "2", type: "number", full: false },
                { label: t.formNotes, placeholder: t.formNotesPlaceholder, type: "text", full: true },
              ].map((field, i) => (
                <div key={i} className={field.full ? "col-span-2" : "col-span-1"}>
                  <label className="block text-[9px] font-sans-clean font-bold text-[#0038A8] mb-1.5 uppercase tracking-widest">{field.label}</label>
                  <input 
                    type={field.type} 
                    placeholder={field.placeholder}
                    className="w-full px-4 py-3 rounded-xl border border-gray-200 bg-[#FDFBF7] text-sm text-[#121C22] focus:outline-none focus:ring-1 focus:ring-[#0038A8] placeholder-gray-300 transition-all font-sans-clean" 
                  />
                </div>
              ))}
            </div>

            <motion.button
              className="mt-8 w-full py-4 rounded-xl text-white font-sans-clean font-black tracking-[2px] uppercase bg-[#0038A8] hover:bg-[#002266] transition-colors cursor-pointer text-xs"
              whileHover={{ scale: 1.02, boxShadow: "0 10px 30px rgba(0, 56, 168, 0.25)" }}
              whileTap={{ scale: 0.98 }}
            >
              {t.formSubmit}
            </motion.button>
          </div>

        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer className="bg-[#002266] text-white border-t border-white/5 px-6 pt-20 pb-8 relative z-10">
        <div className="max-w-7xl mx-auto">
          
          <div className="grid md:grid-cols-4 gap-12 pb-16 border-b border-white/5">
            <div className="md:col-span-2">
              <span className="font-serif-sicilia text-2xl font-black text-white tracking-tight uppercase mb-4 block">
                {firma.adi}
              </span>
              <p className="text-white/60 font-sans-clean text-xs leading-relaxed max-w-xs mb-8">
                {firma.slogan} — {t.footerDesc}
              </p>
              <p className="text-white/70 font-sans-clean text-xs">📍 {firma.adres}</p>
              <p className="text-white/70 font-sans-clean text-xs mt-1">📞 {firma.telefon}</p>
            </div>
            
            <div>
              <h4 className="font-serif-sicilia text-white/80 text-xs font-bold uppercase tracking-wider mb-5">
                Primi &amp; Secondi
              </h4>
              {menu.map(kat => (
                <a 
                  key={kat.kategori} 
                  href="#pasta-pizza" 
                  className="block text-white/40 hover:text-white text-xs mb-2 transition-colors font-sans-clean uppercase tracking-wider"
                >
                  {getLocalizedMenuCategory(kat.kategori)}
                </a>
              ))}
            </div>

            <div>
              <h4 className="font-serif-sicilia text-white/80 text-xs font-bold uppercase tracking-wider mb-5">
                Sicilia
              </h4>
              {["Our Story", "Pizza & Pasta", "Lemon Orchard", "Reservation"].map(item => (
                <a 
                  key={item} 
                  href="#" 
                  className="block text-white/40 hover:text-white text-xs mb-2 transition-colors font-sans-clean"
                >
                  {item}
                </a>
              ))}
            </div>
          </div>

          <div className="flex flex-col md:flex-row justify-between items-center pt-8 gap-4 font-sans-clean text-white/40">
            <p className="text-xs">© 2026 {firma.adi}. {t.footerRights}</p>
            <p className="text-[10px]">{t.footerPrivacy}</p>
          </div>

        </div>
      </footer>

      {/* ── FAST BOOKING OVERLAY MODAL ── */}
      <AnimatePresence>
        {showBookingModal && (
          <motion.div 
            className="fixed inset-0 z-50 flex items-center justify-center p-6 bg-black/60 backdrop-blur-sm"
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            <motion.div 
              className="bg-white rounded-2xl p-8 max-w-md w-full relative shadow-2xl border border-[#0038A8]/20"
              initial={{ scale: 0.95, y: 20 }}
              animate={{ scale: 1, y: 0 }}
              exit={{ scale: 0.95, y: 20 }}
            >
              <button 
                className="absolute top-6 right-6 w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 hover:bg-gray-200 transition-colors cursor-pointer"
                onClick={() => setShowBookingModal(false)}
              >
                ✕
              </button>
              
              <h3 className="font-serif-sicilia font-black text-[#0038A8] text-xl mb-1 uppercase tracking-wider">
                {t.quickBookTitle}
              </h3>
              <p className="text-gray-400 font-sans-clean text-[10px] mb-6 uppercase tracking-widest font-semibold">
                {t.quickBookDesc}
              </p>
              
              <div className="space-y-4">
                <div>
                  <label className="block text-[9px] font-sans-clean font-bold text-[#0038A8] mb-1 uppercase tracking-wider">{t.formName}</label>
                  <input type="text" className="w-full px-4 py-3 rounded-xl border border-gray-200 bg-[#FDFBF7] text-sm focus:outline-none focus:ring-1 focus:ring-[#0038A8]" placeholder={t.formNamePlaceholder} />
                </div>
                <div>
                  <label className="block text-[9px] font-sans-clean font-bold text-[#0038A8] mb-1 uppercase tracking-wider">{t.formPhone}</label>
                  <input type="tel" className="w-full px-4 py-3 rounded-xl border border-gray-200 bg-[#FDFBF7] text-sm focus:outline-none focus:ring-1 focus:ring-[#0038A8]" placeholder={t.formPhonePlaceholder} />
                </div>
                <motion.button 
                  className="w-full py-4 rounded-xl bg-[#0038A8] text-white font-sans-clean font-black text-xs uppercase tracking-wider mt-4 cursor-pointer"
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                  onClick={() => setShowBookingModal(false)}
                >
                  {t.quickBookSubmit}
                </motion.button>
              </div>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}