import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom/client';
import {
  Menu, X, MapPin, Phone, Mail, Instagram, Facebook,
  ArrowRight, Clock, ExternalLink, ChevronRight, FileText, Download, Upload
} from 'lucide-react';

const CONFIG = {
  restaurant: {
    name: "nagomi",
    address: "J. Jasinskio g. 14B",
    city: "Vilnius, Lithuania",
    building: "Yellowstone Business Center",
    phone: "+370 687 52295",
    email: "labas@nagomi.lt",
  },
  links: {
    reservation: {
      lt: "https://widget.tablein.com/lt/widget/nagomi",
      en: "https://widget.tablein.com/en/widget/nagomi"
    },
    menu: "https://order.site/nagomi/en/ltu/vilnius/restaurant/nagomi-sf",
    order: "https://order.site/nagomi/en/ltu/vilnius/restaurant/nagomi-sf",
    wolt: "https://wolt.com/en/ltu/vilnius/restaurant/nagomi",
    boltFood: "https://food.bolt.eu/en-US/114-vilnius/p/nagomi",
    instagram: "https://instagram.com/nagomi.lt",
    facebook: "https://facebook.com/nagomi.lt",
    tiktok: "https://tiktok.com/@nagomi.lt"
  }
};

const MENU_PDF_PATHS = {
  food: {
    lt: "assets/main-menu/nagomi-menu-lt.pdf",
    en: "assets/main-menu/nagomi-menu-en.pdf"
  },
  drinks: {
    lt: "assets/cocktails-menu/cocktails-lt.pdf",
    en: "assets/cocktails-menu/cocktails-en.pdf"
  }
};

// Careers form submission target: a PHP script (see php/submit-application.php)
// that stores the application in MySQL and emails the CV to the restaurant.
// Adjust this path if you deploy the php/ folder somewhere other than alongside index.html.
const CAREERS_FORM_ENDPOINT = "php/submit-application.php";

