/* Taproot Works website app shell.
   - Hash-based router (#/, #/what, #/who, #/contact).
   - Tweaks panel for hero variant, texture, imagery, lockup size, closer treatment.
   - Persists tweak choices via the host edit-mode protocol. */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "a",
  "texture": "strong",
  "imagery": "hidden",
  "lockup": "260",
  "closerLines": true
}/*EDITMODE-END*/;

function useRoute() {
  const parse = () => {
    const h = (window.location.hash || "#/").replace(/^#\/?/, "");
    return h.split("/")[0] || "";
  };
  const [route, setRoute] = React.useState(parse());
  React.useEffect(() => {
    const onHash = () => {
      setRoute(parse());
      // top-of-page on route change (smooth-scroll respects html { scroll-behavior })
      window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return route;
}

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

  // Apply texture mode at the document root so the CSS [data-texture] hooks fire
  React.useEffect(() => {
    document.documentElement.setAttribute("data-texture", t.texture);
  }, [t.texture]);

  const showImagery = t.imagery === "shown";
  const lockupPx = parseInt(t.lockup, 10);

  let page;
  if (route === "what") page = <WhatWeDoPage />;
  else if (route === "studio") page = <StudioPage />;
  else if (route === "builds") page = <BuildsPage />;
  else if (route === "ops") page = <OpsPage />;
  else if (route === "who") page = <WhoWeArePage showImagery={showImagery} />;
  else if (route === "contact") page = <ContactPage />;
  else page = <HomePage heroVariant={t.heroVariant} showImagery={showImagery} withLines={t.closerLines} />;

  return (
    <div className="tw-app">
      <SiteHeader route={route} lockupSize={lockupPx} />
      {page}
      <SiteFooter route={route} />

      <TweaksPanel title="Tweaks" noDeckControls={true}>
        <TweakSection label="Hero">
          <TweakRadio
            label="Variant (home page)"
            value={t.heroVariant}
            options={[
              { value: "a", label: "A type" },
              { value: "b", label: "B forest" },
              { value: "c", label: "C image" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
        </TweakSection>

        <TweakSection label="Texture & imagery">
          <TweakRadio
            label="Paper grain"
            value={t.texture}
            options={[
              { value: "off", label: "Off" },
              { value: "subtle", label: "Subtle" },
              { value: "strong", label: "Strong" },
            ]}
            onChange={(v) => setTweak("texture", v)}
          />
          <TweakRadio
            label="Image slots"
            value={t.imagery}
            options={[
              { value: "shown", label: "Shown" },
              { value: "hidden", label: "Hidden" },
            ]}
            onChange={(v) => setTweak("imagery", v)}
          />
          <TweakToggle
            label="Vertical lines on Forest closer"
            value={t.closerLines}
            onChange={(v) => setTweak("closerLines", v)}
          />
        </TweakSection>

        <TweakSection label="Logo prominence">
          <TweakRadio
            label="Header lockup (px)"
            value={String(t.lockup)}
            options={[
              { value: "96",  label: "96 canon" },
              { value: "140", label: "140 kit" },
              { value: "200", label: "200 push" },
              { value: "260", label: "260 marketing" },
            ]}
            onChange={(v) => setTweak("lockup", v)}
          />
        </TweakSection>

        <TweakSection label="Brand-extension log">
          <div style={{
            fontSize: "0.78rem", color: "rgba(255,255,255,0.7)",
            lineHeight: 1.55, padding: "4px 0",
          }}>
            Paper grain and Forest line motif are committed system moves, logged for brand review. See design-notes.md for the trail.
          </div>
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

Object.assign(window, { App });