/* App root — multi-page dispatcher driven by <div id="root" data-page="..."> */
(function () {
  const { useState, useEffect, useRef } = React;
  const C_ALL = window.CONTENT;

  const FONTS = {
    "Cormorant Garamond": '"Cormorant Garamond", Georgia, serif',
    "Playfair Display": '"Playfair Display", Georgia, serif',
    "Libre Caslon Display": '"Libre Caslon Display", Georgia, serif',
  };

  const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
    "heroVariant": "fullbleed",
    "clubsVariant": "selector",
    "membershipVariant": "cards",
    "color": "white",
    "displayFont": "Cormorant Garamond",
    "navStyle": "solid",
    "anim": true,
    "banner": true
  }/*EDITMODE-END*/;

  function App() {
    const root = document.getElementById("root");
    const page = (root && root.dataset.page) || "home";

    const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
    const [lang, setLang] = useState(() => localStorage.getItem("ema_lang") || "fr");
    const [cookieOpen, setCookieOpen] = useState(() => localStorage.getItem("ema_cookie") !== "1");
    const [overHero, setOverHero] = useState(true);
    const [veilOn, setVeilOn] = useState(false);

    // Transition veil — only on language switch (not page navigation)
    const changeLang = (l) => {
      if (l === lang) return;
      if (!t.anim) { setLang(l); return; }
      setVeilOn(true);
      setTimeout(() => setLang(l), 240);
      setTimeout(() => setVeilOn(false), 580);
    };

    // content fade only re-runs on language change, not initial page load
    const firstRender = useRef(true);
    useEffect(() => { firstRender.current = false; }, []);
    const pageAnimClass = (t.anim && !firstRender.current) ? "ema-page-anim" : "";

    const C = C_ALL[lang];
    const mark = "assets/media/image1.png";
    const logoWhite = "assets/logo-ema-transparent.png";

    useEffect(() => { localStorage.setItem("ema_lang", lang); document.documentElement.lang = lang; }, [lang]);

    // placeholder href="#" links should not jump
    useEffect(() => {
      const onClick = (e) => {
        const a = e.target.closest && e.target.closest('a[href="#"]');
        if (a) e.preventDefault();
      };
      document.addEventListener("click", onClick);
      return () => document.removeEventListener("click", onClick);
    }, []);

    useEffect(() => {
      const r = document.documentElement;
      r.setAttribute("data-color", t.color);
      r.setAttribute("data-anim", t.anim ? "on" : "off");
      r.style.setProperty("--display", FONTS[t.displayFont] || FONTS["Cormorant Garamond"]);
    }, [t.color, t.anim, t.displayFont]);

    // Scroll-reveal
    window.useReveal();
    useEffect(() => {
      const id = setTimeout(() => {
        document.querySelectorAll("[data-reveal]:not(.in)").forEach((e) => {
          const rect = e.getBoundingClientRect();
          if (rect.top < window.innerHeight * 0.94) e.classList.add("in");
        });
      }, 60);
      return () => clearTimeout(id);
    }, [lang, t.heroVariant, t.clubsVariant, t.membershipVariant, t.color, page]);

    // Header transparency only on home (over hero)
    useEffect(() => {
      const onScroll = () => setOverHero(window.scrollY < (window.innerHeight * 0.6));
      onScroll(); window.addEventListener("scroll", onScroll, { passive: true });
      return () => window.removeEventListener("scroll", onScroll);
    }, []);

    // Scroll to hash after mount (for cross-page anchor links)
    useEffect(() => {
      const h = window.location.hash;
      if (!h) return;
      const id = setTimeout(() => {
        const el = document.getElementById(h.slice(1).split("-").length > 1 && h.startsWith("#club-") ? "clubs" : h.slice(1));
        if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
      }, 250);
      return () => clearTimeout(id);
    }, [page]);

    const isHome = page === "home";
    const heroDark = isHome && (t.heroVariant === "fullbleed" || t.color === "ink");

    let PageBody = null;
    switch (page) {
      case "clubs":      PageBody = <window.ClubsPage C={C} t={t} lang={lang} logoWhite={logoWhite} />; break;
      case "missions":   PageBody = <window.MissionsPage C={C} lang={lang} logoWhite={logoWhite} />; break;
      case "projects":   PageBody = <window.ProjectsPage C={C} lang={lang} logoWhite={logoWhite} />; break;
      case "membership": PageBody = <window.MembershipPage C={C} t={t} lang={lang} logoWhite={logoWhite} />; break;
      case "news":              PageBody = <window.NewsPage C={C} lang={lang} logoWhite={logoWhite} />; break;
      case "news-totalenergies":       PageBody = <window.NewsTotalEnergiesPage C={C} lang={lang} />; break;
      case "news-lheure-des-alliances": PageBody = <window.NewsAlliancesPage C={C} lang={lang} />; break;
      case "news-au-dela-du-petrole":   PageBody = <window.NewsAuDelaPage C={C} lang={lang} />; break;
      case "contact":    PageBody = <window.ContactPage C={C} lang={lang} logoWhite={logoWhite} />; break;
      default:           PageBody = <window.HomePage C={C} mark={mark} logoWhite={logoWhite} t={t} lang={lang} />;
    }

    return (
      <div id="ema-root">
        <window.Header C={C} lang={lang} setLang={changeLang} mark={mark}
          navStyle={t.navStyle} overHero={overHero && isHome} heroDark={heroDark}
          currentPage={page} />

        <main><div key={page + "_" + lang} className={pageAnimClass}>{PageBody}</div></main>

        <window.Footer C={C} mark={mark} />

        {cookieOpen && <window.CookieBanner C={C} onClose={() => { setCookieOpen(false); localStorage.setItem("ema_cookie", "1"); }} />}

        {isHome && <window.ScrollRail items={[
          { id: "top", label: C.nav.home },
          { id: "about", label: lang === "fr" ? "Qui sommes-nous" : "About us" },
          { id: "pillars", label: lang === "fr" ? "Mission" : "Mission" },
          { id: "value", label: lang === "fr" ? "Notre apport" : "Value" },
          { id: "governance", label: lang === "fr" ? "Gouvernance" : "Governance" },
          { id: "ethics", label: lang === "fr" ? "Éthique" : "Ethics" },
          { id: "partners", label: lang === "fr" ? "Partenaires" : "Partners" },
          { id: "join", label: C.nav.join },
        ]} />}

        <Tweaks t={t} setTweak={setTweak} lang={lang} />

        <div id="ema-veil" className={veilOn ? "show" : ""} aria-hidden="true">
          <img src="assets/ema_logo_cutout.png" alt="" />
        </div>
      </div>
    );
  }

  function Tweaks({ t, setTweak, lang }) {
    const L = lang === "fr";
    const {
      TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakToggle,
    } = window;
    return (
      <TweaksPanel title="Tweaks">
        <TweakSection label={L ? "Mise en page" : "Layout"} />
        <TweakRadio label={L ? "Héros" : "Hero"} value={t.heroVariant}
          options={["split", "centered", "fullbleed"]}
          onChange={(v) => setTweak("heroVariant", v)} />
        <TweakRadio label="Clubs" value={t.clubsVariant}
          options={["selector", "grid"]}
          onChange={(v) => setTweak("clubsVariant", v)} />
        <TweakRadio label={L ? "Adhésion" : "Membership"} value={t.membershipVariant}
          options={["cards", "table"]}
          onChange={(v) => setTweak("membershipVariant", v)} />
        <TweakRadio label={L ? "Navigation" : "Nav"} value={t.navStyle}
          options={["solid", "transparent"]}
          onChange={(v) => setTweak("navStyle", v)} />

        <TweakSection label={L ? "Couleur & type" : "Color & type"} />
        <TweakRadio label={L ? "Ambiance" : "Theme"} value={t.color}
          options={["white", "cream", "ink"]}
          onChange={(v) => setTweak("color", v)} />
        <TweakSelect label={L ? "Police titres" : "Display font"} value={t.displayFont}
          options={["Cormorant Garamond", "Playfair Display", "Libre Caslon Display"]}
          onChange={(v) => setTweak("displayFont", v)} />

        <TweakSection label={L ? "Options" : "Options"} />
        <TweakToggle label={L ? "Animations" : "Animations"} value={t.anim}
          onChange={(v) => setTweak("anim", v)} />
      </TweaksPanel>
    );
  }

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