/* ===== Alpha Player — Tweaks app =====
   Mounts only the Tweaks panel (React) and applies choices to the static DOM. */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;

const HEADLINES = {
  'Segurança jurídica': 'Legalize seus sorteios e opere com <em>segurança jurídica</em>, sem risco e sem improviso.',
  'Dentro da lei': 'Faça sorteios <em>dentro da lei</em>. Com autorização, regulamento e total conformidade.',
  'Proteção': 'A <em>legalização</em> que protege a sua imagem, o seu patrimônio e a sua audiência.'
};
const CTAS = {
  'Análise de conformidade': 'Solicitar análise de conformidade',
  'Quero legalizar': 'Quero legalizar meus sorteios',
  'Aplicar p/ diagnóstico': 'Aplicar para diagnóstico'
};
const ACCENTS = {
  'Laranja Alpha': ['#F57C00', '#FF8F1F'],
  'Roxo institucional': ['#6F3BFF', '#8B5CFF'],
  'Âmbar': ['#E08600', '#F5A623']
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "Segurança jurídica",
  "cta": "Análise de conformidade",
  "accent": "Laranja Alpha"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const el = document.getElementById('hero-headline');
    if (el && HEADLINES[t.headline]) el.innerHTML = HEADLINES[t.headline];
  }, [t.headline]);

  React.useEffect(() => {
    const label = CTAS[t.cta];
    if (!label) return;
    document.querySelectorAll('.js-cta').forEach((b) => {
      const arrow = b.querySelector('.arrow');
      b.firstChild.textContent = label + ' ';
      if (!arrow) b.appendChild(Object.assign(document.createElement('span'), { className: 'arrow', textContent: '→' }));
    });
    const nav = document.querySelector('.nav-cta');
    if (nav) nav.textContent = label.split(' ').slice(0, 2).join(' ');
  }, [t.cta]);

  React.useEffect(() => {
    const pair = ACCENTS[t.accent];
    if (!pair) return;
    document.documentElement.style.setProperty('--accent', pair[0]);
    document.documentElement.style.setProperty('--accent-bright', pair[1]);
  }, [t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Mensagem" />
      <TweakRadio label="Headline" value={t.headline} options={Object.keys(HEADLINES)}
        onChange={(v) => setTweak('headline', v)} />
      <TweakRadio label="Texto do CTA" value={t.cta} options={Object.keys(CTAS)}
        onChange={(v) => setTweak('cta', v)} />
      <TweakSection label="Marca" />
      <TweakRadio label="Cor de destaque" value={t.accent} options={Object.keys(ACCENTS)}
        onChange={(v) => setTweak('accent', v)} />
    </TweaksPanel>
  );
}

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