const MENU_DATA = {
  food: [
    {
      cat_lt: "Sushi Rolls", cat_en: "Sushi Rolls",
      hasTakelis: true,
      items: [
        { name: "Yasai Roll", desc_lt: "Tempuroje kepta paprika ir cukinija, wakame, unagi padažas, sezamas", desc_en: "Tempura fried bell pepper and zucchini, wakame, unagi sauce, sesame", price: "9€", plate: "yellow", veg: true },
        { name: "Vegan Special Roll", desc_lt: "Mangas, avokadas, wakame, sezamas", desc_en: "Mango, avocado, wakame, sesame", price: "9€", plate: "yellow", veg: true },
        { name: "Fried Salmon Roll", desc_lt: "Kepta lašiša, unagi padažas, kimči majonezas, tobiko, agurkas, sezamas", desc_en: "Fried salmon, unagi sauce, kimchi mayo, tobiko, cucumber, sesame", price: "9€", plate: "yellow" },
        { name: "Sesame Kani", desc_lt: "Surimi, kreminis sūris, agurkas, tobiko, kimči majonezas, sezamas", desc_en: "Surimi, cream cheese, cucumber, tobiko, kimchi mayo, sesame", price: "11€", plate: "white" },
        { name: "Unagi Special Roll", desc_lt: "Ungurys, tigrinės krevetės, kreminis sūris, tempuros dribsniai, agurkas", desc_en: "Eel, tiger prawns, cream cheese, tempura flakes, cucumber", price: "11€", plate: "white" },
        { name: "Spicy Sake Roll", desc_lt: "Lašiša, agurkas, avokadas, tobiko, kimči majonezas, kimči sezamas", desc_en: "Salmon, cucumber, avocado, tobiko, kimchi mayo, kimchi sesame", price: "11€", plate: "white", spicy: true },
        { name: "Philadelphia", desc_lt: "Surimi, kreminis sūris, agurkas, lašiša, kimči majonezas", desc_en: "Surimi, cream cheese, cucumber, salmon, kimchi mayo", price: "11€", plate: "white" },
        { name: "Tuna Mango Roll", desc_lt: "Tunas, mangas, kreminis sūris, tobiko", desc_en: "Tuna, mango, cream cheese, tobiko", price: "13€", plate: "grey" },
        { name: "Ebi Yuzu Roll", desc_lt: "Tunas, mangas, kreminis sūris, tobiko", desc_en: "Tuna, mango, cream cheese, tobiko", price: "13€", plate: "grey" },
        { name: "Ebi Avocado", desc_lt: "Tigrinės krevetės tempuroje, tobiko, wasabi majonezas, tempuros traškutis, avokadas, unagi padažas", desc_en: "Tiger prawns in tempura, tobiko, wasabi mayo, tempura flakes, avocado, unagi sauce", price: "13€", plate: "grey" },
        { name: "Crispy Tuna Roll", desc_lt: "Tunas, sriracha, tobiko, smidras, tempuros traškutis, čili siūlai, yuzu gochujang majonezas", desc_en: "Tuna, sriracha, tobiko, asparagus, tempura flakes, chili threads, yuzu gochujang mayo", price: "13€", plate: "grey", spicy: true },
        { name: "Philadelphia Special", desc_lt: "Surimi, kreminis sūris, agurkas, deginta lašiša, kimči majonezas, unagi padažas", desc_en: "Surimi, cream cheese, cucumber, seared salmon, kimchi mayo, unagi sauce", price: "13€", plate: "grey" },
        { name: "Spicy Tuna Tartar Roll", desc_lt: "Tunas, kimči majonezas, agurkas, avokadas, shichimi, togarashi, kimči sezamas", desc_en: "Tuna, kimchi mayo, cucumber, avocado, shichimi, togarashi, kimchi sesame", price: "13€", plate: "grey", spicy: true },
        { name: "Maguro Wakame Roll", desc_lt: "Tunas, kepta krevetė tempuroje, wakame, karai padažas, tobiko", desc_en: "Tuna, fried prawn in tempura, wakame, karai sauce, tobiko", price: "15€", plate: "lightGreen" },
        { name: "Midori Tuna Roll", desc_lt: "Tunas, mėlynasis svogūnas, kalendra, karai padažas, unagi padažas, tobiko, juodas sezamas, mangas, avokadas", desc_en: "Tuna, red onion, cilantro, karai sauce, unagi sauce, tobiko, black sesame, mango, avocado", price: "15€", plate: "lightGreen" },
        { name: "Kimido Roll", desc_lt: "Lašiša, agurkas, avokadas, upėtakio ikrai, kimči majonezas", desc_en: "Salmon, cucumber, avocado, trout caviar, kimchi mayo", price: "15€", plate: "lightGreen" },
        { name: "Royal Roll", desc_lt: "Ungurys, tigrinės krevetės, deginta lašiša, agurkas, kreminis sūris, kimči majonezas, unagi padažas", desc_en: "Eel, tiger prawns, seared salmon, cucumber, cream cheese, kimchi mayo, unagi sauce", price: "15€", plate: "lightGreen" },
        { name: "Maguro Special Roll", desc_lt: "Lašiša, tunas, avokadas, mangas, kimči majonezas", desc_en: "Salmon, tuna, avocado, mango, kimchi mayo", price: "15€", plate: "lightGreen" },
        { name: "Ebi Tartar Roll", desc_lt: "Lašiša, tigrinės krevetės, kreminis sūris, agurkas, tempuros traškučiai, sezamas, avokadas, tobiko, karai padažas", desc_en: "Salmon, tiger prawns, cream cheese, cucumber, tempura flakes, sesame, avocado, tobiko, karai sauce", price: "15€", plate: "lightGreen" },
        { name: "Gōka Unagi Roll", desc_lt: "Ungurys, tigrinės krevetės tempuroje, agurkas, tobiko, sojos majonezas, unagi padažas, sezamas", desc_en: "Eel, tiger prawn in tempura, cucumber, tobiko, soy mayo, unagi sauce, sesame", price: "17€", plate: "teal" },
        { name: "Akai Fusion Roll", desc_lt: "Tunas, tempuros traškučiai, avokadas, bruknių padažas, ožkos sūris su trumais, ryžių spragėsiai", desc_en: "Tuna, tempura flakes, avocado, lingonberry sauce, goat cheese with truffles, popped rice", price: "17€", plate: "teal" },
        { name: "Bonito Takumi Roll", desc_lt: "Ungurys, mangas, avokadas, tempuros traškučiai, sriracha, lašiša, ikura, bonito drožlės", desc_en: "Eel, mango, avocado, tempura flakes, sriracha, salmon, ikura, bonito flakes", price: "17€", plate: "teal" }
      ]
    },
    {
      cat_lt: "Nigiri", cat_en: "Nigiri",
      hasTakelis: true,
      items: [
        { name: "Seared Sake Nigiri (2vnt)", desc_lt: "Deginta lašiša, wasabi, kimči majonezas, unagi padažas", desc_en: "Seared salmon, wasabi, kimchi mayo, unagi sauce", price: "5.5€", plate: "white" },
        { name: "Sake Nigiri (2vnt)", desc_lt: "Lašiša, wasabi, tobiko", desc_en: "Salmon, wasabi, tobiko", price: "6.5€", plate: "grey" },
        { name: "Maguro Nigiri (2vnt)", desc_lt: "Tataki stiliaus tuno nigiri, kimči majonezas, svogūnų laiškai", desc_en: "Tataki style tuna nigiri, kimchi mayo, scallions", price: "6.5€", plate: "grey" },
        { name: "Unagi Nigiri (2vnt)", desc_lt: "Ungurys, unagi padažas, sezamas", desc_en: "Eel, unagi sauce, sesame", price: "7.5€", plate: "lightGreen" },
        { name: "Hotate Nigiri (2vnt)", desc_lt: "Šukutė, unagi padažas, kimči majonezas", desc_en: "Scallop, unagi sauce, kimchi mayo", price: "8.5€", plate: "teal" }
      ]
    },
    {
      cat_lt: "Gunkan", cat_en: "Gunkan",
      hasTakelis: true,
      items: [
        { name: "Nagomi Special (1vnt)", desc_lt: "Deginta lašiša, šukutė, tobiko, sojos majonezas, unagi padažas", desc_en: "Seared salmon, scallop, tobiko, soy mayo, unagi sauce", price: "4.5€", plate: "yellow" },
        { name: "Sake Gunkan (2vnt)", desc_lt: "Lašiša, kimči majonezas, kimči sezamas, tobiko, shichimi", desc_en: "Salmon, kimchi mayo, kimchi sesame, tobiko, shichimi", price: "5.5€", plate: "white", spicy: true },
        { name: "Maguro Gunkan (2vnt)", desc_lt: "Tunas, kimči majonezas, kimči sezamas, shichimi", desc_en: "Tuna, kimchi mayo, kimchi sesame, shichimi", price: "6.5€", plate: "grey", spicy: true },
        { name: "Hotate Gunkan (2vnt)", desc_lt: "Šukutė, kimči majonezas, wakame, tobiko", desc_en: "Scallop, kimchi mayo, wakame, tobiko", price: "8.5€", plate: "teal" },
        { name: "Ikura Gunkan (2vnt)", desc_lt: "Ikura, agurkas", desc_en: "Ikura, cucumber", price: "8.5€", plate: "teal" }
      ]
    },
    {
      cat_lt: "Kepti Sushi", cat_en: "Hot Rolls",
      items: [
        { name: "Yaki Sake Roll", desc_lt: "Lašiša, kreminis sūris, salota, avokadas, unagi padažas", desc_en: "Salmon, cream cheese, lettuce, avocado, unagi sauce", price: "11€" },
        { name: "Maguro Tempura Roll", desc_lt: "Tunas, agurkas, wakame salotos, kreminis sūris, kimči majonezas", desc_en: "Tuna, cucumber, wakame salad, cream cheese, kimchi mayo", price: "11.5€" },
        { name: "Hot Kani Roll", desc_lt: "Surimi, avokadas, kreminis sūris, wasabi majonezas", desc_en: "Surimi, avocado, cream cheese, wasabi mayo", price: "12€" },
        { name: "Sake Kiiro Roll", desc_lt: "Kepta lašiša, mangas, kreminis sūris, svogūnų laiškai, karai padažas, kimči sezamas, žolelės", desc_en: "Fried salmon, mango, cream cheese, scallions, karai sauce, kimchi sesame, herbs", price: "13€" },
        { name: "Hot Unagi Maki", desc_lt: "Ungurys, lašiša, agurkas, tobiko, svogūnų laiškai, kimči majonezas, unagi padažas", desc_en: "Eel, salmon, cucumber, tobiko, scallions, kimchi mayo, unagi sauce", price: "13€" }
      ]
    },
    {
      cat_lt: "Onigiri", cat_en: "Onigiri",
      items: [
        { name: "Onigiri su teriyaki vištiena", desc_lt: "Ryžiai, nori lapas, teriyaki vištiena, sezamas, svogūnų laiškai", desc_en: "Rice, nori, teriyaki chicken, sesame, scallions", price: "5.9€" },
        { name: "Onigiri su lašiša", desc_lt: "Ryžiai, nori lapas, lašiša, tobiko, kimči majonezas, kimči sezamas, sriracha", desc_en: "Rice, nori, salmon, tobiko, kimchi mayo, kimchi sesame, sriracha", price: "6.9€", spicy: true },
        { name: "Onigiri su kepta lašiša ir ikura", desc_lt: "Ryžiai, nori lapas, kepta lašiša, ikura, tobiko, kimči majonezas, unagi padažas", desc_en: "Rice, nori, fried salmon, ikura, tobiko, kimchi mayo, unagi sauce", price: "7.9€" },
        { name: "Onigiri su tunu", desc_lt: "Ryžiai, nori lapas, tunas, tobiko, kalendra, raudonas svogūnas, karai majonezas, unagi padažas", desc_en: "Rice, nori, tuna, tobiko, cilantro, red onion, karai mayo, unagi sauce", price: "6.5€" }
      ]
    },
    {
      cat_lt: "Bowl'ai", cat_en: "Bowls",
      items: [
        { name: "Kaisen Bowl", desc_lt: "Ryžiai, tunas, lašiša, ungurys, wakame, avokadas, agurkas, kimči sezamas, sezamo aliejus, kimči majonezas, takuan, unagi padažas", desc_en: "Rice, tuna, salmon, eel, wakame, avocado, cucumber, kimchi sesame, sesame oil, kimchi mayo, takuan, unagi sauce", price: "14.9€" }
      ]
    },
    {
      cat_lt: "Sriubos", cat_en: "Soups",
      items: [
        { name: "Miso su tofu", desc_lt: "Tofu, džiovinti wakame dumbliai, svogūnų laiškai", desc_en: "Tofu, dried wakame seaweed, scallions", price: "4€", veg: true },
        { name: "Miso su lašiša", desc_lt: "Lašiša, džiovinti wakame dumbliai, svogūnų laiškai", desc_en: "Salmon, dried wakame seaweed, scallions", price: "5.5€" },
        { name: "Miso su shiitaki", desc_lt: "Shiitaki, džiovinti wakame dumbliai, svogūnų laiškai", desc_en: "Shiitake, dried wakame seaweed, scallions", price: "6€", veg: true },
        { name: "Tom Yum", desc_lt: "Tigrinės krevetės, lašiša, shiitaki grybai, kalendra, kokosų pieno sultinys, laimas", desc_en: "Tiger prawns, salmon, shiitake mushrooms, cilantro, coconut milk broth, lime", price: "10.9€", spicy: true }
      ]
    },
    {
      cat_lt: "Užkandžiai", cat_en: "Appetizers",
      items: [
        { name: "Mūsų gamybos kimči", desc_lt: "Kimči kopūstas, morkos, svogūnų laiškai", desc_en: "Homemade kimchi cabbage, carrots, scallions", price: "4.5€", spicy: true, veg: true },
        { name: "Wakame salotos", desc_lt: "Wakame, sezamo padažas", desc_en: "Wakame, sesame sauce", price: "6€", veg: true },
        { name: "Tofu", desc_lt: "Tofu, sezamų padažas, čili, wakame, sezamas", desc_en: "Tofu, sesame sauce, chili, wakame, sesame", price: "9€", veg: true },
        { name: "Edamame", desc_lt: "Edamame pupelės su druska", desc_en: "Edamame beans with salt", price: "6€", veg: true },
        { name: "Spicy edamame", desc_lt: "Edamame pupelės, unagi padažas, sriracha, sezamo sėklos", desc_en: "Edamame beans, unagi sauce, sriracha, sesame seeds", price: "6.5€", spicy: true, veg: true },
        { name: "Mūsų gamybos won ton su krevetėmis (8vnt)", desc_lt: "Tigrinės krevetės, apelsinas, svogūnų laiškai, imbieras, kimči majonezas", desc_en: "Tiger prawns, orange, scallions, ginger, kimchi mayo", price: "10€" },
        { name: "Mūsų gamybos gyoza su kiauliena (6 vnt)", desc_lt: "Kiauliena, česnakas, svogūnų laiškai, imbieras, sezamų aliejus, baltagūžis kopūstas, brandinta soja", desc_en: "Pork, garlic, scallions, ginger, sesame oil, white cabbage, aged soy", price: "11€" },
        { name: "Tuno ir lašišos tartaras", desc_lt: "Tuno ir lašišos tartaras, wasabi majonezas, sezamo sėklos, svogūnų laiškai, nori lapo traškutis", desc_en: "Tuna and salmon tartare, wasabi mayo, sesame seeds, scallions, crispy nori", price: "12€" },
        { name: "Tigrinės krevetės tempuroje (6vnt)", desc_lt: "Tigrinės krevetės tempuros tešloje, kimči majonezas, unagi padažas", desc_en: "Tiger prawns in tempura batter, kimchi mayo, unagi sauce", price: "12.9€" },
        { name: "Tuno sashimi", desc_lt: "Tunas, agurkas, takuan, imbieras, kizami wasabi", desc_en: "Tuna, cucumber, takuan, ginger, kizami wasabi", price: "13.5€" },
        { name: "Lašišos sashimi", desc_lt: "Lašiša, agurkas, takuan, imbieras, kizami wasabi", desc_en: "Salmon, cucumber, takuan, ginger, kizami wasabi", price: "12€" },
        { name: "Tuno tataki", desc_lt: "Tunas, kalendra, čili, apelsinas, laimo lapas", desc_en: "Tuna, cilantro, chili, orange, lime leaf", price: "13.5€" }
      ]
    },
    {
      cat_lt: "Desertai", cat_en: "Desserts",
      items: [
        { name: "Mochi (1 vnt)", desc_lt: "Įvairių skonių, teirautis padavėjų", desc_en: "Various flavors, please ask your waiter", price: "2.9€" }
      ]
    }
  ],
  drinks: [
    {
      cat_lt: "Signature Cocktails", cat_en: "Signature Cocktails",
      items: [
        { name: "NAKAMA SAKE", desc_lt: "Vodka, sake, homemade vanilla strawberry syrup, peach air bubbles", desc_en: "Vodka, sake, homemade vanilla strawberry syrup, peach air bubbles", price: "12€" },
        { name: "PINEAPPLE EXPRESS", desc_lt: "Amaretto liqueur, homemade pineapple & cinnamon syrup, egg white", desc_en: "Amaretto liqueur, homemade pineapple & cinnamon syrup, egg white", price: "12€" },
        { name: "MANGO DELIGHT", desc_lt: "Gin, elderflower syrup, homemade mango syrup, fresh lime juice", desc_en: "Gin, elderflower syrup, homemade mango syrup, fresh lime juice", price: "12€" },
        { name: "MONK JUICE", desc_lt: "Vodka, house strawberry ginger beer, peach liqueur", desc_en: "Vodka, house strawberry ginger beer, peach liqueur", price: "12€" },
        { name: "ZEN GARDEN", desc_lt: "Gin, elderflower liqueur, cucumber, egg white", desc_en: "Gin, elderflower liqueur, cucumber, egg white", price: "12€" },
        { name: "YUZU SPRITZ", desc_lt: "Yuzu liqueur, prosecco, soda", desc_en: "Yuzu liqueur, prosecco, soda", price: "9€" },
        { name: "BUTTER OLD FASHIONED", desc_lt: "Bourbon, homemade buttery brown sugar syrup, chocolate bitters", desc_en: "Bourbon, homemade buttery brown sugar syrup, chocolate bitters", price: "12€" },
        { name: "SPICE RUSH", desc_lt: "White rum, banana rum, tangerine liqueur, spicy mango agave", desc_en: "White rum, banana rum, tangerine liqueur, spicy mango agave", price: "12€" },
        { name: "FEELING PEACHY", desc_lt: "Gin, homemade peach syrup, yuzu syrup, fresh lemon juice, egg white", desc_en: "Gin, homemade peach syrup, yuzu syrup, fresh lemon juice, egg white", price: "12€" },
        { name: "KIMYONA MARTINI", desc_lt: "Gin/vodka, Japanese tomato liqueur, dry vermouth", desc_en: "Gin/vodka, Japanese tomato liqueur, dry vermouth", price: "12€" },
        { name: "YUZU TOGARASHI", desc_lt: "Tequila, yuzu liqueur, spicy pear syrup, fresh lime juice", desc_en: "Tequila, yuzu liqueur, spicy pear syrup, fresh lime juice", price: "12€" },
        { name: "MATCHA DAIQUIRI", desc_lt: "White rum, matcha, mint, sugar syrup, fresh lime juice", desc_en: "White rum, matcha, mint, sugar syrup, fresh lime juice", price: "13€" },
        { name: "SOULSHAKERS RUBY", desc_lt: "Tequila, Martini bitter, homemade peach syrup, fresh lemon juice, rosemary", desc_en: "Tequila, Martini bitter, homemade peach syrup, fresh lemon juice, rosemary", price: "12€" },
        { name: "BUKIYOU", desc_lt: "Gin, lychee syrup, fresh lemon juice, jasmine milk tea", desc_en: "Gin, lychee syrup, fresh lemon juice, jasmine milk tea", price: "12€" }
      ]
    }
  ]
};

