// Top-level App with Tweaks.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mood": "premium",
  "helix": "breathing",
  "voice": "editorial"
}/*EDITMODE-END*/;

function App() {
  const [route, setRoute] = useState(() => {
    const h = window.location.hash.replace("#", "").split("?")[0];
    return ["home", "about", "method", "contact"].includes(h) ? h : "home";
  });
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  function go(r, opts) {
    setRoute(r);
    const hash = opts && opts.intent ? `${r}?intent=${encodeURIComponent(opts.intent)}` : r;
    window.location.hash = hash;
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  }

  useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace("#", "").split("?")[0];
      if (["home", "about", "method", "contact"].includes(h)) setRoute(h);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  // Apply mood + voice presets via classes on body
  useEffect(() => {
    document.body.classList.remove("mood-clinical", "mood-premium", "mood-performance");
    document.body.classList.add(`mood-${t.mood}`);
    document.body.classList.remove("voice-editorial", "voice-stamped", "voice-whispered");
    document.body.classList.add(`voice-${t.voice}`);
  }, [t.mood, t.voice]);

  let Page = Home;
  if (route === "about") Page = About;
  else if (route === "method") Page = Method;
  else if (route === "contact") Page = Contact;

  return (
    <React.Fragment>
      <FasciaCanvas behavior={t.helix} />
      <Nav route={route} go={go} />
      <main key={route}>
        <Page go={go} />
      </main>
      <Footer go={go} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Aesthetic Mood" />
        <TweakRadio
          label="Tone"
          value={t.mood}
          options={["clinical", "premium", "performance"]}
          onChange={(v) => setTweak("mood", v)}
        />
        <TweakSection label="Helix Behavior" />
        <TweakRadio
          label="State"
          value={t.helix}
          options={["dormant", "breathing", "reactive"]}
          onChange={(v) => setTweak("helix", v)}
        />
        <TweakSection label="Voice Treatment" />
        <TweakRadio
          label="Style"
          value={t.voice}
          options={["editorial", "stamped", "whispered"]}
          onChange={(v) => setTweak("voice", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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