"use client";

import { motion, AnimatePresence } from "framer-motion";
import { useState, useEffect } from "react";
import type { DemoData } from "@/data/demos";

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.08 } },
};

const translations = {
  tr: {
    navHeritage: "Mirasımız",
    navSpecial: "Şefin Seçimi",
    navBakery: "Günlük Ekmekler",
    navServices: "Ayrıcalıklar",
    navBooking: "Rezervasyon",
    badge: "SIGNATURE STEAKHOUSE & GASTRONOMY",
    heroTitlePart1: "Lezzet",
    heroTitlePart2: "Sanatı & Ateşin",
    heroTitlePart3: "Mirasımız",
    heroDesc: "Ateş, duman ve Palermo zanaatkarlığıyla şekillenen lezzet dolu bir yolculuk. Karaköy limanında, seçkin gurmeler için özenle tasarlanan imza steakhouse koordinatları.",
    learnMore: "Heritage Keşfet",
    reserveTable: "Rezervasyon Yap",
    heritageTitle: "Zanaat Hikayesi",
    heritageHeader: "LEZZETİN ANATOMİSİ",
    heritageDesc: "Karaköy limanının en eski taş duvarları arasında, Palermo'nun asırlık pişirme tekniklerini modern gastronomi vizyonuyla harmanlıyoruz. Ağır ateşte dinlendirilmiş Wagyu etlerinden, odun fırınında pişen taze ekşi mayalara uzanan bir tutku.",
    specialTitle: "Şefin İmzası",
    specialHeader: "HAFTALIK SPESİYALLER",
    specialDesc: "Taze mevsim otları, el yapımı soslar ve meşe odununda dinlendirilmiş Wagyu lezzetlerini keşfedin.",
    bakeryTitle: "Zanaat Fırınımız",
    bakeryHeader: "GÜNLÜK EKŞİ MAYALAR",
    bakeryDesc: "Her sabah 05:00'te taş fırınımızda maya kokusuyla başlayan hikaye. İtalyan unları, doğal ekşi maya ve 48 saatlik fermantasyon ile elde açılan eşsiz ekmekler.",
    servicesTitle: "Ayrıcalıklarımız",
    servicesHeader: "MİSAFİRLERİMİZ İÇİN PREMIUM SEÇENEKLER",
    reviewsTitle: "Gurme Değerlendirmeleri",
    reviewsHeader: "MİSAFİRLERİMİZİN DİLİNDEN HİKAYELER",
    bookingTitle: "Masa Rezervasyonu",
    bookingHeader: "REZERVASYON YAPIN",
    bookingDesc: "Seçkin caz akustiği ve loş kehribar aydınlatmalı salonumuzda masanızı şimdiden ayırtın.",
    fieldsName: "Ad Soyad",
    fieldsPhone: "Telefon Numarası",
    fieldsDate: "Randevu Tarihi",
    fieldsTime: "Rezervasyon Saati",
    fieldsGuests: "Kişi Sayısı",
    fieldsNotes: "Özel İstek / Not",
    fieldsNotesPlaceholder: "Diyet hassasiyetleri, VIP uşak talepleri, yıldönümü vb...",
    dispatchForm: "REZERVASYON TALEBİNİ GÖNDER",
    guarantee: "Bu formu doldurarak doğrulanmış bir rezervasyon sağlarsınız. Masalar, rezervasyon saatinden itibaren 15 dakika boyunca adınıza tutulur.",
    footerDesc: "Geleneksel zanaat, ağır ateşte meşe odununda dinlendirilmiş imza Wagyu bonfileleri ve Palermo fırıncılık mirası.",
    privacyRegs: "Gizlilik Sözleşmesi",
    termsStay: "Kullanım Şartları",
    dismiss: "KAPAT",
    contactTitle: "Hızlı Rezervasyon",
    contactDesc: "Karaköy salon koordinatörümüzün sizi hemen araması için bilgilerinizi bırakın.",
    submit: "Gönder",
    alacarteTitle: "À la Carte Deneyimi",
    alacarteDesc: "Seçkin malzemelerle hazırlanan meşe odununda dinlendirilmiş Wagyu imza yemeklerimizi keşfedin.",
    specialEventTitle: "Özel Kutlamalar",
    specialEventDesc: "Doğum günü, evlilik yıldönümü ve kutlamalar için kişiselleştirilmiş şef menüleri.",
    cateringTitle: "Kurumsal Akustik",
    cateringDesc: "İş yemekleri ve kurumsal lansman organizasyonları için premium gurme catering hizmeti.",
    deliveryTitle: "Tavola Evinizde",
    deliveryDesc: "Özel korumalı kuryelerimizle en taze gurme lezzetleri kapınıza getiriyoruz.",
    categoryTitle1: "Başlangıçlar",
    categoryTitle2: "Ana Yemekler",
    categoryTitle3: "Tatlılar",

    // Menus Localized
    menuHummus: "Ev Yapımı Hummus",
    menuHummusDesc: "Fırından taze lavaş ve soğuk sıkım İtalyan trüf yağı ile.",
    menuBruschetta: "Karidesli Bruschetta",
    menuBruschettaDesc: "Taze marine domates, fesleğen ve sarımsak emülsiyonu.",
    menuBurrata: "Burrata Salatası",
    menuBurrataDesc: "Cherry domates, fesleğen sosu ve taze roka yaprakları.",
    menuWagyu: "Wagyu Bonfile",
    menuWagyuDesc: "Fırınlanmış kuşkonmaz ve trüf mantarlı patates püresi eşliğinde.",
    menuLevrek: "Levrek Fileto",
    menuLevrekDesc: "Limonlu tereyağı sosu, kapari ve taze bahçe otları.",
    menuRisotto: "Mantar Risotto",
    menuRisottoDesc: "Yabani orman mantarları ve Parmigiano Reggiano peyniri ile.",
    menuBrule: "Crème Brûlée",
    menuBruleDesc: "Gerçek Madagaskar vanilyası ve karamelize şeker kıtırı.",
    menuFondant: "Çikolatalı Fondant",
    menuFondantDesc: "Belçika çikolatası dolgulu sıcak kek, vanilyalı dondurma.",
    menuKunefe: "Karaköy Künefesi",
    menuKunefeDesc: "Halis tereyağlı çıtır tel kadayıf ve manda kaymağı.",
  },
  en: {
    navHeritage: "Our Heritage",
    navSpecial: "Chef's Specials",
    navBakery: "Daily Bakery",
    navServices: "Leisures",
    navBooking: "Reservation",
    badge: "SIGNATURE STEAKHOUSE & GASTRONOMY",
    heroTitlePart1: "Crafting",
    heroTitlePart2: "Flame & Steak",
    heroTitlePart3: "Heritage",
    heroDesc: "A journey of raw ingredients transformed by fire, smoke, and Palermo craftsmanship. Exquisite coordinates situated at Karaköy docks designed for refined palates.",
    learnMore: "Explore Heritage",
    reserveTable: "Reserve Table",
    heritageTitle: "Heritage Narrative",
    heritageHeader: "ANATOMY OF FLAVOR",
    heritageDesc: "Surrounded by Karaköy's historical stone walls, we merge Palermo's ancient wood-fired baking roots with modern culinary vision. A passion spanning oak-aged Wagyu steaks and sourdough crusts.",
    specialTitle: "Signature Cuts",
    specialHeader: "WEEKLY CULINARY SPECS",
    specialDesc: "Discover fresh orchard herbs, house-made sauces, and oak-fired Wagyu steak creations.",
    bakeryTitle: "Chalkboard Bakery",
    bakeryHeader: "DAILY SOURDOUGH BOULES",
    bakeryDesc: "Every morning at 05:00 AM, our stone ovens fill with sourdough fragrance. Hand-stretched using premium Italian flour and 48-hour fermentation.",
    servicesTitle: "Boutique Leisures",
    servicesHeader: "PREMIUM SERVICES FOR REFINED GUESTS",
    reviewsTitle: "Gourmet Diaries",
    reviewsHeader: "LOVED BY GLOBAL WRITERS",
    bookingTitle: "Table Booking",
    bookingHeader: "SECURE RESERVATION",
    bookingDesc: "Reserve your private velvet booth or live-cooking counter inside our acoustic jazz lounge.",
    fieldsName: "Full Name",
    fieldsPhone: "Phone Number",
    fieldsDate: "Target Date",
    fieldsTime: "Reservation Time",
    fieldsGuests: "Guest Count",
    fieldsNotes: "Bespoke Requests",
    fieldsNotesPlaceholder: "Dietary restrictions, VIP butler dispatch, anniversary settings...",
    dispatchForm: "SEND RESERVATION REQUEST",
    guarantee: "Submitting this form registers a verified priority slot. Tables are held exactly for 15 minutes beyond the scheduled time.",
    footerDesc: "Traditional craft, signature oak-aged Wagyu beef cuts, and Palermo baking heritage.",
    privacyRegs: "Privacy Policy",
    termsStay: "Terms of Service",
    dismiss: "DISMISS",
    contactTitle: "Quick Reservation",
    contactDesc: "Leave your contact details and our salon representative will call you back immediately.",
    submit: "Submit",
    alacarteTitle: "À la Carte Gastronomy",
    alacarteDesc: "Savor our signature oak-aged Wagyu ribeye cuts built with the finest local ingredients.",
    specialEventTitle: "Bespoke Gatherings",
    specialEventDesc: "Custom tasting menus and sommelier coordination for birthdays and private lounges.",
    cateringTitle: "Corporate Acoustics",
    cateringDesc: "Professional gourmet catering configurations for corporate launches and executive dinners.",
    deliveryTitle: "Tavola at Home",
    deliveryDesc: "Delivering hot gourmet culinary setups directly to your address via priority dispatch.",
    categoryTitle1: "Appetizers",
    categoryTitle2: "Main Courses",
    categoryTitle3: "Desserts",

    // Menus Localized
    menuHummus: "House-Crafted Hummus",
    menuHummusDesc: "Served with hot wood-fired flatbread and cold pressed truffle oil mist.",
    menuBruschetta: "Shrimp Bruschetta",
    menuBruschettaDesc: "Marinated cherry tomatoes, botanical basil, garlic emulsion.",
    menuBurrata: "Creamy Burrata",
    menuBurrataDesc: "Heirloom tomatoes, organic basil pesto, taze baby wild rocket.",
    menuWagyu: "A5 Wagyu Ribeye",
    menuWagyuDesc: "Accompanied by fire-charred asparagus and black truffle potato mash.",
    menuLevrek: "Sea Bass Filet",
    menuLevrekDesc: "Citrus butter reduction, capillary capers, and taze orchard herbs.",
    menuRisotto: "Wild Mushroom Risotto",
    menuRisottoDesc: "Foraged forest mushrooms, aged Parmigiano Reggiano, micro greens.",
    menuBrule: "Crème Brûlée",
    menuBruleDesc: "Infused with organic Madagascar vanilla and caramelized sugar crust.",
    menuFondant: "Molten Lava Fondant",
    menuFondantDesc: "Rich Belgian chocolate cake shell with house vanilla bean gelato.",
    menuKunefe: "Traditional Künefe",
    menuKunefeDesc: "Crisp shredded pastry loaded with melted unsalted cheese, thick buffalo cream.",
  }
};