const DICTIONARY = {
  lt: {
    nav: {
      experience: "Patirtis", kaiten: "Kaiten", menu: "Meniu",
      lunch: "Verslo Pietūs", bar: "Baras", delivery: "Pristatymas",
      about: "Apie mus", careers: "Karjera", contact: "Kontaktai"
    },
    actions: {
      reserve: "Rezervuoti stalą",
      viewMenu: "Žiūrėti meniu",
      downloadMenu: "Atsisiųsti PDF",
      orderOnline: "Užsakyti į namus",
      getDirections: "Gauti nuorodas"
    },
    hero: {
      title1: "nagomi",
      title2: "KAITEN SUSHI",
      title3: "VILNIUJE",
      subtitle: "Šiuolaikinė japonų virtuvės patirtis."
    },
    experience: {
      tag: "Koncepcija",
      title: "NAGOMI PATIRTIS",
      text: "Nagomi į Vilnių atneša autentišką japoniško valgymo ritmą. Restorano ašis – nenutrūkstamai judantis Kaiten konvejeris. Svečiai kviečiami stebėti, rinktis ir mėgautis pro šalį keliaujančiais patiekalais, taip kurdami dinamišką ir asmeninę kulinarinę kelionę. Esant specifiniams norams, mūsų šefai paruoš patiekalus pagal jūsų užsakymą ir patieks tiesiai ant jūsų stalo.",
      steps: [
        { title: "PAMATYTI", desc: "Stebėkite šviežiai paruoštus patiekalus keliaujančius konvejeriu." },
        { title: "PASIRINKTI", desc: "Išsirinkite labiausiai akį traukiančias lėkštes." },
        { title: "MĖGAUTIS", desc: "Patirkite modernios Japonijos skonius." }
      ]
    },
    kaiten: {
      title: "KAITEN RITMAS",
      text: "Nepertraukiamas meistriškumo srautas tiesiai prieš jūsų akis."
    },
    menuPreview: {
      tag: "Kulinarija",
      title: "SUKURTA SU TIKSLUMU",
      text: "Mūsų meniu gerbia tradicines japonų technikas, tuo pačiu priimdamas šiuolaikinius skonius. Nuo nepriekaištingo sashimi iki modernių sušių ritinėlių ir šildančių patiekalų.",
      cta: "Atidaryti Restorano Meniu"
    },
    lunch: {
      tag: "Vidurdienis",
      title: "VERSLO PIETŪS",
      text: "Rafinuota pauzė jūsų darbo dienoje. Siūlome darbo dienomis, pristatydami subalansuotus ir tikslius japoniškus derinius.",
      time: "Darbo dienomis 11:00–14:00"
    },
    bar: {
      tag: "Gėrimai",
      title: "KOKTEILIŲ BARAS",
      text: "Atmosferinė erdvė, skirta moderniai miksologijai. Atraskite kokteilius, įkvėptus japoniškų skonių – yuzu, matcha ir aukščiausios kokybės sakės – kartu su kruopščiai atrinktu spiritinių gėrimų ir vynų asortimentu.",
      cta: "Žiūrėti Gėrimų Meniu"
    },
    order: {
      tag: "Pristatymas",
      title: "NAGOMI NAMUOSE",
      text: "Mėgaukitės rafinuotu Nagomi skoniu, kad ir kur būtumėte. Pasirinkite pristatymo platformą užsakymui internetu.",
      wolt: "Užsakyti per Wolt",
      bolt: "Užsakyti per Bolt Food"
    },
    about: {
      tag: "Mūsų Istorija",
      title: "RASTI HARMONIJĄ",
      text: "Žodis 'Nagomi' įkūnija harmoniją, ramybę ir malonias bendras akimirkas. Šią erdvę sukūrėme atspindėti tuos principus – sujungdami energingą japoniško Kaiten valgymo kultūrą su rafinuota, ramia premium klasės Europos restorano atmosfera. Kiekviena detalė, nuo medžiagų iki meniu, parinkta siekiant sukurti įsimintiną svetingumo patirtį."
    },
    careers: {
      tag: "Prisijunkite prie mūsų",
      title: "KARJEROS GALIMYBĖS",
      text: "Ieškote naujo iššūkio? Užpildykite anketą žemiau ir prisijunkite prie nagomi komandos.",
      firstName: "Vardas",
      lastName: "Pavardė",
      phone: "Telefono numeris",
      email: "El. pašto adresas",
      experience: "Darbo patirtis",
      experiencePlaceholder: "Trumpai aprašykite savo ankstesnę darbo patirtį",
      workingHours: "Darbo valandos",
      fullTime: "Visa darbo diena",
      partTime: "Ne visa darbo diena",
      position: "Pageidaujama pozicija",
      positions: {
        sushiChef: "Sushi Šefas (MasterChef)",
        waitress: "Padavėja(s)",
        support: "Pagalbinis darbuotojas"
      },
      selectPlaceholder: "Pasirinkite",
      city: "Miestas",
      residency: "Ar esate vietinis, ar iš užsienio?",
      local: "Vietinis",
      international: "Iš užsienio",
      salary: "Pageidaujamas atlyginimas (neprivaloma)",
      cv: "Prisekite CV",
      cvHint: "Spauskite, kad įkeltumėte CV (PDF arba Word)",
      ageConfirm: "Patvirtinu, kad esu vyresnis (-ė) nei 18 metų",
      submit: "Pateikti anketą",
      submitting: "Siunčiama...",
      successTitle: "Ačiū!",
      successText: "Jūsų anketa sėkmingai gauta. Netrukus su jumis susisieksime.",
      errorText: "Nepavyko išsiųsti anketos. Bandykite dar kartą arba parašykite mums el. paštu."
    },
    location: {
      title: "VIETA IR LAIKAS",
      hoursLabel: "Darbo Laikas",
      contactLabel: "Kontaktai",
      addressLabel: "Adresas",
      hours: [
        { day: "Pirmadienis", time: "Uždaryta" },
        { day: "Antradienis - Ketvirtadienis", time: "11:00–22:00" },
        { day: "Penktadienis", time: "11:00–23:00" },
        { day: "Šeštadienis", time: "12:00–22:00" },
        { day: "Sekmadienis", time: "12:00–20:00" }
      ]
    },
    finalCta: {
      title: "JŪSŲ STALIUKAS LAUKIA",
      subtitle: "Prisijunkite prie mūsų nepamirštamai Kaiten sushi patirčiai."
    },
    footer: {
      rights: "Visos teisės saugomos.",
      privacy: "Privatumo politika",
      cookies: "Slapukų politika",
      careers: "Karjera"
    }
  },
  en: {
    nav: {
      experience: "Experience", kaiten: "Kaiten", menu: "Menu",
      lunch: "Business Lunch", bar: "Bar", delivery: "Delivery",
      about: "About", careers: "Careers", contact: "Contact"
    },
    actions: {
      reserve: "Reserve a Table",
      viewMenu: "View Menu",
      downloadMenu: "Download PDF",
      orderOnline: "Order Online",
      getDirections: "Get Directions"
    },
    hero: {
      title1: "nagomi",
      title2: "KAITEN SUSHI",
      title3: "IN VILNIUS",
      subtitle: "A contemporary Japanese dining experience."
    },
    experience: {
      tag: "The Concept",
      title: "THE NAGOMI EXPERIENCE",
      text: "Nagomi brings the authentic rhythm of Japanese dining to Vilnius. Centered around our continuous Kaiten conveyor belt, guests are invited to observe, select, and enjoy plates as they pass, creating a dynamic and personal culinary journey. For specific cravings, our chefs prepare made-to-order specialties delivered directly to your table.",
      steps: [
        { title: "SEE", desc: "Watch freshly prepared dishes travel along the belt." },
        { title: "CHOOSE", desc: "Select the plates that catch your eye." },
        { title: "ENJOY", desc: "Experience the flavours of modern Japan." }
      ]
    },
    kaiten: {
      title: "THE RHYTHM OF KAITEN",
      text: "A seamless flow of craftsmanship, right before your eyes."
    },
    menuPreview: {
      tag: "Culinary",
      title: "CRAFTED WITH PRECISION",
      text: "Our menu respects traditional Japanese techniques while embracing contemporary flavours. From pristine sashimi to intricate modern rolls and warm comforting dishes.",
      cta: "Open Restaurant Menu"
    },
    lunch: {
      tag: "Midday",
      title: "BUSINESS LUNCH",
      text: "A refined pause in your workday. Available Monday through Friday, offering balanced and precise Japanese combinations.",
      time: "Weekdays 11:00–14:00"
    },
    bar: {
      tag: "Drinks",
      title: "THE COCKTAIL BAR",
      text: "An atmospheric space dedicated to modern mixology. Discover cocktails inspired by Japanese flavours—incorporating yuzu, matcha, and premium sake—alongside a curated selection of spirits and wines.",
      cta: "View Drinks Menu"
    },
    order: {
      tag: "Delivery",
      title: "NAGOMI AT HOME",
      text: "Enjoy the refined taste of Nagomi wherever you are. Choose your preferred delivery platform to order online.",
      wolt: "Order with Wolt",
      bolt: "Order with Bolt Food"
    },
    about: {
      tag: "Our Story",
      title: "FINDING HARMONY",
      text: "The word 'Nagomi' embodies harmony, calm, and pleasant shared moments. We designed this space to reflect those principles—blending the energetic culture of Japanese Kaiten dining with the sophisticated, calm atmosphere of a premium European restaurant. Every detail, from the materials to the menu, is chosen to create a memorable hospitality experience."
    },
    careers: {
      tag: "Join Our Team",
      title: "CAREER OPPORTUNITIES",
      text: "Looking for a new challenge? Fill out the form below to apply and join the nagomi team.",
      firstName: "First Name",
      lastName: "Last Name",
      phone: "Phone Number",
      email: "Email Address",
      experience: "Work Experience",
      experiencePlaceholder: "Briefly describe your previous work experience",
      workingHours: "Working Hours",
      fullTime: "Full-time",
      partTime: "Part-time",
      position: "Desired Position",
      positions: {
        sushiChef: "Sushi MasterChef",
        waitress: "Waitress",
        support: "Support Worker"
      },
      selectPlaceholder: "Select",
      city: "City",
      residency: "Are you local or international?",
      local: "Local",
      international: "International",
      salary: "Desired Salary (optional)",
      cv: "Attach your CV",
      cvHint: "Click to upload your CV (PDF or Word)",
      ageConfirm: "I confirm that I am over 18 years old",
      submit: "Submit Application",
      submitting: "Sending...",
      successTitle: "Thank you!",
      successText: "Your application has been received. We'll be in touch with you soon.",
      errorText: "We couldn't send your application. Please try again or email us directly."
    },
    location: {
      title: "LOCATION & HOURS",
      hoursLabel: "Opening Hours",
      contactLabel: "Contact",
      addressLabel: "Address",
      hours: [
        { day: "Monday", time: "Closed" },
        { day: "Tuesday - Thursday", time: "11:00–22:00" },
        { day: "Friday", time: "11:00–23:00" },
        { day: "Saturday", time: "12:00–22:00" },
        { day: "Sunday", time: "12:00–20:00" }
      ]
    },
    finalCta: {
      title: "YOUR TABLE IS WAITING",
      subtitle: "Join us for an unforgettable Kaiten sushi experience."
    },
    footer: {
      rights: "All rights reserved.",
      privacy: "Privacy Policy",
      cookies: "Cookie Policy",
      careers: "Careers"
    }
  }
};

