// app.jsx — root composition for NewB LP

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "B",
  "ctaVariant": "direct",
  "dark": true
}/*EDITMODE-END*/;

const CTA = {
  direct: {
    short: 'Quero conhecer a NewB',
    note: 'Sem compromisso · Atendimento direto pelo WhatsApp',
  },
  benefit: {
    short: 'Descobrir como meu dinheiro pode trabalhar fora',
    note: 'Conversa gratuita · Sem obrigação de investir',
  },
};

window.NEWB_WHATSAPP = 'https://wa.me/551153045331';

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

  // Theme via body class
  React.useEffect(() => {
    document.body.classList.toggle('lp-light', !t.dark);
  }, [t.dark]);

  const cta = CTA[t.ctaVariant];

  return (
    <>
      <Header ctaLabel="Falar com a NewB" />
      <main>
        <Hero
          headline={t.headline}
          ctaLabel={cta.short}
          ctaNote={cta.note}
        />
        <Ticker />
        <Opening />
        <Pains />
        <Solution />
        <Benefits />
        <Prova />
        <Offer />
        <Objections />
        <Faq />
        <Final ctaLabel={cta.short} ctaNote={cta.note} />
      </main>
      <Footer />
      <StickyCTA ctaLabel="Falar com a NewB" />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Cabeçalho" />
        <TweakRadio
          label="Headline"
          value={t.headline}
          options={['A', 'B', 'C']}
          onChange={(v) => setTweak('headline', v)}
        />
        <div style={{ fontSize: 10, lineHeight: 1.4, color: 'rgba(41,38,27,.6)', padding: '2px 0 4px' }}>
          {t.headline === 'A' && 'Ângulo: controle e segurança'}
          {t.headline === 'B' && 'Ângulo: superioridade vs. tradicional'}
          {t.headline === 'C' && 'Ângulo: desejo e descoberta'}
        </div>

        <TweakSection label="Call-to-action" />
        <TweakRadio
          label="Variação"
          value={t.ctaVariant}
          options={['direct', 'benefit']}
          onChange={(v) => setTweak('ctaVariant', v)}
        />
        <div style={{ fontSize: 10, lineHeight: 1.4, color: 'rgba(41,38,27,.6)', padding: '2px 0 4px' }}>
          {t.ctaVariant === 'direct' && '"Quero conhecer a NewB"'}
          {t.ctaVariant === 'benefit' && '"Descobrir como meu dinheiro pode trabalhar fora"'}
        </div>

        <TweakSection label="Tema" />
        <TweakToggle
          label="Modo escuro"
          value={t.dark}
          onChange={(v) => setTweak('dark', v)}
        />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);