/* NEKTAR — Hero v2 : nav drawer + OpenTable */
const { useState, useEffect, useRef, useCallback } = React;

const TWEAK_DEFAULTS = {
  "layout":  "centered",
  "overlay": "marked",
  "brand":   "horizontal",
  "lang":    "fr"
};

const OVERLAYS = {
  subtle: "linear-gradient(180deg, rgba(13,27,62,0.20) 0%, rgba(13,27,62,0.05) 35%, rgba(13,27,62,0.45) 100%)",
  marked: "linear-gradient(180deg, rgba(13,27,62,0.45) 0%, rgba(13,27,62,0.25) 35%, rgba(13,27,62,0.70) 100%)",
  bottom: "linear-gradient(180deg, transparent 0%, transparent 50%, rgba(13,27,62,0.80) 100%)",
};

// Photo Nektar — LG1_9471 (dossier "Photos Nektar JB", public)
const HERO_IMG = "https://drive.google.com/thumbnail?id=14d1wDed1NNt-wLhXeyXfo-qxqr8xXlM2&sz=w2400";

/* 1 clic — déclenche le bouton OT dans le DOM (iframe=false) */
function openResa() {
  const btn = document.querySelector(
    '#ot-reservation-widget button, #ot-reservation-widget a, [id*="ot-widget-container"] button, [id*="ot-widget-container"] a'
  );
  if (btn) btn.click();
}

/* -------------------------------------------------------
   Hooks
------------------------------------------------------- */
function useScrolled(threshold = 12) {
  const [scrolled, set] = useState(false);
  useEffect(() => {
    const fn = () => set(window.scrollY > threshold);
    fn();
    window.addEventListener("scroll", fn, { passive: true });
    return () => window.removeEventListener("scroll", fn);
  }, [threshold]);
  return scrolled;
}

function useLockScroll(active) {
  useEffect(() => {
    if (active) document.body.classList.add("modal-open");
    else document.body.classList.remove("modal-open");
    return () => document.body.classList.remove("modal-open");
  }, [active]);
}

function useEscKey(handler, active) {
  useEffect(() => {
    if (!active) return;
    const fn = (e) => { if (e.key === "Escape") handler(); };
    document.addEventListener("keydown", fn);
    return () => document.removeEventListener("keydown", fn);
  }, [handler, active]);
}

/* -------------------------------------------------------
   Floating Réserver — apparaît quand le CTA hero quitte le viewport
------------------------------------------------------- */
function FloatingResa({ copy }) {
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const cta = document.querySelector('.hero__cta');
    if (!cta) return;
    const obs = new IntersectionObserver(
      ([entry]) => setVisible(!entry.isIntersecting),
      { threshold: 0 }
    );
    obs.observe(cta);
    return () => obs.disconnect();
  }, []);

  return (
    <button
      className={"resa-float" + (visible ? " is-visible" : "")}
      onClick={openResa}
      aria-label={copy.nav.reserver}>
      {copy.nav.reserver}
    </button>
  );
}

/* -------------------------------------------------------
   Nav Drawer
------------------------------------------------------- */
function NavDrawer({ isOpen, onClose, copy, lang, setLang }) {
  useLockScroll(isOpen);
  useEscKey(onClose, isOpen);

  return (
    <div className={"nav-drawer" + (isOpen ? " is-open" : "")}
      role="dialog" aria-modal="true" aria-label={copy.a11y.menu}>

      <div className="nav-drawer__backdrop" onClick={onClose} aria-hidden="true"></div>

      <nav className="nav-drawer__panel">
        <button className="modal-close" onClick={onClose} aria-label="Fermer le menu">
          <span className="modal-close__bar"></span>
          <span className="modal-close__bar"></span>
        </button>

        <div className="nav-drawer__logo">
          <img src="assets/nektar-logo-circle-clear.png" alt="Nektar" />
        </div>

        <ul className="nav-drawer__links" role="list">
          <li>
            <a href="#carte" onClick={onClose}>{copy.nav.carte}</a>
          </li>
          <li>
            <a href="#histoire" onClick={onClose}>{copy.nav.histoire}</a>
          </li>
          <li>
            <a href="#reserver" className="is-accent"
              onClick={(e) => { e.preventDefault(); onClose(); setTimeout(openResa, 300); }}>
              {copy.nav.reserver}
            </a>
          </li>
        </ul>

        <div className="nav-drawer__lang" role="group" aria-label={copy.a11y.lang}>
          <button
            type="button"
            className={lang === "fr" ? "is-on" : ""}
            aria-pressed={lang === "fr"}
            onClick={() => setLang("fr")}>FR</button>
          <span className="sep" aria-hidden="true">·</span>
          <button
            type="button"
            className={lang === "en" ? "is-on" : ""}
            aria-pressed={lang === "en"}
            onClick={() => setLang("en")}>EN</button>
        </div>

        <div className="nav-drawer__foot" aria-label="Adresse et horaires">
          <span>{copy.hero.addrLine}</span>
          <span>{copy.hero.hoursLine}</span>
        </div>
      </nav>
    </div>
  );
}

