// V1 — Terminal/Dev aesthetic
// Estética de IDE: monospace dominante, blocos de código, comandos como section headers,
// cursor piscando, grid de arquivos. Dark + âmbar Claude.

const V1Terminal = () => {
  const [time, setTime] = React.useState({ h: 23, m: 47, s: 12 });
  const [activeTab, setActiveTab] = React.useState('hero.tsx');
  const [cmdIndex, setCmdIndex] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setTime(t => {
        let { h, m, s } = t;
        s--;
        if (s < 0) { s = 59; m--; }
        if (m < 0) { m = 59; h--; }
        if (h < 0) { h = 0; s = 0; m = 0; }
        return { h, m, s };
      });
    }, 1000);
    return () => clearInterval(id);
  }, []);

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

  return (
    <div className="v1-root">
      {/* Top status bar */}
      <div className="v1-statusbar">
        <div className="v1-statusbar-left">
          <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-statusbar-title">denderson@imersao: ~/claude-code-openclaw</span>
        </div>
        <div className="v1-statusbar-right">
          <span className="v1-status-item">main</span>
          <span className="v1-status-sep">·</span>
          <span className="v1-status-item">opus-4.6</span>
          <span className="v1-status-sep">·</span>
          <span className="v1-status-item v1-status-live">
            <span className="v1-pulse"></span>LIVE
          </span>
        </div>
      </div>

      {/* Sidebar + main content layout */}
      <div className="v1-layout">
        <aside className="v1-sidebar">
          <div className="v1-sidebar-section">
            <div className="v1-sidebar-label">EXPLORER</div>
            <div className="v1-file-tree">
              <div className="v1-folder">▾ imersao/</div>
              <div className="v1-file v1-file-active">  hero.tsx</div>
              <div className="v1-file">  pilares.tsx</div>
              <div className="v1-file">  skills.json</div>
              <div className="v1-file">  publico.md</div>
              <div className="v1-file">  denderson.bio</div>
              <div className="v1-file">  resultados.csv</div>
              <div className="v1-file">  detalhes.yaml</div>
              <div className="v1-file">  garantia.md</div>
              <div className="v1-file">  pricing.ts</div>
              <div className="v1-file">  faq.md</div>
            </div>
          </div>
          <div className="v1-sidebar-section">
            <div className="v1-sidebar-label">AGENTS</div>
            <div className="v1-agent">
              <span className="v1-agent-status v1-agent-on"></span>
              <span>programador</span>
            </div>
            <div className="v1-agent">
              <span className="v1-agent-status v1-agent-on"></span>
              <span>copywriter</span>
            </div>
            <div className="v1-agent">
              <span className="v1-agent-status v1-agent-on"></span>
              <span>designer</span>
            </div>
            <div className="v1-agent">
              <span className="v1-agent-status v1-agent-on"></span>
              <span>sdr_whatsapp</span>
            </div>
            <div className="v1-agent">
              <span className="v1-agent-status v1-agent-on"></span>
              <span>trafego</span>
            </div>
          </div>
        </aside>

        <main className="v1-main">
          {/* Tab bar */}
          <div className="v1-tabbar">
            <div className="v1-tab v1-tab-active">
              <span className="v1-tab-icon">⌘</span>
              <span>hero.tsx</span>
            </div>
            <div className="v1-tab">pilares.tsx</div>
            <div className="v1-tab">pricing.ts</div>
          </div>

          {/* 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</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=11/04/2026</span>
              </div>
            </div>

            <div className="v1-countdown-display">
              <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">
                <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>

            {/* terminal block */}
            <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 / VALOR */}
          <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">
                  <div className="v1-photo-placeholder">
                    <div className="v1-photo-stripes"></div>
                    <div className="v1-photo-caption">denderson.png</div>
                  </div>
                </div>
                <div className="v1-photo-meta">
                  <div>// 1024x1024 · webp</div>
                  <div>// host: imersao.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 / NUMBERS */}
          <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 em grid 3 colunas no desktop, stack mobile */}
          <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">11/04/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">
                  <span className="v1-cta-prompt">$</span>
                  <span>./checkout</span>
                </button>
                <div className="v1-comment">// 12x no cartao via Hotmart</div>
              </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 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">
              <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">© 2025 Instituto Avalanche · todos os direitos reservados</div>
            <div className="v1-footer-line v1-footer-comment">// produto comercializado com apoio Hotmart</div>
          </footer>
        </main>
      </div>
    </div>
  );
};

window.V1Terminal = V1Terminal;