// SL Consultings v3 — Tweaks
// Accent color, robot companion, film grain.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E5C07B",
  "robot": true,
  "grain": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  React.useEffect(() => {
    document.body.classList.toggle('no-robot', !t.robot);
  }, [t.robot]);

  React.useEffect(() => {
    document.body.classList.toggle('no-grain', !t.grain);
  }, [t.grain]);

  return (
    <TweaksPanel>
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={t.accent}
        options={['#E5C07B', '#6FC3B0', '#C9CDE4', '#D98A66']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSection label="Atmosphere" />
      <TweakToggle label="Robot companion" value={t.robot}
        onChange={(v) => setTweak('robot', v)} />
      <TweakToggle label="Film grain" value={t.grain}
        onChange={(v) => setTweak('grain', v)} />
    </TweaksPanel>
  );
}

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