/* 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>
  );
}

/* ============================================================
   FLOATING LIVRAISON — Deliveroo + Uber Eats (bottom-left)
   Collapsed : pill avec les 2 logos.
   Expanded  : 2 pills distinctes vers chaque plateforme.
   ============================================================ */
function FloatingDelivery({ lang }) {
  const [open, setOpen] = useState(false);
  const wrapRef = useRef(null);
  const label = lang === 'en' ? 'Delivery' : 'Livraison';
  const aLabelDeliveroo = lang === 'en' ? 'Order on Deliveroo' : 'Commander sur Deliveroo';
  const aLabelUberEats  = lang === 'en' ? 'Order on Uber Eats' : 'Commander sur Uber Eats';

  useEffect(() => {
    if (!open) return;
    const onDoc = (e) => {
      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
    };
    const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('touchstart', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('mousedown', onDoc);
      document.removeEventListener('touchstart', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  return (
    <div ref={wrapRef}
      id="global-delivery"
      className={'is-visible' + (open ? ' is-open' : '')}
      aria-label={label}>

      <div className="gd-panel" aria-hidden={!open}>
        <a className="gd-choice gd-choice--deliveroo"
          href={_D.DELIVEROO_URL}
          target="_blank" rel="noopener noreferrer"
          onClick={() => setOpen(false)}
          tabIndex={open ? 0 : -1}
          aria-label={aLabelDeliveroo} />
        <a className="gd-choice gd-choice--ubereats"
          href={_D.UBEREATS_URL}
          target="_blank" rel="noopener noreferrer"
          onClick={() => setOpen(false)}
          tabIndex={open ? 0 : -1}
          aria-label={aLabelUberEats} />
      </div>

      <button type="button"
        className="gd-trigger"
        aria-expanded={open}
        aria-label={label}
        onClick={() => setOpen(o => !o)}>
        <span className="gd-logo gd-logo--deliveroo" aria-hidden="true" />
        <span className="gd-logo gd-logo--ubereats"  aria-hidden="true" />
      </button>
    </div>
  );
}

/* ============================================================
   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} />
      <FloatingDelivery lang={lang} />
    </>
  );
}

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