const useIntersectionObserver = (options = {}) => {
  const [isIntersecting, setIsIntersecting] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setIsIntersecting(true);
        if (ref.current) observer.unobserve(ref.current);
      }
    }, { threshold: 0.1, ...options });

    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, [options]);

  return [ref, isIntersecting];
};

const FadeInSection = ({ children, className = "", delay = 0 }) => {
  const [ref, isVisible] = useIntersectionObserver();
  return (
    <div
      ref={ref}
      className={`transition-all duration-1000 ease-out ${
        isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'
      } ${className}`}
      style={{ transitionDelay: `${delay}ms` }}
    >
      {children}
    </div>
  );
};

const Button = ({ children, variant = 'primary', href, className = "", onClick, external }) => {
  const baseStyle = "inline-flex items-center justify-center px-8 py-3 text-sm tracking-widest uppercase transition-all duration-300 focus:outline-none rounded-full font-medium cursor-pointer";
  const variants = {
    primary: "bg-[#C5B078] text-white hover:bg-[#b5a16c] shadow-md hover:shadow-lg",
    secondary: "bg-transparent text-[#1A1A1A] border border-[#C5B078] hover:bg-[#C5B078] hover:text-white",
    light: "bg-transparent text-[#F8F5EE] border border-[#F8F5EE] hover:bg-[#F8F5EE] hover:text-[#1A1A1A]",
    outline: "bg-transparent text-[#1A1A1A] border border-[#1A1A1A] hover:bg-[#1A1A1A] hover:text-[#F8F5EE]"
  };

  if (href) {
    return (
      <a href={href} target={external ? "_blank" : "_self"} rel={external ? "noopener noreferrer" : ""} className={`${baseStyle} ${variants[variant]} ${className}`}>
        {children}
      </a>
    );
  }

  return (
    <button onClick={onClick} className={`${baseStyle} ${variants[variant]} ${className}`}>
      {children}
    </button>
  );
};

