/* P.E.S.T — app root + Tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "monument",
  "glitch": 45,
  "accent": ["#1b9df5", "#7b3fe4", "#e0249a"],
  "scanlines": true
}/*EDITMODE-END*/;

function applyRootVars(t) {
  const r = document.documentElement;
  r.style.setProperty("--glitch", (t.glitch / 100).toFixed(2));
  const [a, b, c] = t.accent;
  r.style.setProperty("--c-cyan", a);
  r.style.setProperty("--c-violet", b);
  r.style.setProperty("--c-magenta", c);
  r.style.setProperty(
    "--accent-grad",
    `linear-gradient(160deg, ${a} 0%, ${b} 52%, ${c} 100%)`
  );
  r.style.setProperty(
    "--accent-grad-h",
    `linear-gradient(90deg, ${a} 0%, ${b} 50%, ${c} 100%)`
  );
}

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

  React.useEffect(() => applyRootVars(t), [t.glitch, t.accent]);

  return (
    <div className="app">
      <window.Nav />
      <window.Hero variant={t.heroVariant} />
      <window.Manifesto />
      <window.Structure />
      <window.Members />
      <window.Partners />
      <window.Footer />

      {t.scanlines && <div className="fx-overlay"></div>}
      <div className="fx-grain"></div>

      <window.TweaksPanel>
        <window.TweakSection label="Hero" />
        <window.TweakRadio
          label="Layout"
          value={t.heroVariant}
          options={["monument", "split", "terminal"]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
        <window.TweakSection label="Atmosphere" />
        <window.TweakSlider
          label="Glitch / grain"
          value={t.glitch}
          min={0}
          max={100}
          step={5}
          unit="%"
          onChange={(v) => setTweak("glitch", v)}
        />
        <window.TweakToggle
          label="Scanlines"
          value={t.scanlines}
          onChange={(v) => setTweak("scanlines", v)}
        />
        <window.TweakSection label="Accent gradient" />
        <window.TweakColor
          label="Palette"
          value={t.accent}
          options={[
            ["#1b9df5", "#7b3fe4", "#e0249a"],
            ["#19c6e6", "#3b7ff0", "#7b3fe4"],
            ["#7b3fe4", "#e0249a", "#ff7a3d"],
            ["#16d39a", "#1b9df5", "#7b3fe4"],
          ]}
          onChange={(v) => setTweak("accent", v)}
        />
      </window.TweaksPanel>
    </div>
  );
}

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