// V1 — Terminal/Dev 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 V1Terminal = () => {
  // Countdown ate 16/05/2026 18h BRT (= 16/05 21:00 UTC)
  const TARGET = new Date('2026-05-16T21:00:00Z');
  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-v1') || document.getElementById('formulario-destacado');
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <div className="v1-root">
      <main className="v1-main">
          {/* HERO */}
          <section className="v1-hero">
            <div className="v1-hero-meta">
              <div className="v1-line-num">01</div>
              <div className="v1-comment">// algo_iniciou_em_silencio · revelacao_ao_vivo · 1 dia inteiro · zoom · 16 maio 2026</div>
            </div>

            <div className="v1-hero-meta">
              <div className="v1-line-num">02</div>
              <div className="v1-countdown">
                <span className="v1-cmd-prompt">$</span>
                <span className="v1-cmd">countdown --until=16/05/2026</span>
              </div>
            </div>

            <div className="v1-countdown-display">
              <div className="v1-cd-block">
                <div className="v1-cd-num">{pad(time.d)}</div>
                <div className="v1-cd-label">dias</div>
              </div>
              <div className="v1-cd-sep">:</div>
              <div className="v1-cd-block">
                <div className="v1-cd-num">{pad(time.h)}</div>
                <div className="v1-cd-label">horas</div>
              </div>
              <div className="v1-cd-sep">:</div>
              <div className="v1-cd-block">
                <div className="v1-cd-num">{pad(time.m)}</div>
                <div className="v1-cd-label">minutos</div>
              </div>
              <div className="v1-cd-sep">:</div>
              <div className="v1-cd-block">
                <div className="v1-cd-num">{pad(time.s)}</div>
                <div className="v1-cd-label">segundos</div>
              </div>
            </div>

            <h1 className="v1-h1">
              <span className="v1-h1-faded">{'>'} </span>Domine a IA que esta substituindo
              <br />
              equipes inteiras e <span className="v1-h1-accent">escale 10x</span>
              <br />
              com <span className="v1-h1-mark">zero equipe</span><span className="v1-cursor">_</span>
            </h1>

            <p className="v1-hero-sub">
              <span className="v1-comment-inline">/* */</span> Claude Code + OpenClaw: o que ja roda
              em silencio nos bastidores vai ser revelado ao vivo. Do zero a sua propria equipe de
              agentes autonomos que trabalha 24h, não tira ferias e gera receita.
            </p>

            <div className="v1-hero-cta-row">
              <button className="v1-cta-primary" onClick={scrollToForm}>
                <span className="v1-cta-prompt">$</span>
                <span>./garantir-passaporte --lote=0</span>
                <span className="v1-cta-arrow">↵</span>
              </button>
              <div className="v1-hero-cta-meta">
                <div className="v1-meta-item">
                  <div className="v1-meta-label">PREÇO</div>
                  <div className="v1-meta-value">
                    <span className="v1-strike">R$497</span> R$ 97
                  </div>
                </div>
                <div className="v1-meta-item">
                  <div className="v1-meta-label">VAGAS</div>
                  <div className="v1-meta-value">limitadas</div>
                </div>
              </div>
            </div>

            <div className="v1-terminal-block">
              <div className="v1-term-header">
                <span className="v1-dot v1-dot-red"></span>
                <span className="v1-dot v1-dot-amber"></span>
                <span className="v1-dot v1-dot-green"></span>
                <span className="v1-term-title">~/imersão · running</span>
              </div>
              <div className="v1-term-body">
                <div className="v1-term-line"><span className="v1-prompt-yellow">▶</span> claude --model opus-4.6 --context 1M</div>
                <div className="v1-term-line v1-term-out">  ✓ contexto carregado · 1.000.000 tokens</div>
                <div className="v1-term-line v1-term-out">  ✓ memoria persistente · ativada</div>
                <div className="v1-term-line v1-term-out">  ✓ banco vetorial · conectado</div>
                <div className="v1-term-line"><span className="v1-prompt-yellow">▶</span> openclaw spawn --agents=5</div>
                <div className="v1-term-line v1-term-out">  ✓ programador.online</div>
                <div className="v1-term-line v1-term-out">  ✓ copywriter.online</div>
                <div className="v1-term-line v1-term-out">  ✓ designer.online</div>
                <div className="v1-term-line v1-term-out">  ✓ sdr_whatsapp.online</div>
                <div className="v1-term-line v1-term-out">  ✓ trafego.online</div>
                <div className="v1-term-line"><span className="v1-prompt-amber">$</span><span className="v1-cursor-block">█</span></div>
              </div>
            </div>
          </section>

          {/* PILARES */}
          <section className="v1-section">
            <div className="v1-section-head">
              <span className="v1-cmd-prompt">$</span>
              <span className="v1-cmd">cat ./programa-completo.md</span>
            </div>
            <h2 className="v1-h2">O que você vai aprender em <span className="v1-h2-accent">1 dia</span></h2>
            <p className="v1-section-sub">4 pilares praticos. Sai da imersão com tudo configurado e funcionando.</p>

            <div className="v1-pilares-grid">
              {[
                { 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.' },
                { 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.' },
                { 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 automatizados, dashboards interativos, conteudo visual.' },
                { 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.' },
              ].map((p, i) => (
                <div key={i} className="v1-pilar-card">
                  <div className="v1-pilar-head">
                    <span className="v1-pilar-num">{p.n}</span>
                    <div>
                      <div className="v1-pilar-title">{p.t}</div>
                      <div className="v1-pilar-sub">// {p.s}</div>
                    </div>
                  </div>
                  <p className="v1-pilar-desc">{p.desc}</p>
                </div>
              ))}
            </div>
          </section>

          {/* SKILLS */}
          <section className="v1-section v1-section-alt">
            <div className="v1-section-head">
              <span className="v1-cmd-prompt">$</span>
              <span className="v1-cmd">node calculate-roi.js</span>
            </div>
            <h2 className="v1-h2">Não e so aprender IA.<br /><span className="v1-h2-accent">E faturar com IA.</span></h2>
            <p className="v1-section-sub">Cada pilar vira um serviço de alto valor. Veja quanto cada skill vale no mercado:</p>

            <div className="v1-skills-table">
              <div className="v1-skills-row v1-skills-head">
                <div>SERVIÇO</div>
                <div>DESCRICAO</div>
                <div>VALOR</div>
              </div>
              {[
                { s: 'Atendimento 24h', d: 'WhatsApp/Instagram com IA', v: 'R$5.000', u: '/mes/cliente' },
                { s: 'Landing pages', d: 'Prontas em minutos com deploy', v: 'R$5.000', u: '/projeto' },
                { s: 'Propostas comerciais', d: 'Automaticas e personalizadas', v: 'R$8.000', u: 'setup' },
                { s: 'Conteudo visual', d: 'Carrosseis, thumbs, banners', v: 'R$3.000', u: '/mes/cliente' },
                { s: 'Dashboards', d: 'Metricas em tempo real', v: 'R$7.000', u: '/projeto' },
                { s: 'SaaS completos', d: 'Apps e sistemas sem codigo', v: 'R$50.000', u: '/sistema' },
                { s: 'Funis de vendas', d: 'Captura, vendas, obrigado + deploy', v: 'R$10.000', u: '/funil' },
              ].map((r, i) => (
                <div key={i} className="v1-skills-row">
                  <div className="v1-skill-name">{r.s}</div>
                  <div className="v1-skill-desc">{r.d}</div>
                  <div className="v1-skill-val">
                    <span className="v1-skill-price">{r.v}</span>
                    <span className="v1-skill-unit">{r.u}</span>
                  </div>
                </div>
              ))}
              <div className="v1-skills-row v1-skills-total">
                <div>TOTAL POTENCIAL</div>
                <div>// soma dos serviços da imersão</div>
                <div className="v1-skill-val">
                  <span className="v1-skill-price v1-skill-price-big">+R$88.000</span>
                </div>
              </div>
            </div>
          </section>

          {/* PÚBLICO */}
          <section className="v1-section">
            <div className="v1-section-head">
              <span className="v1-cmd-prompt">$</span>
              <span className="v1-cmd">grep -i "pra mim?" ./público.md</span>
            </div>
            <h2 className="v1-h2">Essa imersão e <span className="v1-h2-accent">pra você</span> se...</h2>
            <div className="v1-publico-grid">
              {[
                { t: 'empreendedor', d: 'quer automatizar operacoes inteiras com IA, reduzir custos e ganhar velocidade' },
                { t: 'agencia', d: 'quer escalar entrega sem contratar mais gente, usando agentes como mao de obra digital' },
                { t: 'freelancer', d: 'quer adicionar servicos de IA ao portfolio, cobrar mais e entregar mais rapido' },
                { t: 'dev/tecnico', d: 'quer multiplicar produtividade com agentes que codificam, testam e deployam sozinhos' },
                { t: 'iniciante', d: 'quer faturar com IA mesmo sem experiencia tecnica, do zero ao primeiro cliente' },
              ].map((p, i) => (
                <div key={i} className="v1-pub-card">
                  <div className="v1-pub-tag">user.role = </div>
                  <div className="v1-pub-name">"{p.t}"</div>
                  <p className="v1-pub-desc">{p.d}</p>
                </div>
              ))}
            </div>
          </section>

          {/* DENDERSON */}
          <section className="v1-section v1-section-alt">
            <div className="v1-section-head">
              <span className="v1-cmd-prompt">$</span>
              <span className="v1-cmd">whoami --verbose</span>
            </div>
            <div className="v1-denderson">
              <div className="v1-denderson-photo">
                <div className="v1-photo-frame">
                  <img
                    src="./denderson-premium.webp"
                    alt="Denderson Rodrigues"
                    style={{width:'100%',height:'100%',objectFit:'cover',objectPosition:'center top',display:'block',borderRadius:'inherit'}}
                  />
                </div>
                <div className="v1-photo-meta">
                  <div>// 895x1200 · webp</div>
                  <div>// host: imersão-maio-terminal.denderson.ai</div>
                </div>
              </div>
              <div className="v1-denderson-body">
                <div className="v1-tag">QUEM CONDUZ</div>
                <h2 className="v1-h2">Denderson Rodrigues</h2>
                <p className="v1-denderson-desc">
                  Mentor de negócios digitais desde 2017. Em 2024, enquanto a maioria ainda
                  tentava entender IA generativa, já estava substituindo um time de 37 vendedores
                  por agentes autonomos rodando 24h no WhatsApp. <span className="v1-highlight">Reducao de 80% na folha comercial</span>
                  {' '}com performance superior a equipes humanas.
                </p>
                <p className="v1-denderson-desc">
                  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 de subagentes coordenadas.
                </p>
                <div className="v1-denderson-stats">
                  <div className="v1-dstat"><div className="v1-dstat-num">10k+</div><div className="v1-dstat-label">mentorados</div></div>
                  <div className="v1-dstat"><div className="v1-dstat-num">45k+</div><div className="v1-dstat-label">alunos</div></div>
                  <div className="v1-dstat"><div className="v1-dstat-num">30+</div><div className="v1-dstat-label">empresas com IA</div></div>
                  <div className="v1-dstat"><div className="v1-dstat-num">227k</div><div className="v1-dstat-label">seguidores</div></div>
                </div>
              </div>
            </div>
          </section>

          {/* RESULTADOS */}
          <section className="v1-section">
            <div className="v1-section-head">
              <span className="v1-cmd-prompt">$</span>
              <span className="v1-cmd">cat resultados.csv | head</span>
            </div>
            <h2 className="v1-h2">Numeros que <span className="v1-h2-accent">falam por si</span></h2>
            <div className="v1-numbers-grid">
              {[
                { 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 de producao' },
                { n: '24h', l: 'atendimento ininterrupto', s: 'agentes nunca param' },
                { n: '3x', l: 'mais conversoes', s: 'em empresas que migraram' },
                { n: '0', l: 'conhecimento tecnico', s: 'qualquer pessoa configura do zero' },
              ].map((s, i) => (
                <div key={i} className="v1-num-card">
                  <div className="v1-num-big">{s.n}</div>
                  <div className="v1-num-label">{s.l}</div>
                  <div className="v1-num-sub">// {s.s}</div>
                </div>
              ))}
            </div>
          </section>

          {/* DETALHES + GARANTIA + PREÇO */}
          <section className="v1-section v1-section-alt">
            <div className="v1-section-head">
              <span className="v1-cmd-prompt">$</span>
              <span className="v1-cmd">cat detalhes.yaml</span>
            </div>
            <div className="v1-three-col">
              <div className="v1-detail-card">
                <h3 className="v1-detail-title">Detalhes</h3>
                <div className="v1-detail-row"><span className="v1-detail-key">data:</span><span className="v1-detail-val">16/05/2026</span></div>
                <div className="v1-detail-row"><span className="v1-detail-key">horario:</span><span className="v1-detail-val">10h - 18h</span></div>
                <div className="v1-detail-row"><span className="v1-detail-key">plataforma:</span><span className="v1-detail-val">Zoom</span></div>
                <div className="v1-detail-row"><span className="v1-detail-key">formato:</span><span className="v1-detail-val">mao na massa</span></div>
                <div className="v1-detail-row"><span className="v1-detail-key">duracao:</span><span className="v1-detail-val">1 dia inteiro</span></div>
                <div className="v1-detail-row"><span className="v1-detail-key">replay:</span><span className="v1-detail-val">opcional</span></div>
              </div>

              <div className="v1-detail-card v1-detail-card-warranty">
                <h3 className="v1-detail-title">try { '{ }' } catch</h3>
                <div className="v1-warranty-shield">7d</div>
                <p className="v1-detail-desc">
                  Garantia incondicional. Se a imersão não entregou, pede reembolso em até 7 dias.
                  Sem perguntas, sem burocracia. <span className="v1-highlight">O risco e nosso.</span>
                </p>
                <div className="v1-comment">// CDC §49</div>
              </div>

              <div className="v1-detail-card v1-detail-card-pricing">
                <h3 className="v1-detail-title">Lotes</h3>
                <div className="v1-lote v1-lote-active">
                  <span>Lote 0</span>
                  <span className="v1-lote-price">R$ 97</span>
                </div>
                <div className="v1-lote v1-lote-next">
                  <span>Lote 1</span>
                  <span className="v1-lote-price">R$147</span>
                </div>
                <div className="v1-lote v1-lote-next">
                  <span>Lote 2</span>
                  <span className="v1-lote-price">R$197</span>
                </div>
                <button className="v1-cta-primary v1-cta-block" onClick={scrollToForm}>
                  <span className="v1-cta-prompt">$</span>
                  <span>./checkout</span>
                </button>
                <div className="v1-comment">// 12x no cartao via Hotmart</div>
              </div>
            </div>
          </section>


          {/* LOTES + FORMULARIO DESTACADOS */}
          <section className="v1-section v1-lotes-form-wrap" data-imersao-form="v1" id="lotes-form-v1">
            <div className="v1-section-head">
              <span className="v1-cmd-prompt">$</span>
              <span className="v1-cmd">./checkout --lote=0 --priority=high</span>
            </div>
            <h2 className="v1-h2 v1-lotes-form-h2">
              Garante teu <span className="v1-h2-accent">passaporte</span> agora
            </h2>
            <p className="v1-lotes-form-sub">// preço sobe a cada virada de lote · escassez real</p>

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

              {/* COLUNA LOTES */}
              <div className="v1-lotes-col">
                <div className="v1-lotes-eyebrow">
                  <span className="v1-lotes-eyedot"></span>
                  <span>LOTE 0 ATIVO</span>
                </div>

                <div className="v1-lote-card v1-lote-card-active">
                  <div className="v1-lote-card-badge">ATIVO AGORA</div>
                  <div className="v1-lote-card-label">Lote 0</div>
                  <div className="v1-lote-card-price">R$ 97</div>
                  <div className="v1-lote-card-state">&gt; 12x R$ 9,60 no cartao</div>
                </div>

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

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

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

              {/* COLUNA FORM */}
              <div className="v1-form-col" id="formulario-destacado">
                <div className="v1-form-header">
                  <div className="v1-form-tabs">
                    <span className="v1-form-tab v1-form-tab-active">// inscricao.tsx</span>
                  </div>
                </div>
                <div className="v1-form-body">
                  <form id="leadFormDestacado" className="v1-form-real" onSubmit={submitLeadFormDestacado}>
                    <div className="v1-form-field">
                      <label htmlFor="formNameD" className="v1-form-label">&gt; nome_completo:</label>
                      <input
                        type="text"
                        id="formNameD"
                        name="name"
                        required
                        className="v1-form-input"
                        placeholder="ex: Joao da Silva"
                        autoComplete="name"
                      />
                    </div>
                    <div className="v1-form-field">
                      <label htmlFor="formEmailD" className="v1-form-label">&gt; email:</label>
                      <input
                        type="email"
                        id="formEmailD"
                        name="email"
                        required
                        className="v1-form-input"
                        placeholder="ex: você@dominio.com"
                        autoComplete="email"
                      />
                    </div>
                    <div className="v1-form-field">
                      <label htmlFor="formPhoneD" className="v1-form-label">&gt; whatsapp:</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="v1-form-input"
                        placeholder="ex: 11987654321 (11 digitos com DDD)"
                        title="DDD + numero, 11 digitos"
                        autoComplete="tel"
                      />
                    </div>
                    <button type="submit" id="formBtnD" className="v1-cta-primary v1-cta-mega v1-form-submit">
                      <span className="v1-cta-prompt">[</span>
                      <span>EXECUTAR INSCRICAO</span>
                      <span className="v1-cta-prompt">]</span>
                    </button>
                    <div className="v1-form-fineprint">
                      <span>// pagamento seguro</span>
                      <span>// 7 dias garantia</span>
                      <span>// 12x cartao</span>
                    </div>
                  </form>
                </div>
              </div>

            </div>
          </section>

          {/* COMUNIDADE AVALANCHE */}
          <section className="v1-section v1-section-alt" data-comunidade-avalanche>
            <div className="v1-section-head">
              <span className="v1-cmd-prompt">$</span>
              <span className="v1-cmd">./join --community=avalanche</span>
            </div>
            <div className="v1-comunidade-box">
              <div className="v1-comunidade-eyebrow">
                <span className="v1-comunidade-dot"></span>
                <span>alem da imersão</span>
              </div>
              <h2 className="v1-h2 v1-comunidade-h2">
                QUER MAIS DO QUE <span className="v1-h2-accent">A IMERSÃO?</span>
              </h2>
              <p className="v1-comunidade-sub">Faca parte da Comunidade Avalanche e tenha acesso a TUDO.</p>

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

              <div className="v1-comunidade-warn">
                &#9888;&#65039; TURMA DE FUNDADORES &middot; APENAS 17 VAGAS RESTANTES
              </div>

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

              <form id="leadFormComunidade" data-form-comunidade="true" className="v1-form-real v1-comunidade-form" onSubmit={submitLeadFormComunidade}>
                <div className="v1-form-field">
                  <label htmlFor="formNameComunidade" className="v1-form-label">&gt; nome_completo:</label>
                  <input
                    type="text"
                    id="formNameComunidade"
                    name="name"
                    required
                    className="v1-form-input"
                    placeholder="ex: Joao da Silva"
                    autoComplete="name"
                  />
                </div>
                <div className="v1-form-field">
                  <label htmlFor="formEmailComunidade" className="v1-form-label">&gt; email:</label>
                  <input
                    type="email"
                    id="formEmailComunidade"
                    name="email"
                    required
                    className="v1-form-input"
                    placeholder="ex: voce@dominio.com"
                    autoComplete="email"
                  />
                </div>
                <div className="v1-form-field">
                  <label htmlFor="formPhoneComunidade" className="v1-form-label">&gt; whatsapp:</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="v1-form-input"
                    placeholder="ex: 11987654321 (11 digitos com DDD)"
                    title="DDD + numero, 11 digitos"
                    autoComplete="tel"
                  />
                </div>
                <button type="submit" id="formBtnComunidade" className="v1-cta-primary v1-cta-mega v1-comunidade-cta v1-form-submit">
                  <span className="v1-cta-prompt">$</span>
                  <span>./join-comunidade-avalanche</span>
                  <span className="v1-cta-arrow">&#8594;</span>
                </button>
                <div className="v1-form-fineprint">
                  <span>// pagamento seguro</span>
                  <span>// 12x cartao</span>
                  <span>// acesso imediato</span>
                </div>
              </form>

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


          {/* FAQ */}
          <section className="v1-section">
            <div className="v1-section-head">
              <span className="v1-cmd-prompt">$</span>
              <span className="v1-cmd">tail -f faq.md</span>
            </div>
            <h2 className="v1-h2">Perguntas <span className="v1-h2-accent">frequentes</span></h2>
            <div className="v1-faq-list">
              {[
                { 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. Tudo 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. Ate 12x no cartao de credito direto pela Hotmart.' },
              ].map((f, i) => (
                <details key={i} className="v1-faq-item">
                  <summary className="v1-faq-q">
                    <span className="v1-faq-tag">Q.</span>
                    <span>{f.q}</span>
                    <span className="v1-faq-toggle">+</span>
                  </summary>
                  <div className="v1-faq-a">
                    <span className="v1-faq-tag v1-faq-tag-a">A.</span>
                    <span>{f.a}</span>
                  </div>
                </details>
              ))}
            </div>
          </section>

          {/* FINAL CTA */}
          <section className="v1-final-cta">
            <div className="v1-final-prompt">
              <span className="v1-cmd-prompt v1-cmd-prompt-big">$</span>
              <span className="v1-final-text">
                ./decida-agora --before-lote2<span className="v1-cursor">_</span>
              </span>
            </div>
            <h2 className="v1-h2 v1-h2-final">
              O Lote 1 sobe pra <span className="v1-h2-accent">R$147.</span><br />
              Ainda da pra entrar a R$ 97.
            </h2>
            <button className="v1-cta-primary v1-cta-mega" onClick={scrollToForm}>
              <span className="v1-cta-prompt">$</span>
              <span>garantir-passaporte-lote-0</span>
              <span className="v1-cta-arrow">↵</span>
            </button>
            <div className="v1-final-meta">
              <span>R$ 97</span><span>·</span><span>12x no cartao</span><span>·</span><span>7 dias garantia</span>
            </div>
          </section>

          <footer className="v1-footer">
            <div className="v1-footer-line">© 2026 Instituto Avalanche · todos os direitos reservados</div>
            <div className="v1-footer-line v1-footer-comment">// produto comercializado com apoio Hotmart</div>
          </footer>
        </main>
    </div>
  );
};

window.V1Terminal = V1Terminal;