const SectionHeader = ({ tag, title, light = false }) => (
  <div className="mb-12 md:mb-16">
    {tag && (
      <span className={`block text-xs font-sans tracking-[0.2em] uppercase mb-4 text-[#C5B078]`}>
        {tag}
      </span>
    )}
    <h2 className={`font-serif text-3xl md:text-5xl tracking-tight leading-tight ${light ? 'text-[#F8F5EE]' : 'text-[#1A1A1A]'}`}>
      {title}
    </h2>
  </div>
);

const TikTokIcon = ({ size = 20 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 15.68a6.32 6.32 0 0 0 6.36 6.32A6.33 6.33 0 0 0 17.7 15.68V8.66a8.4 8.4 0 0 0 4.3 1.22V6.43a4.7 4.7 0 0 1-2.41-.97Z"/>
  </svg>
);

const ChiliIcon = () => (
  <svg className="w-4 h-4 text-red-600 inline-block ml-1" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12.924 3.033c-.705-1.503-2.617-2.678-4.298-2.678-1.597 0-2.441.979-2.909 2.155-.71 1.79.034 4.542.484 6.09 1.106 3.805 2.502 6.574 3.328 10.158.498 2.164 1.722 4.093 3.513 5.031 2.378 1.246 5.378.077 5.867-2.651.523-2.91-1.092-4.102-2.191-4.322-.924-.185-1.596.11-2.023.708-.415.58-.696 1.492-.525 2.553.25 1.558.078 2.012-.472 2.383-1.077.728-2.714-.492-3.14-2.827-.852-4.66-2.529-7.391-3.666-10.748-.521-1.536-1.127-3.957-.468-5.617.26-.653.649-1.072 1.405-1.072 1.353 0 2.576 1.229 2.946 2.019l2.149-1.182z"/>
  </svg>
);

const LeafIcon = () => (
  <svg className="w-4 h-4 text-green-600 inline-block ml-1" viewBox="0 0 24 24" fill="currentColor">
    <path d="M17.622 1c-1.897 0-4.301.766-6.494 2.195C8.941 1.76 6.51 1 4.591 1 2.457 1 1 2.574 1 5.385c0 3.016 1.241 6.84 4.293 11.002.508.694 1.05 1.365 1.621 2.012l-1.636 4.601h2.511l1.109-3.118c1.332 1.218 2.821 2.215 4.5 3.064 1.261-.926 2.597-2.008 3.968-3.266 2.94-2.7 5.634-6.45 5.634-11.458C23 4.143 20.732 1 17.622 1zm-3.626 15.309c-2.458-1.581-4.526-4.223-5.328-6.846L9.63 9.125c.616 2.348 2.176 4.708 4.221 6.136l-.229.048zm2.463-3.79c-1.564-1.393-2.915-3.327-3.411-4.996l1.011-.278c.365 1.488 1.451 3.208 2.724 4.453l-.324.821z"/>
  </svg>
);

const PLATE_COLORS = {
  yellow: 'bg-[#E5DF61]',
  white: 'bg-[#FFFFFF]',
  grey: 'bg-[#B4B09B]',
  lightGreen: 'bg-[#A6C276]',
  teal: 'bg-[#648C7E]'
};

const MenuModal = ({ isOpen, onClose, initialTab = 'food', t, lang }) => {
  const [activeTab, setActiveTab] = useState(initialTab);
  const activePdf = MENU_PDF_PATHS[activeTab][lang];

  useEffect(() => {
    if (isOpen) {
      setActiveTab(initialTab);
      document.body.style.overflow = 'hidden';
    } else {
      document.body.style.overflow = 'unset';
    }
    return () => { document.body.style.overflow = 'unset'; };
  }, [isOpen, initialTab]);

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-[#F8F5EE] overflow-y-auto">
      <div className="min-h-screen w-full max-w-5xl mx-auto px-6 py-12 md:py-20 relative">

        <button
          onClick={onClose}
          aria-label={lang === 'lt' ? 'Uždaryti meniu' : 'Close menu'}
          className="fixed top-4 right-4 md:top-6 md:right-6 w-12 h-12 flex items-center justify-center text-[#1A1A1A] hover:text-[#C5B078] transition-colors bg-white rounded-full shadow-lg border border-[#1A1A1A]/15 z-[110]"
        >
          <X size={24} strokeWidth={2.5} />
        </button>

        <div className="text-center mb-12">
          <h2 className="font-serif text-4xl md:text-5xl text-[#1A1A1A] uppercase tracking-wide">{lang === 'lt' ? 'MENIU' : 'MENU'}</h2>
        </div>

        <div className="animate-in fade-in duration-500">
          <div className="max-w-4xl mx-auto mb-16">
            <iframe
              src={activePdf}
              title={`${activeTab === 'food' ? (lang === 'lt' ? 'Restorano meniu' : 'Restaurant menu') : (lang === 'lt' ? 'Kokteilių meniu' : 'Cocktail menu')} PDF`}
              className="w-full h-[70vh] min-h-[560px] border border-[#1A1A1A]/10 bg-white shadow-sm"
            />
          </div>

          {activeTab === 'food' ? (
            <div className="hidden space-y-16">

              <div className="flex flex-wrap justify-center items-center gap-4 md:gap-8 bg-[#1A1A1A]/5 py-4 px-6 rounded-full max-w-3xl mx-auto mb-16">
                <div className="flex items-center gap-2"><span className="w-5 h-5 rounded-full shadow-sm border border-black/5 bg-[#E5DF61]"></span><span className="text-sm font-bold text-[#1A1A1A]/70">4.50 €</span></div>
                <div className="flex items-center gap-2"><span className="w-5 h-5 rounded-full shadow-sm border border-black/5 bg-[#FFFFFF]"></span><span className="text-sm font-bold text-[#1A1A1A]/70">5.50 €</span></div>
                <div className="flex items-center gap-2"><span className="w-5 h-5 rounded-full shadow-sm border border-black/5 bg-[#B4B09B]"></span><span className="text-sm font-bold text-[#1A1A1A]/70">6.50 €</span></div>
                <div className="flex items-center gap-2"><span className="w-5 h-5 rounded-full shadow-sm border border-black/5 bg-[#A6C276]"></span><span className="text-sm font-bold text-[#1A1A1A]/70">7.50 €</span></div>
                <div className="flex items-center gap-2"><span className="w-5 h-5 rounded-full shadow-sm border border-black/5 bg-[#648C7E]"></span><span className="text-sm font-bold text-[#1A1A1A]/70">8.50 €</span></div>
              </div>

              {MENU_DATA.food.map((section, idx) => (
                <div key={idx} className="max-w-4xl mx-auto">
                  <div className="flex justify-between items-end border-b border-[#1A1A1A] pb-2 mb-8">
                     <h3 className="font-sans text-sm tracking-[0.2em] uppercase text-[#1A1A1A] font-bold">{section[`cat_${lang}`]}</h3>
                     {section.hasTakelis && (
                       <div className="flex gap-8 text-xs font-bold tracking-widest text-[#1A1A1A]/50">
                         <span>TAKELIS</span>
                         <span>{lang === 'lt' ? 'KAINA' : 'PRICE'}</span>
                       </div>
                     )}
                  </div>
                  <div className="flex flex-col gap-y-6">
                    {section.items.map((item, i) => (
                      <div key={i} className="flex justify-between items-start border-b border-[#1A1A1A]/5 pb-4">
                        <div className="pr-4 flex-1">
                          <h4 className="font-serif text-lg text-[#1A1A1A] mb-1 flex items-center flex-wrap gap-x-2">
                            {item.name}
                            <span className="flex items-center">
                              {item.spicy && <ChiliIcon />}
                              {item.veg && <LeafIcon />}
                            </span>
                          </h4>
                          <p className="text-[#1A1A1A]/60 text-sm leading-relaxed">{item[`desc_${lang}`]}</p>
                        </div>
                        <div className="flex items-center gap-10 min-w-[120px] justify-end">
                           {section.hasTakelis && (
                             <div className="w-6 flex justify-center">
                               {item.plate && <div className={`w-6 h-6 rounded-full shadow-md border border-black/5 ${PLATE_COLORS[item.plate]}`}></div>}
                             </div>
                           )}
                           <span className="font-sans text-[#1A1A1A] font-bold whitespace-nowrap min-w-[40px] text-right">{item.price}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className="hidden space-y-16">
               {MENU_DATA.drinks.map((section, idx) => (
                <div key={idx} className="max-w-4xl mx-auto">
                  <div className="flex justify-between items-end border-b border-[#1A1A1A] pb-2 mb-8">
                     <h3 className="font-sans text-sm tracking-[0.2em] uppercase text-[#1A1A1A] font-bold">{section[`cat_${lang}`]}</h3>
                  </div>
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
                    {section.items.map((item, i) => (
                      <div key={i} className="flex justify-between items-start border-b border-[#1A1A1A]/5 pb-4">
                        <div className="pr-4">
                          <h4 className="font-serif text-lg text-[#1A1A1A] mb-1">{item.name}</h4>
                          <p className="text-[#1A1A1A]/60 text-sm leading-relaxed">{item[`desc_${lang}`]}</p>
                        </div>
                        <span className="font-sans text-[#1A1A1A] font-bold whitespace-nowrap">{item.price}</span>
                      </div>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>

        <div className="mt-8 pt-8 border-t border-[#1A1A1A]/10 flex justify-center">
            <a href={activePdf} target="_blank" rel="noopener noreferrer" className="flex items-center text-sm tracking-widest uppercase text-[#1A1A1A] hover:text-[#C5B078] transition-colors">
              <Download className="w-4 h-4 mr-2" />
              {t.actions.downloadMenu}
            </a>
        </div>

      </div>
    </div>
  );
};

const Navbar = ({ lang, setLang, t }) => {
  const [scrolled, setScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollTo = (id) => {
    setMobileMenuOpen(false);
    const el = document.getElementById(id);
    if (el) {
      const y = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top: y, behavior: 'smooth' });
    }
  };

  const navLinks = [
    { id: 'experience', label: t.nav.experience },
    { id: 'kaiten', label: t.nav.kaiten },
    { id: 'menu', label: t.nav.menu },
    { id: 'lunch', label: t.nav.lunch },
    { id: 'bar', label: t.nav.bar },
    { id: 'delivery', label: t.nav.delivery },
    { id: 'about', label: t.nav.about },
    { id: 'location', label: t.nav.contact },
  ];

  return (
    <>
      <nav className={`fixed w-full z-50 transition-all duration-500 ${scrolled ? 'bg-[#F8F5EE]/95 backdrop-blur-md shadow-sm py-4' : 'bg-transparent py-6'}`}>
        <div className="max-w-[1400px] mx-auto px-6 lg:px-12 flex justify-between items-center">

          <div className="flex-shrink-0 cursor-pointer" onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>
            <img
              src="assets/logo/nagomi-logo.svg"
              alt="nagomi logo"
              className={`h-9 md:h-11 w-auto object-contain transition-opacity ${scrolled ? 'opacity-100' : 'opacity-100'}`}
            />
          </div>

          <div className="hidden xl:flex items-center space-x-6">
            <div className="flex space-x-5">
              {navLinks.map((link) => (
                <button
                  key={link.id}
                  onClick={() => {
                    if (link.href) {
                      window.location.href = link.href;
                      return;
                    }
                    scrollTo(link.id);
                  }}
                  className={`text-xs tracking-widest uppercase hover:text-[#C5B078] transition-colors ${scrolled ? 'text-[#1A1A1A]' : 'text-stone-200'}`}
                >
                  {link.label}
                </button>
              ))}
            </div>

            <div className="flex items-center space-x-5 pl-5 border-l border-white/20">
              <div className="flex space-x-2">
                {['lt', 'en'].map((l) => (
                  <button
                    key={l}
                    onClick={() => setLang(l)}
                    className={`text-xs tracking-widest uppercase transition-colors ${lang === l ? 'text-[#C5B078] font-bold' : (scrolled ? 'text-[#1A1A1A] hover:text-[#C5B078]' : 'text-stone-200 hover:text-white')}`}
                  >
                    {l}
                  </button>
                ))}
              </div>
              <Button href={CONFIG.links.reservation[lang]} external variant="primary" className="py-2.5 px-6 text-xs">
                {t.actions.reserve}
              </Button>
            </div>
          </div>

          <div className="xl:hidden flex items-center space-x-4">
             <div className="flex space-x-2">
                {['lt', 'en'].map((l) => (
                  <button
                    key={l}
                    onClick={() => setLang(l)}
                    className={`text-xs tracking-widest uppercase transition-colors ${lang === l ? 'text-[#C5B078] font-bold' : (scrolled ? 'text-[#1A1A1A]' : 'text-stone-50')}`}
                  >
                    {l}
                  </button>
                ))}
              </div>
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className={`p-1 focus:outline-none transition-colors ${scrolled ? 'text-[#1A1A1A]' : 'text-[#F8F5EE]'}`}
              aria-label="Toggle menu"
            >
              {mobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
            </button>
          </div>
        </div>
      </nav>

      <div className={`fixed inset-0 bg-[#1A1A1A] z-40 transition-transform duration-500 ease-in-out flex flex-col justify-center items-center ${mobileMenuOpen ? 'translate-y-0' : '-translate-y-full'}`}>
        <div className="flex flex-col items-center space-y-6 w-full px-6 overflow-y-auto max-h-screen py-20">
          {navLinks.map((link) => (
            <button
              key={link.id}
              onClick={() => {
                if (link.href) {
                  window.location.href = link.href;
                  return;
                }
                scrollTo(link.id);
              }}
              className="font-serif text-2xl text-stone-200 hover:text-[#C5B078] transition-colors"
            >
              {link.label}
            </button>
          ))}
          <div className="pt-8 w-full flex flex-col space-y-4 items-center">
            <Button href={CONFIG.links.reservation[lang]} external variant="primary" className="w-full max-w-xs">
              {t.actions.reserve}
            </Button>
            <Button onClick={() => { setMobileMenuOpen(false); scrollTo('delivery'); }} variant="light" className="w-full max-w-xs">
              {t.actions.orderOnline}
            </Button>
          </div>
        </div>
      </div>
    </>
  );
};

const HeroSection = ({ t, lang, onOpenMenu }) => (
  <section className="relative h-screen min-h-[600px] flex items-center justify-center overflow-hidden bg-zinc-900">
    <div className="absolute inset-0 z-0">
      <img
        src="assets/images/hero-sushi.jpg"
        alt="Nagomi Sushi Preparation"
        className="w-full h-full object-cover opacity-60 transform scale-105 transition-transform duration-[20s] hover:scale-100"
      />
      <div className="absolute inset-0 bg-gradient-to-b from-zinc-950/70 via-zinc-900/30 to-zinc-950/80"></div>
    </div>

    <div className="relative z-10 text-center px-6 mt-16 max-w-4xl mx-auto">
      <FadeInSection delay={200}>
        <h1 className="font-serif text-5xl md:text-7xl lg:text-8xl text-stone-50 tracking-tighter leading-[1.1] mb-6">
          <span className="block mb-4 font-serif text-3xl md:text-4xl lowercase tracking-[0.1em] text-stone-300">{t.hero.title1}</span>
          <span className="block">{t.hero.title2}</span>
          <span className="block italic font-light text-stone-300">{t.hero.title3}</span>
        </h1>
      </FadeInSection>

      <FadeInSection delay={400}>
        <p className="text-stone-300 text-lg md:text-xl font-light mb-10 tracking-wide">
          {t.hero.subtitle}
        </p>
      </FadeInSection>

      <FadeInSection delay={600} className="flex flex-col sm:flex-row items-center justify-center gap-4">
        <Button href={CONFIG.links.reservation[lang]} external variant="primary" className="w-full sm:w-auto">
          {t.actions.reserve}
        </Button>
        <Button onClick={() => onOpenMenu('food')} variant="light" className="w-full sm:w-auto">
          {t.actions.viewMenu}
        </Button>
      </FadeInSection>
    </div>

    <div className="absolute bottom-10 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center animate-bounce">
      <div className="w-[1px] h-12 bg-stone-500/50 relative overflow-hidden">
        <div className="absolute top-0 left-0 w-full h-full bg-[#C5B078]" style={{ animation: 'scroll 2s ease-in-out infinite' }}></div>
      </div>
    </div>
  </section>
);

const ExperienceSection = ({ t }) => (
  <section id="experience" className="py-16 md:py-20 bg-[#F8F5EE] relative overflow-hidden">
    <div className="absolute right-4 md:right-12 top-12 md:top-24 writing-vertical-rl text-[#C5B078] opacity-[0.07] text-7xl md:text-9xl font-serif tracking-[0.3em] select-none pointer-events-none" style={{ writingMode: 'vertical-rl' }}>
      和み
    </div>

    <div className="max-w-7xl mx-auto px-6 lg:px-12 relative z-10">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-12 items-center">
        <FadeInSection>
          <SectionHeader tag={t.experience.tag} title={t.experience.title} />
          <p className="text-[#1A1A1A]/80 text-lg md:text-xl leading-relaxed mb-10">
            {t.experience.text}
          </p>
          <div className="space-y-6">
            {t.experience.steps.map((step, idx) => (
              <div key={idx} className="flex flex-col">
                <span className="font-sans text-xs tracking-widest uppercase text-[#C5B078] mb-1">0{idx + 1}</span>
                <h4 className="font-serif text-xl text-[#1A1A1A] mb-2">{step.title}</h4>
                <p className="text-[#1A1A1A]/60 text-sm">{step.desc}</p>
              </div>
            ))}
          </div>
        </FadeInSection>
        <FadeInSection delay={200} className="relative h-[380px] md:h-[460px] rounded-sm overflow-hidden shadow-xl">
          <img
            src="assets/images/kaiten-experience.jpg"
            alt="Kaiten Sushi Experience"
            className="absolute inset-0 w-full h-full object-cover"
          />
        </FadeInSection>
      </div>
    </div>
  </section>
);

const KaitenSection = ({ t }) => {
  const plates = Array(12).fill(0).map((_, i) => {
    const photos = [
      'assets/images/sushi-01.jpg',
      'assets/images/sushi-02.jpg',
      'assets/images/sushi-03.jpg',
      'assets/images/sushi-04.jpg',
      'assets/images/sushi-05.jpg',
      'assets/images/sushi-06.jpg'
    ];

    const selectedPhoto = photos[i % photos.length];

    return (
      <div key={i} className="flex-shrink-0 w-48 h-48 md:w-56 md:h-56 mx-6 rounded-full bg-white shadow-[0_15px_40px_-15px_rgba(0,0,0,0.2)] flex items-center justify-center relative group">
        <div className="w-[90%] h-[90%] rounded-full overflow-hidden border border-[#F8F5EE]">
          <img
            src={selectedPhoto}
            alt="Sushi Piece"
            className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
          />
        </div>
      </div>
    );
  });

  return (
    <section id="kaiten" className="py-16 bg-[#F8F5EE] overflow-hidden border-y border-[#1A1A1A]/5">
      <div className="text-center mb-10 px-6 relative z-10">
        <h2 className="font-serif text-3xl md:text-4xl text-[#1A1A1A] mb-4">{t.kaiten.title}</h2>
        <p className="text-[#1A1A1A]/60 font-sans tracking-wide uppercase text-sm">{t.kaiten.text}</p>
      </div>

      <div className="relative w-full flex overflow-hidden">
        <div className="flex whitespace-nowrap py-8" style={{ animation: 'marquee 40s linear infinite' }}>
          {plates}
          {plates}
        </div>
      </div>
    </section>
  );
};

const MenuPreviewSection = ({ t, onOpenMenu }) => (
  <section id="menu" className="py-16 md:py-20 bg-[#F8F5EE] relative overflow-hidden">
    <div className="absolute left-4 top-1/4 writing-vertical-rl text-[#C5B078] opacity-[0.07] text-7xl md:text-9xl font-serif tracking-[0.3em] select-none pointer-events-none" style={{ writingMode: 'vertical-rl' }}>
      寿司
    </div>
    <div className="max-w-7xl mx-auto px-6 lg:px-12 text-center relative z-10">
      <FadeInSection>
        <SectionHeader tag={t.menuPreview.tag} title={t.menuPreview.title} />
        <p className="text-[#1A1A1A]/80 text-lg max-w-2xl mx-auto mb-12">
          {t.menuPreview.text}
        </p>
        <div className="flex flex-col sm:flex-row justify-center items-center gap-6">
          <Button onClick={() => onOpenMenu('food')} variant="primary" className="group w-full sm:w-auto">
            <FileText className="mr-2 w-4 h-4" />
            {t.menuPreview.cta}
          </Button>
          <a href={CONFIG.links.menu} target="_blank" rel="noopener noreferrer" className="text-sm font-bold tracking-widest uppercase text-[#1A1A1A] hover:text-[#C5B078] transition-colors flex items-center border-b border-[#1A1A1A]/30 pb-1">
             {t.actions.orderOnline} <ExternalLink className="ml-2 w-4 h-4" />
          </a>
        </div>
      </FadeInSection>
    </div>
  </section>
);

const BusinessLunchSection = ({ t, onOpenMenu }) => (
  <section id="lunch" className="py-16 bg-white border-y border-[#F8F5EE]">
    <div className="max-w-4xl mx-auto px-6 text-center">
      <FadeInSection>
        <span className="inline-block px-4 py-1.5 border border-[#C5B078] text-[#C5B078] rounded-full text-xs tracking-widest uppercase mb-6">
          {t.lunch.tag}
        </span>
        <h2 className="font-serif text-3xl md:text-4xl text-[#1A1A1A] mb-4">{t.lunch.title}</h2>
        <p className="text-[#1A1A1A]/80 font-medium tracking-wide mb-4 flex items-center justify-center">
          <Clock className="w-4 h-4 mr-2 text-[#C5B078]" /> {t.lunch.time}
        </p>
        <p className="text-[#1A1A1A]/70 mb-8 max-w-lg mx-auto">{t.lunch.text}</p>
        <Button onClick={() => onOpenMenu('food')} variant="secondary">
          {t.actions.viewMenu}
        </Button>
      </FadeInSection>
    </div>
  </section>
);

const BarSection = ({ t, onOpenMenu }) => (
  <section id="bar" className="py-16 md:py-20 bg-[#1A1A1A] text-stone-50">
    <div className="max-w-7xl mx-auto px-6 lg:px-12">
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-12 items-center">
        <FadeInSection className="order-2 lg:order-1 relative h-[500px] md:h-[700px]">
           <img
            src="assets/images/cocktail-bar.jpg"
            alt="Nagomi Cocktail Bar"
            className="absolute inset-0 w-full h-full object-cover rounded-sm opacity-90 shadow-2xl"
          />
        </FadeInSection>
        <FadeInSection delay={200} className="order-1 lg:order-2">
          <SectionHeader tag={t.bar.tag} title={t.bar.title} light />
          <p className="text-[#F8F5EE]/80 text-lg leading-relaxed mb-10">
            {t.bar.text}
          </p>
          <Button onClick={() => onOpenMenu('drinks')} variant="light">
            {t.bar.cta}
          </Button>
        </FadeInSection>
      </div>
    </div>
  </section>
);

const OrderOnlineSection = ({ t }) => (
  <section id="delivery" className="py-16 bg-white border-t border-[#F8F5EE]">
    <div className="max-w-5xl mx-auto px-6 lg:px-12 text-center">
      <FadeInSection>
        <h2 className="font-serif text-3xl md:text-5xl text-[#1A1A1A] mb-6">{t.order.title}</h2>
        <p className="text-[#1A1A1A]/70 text-lg mb-12 max-w-xl mx-auto">{t.order.text}</p>

        <div className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-8">
          <a
            href={CONFIG.links.wolt}
            target="_blank"
            rel="noopener noreferrer"
            className="w-full sm:w-auto flex items-center justify-center px-8 py-4 bg-[#009de0] text-white font-bold rounded-lg hover:bg-[#008bc5] transition-colors shadow-md"
          >
            {t.order.wolt}
            <ExternalLink className="ml-2 w-4 h-4" />
          </a>
          <a
            href={CONFIG.links.boltFood}
            target="_blank"
            rel="noopener noreferrer"
            className="w-full sm:w-auto flex items-center justify-center px-8 py-4 bg-[#32C889] text-white font-bold rounded-lg hover:bg-[#2baa74] transition-colors shadow-md"
          >
            {t.order.bolt}
            <ExternalLink className="ml-2 w-4 h-4" />
          </a>
        </div>
      </FadeInSection>
    </div>
  </section>
);

const AboutSection = ({ t }) => (
  <section id="about" className="py-16 md:py-20 bg-[#F8F5EE] relative overflow-hidden">
    <div className="absolute right-10 bottom-0 writing-vertical-rl text-[#C5B078] opacity-[0.07] text-9xl font-serif tracking-[0.2em] select-none pointer-events-none" style={{ writingMode: 'vertical-rl' }}>
      調和
    </div>
    <div className="max-w-3xl mx-auto px-6 text-center relative z-10">
      <FadeInSection>
        <SectionHeader tag={t.about.tag} title={t.about.title} />
        <p className="text-[#1A1A1A]/90 text-lg md:text-xl leading-loose font-serif">
          "{t.about.text}"
        </p>
      </FadeInSection>
    </div>
  </section>
);

const LocationSection = ({ t }) => (
  <section id="location" className="py-16 bg-[#1A1A1A] text-stone-50">
    <div className="max-w-7xl mx-auto px-6 lg:px-12">
      <FadeInSection>
        <SectionHeader tag={t.location.contactLabel} title={t.location.title} light />
      </FadeInSection>

      <div className="mt-12 max-w-6xl">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-20">
          <FadeInSection delay={100}>
            <div className="text-left md:text-left">
              <h4 className="font-sans text-xs font-semibold tracking-[0.2em] uppercase text-[#C5B078] mb-4 border-b border-white/10 pb-3">{t.location.addressLabel}</h4>
              <div className="pt-2 text-center md:text-left">
                <p className="text-xl font-serif mb-3 text-[#F8F5EE] capitalize">{CONFIG.restaurant.name}</p>
                <p className="text-[#F8F5EE]/70 mb-1.5 text-[15px]">{CONFIG.restaurant.address}</p>
                <p className="text-[#F8F5EE]/70 mb-1.5 text-[15px]">{CONFIG.restaurant.building}</p>
                <p className="text-[#F8F5EE]/70 mb-6 text-[15px]">{CONFIG.restaurant.city}</p>
                <a
                  href={`https://maps.google.com/?q=${CONFIG.restaurant.name}+${CONFIG.restaurant.address}+${CONFIG.restaurant.city}`}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center justify-center text-sm font-medium tracking-widest uppercase text-[#F8F5EE] hover:text-[#C5B078] transition-colors"
                >
                  <MapPin className="w-5 h-5 mr-3" /> {t.actions.getDirections}
                </a>
              </div>
            </div>
          </FadeInSection>

          <FadeInSection delay={200}>
            <div>
              <h4 className="font-sans text-xs font-semibold tracking-[0.2em] uppercase text-[#C5B078] mb-4 border-b border-white/10 pb-3">{t.location.hoursLabel}</h4>
              <ul className="space-y-3 pt-2">
                {t.location.hours.map((h, i) => (
                  <li key={i} className="flex justify-between gap-6 text-[15px] text-[#F8F5EE]/70">
                    <span>{h.day}</span>
                    <span>{h.time}</span>
                  </li>
                ))}
              </ul>
            </div>
          </FadeInSection>
        </div>

        <div className="mt-16 flex justify-center">
          <FadeInSection delay={300}>
            <div className="w-full max-w-xl border-t border-white/10 pt-8 text-center">
              <h4 className="font-sans text-xs font-semibold tracking-[0.2em] uppercase text-[#C5B078] mb-5">{t.location.contactLabel}</h4>
              <div className="flex flex-col items-center gap-4">
                <a href={`tel:${CONFIG.restaurant.phone.replace(/\s/g, '')}`} className="inline-flex items-center justify-center text-[15px] text-[#F8F5EE]/70 hover:text-[#C5B078] transition-colors">
                  <Phone className="w-5 h-5 mr-4 text-[#C5B078]" />
                  {CONFIG.restaurant.phone}
                </a>
                <a href={`mailto:${CONFIG.restaurant.email}`} className="inline-flex items-center justify-center text-[15px] text-[#F8F5EE]/70 hover:text-[#C5B078] transition-colors">
                  <Mail className="w-5 h-5 mr-4 text-[#C5B078]" />
                  {CONFIG.restaurant.email}
                </a>
              </div>
            </div>
          </FadeInSection>
        </div>
      </div>
    </div>
  </section>
);

const FinalCTA = ({ t, lang }) => (
  <section className="py-20 bg-[#F8F5EE] text-center border-b border-white">
    <FadeInSection>
      <h2 className="font-serif text-4xl md:text-6xl text-[#1A1A1A] mb-4">{t.finalCta.title}</h2>
      <p className="text-[#1A1A1A]/60 text-lg mb-10 font-light">{t.finalCta.subtitle}</p>
      <Button href={CONFIG.links.reservation[lang] || CONFIG.links.reservation.lt} external variant="primary" className="px-10 py-4 text-base">
        {t.actions.reserve}
      </Button>
    </FadeInSection>
  </section>
);

const Footer = ({ t, lang }) => (
  <footer className="bg-[#1A1A1A] text-[#F8F5EE]/60 py-12 text-sm">
    <div className="max-w-7xl mx-auto px-6 lg:px-12 flex flex-col md:flex-row justify-between items-center gap-6">
      <div className="flex flex-col md:flex-row items-center gap-4">
        <img src="assets/logo/nagomi-logo.svg" alt="nagomi logo" className="h-7 w-auto object-contain" />
        <span className="hidden md:inline text-white/20">|</span>
        <p>&copy; {new Date().getFullYear()} {CONFIG.restaurant.name}. {t.footer.rights}</p>
      </div>

      <div className="flex space-x-6">
        <a href={CONFIG.links.instagram} target="_blank" rel="noopener noreferrer" className="hover:text-[#C5B078] transition-colors" aria-label="Instagram">
          <Instagram size={20} />
        </a>
        <a href={CONFIG.links.facebook} target="_blank" rel="noopener noreferrer" className="hover:text-[#C5B078] transition-colors" aria-label="Facebook">
          <Facebook size={20} />
        </a>
        <a href={CONFIG.links.tiktok} target="_blank" rel="noopener noreferrer" className="hover:text-[#C5B078] transition-colors" aria-label="TikTok">
          <TikTokIcon size={20} />
        </a>
      </div>

      <div className="flex flex-wrap justify-center gap-x-6 gap-y-2">
        <a href="careers.html" className="hover:text-[#C5B078] transition-colors">{t.footer.careers}</a>
        <a href={lang === 'en' ? 'privacy-policy-en.html' : 'privacy-policy.html'} className="hover:text-[#C5B078] transition-colors">{t.footer.privacy}</a>
        <a href={lang === 'en' ? 'cookie-policy-en.html' : 'cookie-policy.html'} className="hover:text-[#C5B078] transition-colors">{t.footer.cookies}</a>
      </div>
    </div>
  </footer>
);

function NagomiApp() {
  const [lang, setLang] = useState('lt');
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [menuTab, setMenuTab] = useState('food');

  const t = DICTIONARY[lang];

  const openMenuModal = (tab = 'food') => {
    setMenuTab(tab);
    setIsMenuOpen(true);
  };

  return (
    <div className="font-sans bg-[#F8F5EE] text-[#1A1A1A] selection:bg-[#C5B078] selection:text-white relative">
      <svg className="pointer-events-none fixed inset-0 z-[1] h-full w-full opacity-[0.25] mix-blend-overlay">
        <filter id="noise">
          <feTurbulence type="fractalNoise" baseFrequency="0.75" numOctaves="3" stitchTiles="stitch" />
        </filter>
        <rect width="100%" height="100%" filter="url(#noise)" />
      </svg>

      <Navbar lang={lang} setLang={setLang} t={t} />

      <main className="relative z-10">
        <HeroSection t={t} lang={lang} onOpenMenu={openMenuModal} />
        <ExperienceSection t={t} />
        <KaitenSection t={t} />
        <MenuPreviewSection t={t} onOpenMenu={openMenuModal} />
        <BusinessLunchSection t={t} onOpenMenu={openMenuModal} />
        <BarSection t={t} onOpenMenu={openMenuModal} />
        <OrderOnlineSection t={t} />
        <AboutSection t={t} />
        <LocationSection t={t} />
        <FinalCTA t={t} lang={lang} />
      </main>

      <Footer t={t} lang={lang} />

      <MenuModal
        isOpen={isMenuOpen}
        onClose={() => setIsMenuOpen(false)}
        initialTab={menuTab}
        t={t}
        lang={lang}
      />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<NagomiApp />);