/* CABALLORIA — Tweaks panel (React island; controls the vanilla page via window.CBApp) */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroLayout": "split",
  "heroVisual": "video",
  "goldAccent": "#C4A455",
  "heroScale": 1,
  "profLayout": "hscroll",
  "particles": 30,
  "ambientMotion": true,
  "bgAlternation": true
}/*EDITMODE-END*/;

function CBTweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [ready, setReady] = React.useState(!!window.CBApp);

  React.useEffect(() => {
    if (window.CBApp) { setReady(true); return; }
    const on = () => setReady(true);
    window.addEventListener('cb-app-ready', on);
    return () => window.removeEventListener('cb-app-ready', on);
  }, []);

  React.useEffect(() => { if (ready) window.CBApp.setHero(t.heroLayout); }, [ready, t.heroLayout]);
  React.useEffect(() => { if (ready) window.CBApp.setHeroVisual(t.heroVisual); }, [ready, t.heroVisual]);
  React.useEffect(() => { if (ready) window.CBApp.setGold(t.goldAccent); }, [ready, t.goldAccent]);
  React.useEffect(() => { if (ready) window.CBApp.setHeroScale(t.heroScale); }, [ready, t.heroScale]);
  React.useEffect(() => { if (ready) window.CBApp.setProfLayout(t.profLayout); }, [ready, t.profLayout]);
  React.useEffect(() => { if (ready) window.CBApp.setParticles(t.particles); }, [ready, t.particles]);
  React.useEffect(() => { if (ready) window.CBApp.setMotion(t.ambientMotion); }, [ready, t.ambientMotion]);
  React.useEffect(() => { if (ready) window.CBApp.setBgAlt(t.bgAlternation); }, [ready, t.bgAlternation]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakRadio label="Layout" value={t.heroLayout}
        options={['split', 'monument', 'editorial']}
        onChange={(v) => setTweak('heroLayout', v)} />
      <TweakRadio label="Visual" value={t.heroVisual}
        options={[{ value: 'video', label: 'Video' }, { value: 'horse', label: '3D horse' }, { value: 'both', label: 'Both' }]}
        onChange={(v) => setTweak('heroVisual', v)} />
      <TweakSlider label="Type scale" value={t.heroScale} min={0.8} max={1.3} step={0.05}
        onChange={(v) => setTweak('heroScale', v)} />

      <TweakSection label="Atmosphere" />
      <TweakColor label="Gold accent" value={t.goldAccent}
        options={['#C4A455', '#DFC27A', '#A8854A', '#B5946B']}
        onChange={(v) => setTweak('goldAccent', v)} />
      <TweakSlider label="Particles" value={t.particles} min={0} max={60} step={5}
        onChange={(v) => setTweak('particles', v)} />
      <TweakToggle label="Ambient motion" value={t.ambientMotion}
        onChange={(v) => setTweak('ambientMotion', v)} />

      <TweakSection label="Structure" />
      <TweakRadio label="Professions" value={t.profLayout}
        options={[{ value: 'hscroll', label: 'Pinned scroll' }, { value: 'grid', label: 'Grid' }]}
        onChange={(v) => setTweak('profLayout', v)} />
      <TweakToggle label="Alternate section bg" value={t.bgAlternation}
        onChange={(v) => setTweak('bgAlternation', v)} />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const host = document.createElement('div');
  host.id = 'cb-tweaks-root';
  document.body.appendChild(host);
  ReactDOM.createRoot(host).render(<CBTweaksApp />);
})();