// Tweaks panel for the face-terminal page.
function PageTweaks() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  React.useEffect(() => {
    window.applyPageTweaks(t);
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Weergave" />
      <TweakRadio
        label="Thema"
        value={t.theme}
        options={['dark', 'light']}
        onChange={(v) => setTweak('theme', v)}
      />
      <TweakSection label="Scroll-animatie" />
      <TweakSlider label="Intensiteit" value={t.intensity} min={0.2} max={2} step={0.05} onChange={(v) => setTweak('intensity', v)} />
      <TweakSlider label="Snelheid" value={t.speed} min={0.3} max={2} step={0.05} onChange={(v) => setTweak('speed', v)} />
    </TweaksPanel>
  );
}

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