/* global React */
const { useState: useStateC, useEffect: useEffectC } = React;

/* ============= COUNTDOWN ============= */
const OFERTA_END_BRT = new Date('2026-05-15T23:59:00-03:00').getTime();
function Countdown() {
  const [diff, setDiff] = useStateC(OFERTA_END_BRT - Date.now());
  useEffectC(() => {
    const id = setInterval(() => setDiff(OFERTA_END_BRT - Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  if (diff <= 0) return null;
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  const cell = (n, lbl) => (
    React.createElement('div', { className: 'cd-cell' },
      React.createElement('div', { className: 'cd-num' }, String(n).padStart(2, '0')),
      React.createElement('div', { className: 'cd-lbl' }, lbl))
  );
  return React.createElement('div', { className: 'countdown', 'aria-label': 'Tempo restante da oferta de lançamento' },
    React.createElement('div', { className: 'cd-tag' }, 'Oferta termina em'),
    React.createElement('div', { className: 'cd-row' }, cell(d, 'dias'), cell(h, 'h'), cell(m, 'min'), cell(s, 's'))
  );
}

/* ============= OFERTA ============= */
function Oferta() {
  return (
    <section className="offer-section" id="oferta" data-screen-label="11 Oferta">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", margin: "0 auto 56px", alignItems: "center" }}>
          <h2 className="display h2">Sua matrícula no Método LEGADO.</h2>
        </div>

        <div className="offer-card">
          <div className="offer-tag">Oferta de lançamento</div>
          <h3 className="offer-title">Tudo o que você recebe.</h3>

          <ul className="offer-stack">
            <li className="offer-stack-row">
              <span className="offer-stack-label"><strong>Curso Método LEGADO</strong><span className="muted">6 módulos · acesso vitalício</span></span>
              <span className="offer-stack-value">R$ 1.997</span>
            </li>
            <li className="offer-stack-row">
              <span className="offer-stack-label"><strong>Bônus 01 ·</strong> Tira-dúvidas no WhatsApp</span>
              <span className="offer-stack-value">R$ 1.200</span>
            </li>
            <li className="offer-stack-row">
              <span className="offer-stack-label"><strong>Bônus 02 ·</strong> Comunidade privada de sucessores</span>
              <span className="offer-stack-value">R$ 1.800</span>
            </li>
            <li className="offer-stack-row">
              <span className="offer-stack-label"><strong>Bônus 03 ·</strong> Templates do curso</span>
              <span className="offer-stack-value">R$ 2.400</span>
            </li>
            <li className="offer-stack-row">
              <span className="offer-stack-label"><strong>Bônus 04 ·</strong> Arquivo Gerencial completo</span>
              <span className="offer-stack-value">R$ 3.600</span>
            </li>
            <li className="offer-stack-total">
              <span className="offer-stack-label">Valor total</span>
              <span className="offer-stack-value"><s>R$ 10.997</s></span>
            </li>
          </ul>

          <div className="offer-by-row">Por apenas</div>
          <div className="price-now-row">
            <span className="price-currency">R$</span>
            <span className="price-now">497</span>
          </div>
          <div className="price-installment">
            ou <strong>12x de R$ 51,40</strong> no cartão · à vista no Pix com desconto.
          </div>

          <Countdown />
          <div className="price-after-warn">
            Encerrada a oferta de lançamento, o curso volta a custar <strong>R$ 987</strong>.
          </div>

          <a href={window.HOTMART_CHECKOUT_URL} onClick={() => window.trackCheckout('offer-card')} className="btn btn-primary lg offer-cta">
            Quero garantir minha vaga <span className="btn-arrow"><Icon.ArrowRight /></span>
          </a>

          <div className="offer-meta">
            <span><Icon.Lock /> Checkout Hotmart</span>
            <span><Icon.Shield /> Garantia 180 dias</span>
            <span><Icon.Clock /> Acesso imediato</span>
          </div>

          <div className="offer-payments">
            <span className="pay-pill">Pix</span>
            <span className="pay-pill">Visa</span>
            <span className="pay-pill">Master</span>
            <span className="pay-pill">Elo</span>
            <span className="pay-pill">Amex</span>
            <span className="pay-pill">Boleto</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============= GARANTIA ============= */
function Garantia() {
  return (
    <section className="guarantee-section" data-screen-label="12 Garantia">
      <ParallaxOrb kind="blue" style={{ top: "10%", left: "-200px" }} />
      <div className="container">
        <div className="section-head">
          <h2 className="display h2">Você não compra só um curso. Compra direção.</h2>
          <p className="lead">
            Durante toda a sua jornada, você terá <strong style={{ color: "var(--ink)" }}>suporte direto via WhatsApp</strong> para
            tirar dúvidas e seguir avançando com clareza. Porque sucessão não se resolve só com teoria. Se resolve com execução.
          </p>
        </div>

        <div className="guarantee-grid">
          <Reveal scale>
            <div className="stamp">
              <div className="stamp-ring outer"></div>
              <div className="stamp-ring">
                <svg className="stamp-text" viewBox="0 0 240 240">
                  <defs>
                    <path id="circle-text" d="M 120,120 m -94,0 a 94,94 0 1,1 188,0 a 94,94 0 1,1 -188,0" />
                  </defs>
                  <text>
                    <textPath href="#circle-text" startOffset="0">
                      GARANTIA INCONDICIONAL · 180 DIAS · MÉTODO LEGADO · LEGACY MAKERS · 
                    </textPath>
                  </text>
                </svg>
                <div className="stamp-center">
                  <div className="stamp-shield"><Icon.Shield size={18} /></div>
                  <div className="stamp-num">
                    180
                    <span className="small">Dias de garantia</span>
                  </div>
                </div>
                <div className="stamp-ribbon">Devolução 100%</div>
              </div>
            </div>
          </Reveal>

          <div className="guarantee-body">
            <h3 className="display h3" style={{ margin: "0 0 12px" }}>30 dias incondicional. 90 de aplicação. 90 de garantia de resultado.</h3>
            <p className="body" style={{ marginBottom: 28, color: "var(--ink-soft)" }}>
              Você entra com método validado, suporte real, acompanhamento estratégico, garantia incondicional
              e garantia de resultado. <strong style={{ color: "var(--ink)" }}>Ou você avança na sucessão da forma certa, ou seu investimento volta para você.</strong>
            </p>

            <div className="guarantee-timeline">
              <div className="gt-step">
                <div className="gt-num">30 dias</div>
                <div className="gt-title">Garantia incondicional</div>
                <div className="gt-desc">Entre, assista e avalie. Se não fizer sentido, basta solicitar reembolso. Sem burocracia, sem risco.</div>
              </div>
              <div className="gt-step">
                <div className="gt-num">+90 dias</div>
                <div className="gt-title">Aplicação com suporte</div>
                <div className="gt-desc">Você coloca em prática o que aprendeu. Suporte WhatsApp, direcionamento e correção de execução.</div>
              </div>
              <div className="gt-step accent">
                <div className="gt-num">+90 dias</div>
                <div className="gt-title">Consultoria + garantia de resultado</div>
                <div className="gt-desc">Se não tiver alcançado o avanço prometido, eu sento com você em consultoria individual e construímos um novo plano. Se ao final do processo total de 180 dias você ainda não atingiu o resultado, devolvo 100% do valor.</div>
              </div>
            </div>

            <div className="guarantee-quote">
              "Se você fizer sua parte e o método não funcionar, o risco precisa ser meu."
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============= OBJEÇÕES ============= */
function Objecoes() {
  const items = [
    { q: "Meu pai nunca vai aceitar mudanças.", a: "Você vai aprender como conquistar espaço por resultado, não por confronto. O método foi desenhado exatamente para sucessores que precisam construir credibilidade dentro de uma estrutura ainda controlada pelo fundador." },
    { q: "Ainda não estou pronto.", a: "É exatamente por isso que o curso existe. O Método LEGADO é o caminho que transforma sucessor inseguro em líder preparado. A prontidão se constrói com processo." },
    { q: "Minha empresa é diferente.", a: "Toda empresa familiar é única no produto e no contexto. Mas todas enfrentam os mesmos três pilares: poder, emoção e gestão. O método trabalha sobre esses pilares, não sobre o setor." },
    { q: "Vou tentar sozinho.", a: "Pode. Mas o custo do erro numa sucessão é alto demais. Anos perdidos, conflitos familiares irreparáveis, empresa estagnada. Aqui você acessa um caminho já testado." },
  ];
  return (
    <section data-screen-label="13 Objeções">
      <div className="container">
        <div className="section-head">
          <h2 className="display h2">O que talvez esteja passando pela sua cabeça agora.</h2>
        </div>
        <div className="objecoes">
          {items.map((it, i) => (
            <div key={i} className="objection">
              <div className="quote-mark">"</div>
              <p className="objection-q">{it.q}</p>
              <div className="objection-a">
                <span className="objection-a-label">Resposta</span>
                {it.a}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============= PARA QUEM É ============= */
function ParaQuem() {
  const yes = [
    "Filhos e filhas de empresários.",
    "Sucessores inseguros que querem clareza.",
    "Quem já atua no negócio da família.",
    "Quem quer assumir a liderança com legitimidade.",
    "Quem quer profissionalizar a empresa.",
  ];
  const no = [
    "Quem busca atalho e fórmula mágica.",
    "Quem quer impor mudança sem construir credibilidade.",
    "Quem não tem disposição de aplicar processo.",
  ];
  return (
    <section className="foritu-section" data-screen-label="14 Para quem é">
      <div className="container">
        <div className="section-head">
          <h2 className="display h2">Para quem o Método LEGADO foi feito.</h2>
        </div>
        <div className="foritu-grid">
          <div className="foritu-side yes">
            <h3>Para você, se</h3>
            <div className="sub">É para você</div>
            <ul className="foritu-list">
              {yes.map((t, i) => (
                <li key={i}>
                  <span className="ic" style={{ color: "var(--gold)" }}><Icon.Check /></span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
          <div className="foritu-side no">
            <h3>Não é para você, se</h3>
            <div className="sub">Não é para você</div>
            <ul className="foritu-list">
              {no.map((t, i) => (
                <li key={i}>
                  <span className="ic" style={{ color: "var(--danger)" }}><Icon.X /></span>
                  {t}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============= COMPARAÇÃO ============= */
function Comparacao() {
  const rows = [
    ["Improviso", "Processo"],
    ["Conflitos", "Clareza"],
    ["Liderança fraca", "Autoridade"],
    ["Dependência do fundador", "Gestão profissional"],
    ["Medo", "Plano"],
    ["Reação", "Antecipação"],
  ];
  return (
    <section data-screen-label="15 Comparação">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", margin: "0 auto 48px", alignItems: "center" }}>
          <h2 className="display h2">O que muda na sua sucessão.</h2>
        </div>
        <div className="compare-cards">
          <article className="compare-card before">
            <div className="compare-card-head">
              <span className="compare-card-tag">Sem o Método</span>
              <span className="compare-card-state">Sucessão no improviso</span>
            </div>
            <ul className="compare-card-list">
              {rows.map(([l], i) => (
                <li key={i}><span className="ic"><Icon.X size={12} /></span>{l}</li>
              ))}
            </ul>
          </article>

          <div className="compare-arrow" aria-hidden="true"><Icon.ArrowRight size={20} /></div>

          <article className="compare-card after">
            <div className="compare-card-head">
              <span className="compare-card-tag">Com o Método LEGADO</span>
              <span className="compare-card-state">Sucessão conduzida com método</span>
            </div>
            <ul className="compare-card-list">
              {rows.map(([, r], i) => (
                <li key={i}><span className="ic"><Icon.Check size={12} /></span>{r}</li>
              ))}
            </ul>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ============= COLETA DE DEPOIMENTOS ============= */
function Collect() {
  return (
    <section className="collect-section" data-screen-label="16 Prova institucional">
      <div className="container">
        <div className="collect-grid">
          <div className="collect-side">
            <h2 className="display h2" style={{ marginTop: 16 }}>A prova do Método é uma operação real.</h2>
            <p className="lead">
              Antes de virar curso, o método foi aplicado por dez anos em uma operação real
              de 270 colaboradores. Os números abaixo são o resultado documentado dessa execução.
            </p>

            <div className="collect-real-numbers">
              <div className="collect-stat">
                <div className="collect-stat-num">6,4×</div>
                <div className="collect-stat-label">Crescimento de faturamento em 10 anos</div>
              </div>
              <div className="collect-stat">
                <div className="collect-stat-num">270</div>
                <div className="collect-stat-label">Colaboradores sob gestão profissional</div>
              </div>
              <div className="collect-stat">
                <div className="collect-stat-num">75</div>
                <div className="collect-stat-label">Anos de história familiar preservados</div>
              </div>
            </div>

            <p className="body" style={{ marginTop: 28, fontSize: 15, color: "var(--ink-mute)" }}>
              Os depoimentos do curso estão sendo coletados com os primeiros alunos. Enquanto isso,
              a única prova que importa é a operação real de 10 anos: 6,4× de crescimento,
              270 colaboradores e 75 anos preservados.
            </p>
          </div>

          <div className="qr-card">
            <div style={{ fontFamily: "var(--font-display)", fontSize: 64, lineHeight: 1, color: "var(--gold)", marginBottom: 12 }}>@</div>
            <h4>Já é aluno?</h4>
            <p>Envie seu depoimento por email.<br />Vai entrar nesta página com seu nome e foto.</p>
            <a href="mailto:contato@legacymakers.io?subject=Depoimento%20Curso%20M%C3%A9todo%20LEGADO" className="btn btn-ghost" style={{ padding: "12px 20px", fontSize: 14 }}>
              Enviar depoimento por email
            </a>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.1em", color: "var(--ink-mute)", marginTop: 14 }}>contato@legacymakers.io</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============= FAQ ============= */
function FAQ() {
  const items = [
    { q: "O acesso é imediato?", a: "Sim. Após a confirmação do pagamento na Hotmart, você recebe acesso imediato à área de membros com todos os módulos, bônus e materiais." },
    { q: "As aulas são gravadas ou ao vivo?", a: "Todas gravadas. Você assiste no seu ritmo, no horário que preferir, e pode revisitar quantas vezes quiser." },
    { q: "Tem suporte? Como funciona?", a: "Sim, suporte direto via WhatsApp com a equipe do método. Você tira dúvidas pontuais sobre aplicação e execução." },
    { q: "Serve para empresas familiares pequenas?", a: "Sim. O método trabalha os pilares estruturais (poder, emoção, gestão) que se aplicam a empresas familiares de qualquer porte. O que muda é a escala da execução." },
    { q: "E se eu ainda não sou o sucessor oficial — vale a pena?", a: "Sim, principalmente. O melhor momento para se preparar é antes de assumir, não depois. O método te entrega a estrutura para chegar com autoridade conquistada quando a transição vier — em vez de aprender no susto." },
    { q: "Minha família resiste a mudanças. Como o curso ajuda?", a: "Esta é uma das objeções mais comuns. O Módulo A (Alinhamento Familiar) trata exatamente disso: protocolos, reuniões de família, separação de papéis. Você aprende a propor mudança sem confronto e construir consenso passo a passo." },
    { q: "Tenho pouco tempo. Quanto compromisso semanal?", a: "1 a 2 horas por semana é suficiente para aplicar. Aulas curtas e diretas. Templates prontos eliminam o trabalho de preparação. Se você consegue 2h por semana, consegue aplicar o método." },
    { q: "Preciso da minha família ver junto comigo?", a: "Não. O curso é para você, sucessor. A maioria dos alunos aplica primeiro internamente e só envolve a família depois (Módulo A ensina como). Mas se quiser dividir login com cônjuge ou irmão sócio, está autorizado." },
    { q: "Posso assistir no meu ritmo?", a: "Sim. O acesso é vitalício à versão atual do curso. Sem prazos, sem turmas." },
    { q: "Posso parcelar?", a: "Sim, em até 12x no cartão pelo checkout da Hotmart. À vista no Pix com desconto." },
    { q: "Quanto tempo leva para concluir?", a: "Em ritmo médio (1 módulo por semana), 6 semanas. Mas o material é projetado para ser revisitado pilar a pilar conforme você aplica." },
    { q: "E se eu já estiver na empresa há anos?", a: "Melhor ainda. O método te ajuda a converter tempo de casa em autoridade reconhecida, com método e governança." },
    { q: "A garantia funciona como?", a: "Garantia em camadas: 30 dias incondicional pela Hotmart (devolução integral, sem perguntas) + até 180 dias de garantia de resultado: se ao final do processo você não atingir o avanço prometido, eu sento em consultoria individual para reestruturar. Se mesmo assim não houver resultado, devolvemos 100%." },
    { q: "Recebo certificado?", a: "Sim, certificado digital de conclusão emitido pela Legacy Makers ao finalizar os 6 módulos." },
    { q: "Preço sobe quando termina a oferta de lançamento?", a: "Sim. R$ 497 é preço de lançamento. Após o encerramento, o investimento volta para R$ 987 (cheio). A oferta atual é por tempo limitado." },
  ];
  const [open, setOpen] = useStateC(0);
  return (
    <section data-screen-label="17 FAQ">
      <div className="container container-narrow">
        <div className="section-head" style={{ textAlign: "center", margin: "0 auto 48px", alignItems: "center" }}>
          <h2 className="display h2">As dúvidas mais comuns.</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle"><Icon.Plus /></span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============= FECHAMENTO FINAL ============= */
function FinalClose() {
  return (
    <section className="final-section" data-screen-label="18 Fechamento">
      <div className="container container-narrow">
        <h2 className="final-headline">
          Seu sobrenome pode abrir a porta.
          <br />
          <em>Só competência mantém você na liderança.</em>
        </h2>

        <div className="final-script">
          <p>Se nada mudar, alguém menos preparado pode ocupar o espaço que deveria ser seu.</p>
          <p><strong>Se agir agora, você pode se tornar o líder que sua empresa precisa.</strong></p>
        </div>

        <a href={window.HOTMART_CHECKOUT_URL} onClick={() => window.trackCheckout('final-close')} className="btn btn-primary lg">
          Quero assumir meu lugar com legitimidade <span className="btn-arrow"><Icon.ArrowRight /></span>
        </a>

        <div className="hero-cta-fine" style={{ justifyContent: "center", marginTop: 32 }}>
          <span><Icon.Lock /> Hotmart</span>
          <span><Icon.Shield /> 180 dias</span>
          <span><Icon.Clock /> Acesso imediato</span>
        </div>
      </div>
    </section>
  );
}

/* ============= FOOTER ============= */
function SiteFooter() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-cta">
          <div className="footer-cta-text">
            <span className="footer-cta-eyebrow">Última chamada</span>
            <h3>Pronto para assumir seu lugar com legitimidade?</h3>
          </div>
          <a href={window.HOTMART_CHECKOUT_URL} onClick={() => window.trackCheckout('footer')} className="btn btn-primary lg">
            Garantir minha vaga · R$ 497 <span className="btn-arrow"><Icon.ArrowRight /></span>
          </a>
        </div>

        <div className="footer-badges">
          <span className="footer-badge"><Icon.Lock size={13} /> Compra segura · Hotmart</span>
          <span className="footer-badge"><Icon.Shield size={13} /> Garantia de 180 dias</span>
          <span className="footer-badge"><Icon.Clock size={13} /> Acesso imediato</span>
          <span className="footer-badge">Pix · Cartão · Boleto</span>
        </div>

        <div className="footer-grid">
          <div className="footer-col">
            <div className="brand" style={{ marginBottom: 16 }}>
              <div className="brand-mark"></div>
              <div className="brand-name">
                Legacy Makers
                <span className="small">Curso Método LEGADO</span>
              </div>
            </div>
            <p style={{ fontSize: 13, color: "var(--ink-mute)", maxWidth: 32 + "ch" }}>
              Formação para sucessores de empresas familiares. Método aplicado e documentado em operação real.
            </p>
          </div>
          <div className="footer-col">
            <h4>Navegação</h4>
            <a href="#oferta">Investimento e matrícula</a>
            <a href="#oferta">Garantia de 180 dias</a>
            <a href="#oferta">Perguntas frequentes</a>
            <a href="mailto:contato@legacymakers.io">Falar com o suporte</a>
          </div>
          <div className="footer-col">
            <h4>Empresa</h4>
            <p>Legado &amp; Futuro Desenvolvimento Educacional Ltda.</p>
            <p className="footer-cnpj">CNPJ 63.894.006/0001-70</p>
            <p>Tv. Quintino Bocaiuva, 2301 · Sl 1803</p>
            <p>Cremação · Belém · Pará · Brasil</p>
            <a href="mailto:contato@legacymakers.io">contato@legacymakers.io</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Legacy Makers · Todos os direitos reservados</span>
          <span><a href="#">Termos</a> · <a href="#">Privacidade</a></span>
        </div>
      </div>
    </footer>
  );
}

/* ============= STICKY CTA MOBILE ============= */
function StickyCTA() {
  const [show, setShow] = useStateC(false);
  useEffectC(() => {
    const onScroll = () => setShow(window.scrollY > window.innerHeight * 0.9);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <div className={"sticky-cta" + (show ? " show" : "")}>
      <div className="sticky-cta-info">
        <span className="sticky-cta-price">R$ 497</span>
        <span className="sticky-cta-sub">ou 12x de R$ 51,40</span>
      </div>
      <a href={window.HOTMART_CHECKOUT_URL} onClick={() => window.trackCheckout('sticky-mobile')} className="btn btn-primary sticky-cta-btn">
        Quero entrar <span className="btn-arrow"><Icon.ArrowRight size={14} /></span>
      </a>
    </div>
  );
}

/* ============= CONVERSAR ANTES (CTA secundario WhatsApp) ============= */
const WAPP_BASE = 'https://wa.me/5591991664030?text=' +
  encodeURIComponent('Olá Edivaldo, quero conversar 5 minutos antes de comprar o Curso Método LEGADO. Tenho algumas dúvidas.');
function ConversarAntes() {
  return (
    <section className="conversar-section" data-screen-label="16b Conversar">
      <div className="container container-narrow" style={{ textAlign: 'center' }}>
        <div style={{ display: 'inline-block', padding: '36px 32px', border: '1px solid rgba(199,167,95,0.3)', borderRadius: 14, background: 'rgba(199,167,95,0.04)' }}>
          <div className="kicker" style={{ color: 'var(--gold)', marginBottom: 12 }}>Antes de decidir</div>
          <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, lineHeight: 1.2, margin: '0 0 12px', fontWeight: 500 }}>
            Tem dúvida específica? Conversa 5 min comigo no WhatsApp.
          </h3>
          <p style={{ fontSize: 15, color: 'var(--ink-mute)', marginBottom: 22, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>
            Sem roteiro de venda. Você pergunta, eu respondo. Se faz sentido pra você, comprar é 1 clique. Se não faz, fechamos sem fricção.
          </p>
          <a href={WAPP_BASE} target="_blank" rel="noopener" onClick={() => { try { window.dataLayer && window.dataLayer.push({ event: 'click_whatsapp_pre_compra' }); } catch (e) {} }} className="btn btn-ghost" style={{ padding: '12px 24px', fontSize: 14, borderColor: 'var(--gold)' }}>
            Falar com Edivaldo no WhatsApp
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============= EXIT INTENT POPUP ============= */
function ExitIntent() {
  const [open, setOpen] = useStateC(false);
  const [shown, setShown] = useStateC(false);
  useEffectC(() => {
    if (sessionStorage.getItem('exitShown')) return;
    let armed = false;
    const armTimer = setTimeout(() => { armed = true; }, 8000); // so dispara apos 8s na pagina

    const onMouseLeave = (e) => {
      if (!armed || shown) return;
      if (e.clientY <= 0) {
        setOpen(true); setShown(true);
        sessionStorage.setItem('exitShown', '1');
      }
    };
    const onVisibility = () => {
      if (!armed || shown) return;
      if (document.visibilityState === 'hidden') {
        // mobile fallback - usa visibilidade da aba
        setOpen(true); setShown(true);
        sessionStorage.setItem('exitShown', '1');
      }
    };
    document.addEventListener('mouseleave', onMouseLeave);
    document.addEventListener('visibilitychange', onVisibility);
    return () => {
      clearTimeout(armTimer);
      document.removeEventListener('mouseleave', onMouseLeave);
      document.removeEventListener('visibilitychange', onVisibility);
    };
  }, [shown]);

  if (!open) return null;
  const close = () => setOpen(false);
  const goCheckout = () => { try { window.trackCheckout && window.trackCheckout('exit-intent'); } catch (e) {} window.location.href = window.HOTMART_CHECKOUT_URL; };

  return React.createElement('div', {
    onClick: close,
    style: { position: 'fixed', inset: 0, background: 'rgba(10,15,28,0.85)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999, padding: 16 }
  },
    React.createElement('div', {
      onClick: (e) => e.stopPropagation(),
      style: { maxWidth: 460, width: '100%', background: 'linear-gradient(160deg, #0d1c34 0%, #07111f 100%)', border: '1px solid rgba(199,167,95,0.4)', borderRadius: 14, padding: '38px 32px', textAlign: 'center', color: '#fff', position: 'relative' }
    },
      React.createElement('button', {
        onClick: close, 'aria-label': 'Fechar',
        style: { position: 'absolute', top: 12, right: 14, background: 'transparent', border: 'none', color: '#9aa0aa', fontSize: 22, cursor: 'pointer' }
      }, '×'),
      React.createElement('div', { style: { fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--gold, #c7a75f)', marginBottom: 14 } }, 'Antes de fechar'),
      React.createElement('h3', { style: { fontFamily: 'var(--font-display, Georgia, serif)', fontSize: 26, lineHeight: 1.25, margin: '0 0 14px', fontWeight: 500 } },
        'Lançamento R$ 497 termina em poucos dias.'
      ),
      React.createElement('p', { style: { fontSize: 14, color: '#cdd2db', margin: '0 0 20px', lineHeight: 1.55 } },
        'Após o encerramento, o curso passa a custar R$ 987. Você ainda tem garantia incondicional de 30 dias e até 180 dias de garantia de resultado.'
      ),
      React.createElement('button', {
        onClick: goCheckout,
        style: { display: 'block', width: '100%', padding: '14px 20px', background: 'var(--gold, #c7a75f)', color: '#0a1f3d', border: 'none', borderRadius: 8, fontSize: 14, fontWeight: 700, letterSpacing: '0.02em', cursor: 'pointer', marginBottom: 12 }
      }, 'Garantir minha vaga por R$ 497'),
      React.createElement('a', {
        href: WAPP_BASE, target: '_blank', rel: 'noopener',
        onClick: () => { try { sessionStorage.setItem('exitShown', '1'); } catch (e) {} },
        style: { display: 'block', fontSize: 13, color: '#9aa0aa', textDecoration: 'underline', marginTop: 6 }
      }, 'Ou tirar dúvidas no WhatsApp primeiro')
    )
  );
}

window.LegadoComponentsC = { Oferta, Garantia, Objecoes, ParaQuem, Comparacao, Collect, FAQ, FinalClose, SiteFooter, ConversarAntes, ExitIntent, StickyCTA };
Object.assign(window, { Oferta, Garantia, Objecoes, ParaQuem, Comparacao, Collect, FAQ, FinalClose, SiteFooter, ConversarAntes, ExitIntent, StickyCTA });