/* global React, ReactDOM */
const { useState, useEffect } = React;

function App() {
  // Detect browser language → fall back to ca
  const detect = () => {
    try {
      const stored = localStorage.getItem('cp_lang');
      if (stored && window.CP_TRANSLATIONS[stored]) return stored;
      const nav = (navigator.language || 'ca').slice(0, 2);
      return window.CP_TRANSLATIONS[nav] ? nav : 'ca';
    } catch { return 'ca'; }
  };
  const [lang, setLangState] = useState(detect);
  const setLang = (l) => {
    setLangState(l);
    try { localStorage.setItem('cp_lang', l); } catch {}
    document.documentElement.lang = l;
  };
  useEffect(() => { document.documentElement.lang = lang; }, [lang]);

  const t = window.CP_TRANSLATIONS[lang];

  // Reveal observer
  useEffect(() => {
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    document.querySelectorAll('.reveal').forEach(el => io.observe(el));
    return () => io.disconnect();
  }, [lang]);

  const G = window.CP_GAME || {};

  return (
    <>
      <Cursor/>
      {G.AmbientToggle && <G.AmbientToggle/>}
      <Nav t={t} lang={lang} setLang={setLang}/>
      <Hero t={t} lang={lang} setLang={setLang}/>
      <Story t={t}/>
      <BreakfastMenu t={t}/>
      <LunchMenu t={t}/>
      <Gallery t={t}/>
      {G.DishQuiz && <G.DishQuiz t={t} lang={lang}/>}
      <Reviews t={t}/>
      <Visit t={t}/>
      <Reserve t={t} lang={lang}/>
      {G.LoyaltyTracker && <G.LoyaltyTracker t={t}/>}
      <Footer t={t}/>
      {G.FloatingReserveCTA && <G.FloatingReserveCTA t={t}/>}
      {G.EasterEggHunt && <G.EasterEggHunt t={t}/>}
      {ReservationFloater && <ReservationFloater t={t} lang={lang}/>}
    </>
  );
}

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