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/lt/ltu/vilnius/restaurant/nagomi-j-jasinskio-g",
    instagram: "https://www.instagram.com/nagomivilnius/",
    facebook: "https://www.facebook.com/profile.php?id=61575997382296"
  }
};

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 DICTIONARY = {
  lt: {
    nav: {
      experience: "Patirtis", menu: "Meniu",
      lunch: "Verslo Pietūs", bar: "Baras",
      about: "Apie mus", careers: "Karjera", contact: "Kontaktai"
    },
    actions: {
      reserve: "Staliukų rezervacija",
      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: <>„<span className="notranslate" translate="no">Nagomi</span>“ patirtis</>,
      title: "Leiskis į autentišką skonių kelionę",
      subtitle: "Pristatome suši takelio (jap. kaiten sushi) konceptą",
      paragraphs: [
        "Tai japonų sukurta dinamiška, žaisminga ir itin rafinuota valgymo patirtis, kur maistas atkeliauja pas tave – tiesiai ant judančio takelio.",
        "Kiekviena lėkštutė skirtingos spalvos, spalva nurodo jos kainą. Imk patinkančius patiekalus ir mėgaukis!"
      ],
      cta: "Meniu"
    },
    kaitenBelt: {
      title: "KAITEN RITMAS",
      subtitle: "NEPERTRAUKIAMAS MEISTRIŠKUMO SRAUTAS TIESIAI PRIEŠ JŪSŲ AKIS."
    },
    menuPreview: {
      tag: "Kulinarija",
      title: "SUKURTA SU MEILE",
      text: "Kuriame su meile maistui ir pagarba japonų kulinarinėms tradicijoms, subtiliai jas derindami su šiuolaikiniais skoniais ir netikėtais deriniais. Mūsų virtuvėje japonų įkvėpimas susitinka su kūrybiška fusion interpretacija.",
      cta: "Restorano Meniu"
    },
    lunch: {
      title: "VERSLO PIETŪS",
      time: "Darbo dienomis 11:00–14:00"
    },
    bar: {
      tag: "Gėrimai",
      title: "KOKTEILIŲ BARAS",
      text: (
        <>
          <p className="mb-4">
            Mūsų kokteilių meniu apjungia japonišką estetiką ir šiuolaikinės miksologijos principus. Gėrimai kuriami naudojant natūralius ingredientus, naminius sirupus ir šviežias sultis.
          </p>
          <p>
            Sake, yuzu, japoniški likerių atspalviai, vaisių ir prieskonių deriniai kuria meniu, kuriame Rytų skonių kultūra susitinka su vakarietišku požiūriu į kokteilių meną.
          </p>
        </>
      ),
      cta: "Žiūrėti Gėrimų Meniu"
    },
    about: {
      tag: "Mūsų vertybės",
      text: <>„<span className="notranslate" translate="no">Nagomi</span>“ – tai harmonija, ramybė ir džiaugsmas dalintis akimirkomis. Šias vertybes perkėlėme į savo erdvę, kurioje japoniškos kaiten valgymo kultūros gyvybingumas susilieja su subtilia europietiško restorano elegancija. Kiekviena detalė – nuo interjero sprendimų iki meniu – apgalvota taip, kad sukurtų išskirtinę, jaukią ir įsimintiną patirtį.</>
    },
    careers: {
      tag: "Prisijunkite prie mūsų",
      title: "KARJEROS GALIMYBĖS",
      text: <>Ieškote naujo iššūkio? Užpildykite anketą žemiau ir prisijunkite prie <span className="notranslate" translate="no">nagomi</span> 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",
        kitchenHelp: "Virtuvės pagalbinis darbuotojas",
        waiter: "Padavėjas",
        waitress: "Padavėja",
        bartender: "Barmenas"
      },
      selectPlaceholder: "Pasirinkite",
      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: {
      tag: "Apsilankykite",
      title: "KAIP MUS RASTI",
      mapTitle: "Nagomi vieta žemėlapyje",
      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 suši patirčiai."
    },
    footer: {
      rights: "Visos teisės saugomos.",
      privacy: "Privatumo politika",
      cookies: "Slapukų politika",
      careers: "Karjera",
      madeBy: "Developed by:"
    }
  },
  en: {
    nav: {
      experience: "Experience", menu: "Menu",
      lunch: "Business Lunch", bar: "Bar",
      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 <span className="notranslate" translate="no">Nagomi</span> Experience</>,
      title: "Set off on an authentic journey of flavours",
      subtitle: "Introducing the sushi conveyor (Japanese kaiten sushi) concept",
      paragraphs: [
        "A dynamic, playful and highly refined way of dining created in Japan, where the food comes to you – right on a moving conveyor.",
        "Every plate has its own colour, and the colour shows its price. Take the dishes you like and enjoy!"
      ],
      cta: "Menu"
    },
    kaitenBelt: {
      title: "KAITEN RHYTHM",
      subtitle: "A CONTINUOUS STREAM OF CRAFTSMANSHIP RIGHT BEFORE YOUR EYES."
    },
    menuPreview: {
      tag: "Culinary",
      title: "CRAFTED WITH LOVE",
      text: "We cook with love for food and respect for Japanese culinary traditions, subtly pairing them with contemporary flavours and unexpected combinations. In our kitchen, Japanese inspiration meets creative fusion interpretation.",
      cta: "Restaurant Menu"
    },
    lunch: {
      title: "BUSINESS LUNCH",
      time: "Weekdays 11:00–14:00"
    },
    bar: {
      tag: "Drinks",
      title: "THE COCKTAIL BAR",
      text: (
        <>
          <p className="mb-4">
            Our cocktail menu blends Japanese aesthetics with modern mixology principles. Drinks are crafted using natural ingredients, house-made syrups, and fresh juices.
          </p>
          <p>
            Sake, yuzu, Japanese liqueur nuances, and combinations of fruit and spice create a menu where Eastern flavour culture meets a Western approach to the cocktail craft.
          </p>
        </>
      ),
      cta: "View Drinks Menu"
    },
    about: {
      tag: "Our Values",
      text: <>“<span className="notranslate" translate="no">Nagomi</span>” means harmony, calm and the joy of sharing moments. We brought these values into our space, where the vibrancy of Japanese kaiten dining culture blends with the subtle elegance of a European restaurant. Every detail – from the interior design to the menu – is considered to create an exceptional, cosy and memorable 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 <span className="notranslate" translate="no">nagomi</span> 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 Chef",
        kitchenHelp: "Kitchen Help",
        waiter: "Waiter",
        waitress: "Waitress",
        bartender: "Bartender"
      },
      selectPlaceholder: "Select",
      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: {
      tag: "Visit Us",
      title: "FIND US",
      mapTitle: "Nagomi location on the map",
      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",
      madeBy: "Developed by:"
    }
  }
};

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>
    )}
    {title && (
      <h2 className={`font-serif text-3xl md:text-5xl tracking-tight leading-tight ${light ? 'text-[#F8F5EE]' : 'text-[#1A1A1A]'}`}>
        {title}
      </h2>
    )}
  </div>
);


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>
        </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: 'menu', label: t.nav.menu },
    { id: 'lunch', label: t.nav.lunch },
    { id: 'bar', label: t.nav.bar },
    { id: 'about', label: t.nav.about },
    { id: 'location', label: t.nav.contact },
    { id: 'careers', label: t.nav.careers, href: lang === 'en' ? 'careers.html?lang=en' : 'careers.html' },
  ];

  return (
    <>
      <nav className={`fixed w-full z-50 transition-all duration-500 ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-sm border-b border-[#1A1A1A]/5 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-4 2xl: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 ${scrolled ? 'border-[#1A1A1A]/15' : '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 href={CONFIG.links.wolt} external 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-90 transform scale-105 transition-transform duration-[20s] hover:scale-100"
      />
      <div className="absolute inset-0 bg-gradient-to-b from-zinc-950/40 via-zinc-900/15 to-zinc-950/50"></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 h-24 overflow-hidden md:h-32">
            <img
              src="assets/logo/nagomi-logo-gold.png"
              alt="nagomi"
              className="mx-auto h-40 w-40 -translate-y-8 object-contain md:h-56 md:w-56 md:-translate-y-12"
            />
          </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="font-slogan 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, onOpenMenu }) => (
  <section id="experience" className="py-16 md:py-24 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.08] 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} />
          <h3 className="font-serif text-2xl md:text-3xl text-[#1A1A1A] leading-snug mb-6">
            {t.experience.subtitle}
          </h3>
          {t.experience.paragraphs.map((paragraph) => (
            <p key={paragraph} className="text-[#1A1A1A]/80 text-lg md:text-xl leading-relaxed mb-5">
              {paragraph}
            </p>
          ))}
          <Button onClick={() => onOpenMenu('food')} variant="primary" className="mt-5">
            {t.experience.cta}
          </Button>
        </FadeInSection>
        <FadeInSection delay={200} className="relative h-[380px] md:h-[600px] 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 KaitenBeltSection = ({ t }) => {
  const [photos, setPhotos] = useState([]);

  useEffect(() => {
    fetch('php/get-belt.php')
      .then((res) => (res.ok ? res.json() : []))
      .then((data) => {
        if (Array.isArray(data) && data.length > 0) {
          setPhotos(data);
        } else {
          setPhotos([]);
        }
      })
      .catch(() => setPhotos([]));
  }, []);

  // Kaiten conveyor belt requires at least 8 unique photos to display
  if (!photos || photos.length < 8) {
    return null;
  }

  // Multiply items to ensure continuous infinite loop (at least 2 cycles for seamless 50% loop)
  const repeatCount = Math.max(2, Math.ceil(16 / photos.length));
  const displayPhotos = Array(repeatCount).fill(photos).flat();

  return (
    <section className="py-14 md:py-20 bg-[#F5F2EB] border-b border-[#1A1A1A]/10 overflow-hidden relative kaiten-belt-container select-none">
      <div className="max-w-7xl mx-auto px-6 text-center mb-8 md:mb-12">
        <h2 className="font-serif text-3xl md:text-5xl text-[#1A1A1A] tracking-wider mb-3">
          {t.kaitenBelt.title}
        </h2>
        <p className="text-xs md:text-sm tracking-[0.2em] uppercase text-[#1A1A1A]/70 font-slogan">
          {t.kaitenBelt.subtitle}
        </p>
      </div>

      <div className="relative w-full overflow-hidden py-4">
        <div className="animate-kaiten-belt gap-6 sm:gap-8 md:gap-10 px-4 items-center">
          {displayPhotos.map((item, index) => (
            <div key={`${item.id}-${index}`} className="flex-shrink-0 flex flex-col items-center group">
              <div className="kaiten-plate-circle">
                <img
                  src={item.image_path}
                  alt={item.title || 'Nagomi Kaiten Sushi'}
                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                  loading="lazy"
                />
              </div>
              {item.title ? (
                <span className="mt-3 text-xs md:text-sm font-serif tracking-wider text-[#1A1A1A]/80 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                  {item.title}
                </span>
              ) : null}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const MenuPreviewSection = ({ t, onOpenMenu }) => (
  <section id="menu" className="py-16 md:py-24 bg-white relative overflow-hidden">
    <div className="absolute left-4 top-1/4 writing-vertical-rl text-[#C5B078] opacity-[0.08] 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 shadow-md hover:shadow-lg">
            <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 }) => (
  <section id="lunch" className="py-16 md:py-20 bg-[#F8F5EE] border-y border-[#1A1A1A]/5">
    <div className="max-w-4xl mx-auto px-6 text-center">
      <FadeInSection>
        <h2 className="font-serif text-3xl md:text-5xl tracking-tight leading-tight text-[#1A1A1A] mb-4">{t.lunch.title}</h2>
        <p className="text-[#1A1A1A]/80 font-medium tracking-wide flex items-center justify-center">
          <Clock className="w-4 h-4 mr-2 text-[#C5B078]" /> {t.lunch.time}
        </p>
      </FadeInSection>
    </div>
  </section>
);

// Full-width band whose photo stays fixed while the page scrolls over it
// (see .parallax-bg in css/styles.css).
const ParallaxBand = ({ id, image, children }) => (
  <section
    id={id}
    className="parallax-bg relative py-24 md:py-32 text-stone-50"
    style={{ backgroundImage: `url('${image}')` }}
  >
    <div className="absolute inset-0 bg-zinc-950/55"></div>
    <div className="relative z-10 max-w-3xl mx-auto px-6 text-center">
      {children}
    </div>
  </section>
);

const BarSection = ({ t, onOpenMenu }) => (
  <ParallaxBand id="bar" image="assets/images/cocktail-bar.jpg">
    <FadeInSection>
      <SectionHeader tag={t.bar.tag} title={t.bar.title} light />
      <div className="text-[#F8F5EE]/90 text-lg leading-relaxed mb-10">
        {t.bar.text}
      </div>
      <Button onClick={() => onOpenMenu('drinks')} variant="light">
        {t.bar.cta}
      </Button>
    </FadeInSection>
  </ParallaxBand>
);

const HoursSection = ({ t }) => (
  <ParallaxBand id="hours" image="assets/images/opening-hours.jpg">
    <FadeInSection className="max-w-md mx-auto">
      <h2 className="font-sans text-sm tracking-[0.3em] uppercase text-[#F8F5EE] mb-4">
        {t.location.hoursLabel}
      </h2>
      <div className="w-12 h-px bg-[#C5B078] mx-auto mb-8"></div>
      <ul className="text-left">
        {t.location.hours.map((h) => (
          <li key={h.day} className="flex justify-between gap-6 py-3 border-b border-white/10 last:border-b-0 text-[15px]">
            <span className="text-[#F8F5EE]/80">{h.day}</span>
            <span className="text-[#F8F5EE] tracking-wide whitespace-nowrap">{h.time}</span>
          </li>
        ))}
      </ul>
    </FadeInSection>
  </ParallaxBand>
);

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} />
        <p className="text-[#1A1A1A]/90 text-lg md:text-xl leading-loose font-serif">
          {t.about.text}
        </p>
      </FadeInSection>
    </div>
  </section>
);

const MAP_QUERY = encodeURIComponent(`${CONFIG.restaurant.name} ${CONFIG.restaurant.address}, ${CONFIG.restaurant.city}`);
const MAP_EMBED_URL = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2306.4!2d25.2635!3d54.6898!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46dd95d4d2ee45b9%3A0xabe83dabc615dd27!2sNagomi!5e0!3m2!1sen!2slt!4v1700000000000";

const LocationSection = ({ t }) => (
  <section id="location" className="py-16 md:py-24 bg-white">
    <div className="max-w-7xl mx-auto px-6 lg:px-12">
      <div className="grid grid-cols-1 lg:grid-cols-5 gap-12 lg:gap-16 items-center">
        <FadeInSection className="lg:col-span-2">
          <SectionHeader tag={t.location.tag} title={t.location.title} />

          <div className="space-y-8">
            <div>
              <h4 className="font-sans text-xs font-semibold tracking-[0.2em] uppercase text-[#C5B078] mb-3">{t.location.addressLabel}</h4>
              <p className="text-xl font-serif text-[#1A1A1A] capitalize mb-1 notranslate" translate="no">{CONFIG.restaurant.name}</p>
              <p className="text-[#1A1A1A]/70 text-[15px] leading-relaxed">
                {CONFIG.restaurant.address}<br />
                {CONFIG.restaurant.building}<br />
                {CONFIG.restaurant.city}
              </p>
            </div>

            <div>
              <h4 className="font-sans text-xs font-semibold tracking-[0.2em] uppercase text-[#C5B078] mb-3">{t.location.contactLabel}</h4>
              <div className="flex flex-col items-start gap-3">
                <a href={`tel:${CONFIG.restaurant.phone.replace(/\s/g, '')}`} className="inline-flex items-center text-[15px] text-[#1A1A1A]/80 hover:text-[#C5B078] transition-colors notranslate" translate="no">
                  <Phone className="w-4 h-4 mr-3 text-[#C5B078]" />
                  <span className="notranslate" translate="no">{CONFIG.restaurant.phone}</span>
                </a>
                <a href={`mailto:${CONFIG.restaurant.email}`} className="inline-flex items-center text-[15px] text-[#1A1A1A]/80 hover:text-[#C5B078] transition-colors notranslate" translate="no">
                  <Mail className="w-4 h-4 mr-3 text-[#C5B078]" />
                  <span className="notranslate" translate="no">{CONFIG.restaurant.email}</span>
                </a>
              </div>
            </div>

            <Button href={`https://maps.google.com/?q=${MAP_QUERY}`} external variant="secondary">
              <MapPin className="w-4 h-4 mr-2" /> {t.actions.getDirections}
            </Button>
          </div>
        </FadeInSection>

        <FadeInSection delay={200} className="lg:col-span-3">
          <div className="relative h-[340px] md:h-[460px] rounded-sm overflow-hidden shadow-xl border border-[#1A1A1A]/10">
            <iframe
              src={MAP_EMBED_URL}
              title={t.location.mapTitle}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              className="absolute inset-0 w-full h-full border-0"
              style={{ filter: 'grayscale(0.35) sepia(0.15)' }}
            />
          </div>
        </FadeInSection>
      </div>
    </div>
  </section>
);

const FinalCTA = ({ t, lang }) => (
  <section className="py-20 md:py-28 bg-[#F8F5EE] text-center border-t border-[#1A1A1A]/5">
    <FadeInSection className="px-6">
      <div className="w-12 h-px bg-[#C5B078] mx-auto mb-8"></div>
      <h2 className="font-serif text-4xl md:text-5xl text-[#1A1A1A] tracking-tight mb-4">{t.finalCta.title}</h2>
      <p className="text-[#1A1A1A]/60 text-lg mb-10 font-light max-w-xl mx-auto">{t.finalCta.subtitle}</p>
      <Button href={CONFIG.links.reservation[lang] || CONFIG.links.reservation.lt} external variant="primary" className="px-10 py-4 text-base shadow-md hover:shadow-xl">
        {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>{`© 2025–${new Date().getFullYear()} Nagomi. ${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>
      </div>

      <div className="flex flex-wrap items-center 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>
        <a
          href="https://itsallan.me"
          target="_blank"
          rel="noopener noreferrer"
          className="footer-developer-badge ml-2 sm:ml-5"
          title="Developed by Allan – itsallan.me"
          aria-label="Website developed by Allan Indrajith (opens in a new tab)"
        >
          <span className="dev-badge-label">{t.footer.madeBy}</span>
          <img src="assets/developer-logo.svg" alt="Allan Logo" className="dev-badge-logo" width="17" height="17" loading="lazy" />
          <svg className="dev-badge-arrow" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <path d="M7 17L17 7M17 7H8M17 7V16" />
          </svg>
        </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} onOpenMenu={openMenuModal} />
        <KaitenBeltSection t={t} />
        <MenuPreviewSection t={t} onOpenMenu={openMenuModal} />
        <BusinessLunchSection t={t} />
        <BarSection t={t} onOpenMenu={openMenuModal} />
        <AboutSection t={t} />
        <HoursSection 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 />);