// app.jsx — router + tweaks wiring

function useHashRoute() {
  const [route, setRoute] = React.useState(() => window.location.hash.replace(/^#/, "") || "home");
  React.useEffect(() => {
    const on = () => setRoute(window.location.hash.replace(/^#/, "") || "home");
    window.addEventListener("hashchange", on);
    return () => window.removeEventListener("hashchange", on);
  }, []);
  const go = React.useCallback((r) => {
    window.location.hash = "#" + r;
    window.scrollTo({ top: 0 });
  }, []);
  return [route, go];
}

function App() {
  const [route, go] = useHashRoute();
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  // Apply palette + font to root
  React.useEffect(() => {
    const root = document.documentElement;
    const [paper, ink, accent] = tweaks.palette;
    root.style.setProperty("--paper", paper);
    root.style.setProperty("--ink", ink);
    root.style.setProperty("--green", accent);
    root.style.setProperty("--yellow", tweaks.palette[3] || accent);
    root.style.setProperty("--chartreuse", accent);
    // derived
    root.style.setProperty("--paper-soft", mix(paper, ink, 0.06));
    root.style.setProperty("--paper-deep", mix(paper, ink, 0.12));
    root.style.setProperty("--ink-soft", mix(ink, paper, 0.18));
    root.style.setProperty("--mute", mix(ink, paper, 0.5));
    root.style.setProperty("--rule", mix(paper, ink, 0.18));
    const fp = window.FONT_PAIRS[tweaks.displayFont] || window.FONT_PAIRS["Instrument Serif"];
    root.style.setProperty("--display", fp.display);
  }, [tweaks.palette, tweaks.displayFont]);

  // Load any non-default Google Font once
  React.useEffect(() => {
    const fp = window.FONT_PAIRS[tweaks.displayFont];
    if (!fp || !fp.import) return;
    const id = "font-" + tweaks.displayFont.replace(/\W/g, "");
    if (document.getElementById(id)) return;
    const link = document.createElement("link");
    link.id = id;
    link.rel = "stylesheet";
    link.href = "https://fonts.googleapis.com/css2?family=" + fp.import + "&display=swap";
    document.head.appendChild(link);
  }, [tweaks.displayFont]);

  let page;
  if (route === "home" || route === "")             page = <window.HomePage go={go} tweaks={tweaks} />;
  else if (route === "work" || route === "projects") page = <window.ProjectsPage go={go} tweaks={tweaks} />;
  else if (route.startsWith("project/"))            page = <window.ProjectDetailPage slug={route.slice("project/".length)} go={go} />;
  else if (route === "about")                       page = <window.AboutPage go={go} />;
  else if (route === "partners")                    page = <window.PartnersPage go={go} />;
  else if (route === "contact")                     page = <window.ContactPage go={go} />;
  else                                              page = <window.HomePage go={go} tweaks={tweaks} />;

  return (
    <>
      <window.Nav route={route} go={go} />
      {page}
      <window.Footer go={go} route={route} />

      <TweaksPanel>
        <TweakSection label="Color" />
        <TweakColor
          label="Palette"
          value={tweaks.palette}
          options={Object.values(window.PALETTES)}
          onChange={(v) => setTweak("palette", v)}
        />

        <TweakSection label="Typography" />
        <TweakSelect
          label="Display"
          value={tweaks.displayFont}
          options={Object.keys(window.FONT_PAIRS)}
          onChange={(v) => setTweak("displayFont", v)}
        />

        <TweakSection label="Hero" />
        <TweakRadio
          label="Treatment"
          value={tweaks.heroVariant}
          options={["wordmark", "type", "marquee"]}
          onChange={(v) => setTweak("heroVariant", v)}
        />

        <TweakSection label="Projects" />
        <TweakSelect
          label="Grid"
          value={tweaks.projectsLayout}
          options={["posters", "grid", "asymmetric", "list"]}
          onChange={(v) => setTweak("projectsLayout", v)}
        />

        <TweakSection label="Upcoming" />
        <TweakRadio
          label="Treatment"
          value={tweaks.screenplayVariant}
          options={["card", "marquee"]}
          onChange={(v) => setTweak("screenplayVariant", v)}
        />
      </TweaksPanel>
    </>
  );
}

// hex mix helper
function mix(a, b, t) {
  function h(c) { return [parseInt(c.slice(1, 3), 16), parseInt(c.slice(3, 5), 16), parseInt(c.slice(5, 7), 16)]; }
  const [r1, g1, b1] = h(a), [r2, g2, b2] = h(b);
  const r = Math.round(r1 + (r2 - r1) * t);
  const g = Math.round(g1 + (g2 - g1) * t);
  const bb = Math.round(b1 + (b2 - b1) * t);
  return "#" + [r, g, bb].map(x => x.toString(16).padStart(2, "0")).join("");
}

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