/* ============================================================
   App — routing, tweaks (English only)
   ============================================================ */
const { useState, useEffect, useCallback } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "parallax": true,
  "cardStack": true,
  "avatarCondense": true,
  "motion": "balanced",
  "backdrop": "light",
  "imgRadius": 14
}/*EDITMODE-END*/;

const MOTION = {
  subtle:     { dur: "420ms", parallax: 0.5 },
  balanced:   { dur: "600ms", parallax: 1.0 },
  expressive: { dur: "820ms", parallax: 1.7 },
};

function useRoute() {
  const parse = () => {
    const h = (window.location.hash || "#/").replace(/^#/, "");
    const parts = h.split("/").filter(Boolean);
    return { name: parts[0] || "home", arg: parts[1] || null };
  };
  const [route, setRoute] = useState(parse);
  useEffect(() => {
    const on = () => setRoute(parse());
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  return route;
}

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const route = useRoute();
  const t = I18N.en;

  // apply tweaks
  useEffect(() => {
    const m = MOTION[tweaks.motion] || MOTION.balanced;
    document.documentElement.style.setProperty("--dur", m.dur);
    document.documentElement.style.setProperty("--img-radius", tweaks.imgRadius + "px");
    window.__PARALLAX_AMOUNT = tweaks.parallax ? m.parallax : 0;
    document.body.setAttribute("data-backdrop", tweaks.backdrop);
  }, [tweaks]);

  const nav = useCallback((path) => {
    window.location.hash = "#" + path;
    window.scrollTo(0, 0);
  }, []);

  let page;
  if (route.name === "project") page = <ProjectDetail id={route.arg} lang="en" t={t} nav={nav} />;
  else if (route.name === "about") page = <About lang="en" t={t} nav={nav} />;
  else page = <Home lang="en" t={t} nav={nav} tweaks={tweaks} />;

  return (
    <div className="stage">
      <div className="card-shell" data-page={route.name}>
        <div className="topnav">
          <a className="topnav__cv" href="https://drive.google.com/file/d/1I4YJsAc0f0xlgEXofqjiQWshJJbeRK0x/view?usp=drive_link" target="_blank" rel="noopener noreferrer">View CV</a>
        </div>
        {page}
        <footer className="site-foot">
          <span>
            Made in Brussels on a rainy day, a lovely ❤️ <a href="https://share.google/S9InCF7P0GefwDcf4" target="_blank" rel="noopener noreferrer" className="footer__link">Corica</a> coffee in hand.
          </span>
          <span className="eyebrow">© {NAME} 2026</span>
        </footer>
      </div>

      <TweaksPanel>
        <TweakSection label="Storyscrolling" />
        <TweakToggle label="Stacking cards" value={tweaks.cardStack} onChange={(v) => setTweak("cardStack", v)} />
        <TweakToggle label="Image parallax" value={tweaks.parallax} onChange={(v) => setTweak("parallax", v)} />
        <TweakToggle label="Condensing avatar" value={tweaks.avatarCondense} onChange={(v) => setTweak("avatarCondense", v)} />
        <TweakRadio label="Motion" value={tweaks.motion} options={["subtle", "balanced", "expressive"]} onChange={(v) => setTweak("motion", v)} />
        <TweakSection label="Appearance" />
        <TweakRadio label="Backdrop" value={tweaks.backdrop} options={["light", "dark"]} onChange={(v) => setTweak("backdrop", v)} />
        <TweakSlider label="Image corners" value={tweaks.imgRadius} min={0} max={28} unit="px" onChange={(v) => setTweak("imgRadius", v)} />
      </TweaksPanel>
    </div>
  );
}

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