export default function RestoranTemplate({ data }: { data: DemoData }) {
  const { firma, istatistikler = [], hizmetler = [], menu = [], yorumlar = [] } = data;
  const [showBookingModal, setShowBookingModal] = useState(false);
  const [aktifKategori, setAktifKategori] = useState(0);
  const [lang, setLang] = useState<"tr" | "en">("tr");
  const [preloader, setPreloader] = useState(true);

  const t = translations[lang];

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

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

  // Localized stats label mappings
  const getLocalizedStatLabel = (deger: string) => {
    if (deger.includes("Heritage")) return lang === "tr" ? "Yıllık Köklü Miras" : "Years of Heritage";
    if (deger.includes("Dishes")) return lang === "tr" ? "İmza Tabaklar" : "Signature Dishes";
    if (deger.includes("Rating")) return lang === "tr" ? "Ortalama Değerlendirme" : "Average Guest Rating";
    return lang === "tr" ? "Aylık Gurme Misafir" : "Monthly Diners";
  };

  // Localized services text mappings
  const getLocalizedServiceText = (baslik: string) => {
    if (baslik.includes("Carte")) return { title: t.alacarteTitle, desc: t.alacarteDesc };
    if (baslik.includes("Günler")) return { title: t.specialEventTitle, desc: t.specialEventDesc };
    if (baslik.includes("Kurumsal")) return { title: t.cateringTitle, desc: t.cateringDesc };
    return { title: t.deliveryTitle, desc: t.deliveryDesc };
  };

  // Custom vector icons for services (No generic emojis)
  const getServiceIconSvg = (ikon: string) => {
    switch (ikon) {
      case "alacarte":
        return (
          <svg className="w-6 h-6 stroke-[#C5A880] fill-none" viewBox="0 0 24 24" 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-[#C5A880] fill-none" viewBox="0 0 24 24" 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-[#C5A880] fill-none" viewBox="0 0 24 24" strokeWidth="1.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
          </svg>
        );
      default:
        return (
          <svg className="w-6 h-6 stroke-[#C5A880] fill-none" viewBox="0 0 24 24" 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.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
          </svg>
        );
    }
  };

  // Localized menu items
  const getLocalizedMenuItemText = (ad: string) => {
    if (ad.includes("Hummus")) return { title: t.menuHummus, desc: t.menuHummusDesc };
    if (ad.includes("Bruschetta")) return { title: t.menuBruschetta, desc: t.menuBruschettaDesc };
    if (ad.includes("Burrata")) return { title: t.menuBurrata, desc: t.menuBurrataDesc };
    if (ad.includes("Wagyu")) return { title: t.menuWagyu, desc: t.menuWagyuDesc };
    if (ad.includes("Levrek")) return { title: t.menuLevrek, desc: t.menuLevrekDesc };
    if (ad.includes("Risotto")) return { title: t.menuRisotto, desc: t.menuRisottoDesc };
    if (ad.includes("Brûlée")) return { title: t.menuBrule, desc: t.menuBruleDesc };
    if (ad.includes("Fondant")) return { title: t.menuFondant, desc: t.menuFondantDesc };
    return { title: t.menuKunefe, desc: t.menuKunefeDesc };
  };

  const getLocalizedCategoryTitle = (kategori: string) => {
    if (kategori.includes("Başlangıç")) return t.categoryTitle1;
    if (kategori.includes("Ana")) return t.categoryTitle2;
    return t.categoryTitle3;
  };

  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&display=swap');

    :root {
      --color-restaurant-gold: #C5A880;
      --color-restaurant-charcoal: #090A0C;
      --color-restaurant-slate: #13151A;
    }

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

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

    .shadow-premium {
      box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.4);
    }

    .grain-overlay {
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E");
    }

    .marquee-text-flow {
      white-space: nowrap;
      animation: marquee 25s linear infinite;
    }

    @keyframes marquee {
      0% { transform: translateX(0%); }
      100% { transform: translateX(-50%); }
    }

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

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

      {/* ── IMZA AN: CURTAIN REVEAL PRELOADER ── */}
      <AnimatePresence>
        {preloader && (
          <motion.div 
            className="fixed inset-0 z-50 bg-[#090A0C] 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-sans-clean font-black tracking-[4px] uppercase text-[#C5A880] block"
                initial={{ opacity: 0, y: 10 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.5 }}
              >
                LEZZET MUTFAĞI
              </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-[#C5A880]"
                  initial={{ width: "0%" }}
                  animate={{ width: "100%" }}
                  transition={{ duration: 1.2, ease: "easeInOut" }}
                />
              </div>
              <motion.h2 
                className="font-serif-editorial text-white/50 text-xs italic tracking-wider"
                initial={{ opacity: 0 }}
                animate={{ opacity: 1 }}
                transition={{ delay: 0.4, duration: 0.5 }}
              >
                interactive prototype
              </motion.h2>
            </div>
          </motion.div>
        )}
      </AnimatePresence>

      <div className="bg-[#090A0C] text-white min-h-screen font-sans-clean selection:bg-[#C5A880] selection:text-black overflow-hidden relative pb-20">
        
        {/* Grain texture */}
        <div className="absolute inset-0 grain-overlay pointer-events-none z-0" />

        {/* Ambient glow blobs */}
        <div className="absolute top-[15%] right-[-15%] w-[600px] h-[600px] bg-[#C5A880]/3 blur-[120px] rounded-full pointer-events-none z-0" />
        <div className="absolute bottom-[20%] left-[-15%] w-[600px] h-[600px] bg-white/2 blur-[130px] rounded-full pointer-events-none z-0" />

        {/* ── FLOATING CONCEPT BANNER ── */}
        <div className="fixed bottom-4 left-4 z-40 bg-[#090A0C]/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-[#C5A880] animate-pulse" />
          <span className="text-[9px] font-sans-clean font-black uppercase tracking-[1.5px] text-white/90">
            {lang === "tr" ? "Bu web sitesi Ayris Tech tarafından hazırlanmış bir konsept çalışmasıdır." : "This website is a premium concept prototype designed by Ayris Tech."}
          </span>
        </div>

        {/* ── FLOATING NAVBAR ── */}
        <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.85, ease: [0.16, 1, 0.3, 1] }}
        >
          <div className="mx-auto max-w-7xl h-20 flex items-center justify-between px-8 bg-[#090A0C]/80 backdrop-blur-xl border border-white/5 rounded-2xl shadow-2xl">
            {/* Logo */}
            <a href="#" className="flex items-center gap-2.5 group">
              <span className="text-xl font-bold tracking-[2px] text-white group-hover:text-[#C5A880] transition-colors font-serif-editorial uppercase">
                {firma.adi}
              </span>
            </a>

            {/* Links */}
            <nav className="hidden lg:flex items-center gap-8">
              {[
                { label: t.navHeritage, href: "#heritage" },
                { label: t.navSpecial, href: "#special" },
                { label: t.navBakery, href: "#bakery" },
                { label: t.navServices, href: "#services" }
              ].map(item => (
                <a
                  key={item.label}
                  href={item.href}
                  className="text-[10px] font-black tracking-[2px] uppercase text-white/60 hover:text-[#C5A880] transition-colors relative py-1 cursor-pointer group"
                >
                  {item.label}
                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-[#C5A880] transition-all group-hover:w-full" />
                </a>
              ))}
            </nav>

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

              <motion.button
                onClick={() => setShowBookingModal(true)}
                className="text-[10px] font-sans-clean font-black tracking-[2.5px] uppercase text-black bg-[#C5A880] hover:bg-[#d5b990] px-6 py-3.5 rounded-xl transition-all cursor-pointer shadow-[0_4px_12px_rgba(197,168,128,0.15)] hidden sm:block"
                whileHover={{ scale: 1.02 }}
                whileTap={{ scale: 0.98 }}
              >
                {t.reserveTable}
              </motion.button>
            </div>
          </div>
        </motion.header>

        {/* ── HERO SECTION WITH EDITORIAL BACKGROUND zoom ── */}
        <section className="relative min-h-screen flex items-center justify-center px-6">
          <div className="absolute inset-0 z-0 overflow-hidden pointer-events-none">
            <div className="absolute inset-0 bg-[#090A0C]/75 z-10" />
            <motion.img 
              src="/restaurant_hero_steak.png" 
              alt="Ribeye Steak cooking" 
              className="w-full h-full object-cover object-center scale-102"
              initial={{ scale: 1.02 }}
              animate={{ scale: 1.06 }}
              transition={{ duration: 15, repeat: Infinity, repeatType: "reverse", ease: "easeInOut" }}
            />
          </div>

          <div className="max-w-5xl mx-auto w-full z-10 text-center">
            <motion.div 
              variants={stagger}
              initial="hidden"
              animate="show"
              className="flex flex-col items-center"
            >
              <motion.div 
                variants={fadeUp}
                className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-[#C5A880] mb-6 bg-[#C5A880]/10 border border-[#C5A880]/15 px-4 py-2 rounded-full"
              >
                <span className="w-1.5 h-1.5 rounded-full bg-[#C5A880] animate-pulse" />
                {t.badge}
              </motion.div>

              <motion.h1 
                variants={fadeUp}
                className="font-serif-editorial font-bold text-white mb-8 uppercase hero-title-clamp"
              >
                {t.heroTitlePart1}
                <br />
                <span className="italic font-light text-[#C5A880] lowercase">{t.heroTitlePart2}</span>
                <br />
                {t.heroTitlePart3}
              </motion.h1>

              <motion.p 
                variants={fadeUp}
                className="text-[#8E929A] font-sans-clean font-semibold text-xs lg:text-sm leading-relaxed max-w-lg mb-12"
              >
                {t.heroDesc}
              </motion.p>

              <motion.div variants={fadeUp} className="flex gap-4">
                <button 
                  onClick={() => setShowBookingModal(true)}
                  className="px-8 py-4.5 rounded-xl bg-[#C5A880] hover:bg-[#d5b990] text-[#090A0C] font-black text-[10px] tracking-[2px] uppercase transition-all shadow-[0_5px_15px_rgba(197,168,128,0.2)] cursor-pointer"
                >
                  {t.reserveTable}
                </button>
                <a 
                  href="#heritage" 
                  className="px-8 py-4.5 rounded-xl border border-white/10 bg-white/5 hover:bg-white/10 text-white font-black text-[10px] tracking-[2px] uppercase transition-all cursor-pointer flex items-center justify-center"
                >
                  {t.learnMore}
                </a>
              </motion.div>
            </motion.div>
          </div>
        </section>

        {/* ── IMZA AN: INFINITE MARQUEE BAND ── */}
        <div className="w-full bg-[#13151A] border-y border-[#C5A880]/20 py-5 overflow-hidden z-10 relative">
          <div className="flex marquee-text-flow uppercase font-serif-editorial text-xs tracking-[4px] text-[#C5A880] font-bold">
            <span className="px-4">{lang === "tr" ? "Lezzet Mutfağı Karaköy" : "Karaköy Culinary Heritage"} ·</span>
            <span className="px-4">{lang === "tr" ? "İmza Steakhouse ve Gastronomi" : "Signature Wagyu Steak cuts"} ·</span>
            <span className="px-4">{lang === "tr" ? "Geleneksel Pişirme Teknikleri" : "Wood-Fired Fermented Sourdough"} ·</span>
            <span className="px-4">{lang === "tr" ? "Palermo Zanaat Kültürü" : "Palermo Baking Roots"} ·</span>
            
            <span className="px-4">{lang === "tr" ? "Lezzet Mutfağı Karaköy" : "Karaköy Culinary Heritage"} ·</span>
            <span className="px-4">{lang === "tr" ? "İmza Steakhouse ve Gastronomi" : "Signature Wagyu Steak cuts"} ·</span>
            <span className="px-4">{lang === "tr" ? "Geleneksel Pişirme Teknikleri" : "Wood-Fired Fermented Sourdough"} ·</span>
            <span className="px-4">{lang === "tr" ? "Palermo Zanaat Kültürü" : "Palermo Baking Roots"} ·</span>
          </div>
        </div>

        {/* ── SECTION 2: HERITAGE / ABOUT US (3 COLUMN SPLIT) ── */}
        <section id="heritage" className="py-32 bg-[#090A0C] relative z-10 px-6">
          <div className="max-w-7xl mx-auto">
            
            <div className="grid lg:grid-cols-12 gap-16 items-center">
              
              {/* Left text column */}
              <motion.div 
                className="lg:col-span-6"
                initial="hidden"
                whileInView="show"
                viewport={{ once: true }}
                variants={stagger}
              >
                <motion.span 
                  variants={fadeUp}
                  className="inline-block text-[10px] font-black uppercase tracking-widest text-[#C5A880] mb-4"
                >
                  {t.heritageTitle}
                </motion.span>
                <motion.h2 
                  variants={fadeUp}
                  className="font-serif-editorial text-4xl lg:text-5xl font-black tracking-widest text-white mb-6 uppercase"
                >
                  {t.heritageHeader}
                </motion.h2>
                <motion.p 
                  variants={fadeUp}
                  className="text-white/60 font-sans-clean text-xs lg:text-sm leading-relaxed font-semibold mb-10"
                >
                  {t.heritageDesc}
                </motion.p>

                {/* Stat pile inside heritage */}
                <motion.div 
                  variants={fadeUp}
                  className="grid grid-cols-2 gap-6 mb-8 font-semibold"
                >
                  {istatistikler.map((stat, sIdx) => (
                    <div key={sIdx} className="border-l border-[#C5A880]/30 pl-4 py-1">
                      <h4 className="font-serif-editorial font-bold text-white text-lg leading-none mb-1">{stat.deger}</h4>
                      <p className="text-white/40 text-[10px] uppercase tracking-wider">{getLocalizedStatLabel(stat.etiket)}</p>
                    </div>
                  ))}
                </motion.div>
              </motion.div>

              {/* Right layered imagery column */}
              <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-[460px] lg:h-[530px] rounded-3xl overflow-hidden shadow-2xl border border-white/5 group"
                  initial={{ opacity: 0, scale: 0.95 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.8 }}
                >
                  <div className="absolute inset-0 bg-black/10 z-10" />
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img 
                    src="/chef_plating_smoke.png" 
                    alt="Chef Plating Wagyu Ribeye" 
                    className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-1000"
                  />
                </motion.div>
              </div>

            </div>

          </div>
        </section>

        {/* ── SECTION 3: ŞEFİN SEÇİMİ (DOTTED MENU GRID) ── */}
        <section id="special" className="py-32 bg-[#13151A] border-t border-[#C5A880]/15 relative z-10 px-6">
          <div className="max-w-7xl mx-auto">
            
            <div className="grid lg:grid-cols-12 gap-16 items-center">
              
              {/* Left Col: Gourmet active sauté shot */}
              <div className="lg:col-span-6 relative flex justify-center lg:justify-start">
                <motion.div 
                  className="relative w-full max-w-md lg:max-w-lg h-[460px] lg:h-[530px] rounded-3xl overflow-hidden shadow-2xl border border-[#C5A880]/20 group"
                  initial={{ opacity: 0, x: -30 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.8 }}
                >
                  <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent z-10 pointer-events-none" />
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img 
                    src="/gourmet_pasta_flame.png" 
                    alt="Flaming Gourmet sauté preparation" 
                    className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-1000"
                  />
                  {/* Small tag inside photo */}
                  <div className="absolute bottom-6 left-6 right-6 z-20 bg-[#090A0C]/90 backdrop-blur-md p-5 rounded-2xl border border-white/5 flex justify-between items-center">
                    <div>
                      <h4 className="font-serif-editorial text-[#C5A880] text-xs font-bold uppercase tracking-wider mb-1">Flaming sauté</h4>
                      <p className="text-white/60 text-[9px] font-sans-clean font-bold tracking-widest uppercase">Live from karaköy kitchen</p>
                    </div>
                    <span className="w-9 h-9 rounded-full bg-[#C5A880]/10 border border-[#C5A880]/30 flex items-center justify-center text-white shrink-0 select-none">🔥</span>
                  </div>
                </motion.div>
              </div>

              {/* Right Col: The Dotted Menu List */}
              <motion.div 
                className="lg:col-span-6"
                initial="hidden"
                whileInView="show"
                viewport={{ once: true }}
                variants={stagger}
              >
                <motion.span 
                  variants={fadeUp}
                  className="inline-block text-[10px] font-black uppercase tracking-widest text-[#C5A880] mb-4"
                >
                  {t.specialTitle}
                </motion.span>
                <motion.h2 
                  variants={fadeUp}
                  className="font-serif-editorial text-4xl lg:text-5xl font-black tracking-widest text-white mb-6 uppercase"
                >
                  {t.specialHeader}
                </motion.h2>
                <motion.p 
                  variants={fadeUp}
                  className="text-white/60 font-sans-clean text-xs leading-relaxed font-semibold mb-12 max-w-md"
                >
                  {t.specialDesc}
                </motion.p>

                {/* Dotted lines menu item lists */}
                <div className="space-y-6">
                  {menu[aktifKategori]?.urunler.map((item) => {
                    const text = getLocalizedMenuItemText(item.ad);
                    return (
                      <motion.div 
                        key={item.ad}
                        variants={fadeUp}
                        className="flex flex-col group cursor-default"
                      >
                        <div className="flex items-end justify-between gap-4">
                          <span className="font-serif-editorial text-sm lg:text-base font-bold text-white group-hover:text-[#C5A880] transition-colors uppercase">
                            {text.title}
                          </span>
                          <div className="grow border-b border-dashed border-white/10 group-hover:border-[#C5A880]/30 transition-colors mx-2 mb-1.5" />
                          <span className="font-serif-editorial text-sm font-black text-[#C5A880] shrink-0 font-bold">
                            {item.fiyat}
                          </span>
                        </div>
                        <p className="text-white/50 text-[10px] mt-1 font-semibold leading-relaxed max-w-md">
                          {text.desc}
                        </p>
                      </motion.div>
                    );
                  })}
                </div>

                {/* Menu categories tabs */}
                <motion.div 
                  variants={fadeUp}
                  className="flex items-center gap-4 mt-12 flex-wrap"
                >
                  {menu.map((kat, idx) => (
                    <button
                      key={idx}
                      onClick={() => setAktifKategori(idx)}
                      className="text-[9px] font-sans-clean font-black tracking-[2px] uppercase px-5 py-3 rounded-lg border transition-all cursor-pointer"
                      style={aktifKategori === idx
                        ? { backgroundColor: "#C5A880", color: "#090A0C", borderColor: "#C5A880" }
                        : { backgroundColor: "transparent", color: "rgba(255,255,255,0.4)", borderColor: "rgba(255,255,255,0.1)" }
                      }
                    >
                      {getLocalizedCategoryTitle(kat.kategori)}
                    </button>
                  ))}
                </motion.div>
              </motion.div>

            </div>

          </div>
        </section>

        {/* ── SECTION 4: CHALKBOARD BAKERY ── */}
        <section id="bakery" className="py-32 bg-[#090A0C] border-t border-[#C5A880]/15 relative z-10 px-6">
          <div className="max-w-7xl mx-auto">
            
            <div className="grid lg:grid-cols-12 gap-16 items-center">
              
              {/* Left Side: Sourdough Details */}
              <motion.div 
                className="lg:col-span-6"
                initial="hidden"
                whileInView="show"
                viewport={{ once: true }}
                variants={stagger}
              >
                <motion.span 
                  variants={fadeUp}
                  className="inline-block text-[10px] font-black uppercase tracking-widest text-[#C5A880] mb-4"
                >
                  {t.bakeryTitle}
                </motion.span>
                <motion.h2 
                  variants={fadeUp}
                  className="font-serif-editorial text-4xl lg:text-5xl font-black tracking-widest text-white mb-6 uppercase"
                >
                  {t.bakeryHeader}
                </motion.h2>
                <motion.p 
                  variants={fadeUp}
                  className="text-white/60 font-sans-clean text-xs lg:text-sm leading-relaxed font-semibold mb-10 max-w-md"
                >
                  {t.bakeryDesc}
                </motion.p>

                {/* Sourdough Boule metrics */}
                <div className="space-y-4 font-semibold">
                  {[
                    { title: lang === "tr" ? "Geleneksel İtalyan Ciabatta" : "Traditional Italian Ciabatta", desc: "1250g | 45 min | 230°C", body: lang === "tr" ? "Altın çıtır kabuklu, bol gözenekli Palermo klasiği." : "Gold crispy crust, high hydration classic boules." },
                    { title: lang === "tr" ? "Çavdar Sourdough Boule" : "Rye Sourdough Boule", desc: "750g | 38 min | 240°C", body: lang === "tr" ? "Aktif karbon, çavdar ve özel ekşi maya ile pişirilmiş tahıllı ekmek." : "Baked with active charcoal, organic rye, and local sourdough." }
                  ].map((bread, bIdx) => (
                    <motion.div 
                      key={bIdx}
                      variants={fadeUp}
                      className="p-5 bg-white/5 border border-white/5 rounded-2xl hover:border-[#C5A880]/20 transition-all duration-300"
                    >
                      <div className="flex justify-between items-start flex-wrap gap-2">
                        <h4 className="font-serif-editorial text-[#C5A880] text-sm font-bold uppercase tracking-wider">{bread.title}</h4>
                        <span className="font-sans-clean text-[9px] text-white/40 uppercase tracking-widest font-black">{bread.desc}</span>
                      </div>
                      <p className="text-white/50 text-[10px] leading-relaxed mt-2">{bread.body}</p>
                    </motion.div>
                  ))}
                </div>
              </motion.div>

              {/* Right Side: Flatlay 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-[460px] lg:h-[530px] rounded-3xl overflow-hidden shadow-2xl border border-white/5 group"
                  initial={{ opacity: 0, scale: 0.95 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.8 }}
                >
                  <div className="absolute inset-0 bg-black/10 z-10" />
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img 
                    src="/bakery_heritage.png" 
                    alt="Sourdough flatlay chalkboard" 
                    className="w-full h-full object-cover scale-102 group-hover:scale-105 transition-transform duration-1000"
                  />
                </motion.div>
              </div>

            </div>

          </div>
        </section>

        {/* ── SECTION 5: SERVICES (SVG ICONS - NO EMOJIS) ── */}
        <section id="services" className="py-32 bg-[#13151A] border-t border-[#C5A880]/15 relative z-10 px-6">
          <div className="max-w-7xl mx-auto">
            
            <div className="text-center mb-20">
              <span className="text-[#C5A880] font-serif-editorial italic text-base tracking-wider block mb-3">{t.servicesTitle}</span>
              <h2 className="font-serif-editorial text-3xl lg:text-4xl font-black tracking-widest text-white uppercase">
                {t.servicesHeader}
              </h2>
            </div>

            <div className="grid md:grid-cols-4 gap-6">
              {hizmetler.map((h, i) => {
                const s = getLocalizedServiceText(h.baslik);
                return (
                  <motion.div 
                    key={i}
                    className="bg-[#090A0C] rounded-2xl p-8 border border-white/5 hover:border-[#C5A880]/30 hover:bg-[#090A0C]/80 transition-all duration-300 flex flex-col items-center text-center group cursor-default"
                    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-2xl bg-white/5 border border-white/10 flex items-center justify-center mb-6 transition-all group-hover:bg-[#C5A880]/10 group-hover:border-[#C5A880]/30">
                      {getServiceIconSvg(h.ikon)}
                    </div>
                    <h3 className="font-serif-editorial font-bold text-white text-sm mb-3 uppercase tracking-wider leading-snug">
                      {s.title}
                    </h3>
                    <p className="text-[#8E929A] font-sans-clean text-[10px] leading-relaxed font-semibold">
                      {s.desc}
                    </p>
                  </motion.div>
                );
              })}
            </div>

          </div>
        </section>

        {/* ── SECTION 6: TESTIMONIALS (YORUMLAR) ── */}
        <section id="yorumlar" className="py-32 bg-[#090A0C] border-t border-[#C5A880]/15 px-6 relative z-10">
          <div className="max-w-7xl mx-auto">
            
            <div className="text-center mb-20">
              <span className="text-[#C5A880] font-serif-editorial italic text-base tracking-wider block mb-3">{t.reviewsTitle}</span>
              <h2 className="font-serif-editorial text-3xl lg:text-4xl font-black tracking-widest text-white uppercase">
                {t.reviewsHeader}
              </h2>
            </div>

            <div className="grid md:grid-cols-3 gap-6">
              {yorumlar.map((y, i) => (
                <motion.div 
                  key={i}
                  className="bg-[#13151A] border border-[#C5A880]/10 rounded-2xl p-8 flex flex-col justify-between"
                  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(197,168,128,0.3)" }}
                >
                  <div className="flex gap-1 mb-6">
                    {[...Array(y.puan || 5)].map((_, j) => (
                      <svg key={j} className="w-4 h-4 fill-[#C5A880]" viewBox="0 0 24 24">
                        <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" />
                      </svg>
                    ))}
                  </div>

                  <p className="text-white/80 font-sans-clean text-xs leading-relaxed italic mb-8 font-semibold">
                    &ldquo;{y.yorum}&rdquo;
                  </p>

                  <div className="flex items-center gap-3 font-semibold">
                    <div className="w-10 h-10 rounded-full border border-[#C5A880]/30 flex items-center justify-center text-lg bg-[#090A0C] shrink-0 select-none">
                      {y.emoji}
                    </div>
                    <div>
                      <h4 className="font-serif-editorial text-[#C5A880] text-xs font-bold uppercase tracking-wider">
                        {y.yazar.split("—")[0]}
                      </h4>
                      <span className="font-sans-clean text-[9px] text-white/40 uppercase tracking-widest font-black">
                        {y.tarih}
                      </span>
                    </div>
                  </div>
                </motion.div>
              ))}
            </div>

          </div>
        </section>

        {/* ── SECTION 7: RANDEVU AL / RESERVATION ── */}
        <section id="randevu" className="py-32 bg-[#13151A] border-t border-[#C5A880]/15 relative z-10 px-6">
          <div className="max-w-3xl mx-auto">
            
            <div className="bg-[#090A0C] rounded-3xl p-8 md:p-12 shadow-2xl border border-[#C5A880]/20">
              <div className="text-center mb-10">
                <span className="text-[#C5A880] font-serif-editorial italic text-base tracking-wider block mb-3">{t.bookingTitle}</span>
                <h2 className="font-serif-editorial text-3xl md:text-4xl font-black tracking-widest text-white uppercase">
                  {t.bookingHeader}
                </h2>
                <p className="text-[#8E929A] font-sans-clean text-xs mt-2 leading-relaxed font-semibold">
                  {t.bookingDesc}
                </p>
              </div>

              <div className="grid grid-cols-2 gap-4 font-semibold text-[#C5A880]">
                {[
                  { label: t.fieldsName, placeholder: lang === "tr" ? "Adınız Soyadınız" : "Your Full Name", type: "text", full: false },
                  { label: t.fieldsPhone, placeholder: "05xx xxx xx xx", type: "tel", full: false },
                  { label: t.fieldsDate, placeholder: "", type: "date", full: false },
                  { label: t.fieldsTime, placeholder: "", type: "time", full: false },
                  { label: t.fieldsGuests, placeholder: "2", type: "number", full: false },
                  { label: t.fieldsNotes, placeholder: t.fieldsNotesPlaceholder, type: "text", full: true },
                ].map((field, i) => (
                  <div key={i} className={field.full ? "col-span-2" : "col-span-2 sm:col-span-1"}>
                    <label className="block text-[9px] font-sans-clean font-black uppercase tracking-widest mb-1.5">{field.label}</label>
                    <input 
                      type={field.type} 
                      placeholder={field.placeholder}
                      className="w-full px-4 py-3.5 rounded-xl border border-white/10 bg-[#13151A] text-xs text-white focus:outline-none focus:ring-1 focus:ring-[#C5A880] placeholder-white/20 transition-all font-sans-clean font-semibold cursor-pointer" 
                    />
                  </div>
                ))}
              </div>

              <div className="mt-8 pt-4 flex flex-col md:flex-row justify-between items-center gap-4 border-t border-white/5">
                <p className="text-white/40 text-[10px] leading-relaxed font-semibold max-w-sm text-center md:text-left">
                  {t.guarantee}
                </p>
                <motion.button
                  onClick={() => setShowBookingModal(true)}
                  className="w-full md:w-auto px-10 py-4.5 rounded-xl text-[#090A0C] font-sans-clean font-black tracking-[2px] uppercase bg-[#C5A880] hover:bg-[#d5b990] transition-colors cursor-pointer text-xs shrink-0 shadow-[0_5px_15px_rgba(197,168,128,0.15)]"
                  whileHover={{ scale: 1.02 }}
                  whileTap={{ scale: 0.98 }}
                >
                  {t.dispatchForm}
                </motion.button>
              </div>
            </div>

          </div>
        </section>

        {/* ── FOOTER ── */}
        <footer className="bg-[#090A0C] border-t border-white/5 px-6 pt-24 pb-8 relative z-10">
          <div className="max-w-7xl mx-auto font-semibold">
            
            <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-editorial text-2xl font-black text-[#C5A880] tracking-widest uppercase mb-4 block">
                  {firma.adi}
                </span>
                <p className="text-[#8E929A] font-sans-clean text-xs leading-relaxed max-w-sm mb-8">
                  {firma.slogan} — {t.footerDesc}
                </p>
                <div className="text-white/60 font-sans-clean text-xs space-y-3">
                  <p className="flex items-center gap-2">📍 <span className="text-white/80">{firma.adres}</span></p>
                  <p className="flex items-center gap-2">📞 <span className="text-white/80">{firma.telefon}</span></p>
                </div>
              </div>
              
              <div>
                <h4 className="font-serif-editorial text-white text-xs font-bold uppercase tracking-wider mb-6">
                  {lang === "tr" ? "Şefin Menüsü" : "Tasting Menu"}
                </h4>
                {menu.map((kat, idx) => (
                  <a 
                    key={idx} 
                    href="#special" 
                    className="block text-[#8E929A] hover:text-[#C5A880] text-xs mb-3 transition-colors font-sans-clean uppercase tracking-wider"
                  >
                    {getLocalizedCategoryTitle(kat.kategori)}
                  </a>
                ))}
              </div>

              <div>
                <h4 className="font-serif-editorial text-white text-xs font-bold uppercase tracking-wider mb-6">
                  {lang === "tr" ? "Karaköy Restoran" : "Karakoy Steakhouse"}
                </h4>
                {[t.navHeritage, t.navSpecial, t.navBakery, t.navServices].map(item => (
                  <a 
                    key={item} 
                    href="#" 
                    className="block text-[#8E929A] hover:text-[#C5A880] text-xs mb-3 transition-colors font-sans-clean uppercase tracking-wider"
                  >
                    {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/30 text-xs">
              <p>© 2026 {firma.adi}. All rights reserved.</p>
              <div className="flex gap-4">
                <a href="#" className="hover:text-white transition-colors">{t.privacyRegs}</a>
                <span>·</span>
                <a href="#" className="hover:text-white transition-colors">{t.termsStay}</a>
              </div>
            </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/80 backdrop-blur-sm"
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
            >
              <motion.div 
                className="bg-[#13151A] rounded-3xl p-8 max-w-md w-full relative shadow-2xl border border-[#C5A880]/30"
                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-white/5 flex items-center justify-center text-white/60 hover:text-white transition-colors cursor-pointer"
                  onClick={() => setShowBookingModal(false)}
                >
                  ✕
                </button>
                
                <h3 className="font-serif-editorial font-black text-white text-2xl mb-1 uppercase tracking-wider leading-none">
                  {t.contactTitle}
                </h3>
                <p className="text-[#8E929A] font-sans-clean text-[10px] mb-6 uppercase tracking-widest font-black">
                  {lang === "tr" ? "Karaköy Rezervasyon Hattı" : "Karakoy Booking Desk"}
                </p>
                
                <div className="space-y-4 font-semibold text-[#C5A880]">
                  <div>
                    <label className="block text-[9px] font-sans-clean font-black uppercase tracking-wider mb-1.5">{t.fieldsName}</label>
                    <input type="text" className="w-full px-4 py-3.5 rounded-xl border border-white/10 bg-[#090A0C] text-xs text-white focus:outline-none focus:ring-1 focus:ring-[#C5A880]" placeholder="John Doe" />
                  </div>
                  <div>
                    <label className="block text-[9px] font-sans-clean font-black uppercase tracking-wider mb-1.5">{t.fieldsPhone}</label>
                    <input type="tel" className="w-full px-4 py-3.5 rounded-xl border border-white/10 bg-[#090A0C] text-xs text-white focus:outline-none focus:ring-1 focus:ring-[#C5A880]" placeholder="05xx xxx xx xx" />
                  </div>
                  <motion.button 
                    className="w-full py-4 rounded-xl bg-[#C5A880] text-[#090A0C] font-sans-clean font-black text-xs uppercase tracking-widest mt-4 cursor-pointer shadow-[0_4px_12px_rgba(197,168,128,0.15)]"
                    whileHover={{ scale: 1.02 }}
                    whileTap={{ scale: 0.98 }}
                    onClick={() => setShowBookingModal(false)}
                  >
                    {t.submit}
                  </motion.button>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </>
  );
}