// app.jsx — Tweaks island for the Valentin Grüner site.
// Applies live design controls to the document root.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "motion": true,
  "motionPace": 1,
  "heroOverlay": 0.58,
  "accent": ["#FFC400", "#E0A200"]
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.dataset.motion = t.motion ? "on" : "off";
    r.style.setProperty("--mo", String(t.motionPace));
    r.style.setProperty("--hero-overlay", String(t.heroOverlay));
    if (Array.isArray(t.accent)) {
      r.style.setProperty("--accent", t.accent[0]);
      r.style.setProperty("--accent-hover", t.accent[1] || t.accent[0]);
    }
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Motion" />
      <TweakToggle label="Animations" value={t.motion}
                   onChange={(v) => setTweak('motion', v)} />
      <TweakSlider label="Pace" value={t.motionPace} min={0.6} max={2} step={0.1} unit="×"
                   onChange={(v) => setTweak('motionPace', v)} />

      <TweakSection label="Atmosphere" />
      <TweakSlider label="Hero darkness" value={Math.round(t.heroOverlay * 100)} min={20} max={100} step={2} unit="%"
                   onChange={(v) => setTweak('heroOverlay', v / 100)} />

      <TweakSection label="Accent" />
      <TweakColor label="Marker" value={t.accent}
                  options={[["#FFC400", "#E0A200"], ["#FF7A1A", "#E0660F"]]}
                  onChange={(v) => setTweak('accent', v)} />
    </TweaksPanel>
  );
}

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