/* CODEX·ID — Tweaks panel app (drives the vanilla page via window events) */
const CODEX_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "orbit",
  "accent": "#ff3541",
  "reduceMotion": false
}/*EDITMODE-END*/;

function CodexTweaks() {
  const [t, setTweak] = useTweaks(CODEX_TWEAK_DEFAULTS);

  // push values into the vanilla page whenever they change
  React.useEffect(() => {
    window.dispatchEvent(new CustomEvent('codexid:hero', { detail: t.hero }));
  }, [t.hero]);
  React.useEffect(() => {
    window.dispatchEvent(new CustomEvent('codexid:accent', { detail: t.accent }));
  }, [t.accent]);
  React.useEffect(() => {
    window.__codexReduce = t.reduceMotion;
    document.body.classList.toggle('reduce-motion', t.reduceMotion);
  }, [t.reduceMotion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero centerpiece" />
      <TweakRadio
        label="Variation"
        value={t.hero}
        options={[
          { value: 'orbit', label: 'Orbit' },
          { value: 'card', label: 'ID Card' },
          { value: 'feed', label: 'Feed' },
        ]}
        onChange={(v) => setTweak('hero', v)}
      />
      <TweakSection label="Brand accent" />
      <TweakColor
        label="Signal color"
        value={t.accent}
        options={['#ff3541', '#e63a2e', '#ff5d3b', '#ff2d6f']}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSection label="Motion" />
      <TweakToggle
        label="Reduce motion"
        value={t.reduceMotion}
        onChange={(v) => setTweak('reduceMotion', v)}
      />
    </TweaksPanel>
  );
}

(function mountCodexTweaks() {
  const root = document.getElementById('tweaks-root');
  if (root && window.ReactDOM) {
    ReactDOM.createRoot(root).render(<CodexTweaks />);
  }
})();