// site/app.jsx — root App. Renders the Stillness home with a shared Topbar,
// Footer, and a Tweaks panel for live in-page adjustments.

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "fontScale": 1,
  "accent": "#4C2E45",
  "scrollMode": "weighted",
  "glyphMode": "scroll"
}/*EDITMODE-END*/;

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

  useEffectA(() => {
    document.documentElement.style.setProperty("--metis-font-scale", String(t.fontScale || 1));
  }, [t.fontScale]);

  useEffectA(() => {
    document.documentElement.style.setProperty("--metis-charred-plum", t.accent);
  }, [t.accent]);

  // Smooth scroll wiring — choose weight by mode.
  useEffectA(() => {
    if (!window.MetisScroll) return;
    if (t.scrollMode === "off") {
      window.MetisScroll.disable();
    } else {
      const weight = t.scrollMode === "heavy" ? 0.055 : t.scrollMode === "light" ? 0.14 : 0.085;
      window.MetisScroll.setWeight(weight);
      window.MetisScroll.enable();
    }
  }, [t.scrollMode]);

  // Glyph mode — read by AmbientGlyph / MovementGlyph via body attribute.
  useEffectA(() => {
    document.body.setAttribute("data-glyph-mode", t.glyphMode || "scroll");
  }, [t.glyphMode]);

  return (
    <>
      <Topbar />
      <main>
        <Stillness tweaks={t} />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Motion" />
        <TweakRadio label="Scroll feel" value={t.scrollMode}
          options={[
            { label: "Off",      value: "off" },
            { label: "Light",    value: "light" },
            { label: "Weighted", value: "weighted" },
            { label: "Heavy",    value: "heavy" },
          ]}
          onChange={(v) => setTweak("scrollMode", v)} />
        <TweakRadio label="Glyphs" value={t.glyphMode}
          options={[
            { label: "Static",  value: "static" },
            { label: "Breathe", value: "breathe" },
            { label: "Scroll",  value: "scroll" },
          ]}
          onChange={(v) => setTweak("glyphMode", v)} />

        <TweakSection label="Typography" />
        <TweakSlider label="Font scale" value={t.fontScale} min={0.85} max={1.2} step={0.01} unit="×" onChange={(v) => setTweak("fontScale", v)} />

        <TweakSection label="Accent" />
        <TweakColor label="Plum tone" value={t.accent}
          options={["#4C2E45","#623A58","#7C4C6F","#3D2438"]}
          onChange={(v) => setTweak("accent", v)} />
      </TweaksPanel>
    </>
  );
}

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