/* Brand — Tweaks panel: variations of hero + palette */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "kinetic",
  "palette": "onyx",
  "cursor": true,
  "ambientNoise": true
}/*EDITMODE-END*/;

function BrandTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.dataset.hero = t.hero;
    document.body.dataset.palette = t.palette;
    document.body.classList.toggle('no-cursor', !t.cursor);
    const cur = document.getElementById('cursor');
    if (cur) cur.style.display = t.cursor ? '' : 'none';
    const noise = document.querySelector('.noise');
    if (noise) noise.style.display = t.ambientNoise ? '' : 'none';
  }, [t.hero, t.palette, t.cursor, t.ambientNoise]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakRadio
        label="Variante"
        value={t.hero}
        options={[
          { value: 'kinetic', label: 'Kinetic' },
          { value: 'marquee', label: 'Marquee' },
          { value: 'data',    label: 'Data' },
        ]}
        onChange={(v) => setTweak('hero', v)}
      />

      <TweakSection label="Paleta" />
      <TweakRadio
        label="Intensidad"
        value={t.palette}
        options={[
          { value: 'onyx',    label: 'Onyx' },
          { value: 'ember',   label: 'Ember' },
          { value: 'furnace', label: 'Furnace' },
        ]}
        onChange={(v) => setTweak('palette', v)}
      />

      <TweakSection label="Ambiente" />
      <TweakToggle
        label="Cursor reactivo"
        value={t.cursor}
        onChange={(v) => setTweak('cursor', v)}
      />
      <TweakToggle
        label="Grano / ruido"
        value={t.ambientNoise}
        onChange={(v) => setTweak('ambientNoise', v)}
      />
    </TweaksPanel>
  );
}

// Mount
const __twkRoot = document.createElement('div');
__twkRoot.id = 'tweaks-panel-root';
document.body.appendChild(__twkRoot);
ReactDOM.createRoot(__twkRoot).render(<BrandTweaks />);