// Main app for leadedspunk.net

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "scanlineOpacity": 0.18,
  "noiseOpacity": 0.06,
  "flickerOpacity": 0.025,
  "phosphorBleed": 0,
  "blackwall": 0.85,
  "threat": "ELEVATED",
  "fontScale": 1
}/*EDITMODE-END*/;

function App() {
  const [replayKey, setReplayKey] = useState(0);
  const [bootDone, setBootDone] = useState(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const handleReplay = () => { setReplayKey(k => k + 1); setBootDone(false); };

  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--scanline-opacity", t.scanlineOpacity);
    r.style.setProperty("--noise-opacity", t.noiseOpacity);
    r.style.setProperty("--flicker-opacity", t.flickerOpacity);
    r.style.setProperty("--phosphor-bleed", t.phosphorBleed + "px");
    r.style.setProperty("--blackwall-intensity", t.blackwall);
    document.body.style.fontSize = `${14 * t.fontScale}px`;
  }, [t]);

  return (
    <>
      <div className="boot-bg" aria-hidden="true">
        <BootSequence
          onComplete={() => setBootDone(true)}
          replayKey={replayKey}
          maxLines={80}
        />
      </div>

      <StatusBar threat={t.threat} onReplay={handleReplay} />

      <div className="shell">
        <Hero
          bootDone={bootDone}
          replayKey={replayKey}
          onBootDone={() => setBootDone(true)}
        />
        <Manifesto />
        <ToolKits />
        <Restricted />
        <Contact />
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="CRT">
          <TweakSlider label="Noise" value={t.noiseOpacity} min={0} max={0.2} step={0.01}
                       onChange={(v) => setTweak("noiseOpacity", v)} />
        </TweakSection>

        <TweakSection label="Blackwall">
          <TweakSlider label="Wall intensity" value={t.blackwall} min={0} max={1.2} step={0.05}
                       onChange={(v) => setTweak("blackwall", v)} />
        </TweakSection>

        <TweakSection label="Duality">
          <TweakSelect
            label="Threat posture"
            value={t.threat}
            options={["LOW", "GUARDED", "ELEVATED", "HIGH", "SEVERE"]}
            onChange={(v) => setTweak("threat", v)}
          />
        </TweakSection>

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

        <TweakSection label="System">
          <TweakButton label="Replay boot sequence" onClick={handleReplay} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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