/* That's Right. — Tweaks island.
   A small React app that mounts the Tweaks panel and drives the vanilla page
   through window.__applyTweaks. Exploration dimensions: hero typography,
   loop playback (scroll-driven vs auto), and orb reactivity. */
const TR_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroType": "display",
  "loopPlayback": "scroll",
  "orbReact": "both"
}/*EDITMODE-END*/;

function TweaksApp() {
  const [t, setTweak] = useTweaks(TR_TWEAK_DEFAULTS);

  React.useEffect(() => { if (window.__applyTweaks) window.__applyTweaks('heroType', t.heroType); }, [t.heroType]);
  React.useEffect(() => { if (window.__applyTweaks) window.__applyTweaks('loopPlayback', t.loopPlayback); }, [t.loopPlayback]);
  React.useEffect(() => { if (window.__applyTweaks) window.__applyTweaks('orbReact', t.orbReact); }, [t.orbReact]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero typography" />
      <TweakRadio
        label="Headline face"
        value={t.heroType}
        options={[{ value: 'system', label: 'System' }, { value: 'display', label: 'Display' }]}
        onChange={(v) => setTweak('heroType', v)} />

      <TweakSection label="The loop" />
      <TweakRadio
        label="Playback"
        value={t.loopPlayback}
        options={[{ value: 'scroll', label: 'Scroll' }, { value: 'auto', label: 'Auto-play' }]}
        onChange={(v) => setTweak('loopPlayback', v)} />

      <TweakSection label="The orb" />
      <TweakSelect
        label="Reacts to"
        value={t.orbReact}
        options={[
          { value: 'both', label: 'Proximity + CTA' },
          { value: 'proximity', label: 'Cursor proximity' },
          { value: 'cta', label: 'CTA hover only' },
          { value: 'off', label: 'Nothing (breathes)' },
        ]}
        onChange={(v) => setTweak('orbReact', v)} />
    </TweaksPanel>
  );
}

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