// V1 — Terminal/Dev aesthetic — STANDALONE PRODUCAO
// Imersao 09 Maio 2026

const HOTMART_BASE = 'https://pay.hotmart.com/W101162921S?off=q3dgqvk3&checkoutMode=10';

function buildCheckoutUrl() {
  let url = HOTMART_BASE;
  const params = new URLSearchParams(window.location.search);
  // Default UTMs pra V1 (sobrescrevem se a URL ja tiver)
  const defaults = {
    utm_source: 'meta',
    utm_medium: 'paid',
    utm_campaign: 'imersao-maio',
    utm_content: 'v1-terminal',
  };
  const keys = ['utm_source','utm_medium','utm_campaign','utm_content','utm_term','src','sck'];
  keys.forEach(k => {
    const v = params.get(k) || defaults[k];
    if (v) url += '&' + k + '=' + encodeURIComponent(v);
  });
  return url;
}

async function submitLeadForm(e) {
  e.preventDefault();
  const btn = e.target.querySelector('button[type="submit"]');
  if (btn) { btn.disabled = true; btn.style.opacity = '0.6'; }
  const data = {
    name: document.getElementById('formName').value,
    email: document.getElementById('formEmail').value,
    phone: document.getElementById('formPhone').value,
    source: 'imersao-maio-terminal',
  };
  const webhookUrl = 'https://services.leadconnectorhq.com/hooks/sVzQ1MyiOqQn2e6Yuzu1/webhook-trigger/srSqqsMuwqs1Z9r1q40n';
  try {
    await fetch(webhookUrl, { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
  } catch (err) { console.error('Webhook error:', err); }
  try {
    await fetch('https://quizz.denderson.ai/api/webhook/7c62f7fe2987', { method: 'POST', headers: {'Content-Type':'application/json'}, body: JSON.stringify(data) });
  } catch (err) { console.error('Quiz webhook error:', err); }
  if (typeof fbq === 'function') {
    fbq('track', 'Lead', { content_name: 'Imersao Claude + OpenClaw V1 Terminal', value: 147.00, currency: 'BRL' });
  }
  let checkoutUrl = buildCheckoutUrl();
  if (data.name)  checkoutUrl += '&name='  + encodeURIComponent(data.name);
  if (data.email) checkoutUrl += '&email=' + encodeURIComponent(data.email);
  if (data.phone) checkoutUrl += '&phoneac=' + encodeURIComponent(data.phone.substring(0,2)) + '&phonenumber=' + encodeURIComponent(data.phone.substring(2));
  window.location.href = checkoutUrl;
}

const V1Terminal = () => {
  // Countdown ate 09/05/2026 23:59 BRT (= 10/05 02:59 UTC)
  const TARGET = new Date('2026-05-10T02:59: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('formulario');
    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">// imersao_ao_vivo · 1 dia inteiro · zoom · 09 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=09/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: do zero a sua
              propria equipe de agentes autonomos que trabalha 24h, nao 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=1</span>
                <span className="v1-cta-arrow">↵</span>
              </button>
              <div className="v1-hero-cta-meta">
                <div className="v1-meta-item">
                  <div className="v1-meta-label">PRECO</div>
                  <div className="v1-meta-value">
                    <span className="v1-strike">R$497</span> R$147
                  </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">~/imersao · 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 voce vai aprender em <span className="v1-h2-accent">1 dia</span></h2>
            <p className="v1-section-sub">4 pilares praticos. Sai da imersao 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">Nao 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 servico 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>SERVICO</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 servicos da imersao</div>
                <div className="v1-skill-val">
                  <span className="v1-skill-price v1-skill-price-big">+R$88.000</span>
                </div>
              </div>
            </div>
          </section>

          {/* PUBLICO */}
          <section className="v1-section">
            <div className="v1-section-head">
              <span className="v1-cmd-prompt">$</span>
              <span className="v1-cmd">grep -i "pra mim?" ./publico.md</span>
            </div>
            <h2 className="v1-h2">Essa imersao e <span className="v1-h2-accent">pra voce</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: imersao-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 negocios digitais desde 2017. Em 2024, enquanto a maioria ainda
                  tentava entender IA generativa, ja 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 + PRECO */}
          <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">09/05/2026</span></div>
                <div className="v1-detail-row"><span className="v1-detail-key">horario:</span><span className="v1-detail-val">10h - 17h</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 imersao nao entregou, pede reembolso em ate 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-done">
                  <span>Lote 0</span>
                  <span className="v1-lote-status">esgotado</span>
                </div>
                <div className="v1-lote v1-lote-active">
                  <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>

          {/* FORMULARIO DE CAPTURA */}
          <section id="formulario" className="v1-section">
            <div className="v1-section-head">
              <span className="v1-cmd-prompt">$</span>
              <span className="v1-cmd">./inscrever --form</span>
            </div>
            <h2 className="v1-h2">Garanta seu <span className="v1-h2-accent">passaporte</span></h2>
            <p className="v1-section-sub">Preencha os dados e voce e levado direto ao checkout seguro da Hotmart.</p>
            <form id="leadForm" className="v1-form" onSubmit={submitLeadForm}>
              <input type="text" name="name" id="formName" placeholder="> seu nome completo" required className="v1-input" />
              <input type="email" name="email" id="formEmail" placeholder="> seu melhor e-mail" required className="v1-input" />
              <input type="tel" name="phone" id="formPhone" placeholder="> telefone com DDD (11 digitos)" required pattern="[0-9]{11}" maxLength="11" minLength="11" onInput={(e)=>e.target.value=e.target.value.replace(/[^0-9]/g,'')} className="v1-input" />
              <button type="submit" className="v1-cta-primary v1-cta-block">
                <span className="v1-cta-prompt">$</span>
                <span>./garantir-passaporte</span>
                <span className="v1-cta-arrow">↵</span>
              </button>
              <div className="v1-comment" style={{textAlign:'center',marginTop:'10px'}}>// 12x no cartao via Hotmart · 7 dias garantia</div>
            </form>
          </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 2 sobe pra <span className="v1-h2-accent">R$197.</span><br />
              Ainda da pra entrar a R$147.
            </h2>
            <button className="v1-cta-primary v1-cta-mega" onClick={scrollToForm}>
              <span className="v1-cta-prompt">$</span>
              <span>garantir-passaporte-lote-1</span>
              <span className="v1-cta-arrow">↵</span>
            </button>
            <div className="v1-final-meta">
              <span>R$147</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;