/* Flexoon — Tweaks panel */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "a",
  "brand": ["#9b4dff", "#7c4dff", "#4d7cff"],
  "radius": "medio",
  "anim": true
}/*EDITMODE-END*/;

const RADII = { suave: 12, medio: 16, grande: 22, reto: 4 };

function applyTweaks(t) {
  document.documentElement.dataset.hero = t.hero;
  const [a, b, c] = t.brand;
  document.documentElement.style.setProperty('--magenta', a);
  document.documentElement.style.setProperty('--violet', b);
  document.documentElement.style.setProperty('--blue', c);
  document.documentElement.style.setProperty('--brand', `linear-gradient(118deg, ${a} 0%, ${b} 42%, ${c} 100%)`);
  const r = RADII[t.radius] || 16;
  document.documentElement.style.setProperty('--r', r + 'px');
  document.documentElement.style.setProperty('--r-lg', (r + 8) + 'px');
  document.documentElement.style.setProperty('--r-sm', Math.max(6, r - 6) + 'px');
  document.documentElement.classList.toggle('no-anim', !t.anim);
}

function FlexoonTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Seção principal (hero)" />
      <TweakRadio label="Layout" value={t.hero}
        options={[{value:'a',label:'Dividido'},{value:'b',label:'Central'},{value:'c',label:'Imersivo'}]}
        onChange={(v) => setTweak('hero', v)} />
      <TweakSection label="Marca" />
      <TweakColor label="Gradiente" value={t.brand}
        options={[
          ['#9b4dff','#7c4dff','#4d7cff'],
          ['#7c4dff','#4d7cff','#19c6e6'],
          ['#ff5ca8','#9b4dff','#4d7cff'],
          ['#ff6a4d','#ff4d8d','#9b4dff'],
        ]}
        onChange={(v) => setTweak('brand', v)} />
      <TweakSection label="Estilo" />
      <TweakRadio label="Cantos" value={t.radius}
        options={[{value:'reto',label:'Reto'},{value:'suave',label:'Suave'},{value:'medio',label:'Médio'},{value:'grande',label:'Grande'}]}
        onChange={(v) => setTweak('radius', v)} />
      <TweakToggle label="Animações" value={t.anim} onChange={(v) => setTweak('anim', v)} />
    </TweaksPanel>
  );
}

// apply defaults immediately so first paint matches the EDITMODE block
applyTweaks(TWEAK_DEFAULTS);

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