// desidium-app.jsx — assembles the site, owns language / scroll / tweaks
const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c8643c",
  "motion": true,
  "columns": 3,
  "defaultLang": "en"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const [lang, setLangState] = useStateApp(() => {
    if (window.desidiumWp && window.desidiumWp.lang) return window.desidiumWp.lang;
    try { return localStorage.getItem("desidium-lang") || TWEAK_DEFAULTS.defaultLang; }
    catch (e) { return TWEAK_DEFAULTS.defaultLang; }
  });
  const setLang = (l) => {
    if (window.desidiumWp && window.desidiumWp.pllActive && window.desidiumWp.languages) {
      const target = window.desidiumWp.languages.find((x) => x.slug === l);
      if (target && target.url) { window.location.href = target.url; return; }
    }
    setLangState(l);
    try { localStorage.setItem("desidium-lang", l); } catch (e) {}
  };
  useEffectApp(() => { document.documentElement.lang = lang; }, [lang]);

  const [scrolled, setScrolled] = useStateApp(false);
  const [menu, setMenu] = useStateApp(false);
  const [route, setRoute] = useStateApp(() => {
    try {
      const params = new URLSearchParams(window.location.search);
      if (params.get("view") === "join") return "join";
    } catch (e) {}
    return "home";
  }); // 'home' | model.id
  const [pendingScroll, setPendingScroll] = useStateApp(() => {
    const hash = window.location.hash;
    return hash && hash !== "#top" ? hash : null;
  });
  useEffectApp(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // after returning home, run any pending scroll-to-section
  useEffectApp(() => {
    if (route === "home" && pendingScroll) {
      const target = pendingScroll;
      requestAnimationFrame(() => {
        const el = document.querySelector(target);
        if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 8; window.scrollTo({ top: y, behavior: "smooth" }); }
        setPendingScroll(null);
      });
    }
  }, [route, pendingScroll]);

  const go = (href) => {
    if (href === "route:journal" && window.desidiumWp && window.desidiumWp.blogUrl) {
      window.location.href = window.desidiumWp.blogUrl;
      return;
    }
    setMenu(false);
    if (href.indexOf("route:") === 0) {
      setRoute(href.slice(6));
      window.scrollTo({ top: 0, behavior: "auto" });
      return;
    }
    if (route !== "home") {
      setRoute("home");
      if (href === "#top") { window.scrollTo({ top: 0, behavior: "auto" }); }
      else { setPendingScroll(href); }
      return;
    }
    if (href === "#top") { window.scrollTo({ top: 0, behavior: "smooth" }); return; }
    const el = document.querySelector(href);
    if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 8; window.scrollTo({ top: y, behavior: "smooth" }); }
  };

  const openModel = (mdl) => { setMenu(false); setRoute(mdl.id); };
  const goContact = () => go("#contact");
  const goPost = (id) => { setMenu(false); setRoute("post:" + id); };
  const goAuthor = (id) => { setMenu(false); setRoute("author:" + id); };
  const goJournal = () => { setMenu(false); setRoute("journal"); window.scrollTo({ top: 0, behavior: "auto" }); };

  const motion = !!t.motion;
  const cols = Number(t.columns) || 3;

  useEffectApp(() => { document.documentElement.style.setProperty("--terra", t.accent); }, [t.accent]);

  const navItems = [["roster","#roster"],["studio","#studio"],["cases","#cases"],["journal","route:journal"],["contact","#contact"],["join","route:join"]];

  const isPost = route.indexOf("post:") === 0;
  const isAuthor = route.indexOf("author:") === 0;
  const isModel = !isPost && !isAuthor && route !== "home" && route !== "join" && route !== "journal";

  return (
    <div className="site" style={{ "--terra": t.accent }}>
      <Nav lang={lang} setLang={setLang} scrolled={scrolled} go={go} open={menu} setOpen={setMenu} />

      {/* mobile menu overlay */}
      <div className={"menu-overlay " + (menu ? "is-open" : "")}>
        <nav>
          {navItems.map(([k,href]) => (
            <a key={k} href={href} onClick={(e)=>{e.preventDefault();go(href);}}>{L(I18N.nav[k],lang)}</a>
          ))}
        </nav>
        <button className="lang-toggle big" onClick={()=>setLang(lang==="en"?"es":"en")}>
          <span className={lang==="en"?"on":""}>EN</span><span className="sep">/</span><span className={lang==="es"?"on":""}>ES</span>
        </button>
      </div>

      <main>
        {route === "home" ? (
          <React.Fragment>
            <Hero lang={lang} go={go} />
            <Divisions lang={lang} motion={motion} />
            <Why lang={lang} motion={motion} />
            <Roster lang={lang} motion={motion} columns={cols} onOpen={openModel} />
            <Cases lang={lang} motion={motion} />
            <Contact lang={lang} motion={motion} />
          </React.Fragment>
        ) : route === "join" ? (
          <JoinPage lang={lang} motion={motion}
            onApply={() => { const el = document.querySelector("#apply"); if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 8; window.scrollTo({ top: y, behavior: "smooth" }); } }} />
        ) : route === "journal" ? (
          <JournalIndex lang={lang} motion={motion} onPost={goPost} onAuthor={goAuthor} />
        ) : isPost ? (
          <ArticlePage post={POSTS.find((p) => p.id === route.slice(5))} lang={lang} motion={motion}
            onBack={goJournal} onPost={goPost} onAuthor={goAuthor} />
        ) : isAuthor ? (
          <AuthorPage author={AUTHORS.find((a) => a.id === route.slice(7))} lang={lang} motion={motion}
            onBack={goJournal} onPost={goPost} />
        ) : (
          <ModelDetail
            model={MODELS.find((x) => x.id === route)}
            lang={lang} motion={motion}
            onBack={() => { setPendingScroll("#roster"); setRoute("home"); }}
            onNav={(id) => setRoute(id)}
            goContact={goContact}
          />
        )}
      </main>

      <Footer lang={lang} setLang={setLang} go={go} />

      <TweaksPanel>
        <TweakSection label="Language" />
        <TweakRadio label="Default" value={t.defaultLang} options={["en","es"]}
          onChange={(v)=>{ setTweak("defaultLang", v); setLang(v); }} />
        <TweakSection label="Motion" />
        <TweakToggle label="Scroll reveals" value={t.motion} onChange={(v)=>setTweak("motion", v)} />
        <TweakSection label="Roster" />
        <TweakRadio label="Columns" value={String(t.columns)} options={["3","4"]}
          onChange={(v)=>setTweak("columns", Number(v))} />
        <TweakSection label="Accent" />
        <TweakColor label="Terracotta" value={t.accent}
          options={["#c8643c","#b8a890","#7a8a8f","#a8493c","#9c8f5a"]}
          onChange={(v)=>setTweak("accent", v)} />
      </TweaksPanel>
    </div>
  );
}

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