/* About page tweaks — three expressive controls that reshape the page's feel.
   Values are written to data-* attributes on <body>; all styling lives in the
   page's <style> block so the tweaks are pure CSS switches. */
const ABOUT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "portrait": "Color",
  "vision": "Hairline",
  "mood": "Light"
}/*EDITMODE-END*/;

function AboutTweaks() {
  const [t, setTweak] = useTweaks(ABOUT_TWEAK_DEFAULTS);
  React.useEffect(() => {
    const b = document.body;
    b.dataset.portrait = t.portrait.toLowerCase();
    b.dataset.vision = t.vision.toLowerCase();
    b.dataset.mood = t.mood.toLowerCase();
  }, [t.portrait, t.vision, t.mood]);
  return (
    <TweaksPanel>
      <TweakSection label="Founder portraits" />
      <TweakRadio label="Treatment" value={t.portrait} options={['Duotone', 'Mono', 'Color']}
                  onChange={(v) => setTweak('portrait', v)} />
      <TweakSection label="Vision statements" />
      <TweakRadio label="Voice" value={t.vision} options={['Hairline', 'Manifesto', 'Cards']}
                  onChange={(v) => setTweak('vision', v)} />
      <TweakSection label="Page" />
      <TweakRadio label="Mood" value={t.mood} options={['Light', 'Ink']}
                  onChange={(v) => setTweak('mood', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('about-tweaks')).render(<AboutTweaks />);
