// FRAME LP v2 — painel de Tweaks (variantes de seção + cor do CTA)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "metodo": "jornada",
  "sobre": "foto",
  "urgencia": "capacidade",
  "cta": "verde"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const b = document.body;
    b.dataset.metodo = t.metodo;
    b.dataset.sobre = t.sobre;
    b.dataset.urgencia = t.urgencia;
    b.dataset.cta = t.cta;
  }, [t.metodo, t.sobre, t.urgencia, t.cta]);

  return (
    <TweaksPanel>
      <TweakSection label="Como funciona" />
      <TweakRadio
        label="Layout"
        value={t.metodo}
        options={['timeline', 'jornada']}
        onChange={(v) => setTweak('metodo', v)}
      />
      <TweakSection label="Sobre nós" />
      <TweakRadio
        label="Layout"
        value={t.sobre}
        options={['foto', 'manifesto']}
        onChange={(v) => setTweak('sobre', v)}
      />
      <TweakSection label="Urgência" />
      <TweakRadio
        label="Estilo"
        value={t.urgencia}
        options={['capacidade', 'ultima']}
        onChange={(v) => setTweak('urgencia', v)}
      />
      <TweakSection label="Geral" />
      <TweakRadio
        label="Cor do CTA"
        value={t.cta}
        options={['verde', 'roxo']}
        onChange={(v) => setTweak('cta', v)}
      />
    </TweaksPanel>
  );
}

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