// V2 — Editorial Tech aesthetic — STANDALONE PRODUCAO
// Imersao 16 Maio 2026
// Pixel Meta + submitLeadFormDestacado movidos pro index.html (inline no <script>)
// pra padronizar com a oficial https://imersao.denderson.ai

const V2Editorial = () => {
  const TARGET = new Date('2026-05-16T21:00:00Z'); // 16/05/2026 18h BRT
  const computeDiff = () => {
    const diff = Math.max(0, TARGET - new Date());
    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);
    return { d, h, m, s };
  };
  const [time, setTime] = React.useState(computeDiff());

  React.useEffect(() => {
    const id = setInterval(() => setTime(computeDiff()), 1000);
    return () => clearInterval(id);
  }, []);

  const pad = n => String(n).padStart(2, '0');

  const scrollToForm = (e) => {
    if (e) e.preventDefault();
    const el = document.getElementById('lotes-form-v2') || document.getElementById('formulario-destacado');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <div className="v2-root">
      {/* HERO */}
      <section className="v2-hero">
        <div className="v2-hero-meta-top">
          <div className="v2-meta-block">
            <div className="v2-meta-key">Edicao</div>
            <div className="v2-meta-val">N°001 · Imersão</div>
          </div>
          <div className="v2-meta-block">
            <div className="v2-meta-key">Data</div>
            <div className="v2-meta-val">16 Maio 2026</div>
          </div>
          <div className="v2-meta-block">
            <div className="v2-meta-key">Formato</div>
            <div className="v2-meta-val">Zoom · 1 dia</div>
          </div>
          <div className="v2-meta-block">
            <div className="v2-meta-key">Mentor</div>
            <div className="v2-meta-val">Denderson R.</div>
          </div>
        </div>

        <div className="v2-hero-grid">
          <div className="v2-hero-left">
            <div className="v2-eyebrow">
              <span className="v2-eyebrow-dot"></span>
              <span>começou em silêncio · revelação ao vivo · um dia inteiro</span>
            </div>
            <h1 className="v2-h1">
              <span className="v2-h1-line">Domine a IA</span>
              <span className="v2-h1-line v2-h1-italic">que esta substituindo</span>
              <span className="v2-h1-line">equipes <span className="v2-h1-mark">inteiras</span>.</span>
            </h1>
            <p className="v2-hero-lede">
              Claude Code + OpenClaw: o sistema que ja vinha rodando nos bastidores sera
              mostrado ao vivo, pela primeira vez. Do zero a sua propria equipe de agentes
              autonomos que trabalha 24h, não tira ferias e gera receita. Escale 10x com zero equipe.
            </p>

            <div className="v2-hero-cta-row">
              <button className="v2-cta-primary" onClick={scrollToForm}>
                <span>Garantir passaporte</span>
                <span className="v2-cta-arrow">→</span>
              </button>
              <div className="v2-price-block">
                <div className="v2-price-from">Lote 0 · de</div>
                <div className="v2-price-row">
                  <span className="v2-price-old">R$497</span>
                  <span className="v2-price-new">R$ 97</span>
                </div>
              </div>
            </div>
          </div>

          <div className="v2-hero-right">
            <div className="v2-countdown-card">
              <div className="v2-cd-label-top">A imersão começa em</div>
              <div className="v2-cd-numbers">
                <div className="v2-cd-cell">
                  <div className="v2-cd-n">{pad(time.d)}</div>
                  <div className="v2-cd-l">dias</div>
                </div>
                <div className="v2-cd-cell">
                  <div className="v2-cd-n">{pad(time.h)}</div>
                  <div className="v2-cd-l">horas</div>
                </div>
                <div className="v2-cd-cell">
                  <div className="v2-cd-n">{pad(time.m)}</div>
                  <div className="v2-cd-l">min</div>
                </div>
                <div className="v2-cd-cell">
                  <div className="v2-cd-n v2-cd-pulse">{pad(time.s)}</div>
                  <div className="v2-cd-l">seg</div>
                </div>
              </div>
              <div className="v2-cd-foot">
                <span>● vagas limitadas</span>
                <span>preço de lançamento</span>
              </div>
            </div>

            <div className="v2-pull-quote">
              <div className="v2-pq-mark">"</div>
              <p>Substitui um time de 37 vendedores por agentes autonomos. <span className="v2-amber">Reducao de 80% na folha</span> com performance superior.</p>
              <div className="v2-pq-attr">- Denderson R., 2024</div>
            </div>
          </div>
        </div>

        <div className="v2-hero-tickerwrap">
          <div className="v2-ticker">
            <div className="v2-ticker-row">
              {Array(2).fill(0).map((_, i) => (
                <React.Fragment key={i}>
                  <span>● Claude Code</span>
                  <span>●  OpenClaw</span>
                  <span>● Opus 4.6</span>
                  <span>● 1M tokens</span>
                  <span>● Agentes autonomos</span>
                  <span>● 24h sem parar</span>
                  <span>● WhatsApp + Instagram</span>
                  <span>● Deploy automático</span>
                  <span>● SaaS sem codigo</span>
                  <span>● Funis completos</span>
                </React.Fragment>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PILARES */}
      <section className="v2-section">
        <div className="v2-section-header">
          <div className="v2-section-num">§ 01</div>
          <div className="v2-section-meta">
            <div className="v2-tag">Programa</div>
            <h2 className="v2-h2">
              O que você <span className="v2-italic">vai aprender</span><br />em 1 dia.
            </h2>
            <p className="v2-section-lede">
              Quatro pilares praticos. Você sai da imersão com tudo configurado e funcionando.
            </p>
          </div>
        </div>

        <div className="v2-pilares">
          {[
            { n: '01', t: 'Conceito', s: 'O que e e como funciona', desc: 'Claude Code, OpenClaw e como trabalham juntos. Instalacao, configuracao e otimizacao do Opus 4.6 com 1 milhao de tokens. Memoria persistente, banco vetorial, ferramentas de automacao.', tags: ['arquitetura', 'instalacao', 'tokens'] },
            { n: '02', t: 'Criacao', s: 'Treinamento de agentes', desc: 'Equipe completa: programador, copywriter, designer, gestor de trafego, SDR. Cada um com personalidade, skills e workspace. Hierarquia, delegacao automatica, coordenacao.', tags: ['equipe', 'hierarquia', 'workspace'] },
            { n: '03', t: 'Casos Reais', s: 'Aplicacao na pratica', desc: 'SDR no WhatsApp 24h com SPIN Selling. Propostas em 10min. CRMs, SaaS e aplicativos sem codigo. Relatorios, dashboards interativos, conteudo visual profissional.', tags: ['whatsapp', 'crm', 'saas'] },
            { n: '04', t: 'Funil', s: 'Transformar em receita', desc: 'Funis completos: captura, vendas, obrigado. Deploy automatico GitHub + Vercel. Propostas como sites exclusivos. Cada modulo vira um servico de alto valor.', tags: ['captura', 'deploy', 'vendas'] },
          ].map((p, i) => (
            <div key={i} className="v2-pilar">
              <div className="v2-pilar-num">{p.n}</div>
              <div className="v2-pilar-content">
                <h3 className="v2-pilar-title">
                  {p.t} <span className="v2-pilar-sub">- {p.s}</span>
                </h3>
                <p className="v2-pilar-desc">{p.desc}</p>
                <div className="v2-pilar-tags">
                  {p.tags.map(t => <span key={t} className="v2-pill">{t}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* SKILLS / VALOR */}
      <section className="v2-section v2-section-amber">
        <div className="v2-section-header">
          <div className="v2-section-num">§ 02</div>
          <div className="v2-section-meta">
            <div className="v2-tag">Retorno</div>
            <h2 className="v2-h2">
              Não e so aprender IA.<br />
              <span className="v2-italic v2-h2-amber">E faturar com IA.</span>
            </h2>
            <p className="v2-section-lede">
              Cada pilar vira um serviço de alto valor. Quanto cada skill vale no mercado:
            </p>
          </div>
        </div>

        <div className="v2-skills">
          {[
            { s: 'Atendimento 24h', d: 'WhatsApp/Instagram com IA', v: '5.000', u: 'mes/cliente' },
            { s: 'Landing pages', d: 'Prontas em minutos com deploy', v: '5.000', u: 'projeto' },
            { s: 'Propostas comerciais', d: 'Automaticas e personalizadas', v: '8.000', u: 'setup' },
            { s: 'Conteudo visual', d: 'Carrosseis, thumbs, banners', v: '3.000', u: 'mes/cliente' },
            { s: 'Dashboards', d: 'Metricas em tempo real', v: '7.000', u: 'projeto' },
            { s: 'SaaS completos', d: 'Apps e sistemas sem codigo', v: '50.000', u: 'sistema' },
            { s: 'Funis de vendas', d: 'Captura, vendas, obrigado + deploy', v: '10.000', u: 'funil' },
          ].map((r, i) => (
            <div key={i} className="v2-skill-row">
              <div className="v2-skill-idx">{String(i+1).padStart(2,'0')}</div>
              <div className="v2-skill-meta">
                <div className="v2-skill-name">{r.s}</div>
                <div className="v2-skill-desc">{r.d}</div>
              </div>
              <div className="v2-skill-price">
                <span className="v2-price-currency">R$</span>
                <span className="v2-price-num">{r.v}</span>
                <span className="v2-price-unit">/{r.u}</span>
              </div>
            </div>
          ))}
          <div className="v2-skill-total">
            <div className="v2-total-label">Potencial somado</div>
            <div className="v2-total-num">
              +R$<span className="v2-total-big">88.000</span>
            </div>
          </div>
        </div>

        <div className="v2-skill-callouts">
          <div className="v2-callout">
            <div className="v2-callout-tag">Empreendedor?</div>
            <p>Estes sao os valores que você <span className="v2-amber">deixa de pagar</span> a terceiros fazendo com IA.</p>
          </div>
          <div className="v2-callout">
            <div className="v2-callout-tag">Freelancer?</div>
            <p>Estes sao os valores que você <span className="v2-amber">cobra dos clientes</span>. Margem quase 100% - quem entrega e a IA.</p>
          </div>
        </div>
      </section>

      {/* PÚBLICO */}
      <section className="v2-section">
        <div className="v2-section-header">
          <div className="v2-section-num">§ 03</div>
          <div className="v2-section-meta">
            <div className="v2-tag">Público</div>
            <h2 className="v2-h2">
              Essa imersão <span className="v2-italic">e pra você</span>{' '}se...
            </h2>
          </div>
        </div>

        <div className="v2-publico">
          {[
            { t: 'E empreendedor', d: 'quer automatizar operacoes inteiras com IA, reduzir custos e ganhar velocidade.' },
            { t: 'Tem agencia', d: 'quer escalar entrega sem contratar mais gente, usando agentes como mao de obra digital.' },
            { t: 'E freelancer', d: 'quer adicionar servicos de IA ao portfolio, cobrar mais e entregar mais rapido.' },
            { t: 'E dev/tecnico', d: 'quer multiplicar produtividade com agentes que codificam, testam e deployam sozinhos.' },
            { t: 'Quer faturar com IA', d: 'mesmo sem experiencia tecnica, aprendendo do zero como construir e vender solucoes reais.' },
          ].map((p, i) => (
            <div key={i} className="v2-pub-row">
              <span className="v2-pub-arrow">→</span>
              <h3 className="v2-pub-title">{p.t}</h3>
              <p className="v2-pub-desc">{p.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* DENDERSON */}
      <section className="v2-section v2-section-dark">
        <div className="v2-section-header">
          <div className="v2-section-num">§ 04</div>
          <div className="v2-section-meta">
            <div className="v2-tag">Mentor</div>
            <h2 className="v2-h2">
              Conduzido por<br />
              <span className="v2-italic v2-h2-amber">Denderson Rodrigues.</span>
            </h2>
          </div>
        </div>

        <div className="v2-denderson">
          <div className="v2-denderson-photo">
            <div className="v2-photo-frame">
              <img
                src="./denderson-premium.webp"
                alt="Denderson Rodrigues"
                style={{width:'100%',height:'100%',objectFit:'cover',display:'block',borderRadius:'inherit'}}
              />
            </div>
            <div className="v2-photo-cap">Foto · Edicao 001</div>
          </div>

          <div className="v2-denderson-text">
            <p className="v2-dropcap">
              <span className="v2-dropcap-letter">M</span>entor de negócios digitais desde 2017. Mais de 10.000 mentorados, 45.000 alunos e 500 lancamentos no mercado digital.
            </p>
            <p>
              Em 2024, enquanto a maioria ainda tentava entender o que era IA generativa, Denderson já estava substituindo um time de 37 vendedores por agentes autonomos rodando 24 horas no WhatsApp. Resultado: <span className="v2-highlight">reducao de 80% na folha comercial</span> com performance superior a de qualquer equipe humana.
            </p>
            <p>
              Hoje opera o CRM Avalanche com mais de 30 empresas usando agentes em producao. Foi um dos primeiros no Brasil a dominar Claude Code + OpenClaw para criar equipes completas de subagentes coordenados.
            </p>

            <div className="v2-dstats">
              <div><span className="v2-dstat-n">10k+</span><span className="v2-dstat-l">mentorados</span></div>
              <div><span className="v2-dstat-n">45k+</span><span className="v2-dstat-l">alunos</span></div>
              <div><span className="v2-dstat-n">30+</span><span className="v2-dstat-l">empresas</span></div>
              <div><span className="v2-dstat-n">227k</span><span className="v2-dstat-l">seguidores</span></div>
            </div>
          </div>
        </div>
      </section>

      {/* RESULTADOS */}
      <section className="v2-section v2-section-numbers">
        <div className="v2-section-header">
          <div className="v2-section-num">§ 05</div>
          <div className="v2-section-meta">
            <div className="v2-tag">Resultados</div>
            <h2 className="v2-h2">
              Numeros que <span className="v2-italic">falam por si.</span>
            </h2>
          </div>
        </div>

        <div className="v2-bignumbers">
          {[
            { n: '37', l: 'vendedores substituidos', s: 'por agentes IA no Avalanche' },
            { n: '80%', l: 'reducao na folha', s: 'com atendimento 24h automatizado' },
            { n: '30+', l: 'empresas operando', s: 'com agentes em producao' },
            { n: '24h', l: 'atendimento ininterrupto', s: 'agentes que nunca param' },
            { n: '3x', l: 'mais conversoes', s: 'em empresas que migraram' },
            { n: '0', l: 'pre-requisito tecnico', s: 'qualquer pessoa configura do zero' },
          ].map((s, i) => (
            <div key={i} className="v2-bignum">
              <div className="v2-bignum-n">{s.n}</div>
              <div className="v2-bignum-l">{s.l}</div>
              <div className="v2-bignum-s">{s.s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* DETALHES + GARANTIA + LOTES */}
      <section className="v2-section">
        <div className="v2-section-header">
          <div className="v2-section-num">§ 06</div>
          <div className="v2-section-meta">
            <div className="v2-tag">Detalhes</div>
            <h2 className="v2-h2">
              Como <span className="v2-italic">funciona</span>.
            </h2>
          </div>
        </div>

        <div className="v2-three">
          <div className="v2-card">
            <div className="v2-card-tag">i.</div>
            <h3 className="v2-card-title">Quando, onde, como.</h3>
            <div className="v2-detail-list">
              <div><span>Data</span><span>16/05/2026</span></div>
              <div><span>Horario</span><span>10h - 18h</span></div>
              <div><span>Plataforma</span><span>Zoom</span></div>
              <div><span>Formato</span><span>mao na massa</span></div>
              <div><span>Duracao</span><span>1 dia inteiro</span></div>
              <div><span>Replay</span><span>opcional</span></div>
            </div>
          </div>

          <div className="v2-card v2-card-warranty">
            <div className="v2-card-tag">ii.</div>
            <h3 className="v2-card-title">Garantia 7 dias.</h3>
            <div className="v2-warranty-num">07</div>
            <p>Se a imersão não entregar o que prometeu, pede reembolso em 7 dias. Sem perguntas, sem burocracia. <span className="v2-highlight">O risco e nosso.</span></p>
            <div className="v2-fineprint">// Garantia prevista no Codigo de Defesa do Consumidor.</div>
          </div>

          <div className="v2-card v2-card-pricing">
            <div className="v2-card-tag">iii.</div>
            <h3 className="v2-card-title">Lotes.</h3>
            <div className="v2-lote-line v2-lote-active">
              <span>Lote 0</span>
              <span className="v2-lote-price">R$ 97</span>
              <span className="v2-lote-state v2-lote-state-on">ativo</span>
            </div>
            <div className="v2-lote-line">
              <span>Lote 1</span>
              <span>R$147</span>
              <span className="v2-lote-state">aguarde</span>
            </div>
            <div className="v2-lote-line">
              <span>Lote 2</span>
              <span>R$197</span>
              <span className="v2-lote-state">aguarde</span>
            </div>
            <button className="v2-cta-primary v2-cta-block" onClick={scrollToForm}>
              Garantir cadeira
              <span className="v2-cta-arrow">→</span>
            </button>
            <div className="v2-fineprint">// 12x no cartao via Hotmart.</div>
          </div>
        </div>
      </section>


      {/* LOTES + FORMULARIO DESTACADOS */}
      <section className="v2-section v2-lotes-form-section" data-imersao-form="v2" id="lotes-form-v2">
        <div className="v2-section-header">
          <div className="v2-section-num">§ 06b</div>
          <div className="v2-section-meta">
            <div className="v2-tag">Inscricao</div>
            <h2 className="v2-h2">
              Garanta seu<br />
              <span className="v2-italic v2-h2-amber">passaporte agora.</span>
            </h2>
            <p className="v2-section-lede">
              O preço sobe a cada virada de lote. Aproveite enquanto o Lote 0 esta ativo.
            </p>
          </div>
        </div>

        <div className="v2-lotes-form-grid">

          {/* COLUNA LOTES */}
          <div className="v2-lotes-col">
            <div className="v2-lotes-eyebrow">
              <span className="v2-eyebrow-dot v2-eyebrow-dot-amber"></span>
              <span>Lote 0 ativo &middot; preço atual</span>
            </div>

            <div className="v2-lote-row v2-lote-row-active">
              <div className="v2-lote-row-badge">ATIVO</div>
              <div className="v2-lote-row-label">Lote 0</div>
              <div className="v2-lote-row-price">R$ 97</div>
              <div className="v2-lote-row-state">12x R$ 9,60</div>
            </div>

            <div className="v2-lote-row v2-lote-row-next">
              <div className="v2-lote-row-label">Lote 1</div>
              <div className="v2-lote-row-price">R$ 147</div>
              <div className="v2-lote-row-state">em breve</div>
            </div>

            <div className="v2-lote-row v2-lote-row-next">
              <div className="v2-lote-row-label">Lote 2</div>
              <div className="v2-lote-row-price">R$ 197</div>
              <div className="v2-lote-row-state">em breve</div>
            </div>

            <div className="v2-lotes-warning">
              <span className="v2-lotes-warning-num">17</span>
              <span className="v2-lotes-warning-text">
                <strong>vagas restantes</strong> no Lote 0. Quando acabar, sobe pra R$ 147.
              </span>
            </div>
          </div>

          {/* COLUNA FORM */}
          <div className="v2-form-col" id="formulario-destacado">
            <div className="v2-form-card">
              <div className="v2-form-eyebrow">Cadastro &middot; Inscricao</div>
              <h3 className="v2-form-title">
                Quero meu <span className="v2-italic">ingresso</span>.
              </h3>
              <form id="leadFormDestacado" className="v2-form-real" onSubmit={submitLeadFormDestacado}>
                <div className="v2-form-field">
                  <label htmlFor="formNameD" className="v2-form-label">Nome completo</label>
                  <input
                    type="text"
                    id="formNameD"
                    name="name"
                    required
                    className="v2-form-input"
                    placeholder="Como você quer ser chamado"
                    autoComplete="name"
                  />
                </div>
                <div className="v2-form-field">
                  <label htmlFor="formEmailD" className="v2-form-label">E-mail</label>
                  <input
                    type="email"
                    id="formEmailD"
                    name="email"
                    required
                    className="v2-form-input"
                    placeholder="seu melhor email"
                    autoComplete="email"
                  />
                </div>
                <div className="v2-form-field">
                  <label htmlFor="formPhoneD" className="v2-form-label">WhatsApp <span className="v2-form-label-hint">(11 digitos com DDD)</span></label>
                  <input
                    type="tel"
                    id="formPhoneD"
                    name="phone"
                    required
                    pattern="[0-9]{11}"
                    maxLength="11"
                    minLength="11"
                    onInput={(e)=>e.target.value=e.target.value.replace(/[^0-9]/g,'')}
                    className="v2-form-input"
                    placeholder="11987654321"
                    autoComplete="tel"
                  />
                </div>
                <button type="submit" id="formBtnD" className="v2-cta-primary v2-cta-mega v2-form-submit">
                  Quero meu ingresso
                  <span className="v2-cta-arrow">&#8594;</span>
                </button>
                <div className="v2-form-fineprint">
                  Pagamento seguro &middot; 7 dias de garantia &middot; 12x no cartao
                </div>
              </form>
            </div>
          </div>

        </div>
      </section>

      {/* COMUNIDADE AVALANCHE */}
      <section className="v2-section v2-section-comunidade" data-comunidade-avalanche>
        <div className="v2-section-header">
          <div className="v2-section-num">§ 07</div>
          <div className="v2-section-meta">
            <div className="v2-tag">Membership</div>
            <h2 className="v2-h2">
              QUER MAIS DO QUE<br />
              <span className="v2-italic v2-h2-amber">a imersão?</span>
            </h2>
            <p className="v2-section-lede">
              Faca parte da Comunidade Avalanche e tenha acesso a TUDO.
            </p>
          </div>
        </div>

        <div className="v2-comunidade-card">
          <div className="v2-comunidade-eyebrow">
            <span className="v2-eyebrow-dot v2-eyebrow-dot-amber"></span>
            <span>turma de fundadores &middot; membership</span>
          </div>

          <div className="v2-comunidade-bullets">
            <div className="v2-comunidade-row">
              <span className="v2-comunidade-arrow">&#10142;</span>
              <div className="v2-comunidade-row-body">
                <h3 className="v2-comunidade-row-title">Acesso A ESTA imersão de 16/05 já incluso</h3>
              </div>
            </div>
            <div className="v2-comunidade-row">
              <span className="v2-comunidade-arrow">&#10142;</span>
              <div className="v2-comunidade-row-body">
                <h3 className="v2-comunidade-row-title">Acesso a TODAS as próximas imersões do ano</h3>
              </div>
            </div>
            <div className="v2-comunidade-row">
              <span className="v2-comunidade-arrow">&#10142;</span>
              <div className="v2-comunidade-row-body">
                <h3 className="v2-comunidade-row-title">Aula ao vivo toda segunda a noite</h3>
              </div>
            </div>
            <div className="v2-comunidade-row">
              <span className="v2-comunidade-arrow">&#10142;</span>
              <div className="v2-comunidade-row-body">
                <h3 className="v2-comunidade-row-title">Formação em IA (curso gravado completo)</h3>
              </div>
            </div>
            <div className="v2-comunidade-row">
              <span className="v2-comunidade-arrow">&#10142;</span>
              <div className="v2-comunidade-row-body">
                <h3 className="v2-comunidade-row-title">Grupo ativo 24h e contato direto com a equipe</h3>
              </div>
            </div>
            <div className="v2-comunidade-row">
              <span className="v2-comunidade-arrow">&#10142;</span>
              <div className="v2-comunidade-row-body">
                <h3 className="v2-comunidade-row-title">Acesso a todo conteúdo gravado da Comunidade</h3>
              </div>
            </div>
          </div>

          <div className="v2-comunidade-warn">
            <span className="v2-comunidade-warn-icon">!</span>
            <span><strong>TURMA DE FUNDADORES</strong> &middot; apenas <strong>17 vagas restantes</strong></span>
          </div>

          <div className="v2-comunidade-price">
            <div className="v2-comunidade-price-label">Investimento</div>
            <div className="v2-comunidade-price-num">12x R$ 97,94</div>
            <div className="v2-comunidade-price-sub">no cartao &middot; ou R$ 947 a vista</div>
          </div>

          <form id="leadFormComunidade" data-form-comunidade="true" className="v2-form-real v2-comunidade-form" onSubmit={submitLeadFormComunidade}>
            <div className="v2-form-field">
              <label htmlFor="formNameComunidade" className="v2-form-label">Nome completo</label>
              <input
                type="text"
                id="formNameComunidade"
                name="name"
                required
                className="v2-form-input v2-form-input-underline"
                placeholder="Como voce quer ser chamado"
                autoComplete="name"
              />
            </div>
            <div className="v2-form-field">
              <label htmlFor="formEmailComunidade" className="v2-form-label">E-mail</label>
              <input
                type="email"
                id="formEmailComunidade"
                name="email"
                required
                className="v2-form-input v2-form-input-underline"
                placeholder="seu melhor email"
                autoComplete="email"
              />
            </div>
            <div className="v2-form-field">
              <label htmlFor="formPhoneComunidade" className="v2-form-label">WhatsApp <span className="v2-form-label-hint">(11 digitos com DDD)</span></label>
              <input
                type="tel"
                id="formPhoneComunidade"
                name="phone"
                required
                pattern="[0-9]{11}"
                maxLength="11"
                minLength="11"
                onInput={(e)=>e.target.value=e.target.value.replace(/[^0-9]/g,'')}
                className="v2-form-input v2-form-input-underline"
                placeholder="11987654321"
                autoComplete="tel"
              />
            </div>
            <button type="submit" id="formBtnComunidade" className="v2-cta-primary v2-cta-mega v2-comunidade-cta v2-form-submit">
              Entrar pra Comunidade Avalanche
              <span className="v2-cta-arrow">&#8594;</span>
            </button>
            <div className="v2-fineprint v2-comunidade-form-foot">Pagamento seguro &middot; 12x no cartao &middot; acesso imediato</div>
          </form>

          <div className="v2-fineprint v2-comunidade-foot">vaga garantida após confirmacao do pagamento</div>
        </div>
      </section>


      {/* FAQ */}
      <section className="v2-section">
        <div className="v2-section-header">
          <div className="v2-section-num">§ 08</div>
          <div className="v2-section-meta">
            <div className="v2-tag">FAQ</div>
            <h2 className="v2-h2">
              Perguntas <span className="v2-italic">frequentes</span>.
            </h2>
          </div>
        </div>

        <div className="v2-faq">
          {[
            { q: 'Preciso saber programar?', a: 'Nao. A imersao foi desenhada pra qualquer pessoa, independente do nivel tecnico. Voce aprende do zero, passo a passo.' },
            { q: 'Funciona no Mac e Windows?', a: 'Sim. Funciona em qualquer sistema operacional. Mac, Windows, Linux.' },
            { q: 'Vou ter acesso ao replay?', a: 'Na pagina de inscricao voce escolhe apenas o passaporte ao vivo ou com gravacao vitalicia.' },
            { q: 'O que preciso ter instalado?', a: 'So um computador com internet. Na imersao voce instala e configura tudo ao vivo, com acompanhamento.' },
            { q: 'Posso parcelar?', a: 'Sim. Em ate 12x no cartao de credito direto pela Hotmart.' },
          ].map((f, i) => (
            <details key={i} className="v2-faq-item">
              <summary className="v2-faq-q">
                <span className="v2-faq-num">{String(i+1).padStart(2,'0')}</span>
                <span className="v2-faq-text">{f.q}</span>
                <span className="v2-faq-plus">+</span>
              </summary>
              <div className="v2-faq-a">{f.a}</div>
            </details>
          ))}
        </div>
      </section>

      {/* FINAL CTA */}
      <section className="v2-final">
        <div className="v2-final-content">
          <div className="v2-final-eyebrow">
            <span className="v2-eyebrow-dot v2-eyebrow-dot-amber"></span>
            última chamada · lote 1 ainda ativo
          </div>
          <h2 className="v2-final-h">
            Sua equipe de IA<br />
            <span className="v2-italic v2-h2-amber">começa em 16 de Maio.</span>
          </h2>
          <p className="v2-final-lede">
            R$ 97 hoje. R$ 147 quando o Lote 0 acabar. R$ 50.000 a primeira venda.
          </p>
          <button className="v2-cta-primary v2-cta-mega" onClick={scrollToForm}>
            Garantir meu passaporte
            <span className="v2-cta-arrow">→</span>
          </button>
          <div className="v2-final-meta">
            <span>● 12x no cartao</span>
            <span>● 7 dias de garantia</span>
            <span>● vagas limitadas</span>
          </div>
        </div>
      </section>

      <footer className="v2-footer">
        <div className="v2-footer-row">
          <div className="v2-logo">
            <span className="v2-logo-mark">D⌂</span>
            <span className="v2-logo-text">denderson<span className="v2-logo-dot">.</span>ai</span>
          </div>
          <div className="v2-footer-meta">
            <span>© 2026 Instituto Avalanche</span>
            <span>·</span>
            <span>todos os direitos reservados</span>
            <span>·</span>
            <span>comercializado com apoio Hotmart</span>
          </div>
        </div>
      </footer>
    </div>
  );
};

window.V2Editorial = V2Editorial;