/* ============================================================
   WE MAKE TREASURES — Tweaks app
   Drives <body data-tone data-hero data-motion> + --coral.
   ============================================================ */

const WMT_TWEAKS = /*EDITMODE-BEGIN*/{
  "tone": "precise",
  "hero": "reel",
  "motion": true,
  "accent": "#FF7E3E"
}/*EDITMODE-END*/;

const ACCENT_PRESS = {
  "#FF7E3E": "#E86420",
  "#FF3D2E": "#E22817",
  "#FF7A4D": "#EA5F30"
};

function WMTTweaks() {
  const [t, setTweak] = useTweaks(WMT_TWEAKS);

  React.useEffect(() => {
    const b = document.body;
    b.setAttribute('data-tone', t.tone);
    b.setAttribute('data-hero', t.hero);
    b.setAttribute('data-motion', t.motion ? 'on' : 'off');
    const root = document.documentElement;
    root.style.setProperty('--coral', t.accent);
    root.style.setProperty('--coral-press', ACCENT_PRESS[t.accent] || t.accent);
    if (typeof window.__refreshReveals === 'function') window.__refreshReveals();
  }, [t.tone, t.hero, t.motion, t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Direction" />
      <TweakRadio
        label="Tone"
        value={t.tone}
        options={['precise', 'loud']}
        onChange={(v) => setTweak('tone', v)}
      />

      <TweakSection label="Signal color" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={['#FF7E3E', '#FF3D2E', '#FF7A4D']}
        onChange={(v) => setTweak('accent', v)}
      />

      <TweakSection label="Motion" />
      <TweakToggle
        label="Cinematic motion"
        value={t.motion}
        onChange={(v) => setTweak('motion', v)}
      />
    </TweaksPanel>
  );
}

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