// SVF homepage — Tweaks panel
const SVF_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "red": "#E63946",
  "grain": 5,
  "cursor": true
}/*EDITMODE-END*/;

function SvfTweaksApp() {
  const [t, setTweak] = useTweaks(SVF_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--red', t.red);
    root.style.setProperty('--grain-o', String((t.grain || 0) / 100));
    document.body.classList.toggle('no-cursor', !t.cursor);
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor label="Red" value={t.red}
        options={['#E63946', '#D62828', '#C1121F']}
        onChange={(v) => setTweak('red', v)} />
      <TweakSection label="Texture" />
      <TweakSlider label="Film grain" value={t.grain} min={0} max={14} step={1} unit="%"
        onChange={(v) => setTweak('grain', v)} />
      <TweakSection label="Motion" />
      <TweakToggle label="Custom cursor" value={t.cursor}
        onChange={(v) => setTweak('cursor', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<SvfTweaksApp />);