/* -------------------------------------------------------
   2. RESERVATION MODAL
------------------------------------------------------- */
/* -------------------------------------------------------
   Nav
------------------------------------------------------- */
function Nav({ t, copy, lang, setLang, scrolled, onOpenDrawer }) {
  return (
    <nav className={"nav" + (scrolled ? " is-scrolled" : "")} aria-label="Principal">

      {/* Logo desktop */}
      {t.brand === "horizontal" ? (
        <a className="nav__brand nav__brand--show-desktop" href="#" aria-label="Nektar">
          <img src="assets/nektar-logo-horizontal-clear.png" alt="Nektar — cave, bar à vin" />
        </a>
      ) : (
        <a className="nav__brand nav__brand--medallion nav__brand--show-desktop" href="#" aria-label="Nektar">
          <img src="assets/nektar-logo-circle-clear.png" alt="Nektar — cave, bar à vin" />
        </a>
      )}

      {/* Logo mobile — médaillon */}
      <a className="nav__brand nav__brand--medallion nav__brand--show-mobile" href="#" aria-label="Nektar">
        <img src="assets/nektar-logo-circle-clear.png" alt="Nektar — cave, bar à vin" />
      </a>

      <div className="nav__right">
        <div className="nav__links">
          <a className="is-link" href="#carte">{copy.nav.carte}</a>
          <a className="is-link" href="#histoire">{copy.nav.histoire}</a>
          <a className="is-cta" href="#reserver"
            onClick={(e) => { e.preventDefault(); openResa(); }}>
            {copy.nav.reserver}
          </a>
        </div>

        <div className="lang" role="group" aria-label={copy.a11y.lang}>
          <button type="button" className={lang === "fr" ? "is-on" : ""}
            aria-pressed={lang === "fr"} onClick={() => setLang("fr")}>FR</button>
          <span className="sep" aria-hidden="true">·</span>
          <button type="button" className={lang === "en" ? "is-on" : ""}
            aria-pressed={lang === "en"} onClick={() => setLang("en")}>EN</button>
        </div>

        <button type="button" className="nav__burger"
          aria-label={copy.a11y.menu}
          aria-expanded="false"
          onClick={onOpenDrawer}>
          <span></span><span></span><span></span>
        </button>
      </div>
    </nav>
  );
}

/* -------------------------------------------------------
   Hero
------------------------------------------------------- */
function HeroTitle({ copy }) {
  return (
    <h1 className="hero__title">
      <span className="hero__title-or">{copy.hero.word}</span><br />
      {copy.hero.post}
    </h1>
  );
}

function Hero({ t, copy }) {
  const imgRef = useRef(null);
  const [loaded, setLoaded] = useState(false);
  useEffect(() => {
    const img = imgRef.current;
    if (img && img.complete && img.naturalWidth > 0) setLoaded(true);
  }, []);

  return (
    <section
      className="hero"
      data-layout={t.layout}
      style={{ "--hero-overlay": OVERLAYS[t.overlay] || OVERLAYS.marked }}>

      <div className="hero__photo">
        <img
          ref={imgRef}
          className={loaded ? "is-loaded" : ""}
          src={HERO_IMG}
          alt=""
          onLoad={() => setLoaded(true)}
          loading="eager"
          decoding="async"
        />
        <span className="placeholder-tag" aria-hidden="true" style={{display:"none"}}></span>
      </div>
      <div className="hero__grain" aria-hidden="true"></div>
      <div className="hero__overlay" aria-hidden="true"></div>

      <div className="hero__inner" id="content">
        <div className="hero__copy">
          <span className="hero__eyebrow">{copy.hero.eyebrow}</span>
          <HeroTitle copy={copy} />
          <div className="hero__cta-row">
            <a className="hero__cta" href="#reserver"
              onClick={(e) => { e.preventDefault(); openResa(); }}>
              {copy.hero.cta}&nbsp;&nbsp;→
            </a>
          </div>
        </div>
      </div>

      <div className="hero__foot">
        <div className="addr">
          {copy.hero.addrLine}<br />
          {copy.hero.hoursLine}
        </div>
        <a className="scroll" href="#suite">
          <span className="rule"></span>
          <span>{t.lang === "fr" ? "Découvrir" : "Discover"}</span>
        </a>
      </div>
    </section>
  );
}

function Teaser({ copy }) {
  return (
    <section className="teaser" id="suite" aria-label="Section suivante">
      <span className="teaser__eyebrow">{copy.next.eyebrow}</span>
      <h2 className="teaser__title">{copy.next.teaser}</h2>
    </section>
  );
}

/* -------------------------------------------------------
   App
------------------------------------------------------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const scrolled = useScrolled();
  const copy = window.NEKTAR_COPY[t.lang] || window.NEKTAR_COPY.fr;

  const [navOpen, setNavOpen] = useState(false);
  const openNav  = useCallback(() => setNavOpen(true),  []);
  const closeNav = useCallback(() => setNavOpen(false), []); 

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

  return (
    <React.Fragment>
      <a className="skip" href="#content">{copy.a11y.skip}</a>

      <Nav
        t={t}
        copy={copy}
        lang={t.lang}
        setLang={(v) => setTweak("lang", v)}
        scrolled={scrolled}
        onOpenDrawer={openNav}
      />

      <Hero t={t} copy={copy} />
      <Teaser copy={copy} />

      <NavDrawer
        isOpen={navOpen}
        onClose={closeNav}
        copy={copy}
        lang={t.lang}
        setLang={(v) => setTweak("lang", v)}
      />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Mise en page" />
        <TweakRadio
          label="Lock-up"
          value={t.layout}
          options={["left", "centered", "right"]}
          onChange={(v) => setTweak("layout", v)}
        />
        <TweakSection label="Photo" />
        <TweakRadio
          label="Voile"
          value={t.overlay}
          options={["subtle", "marked", "bottom"]}
          onChange={(v) => setTweak("overlay", v)}
        />
        <TweakSection label="Identité" />
        <TweakRadio
          label="Logo nav"
          value={t.brand}
          options={["horizontal", "medaillon"]}
          onChange={(v) => setTweak("brand", v)}
        />
        <TweakSection label="Langue" />
        <TweakRadio
          label="Locale"
          value={t.lang}
          options={["fr", "en"]}
          onChange={(v) => setTweak("lang", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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