// About page tweaks — flips hero/timeline direction, accent, and hero headline.
// Mounts a React root only for the panel; the page itself is vanilla.

const ABOUT_TWEAKS = /*EDITMODE-BEGIN*/{
  "direction": "a",
  "accent": "#003B6D",
  "headline": "We didn't enter this field. We invented it."
}/*EDITMODE-END*/;

function AboutTweaks() {
  const [t, setTweak] = useTweaks(ABOUT_TWEAKS);

  React.useEffect(() => {
    document.body.setAttribute('data-direction', t.direction);
  }, [t.direction]);

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

  React.useEffect(() => {
    document.querySelectorAll('.hero-headline').forEach(function (el) {
      el.textContent = t.headline;
    });
  }, [t.headline]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Layout" />
      <TweakRadio
        label="Hero & timeline"
        value={t.direction}
        options={[{ value: 'a', label: 'Monument' }, { value: 'b', label: 'Blueprint' }]}
        onChange={(v) => setTweak('direction', v)}
      />
      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#003B6D', '#25AAE1', '#0a0a0a']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSection label="Copy" />
      <TweakText
        label="Hero headline"
        value={t.headline}
        onChange={(v) => setTweak('headline', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweak-root')).render(<AboutTweaks />);