/* NEKTAR v2 — App, Nav, FloatingResa, mount */
const { useState, useEffect, useRef } = React;
const _D  = window.NEKTAR_DATA;
const _LC = window.LangContext;

// Composants définis dans nektar-sections.jsx (autre scope Babel)
const {
  HeroSection, HistoireSection, SelectionSection,
  LivraisonSection, LieuSection, SuivreSection, FooterSection,
} = window;

/* ============================================================
   GLOBAL NAV — apparaît après le hero
   ============================================================ */
function GlobalNav({ pastHero, lang, setLang }) {
  const c = _D.COPY[lang] || _D.COPY.fr;
  const [drawerOpen, setDrawerOpen] = useState(false);

  const toggle = () => setDrawerOpen(o => !o);
  const close  = () => setDrawerOpen(false);

  const scrollTo = (id, e) => {
    if (e) e.preventDefault();
    close();
    const el = document.getElementById(id);
    if (!el) return;
    // Mise à jour du hash sans saut brutal
    history.pushState(null, '', '#' + id);
    el.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <>
      <nav id="global-nav"
        className={pastHero ? 'is-visible' : ''}
        aria-label="Navigation principale">

        <a href="#accueil" id="gnav-logo" aria-label="Nektar — accueil"
          onClick={(e) => scrollTo('accueil', e)}>
          <img src="assets/nektar-logo-horizontal-clear.png" alt="Nektar" />
        </a>

        {/* Desktop: liens */}
        <div className="gnav-links gnav-desktop">
          <a href="#histoire"  onClick={(e) => scrollTo('histoire', e)}>{c.nav.histoire}</a>
          <a href="#carte"     onClick={(e) => scrollTo('carte', e)}>{c.nav.carte}</a>
          <a href="#livraison" onClick={(e) => scrollTo('livraison', e)}>{c.nav.domicile}</a>
          <a href="#galerie"   onClick={(e) => scrollTo('galerie', e)}>{c.nav.galerie}</a>
        </div>

        <div className="gnav-right">
          <div className="gnav-lang" role="group" aria-label={c.a11y.lang}>
            <button className={'gnav-lang-btn' + (lang === 'fr' ? ' is-on' : '')}
              onClick={() => setLang('fr')}>FR</button>
            <span className="gnav-lang-sep" aria-hidden="true">·</span>
            <button className={'gnav-lang-btn' + (lang === 'en' ? ' is-on' : '')}
              onClick={() => setLang('en')}>EN</button>
          </div>

          <a id="gnav-resa" className="gnav-desktop"
            href={_D.OPENTABLE_URL}
            target="_blank" rel="noopener noreferrer">{c.nav.reserverCaps}</a>

          <button id="gnav-burger"
            className={'gnav-mobile' + (drawerOpen ? ' is-open' : '')}
            aria-label={c.a11y.menu} aria-expanded={drawerOpen}
            onClick={toggle}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </nav>

      {/* Drawer mobile */}
      <div id="gnav-drawer"
        className={drawerOpen ? 'is-open' : ''}
        aria-hidden={!drawerOpen}>
        <a href="#histoire"  onClick={(e) => scrollTo('histoire', e)}>{c.nav.histoire}</a>
        <a href="#carte"     onClick={(e) => scrollTo('carte', e)}>{c.nav.carte}</a>
        <a href="#livraison" onClick={(e) => scrollTo('livraison', e)}>{c.nav.domicile}</a>
        <a href="#galerie"   onClick={(e) => scrollTo('galerie', e)}>{c.nav.galerie}</a>
        <a href={_D.OPENTABLE_URL} target="_blank" rel="noopener noreferrer"
          className="gnav-drawer-resa" onClick={close}>{c.nav.reserver}</a>
      </div>
      <div id="gnav-backdrop"
        className={drawerOpen ? 'is-open' : ''}
        onClick={close}
        aria-hidden="true" />
    </>
  );
}

/* ============================================================
   FLOATING RÉSERVER — apparaît après le hero
   ============================================================ */
function FloatingResa({ pastHero, lang }) {
  const c = _D.COPY[lang] || _D.COPY.fr;
  return (
    <a id="global-resa"
      className={pastHero ? 'is-visible' : ''}
      href={_D.OPENTABLE_URL}
      target="_blank" rel="noopener noreferrer"
      aria-label={c.nav.reserver}>
      {c.nav.reserverCaps}
    </a>
  );
}

/* ============================================================
   LangProvider — persistance localStorage
   ============================================================ */
function LangProvider({ children }) {
  const [lang, setLangState] = useState(() => {
    try { return localStorage.getItem('nektar-lang') || 'fr'; }
    catch (e) { return 'fr'; }
  });

  const setLang = (newLang) => {
    setLangState(newLang);
    try { localStorage.setItem('nektar-lang', newLang); } catch (e) {}
    document.documentElement.lang = newLang;
  };

  useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  return (
    <_LC.Provider value={{ lang, setLang }}>
      {children}
    </_LC.Provider>
  );
}

/* ============================================================
   App
   ============================================================ */
function App() {
  const [pastHero, setPastHero] = useState(false);
  const heroRef = useRef(null);
  const livraisonRefScroll = useRef(null);

  // Détection du dépassement du hero (pour le bouton flottant uniquement)
  useEffect(() => {
    const onScroll = () => {
      const hero = document.getElementById('accueil');
      if (!hero) return;
      const heroH = hero.offsetHeight || window.innerHeight;
      setPastHero(window.scrollY > heroH * 0.8);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Hash routing initial — scroll vers la section au chargement
  useEffect(() => {
    if (window.location.hash) {
      const id = window.location.hash.slice(1);
      // Laisse le temps aux sections de monter
      setTimeout(() => {
        const el = document.getElementById(id);
        if (el) el.scrollIntoView({ behavior: 'smooth' });
      }, 300);
    }
  }, []);

  const scrollToLivraison = () => {
    const el = document.getElementById('livraison');
    if (el) {
      history.pushState(null, '', '#livraison');
      el.scrollIntoView({ behavior: 'smooth' });
    }
  };

  return (
    <LangProvider>
      <LangConsumerNav pastHero={true} />

      <HeroSection />
      <HistoireSection />
      <SelectionSection />
      <LivraisonSection />
      <LieuSection />
      <SuivreSection />
      <FooterSection onScrollToLivraison={scrollToLivraison} />

      <LangConsumerFloating pastHero={pastHero} />
    </LangProvider>
  );
}

// Helpers pour consommer le LangContext (forçage de re-render quand lang change)
function LangConsumerNav({ pastHero }) {
  const { lang, setLang } = React.useContext(_LC);
  return <GlobalNav pastHero={pastHero} lang={lang} setLang={setLang} />;
}
function LangConsumerFloating({ pastHero }) {
  const { lang } = React.useContext(_LC);
  return <FloatingResa pastHero={pastHero} lang={lang} />;
}

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