/* Variation B — Home page */

function VbHome({ go }) {
  return (
    <main>
      {/* HERO */}
      <section className="vb-hero">
        <div className="vb-wrap">
          <div className="vb-hero-meta">
            <div className="vb-eyebrow">Marketing estratégico · Pequenas e médias empresas</div>
            <div className="vb-meta-num"></div>
          </div>

          <div className="vb-hero-grid">
            <h1 className="vb-h1">
              Marketing<br/>
              que <em>desbloqueia</em><br/>
              o <span className="vb-mark">próximo</span><br/>
              patamar.
            </h1>
            <div className="vb-hero-aside">
              <p>
                Projetos personalizados, mentoria e consultoria para empresas que precisam de método, KPIs claros e execução prática para crescer com consistência.
              </p>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 16, alignItems: 'flex-start' }}>
                <a href="#" className="vb-btn vb-btn-primary" onClick={(e) => { e.preventDefault(); go('servicos'); }}>
                  Ver planos e contratar <VbIcon.arrow/>
                </a>
                <a href={VbWa()} target="_blank" rel="noopener" className="vb-btn vb-btn-link">
                  Diagnóstico grátis no WhatsApp <VbIcon.arrowUR/>
                </a>
              </div>
            </div>
          </div>

          <div className="vb-hero-stats">
            <div>
              <div className="vb-stat-num">+10<span style={{ fontSize: '0.5em', color: 'var(--blue-deep)' }}>ANOS</span></div>
              <div className="vb-stat-lbl">de mercado atendendo operações de alta complexidade.</div>
            </div>
            <div>
              <div className="vb-stat-num">3.4<span style={{ fontSize: '0.6em', color: 'var(--blue-deep)' }}>×</span></div>
              <div className="vb-stat-lbl">de performance média entregue aos clientes ativos.</div>
            </div>
            <div>
              <div className="vb-stat-num">98<span style={{ fontSize: '0.6em', color: 'var(--blue-deep)' }}>%</span></div>
              <div className="vb-stat-lbl">de retenção: clientes ficam, renovam e indicam.</div>
            </div>
          </div>
        </div>
      </section>

      {/* SERVICES — DARK editorial */}
      <section className="vb-section vb-dark">
        <div className="vb-wrap">
          <div className="vb-section-head">
            <div>
              <div className="vb-eyebrow">Serviços</div>
              <h2 className="vb-h2">Três formatos,<br/><em>um compromisso</em>.</h2>
            </div>
            <p className="vb-lede">Cada serviço foi desenhado para um momento específico. Conheça os formatos e escolha o que faz sentido para a sua empresa agora.</p>
          </div>

          <div>
            <div className="vb-svc-row">
              <div className="vb-svc-no">01</div>
              <div>
                <div className="vb-svc-kind">Projeto · 6–12 meses</div>
                <h3>Projeto de marketing personalizado</h3>
              </div>
              <p>Gestão completa das mídias da sua empresa por um período de 6 a 12 meses, renovável. Estratégia, criação, mídia e operação dedicadas ao seu funil.</p>
              <div className="vb-svc-meta">
                <span>Renovável</span>
                <span>Time dedicado</span>
              </div>
            </div>

            <div className="vb-svc-row">
              <div className="vb-svc-no">02</div>
              <div>
                <div className="vb-svc-kind">Mentoria · 3/6/12 meses</div>
                <h3>Mentoria individual</h3>
              </div>
              <p>Acompanhamento próximo para entender seus desafios e direcionar de forma prática e efetiva. Sessões 1:1, plano de ação e revisão de KPIs.</p>
              <div className="vb-svc-meta">
                <span>1:1 semanal</span>
                <span>Online</span>
              </div>
            </div>

            <div className="vb-svc-row">
              <div className="vb-svc-no">03</div>
              <div>
                <div className="vb-svc-kind">Consultoria · Pontual</div>
                <h3>Consultoria individual</h3>
              </div>
              <p>Acesso à infraestrutura da empresa, análise de gargalos, falhas operacionais e ajuste de processos para alcançar os resultados desejados.</p>
              <div className="vb-svc-meta">
                <span>Diagnóstico</span>
                <span>Plano de ação</span>
              </div>
            </div>
          </div>

          <div style={{ marginTop: 56, display: 'flex', justifyContent: 'flex-end' }}>
            <a href="#" className="vb-btn vb-btn-link" style={{ color: 'var(--bone)', borderColor: 'var(--bone)' }}
               onClick={(e) => { e.preventDefault(); go('servicos'); }}>
              Ver todos os planos <VbIcon.arrowUR/>
            </a>
          </div>
        </div>
      </section>

      {/* METHOD */}
      <section className="vb-section">
        <div className="vb-wrap">
          <div className="vb-section-head">
            <div>
              <div className="vb-eyebrow">Metodologia</div>
              <h2 className="vb-h2">Quatro etapas,<br/><em>uma só lógica</em>.</h2>
            </div>
            <p className="vb-lede">Nada de pacote pronto. Começamos entendendo a sua realidade, propomos um plano com objetivos mensuráveis e acompanhamos a execução com revisões constantes.</p>
          </div>

          <div className="vb-method-grid">
            <div className="vb-method-step">
              <div className="vb-method-num"><em>01</em></div>
              <h3>Diagnóstico</h3>
              <p>Análise profunda do negócio, mercado, mídias e gargalos operacionais.</p>
            </div>
            <div className="vb-method-step">
              <div className="vb-method-num"><em>02</em></div>
              <h3>Estratégia</h3>
              <p>Plano prático com objetivos claros, KPIs definidos e cronograma de execução.</p>
            </div>
            <div className="vb-method-step">
              <div className="vb-method-num"><em>03</em></div>
              <h3>Execução</h3>
              <p>Implementação acompanhada, rituais semanais e ajustes em tempo real.</p>
            </div>
            <div className="vb-method-step">
              <div className="vb-method-num"><em>04</em></div>
              <h3>Aceleração</h3>
              <p>Análise de KPIs, novas ideias e otimizações para escalar resultados.</p>
            </div>
          </div>
        </div>
      </section>

      {/* CASES */}
      <section className="vb-section" style={{ paddingTop: 0 }}>
        <div className="vb-wrap">
          <div className="vb-section-head">
            <div>
              <div className="vb-eyebrow">Cases & Resultados</div>
              <h2 className="vb-h2">Números que<br/><em>respondem</em>.</h2>
            </div>
            <p className="vb-lede">Resultados reais de clientes ativos. Métricas representam médias dos últimos 24 meses de operação.</p>
          </div>

          <div className="vb-cases-spread">
            <div className="vb-case-hero">
              <div>
                <div className="vb-tag">Indústria · Projeto 12 meses</div>
              </div>
              <div>
                <div className="vb-case-big">+412%</div>
                <h3>Leads qualificados após reestruturação completa</h3>
                <p>Redesenho de funil, mídia paga e CRM com rituais semanais de revisão por 12 meses consecutivos.</p>
              </div>
            </div>

            <div className="vb-cases-list">
              <div className="vb-case-row">
                <div className="vb-case-mid">3.8<em>×</em></div>
                <div>
                  <h4>ROAS médio em campanhas</h4>
                  <p>Mentoria · 6 meses · SaaS B2B</p>
                </div>
              </div>
              <div className="vb-case-row">
                <div className="vb-case-mid">-37<em>%</em></div>
                <div>
                  <h4>Custo de aquisição</h4>
                  <p>Consultoria operacional · Varejo</p>
                </div>
              </div>
              <div className="vb-case-row">
                <div className="vb-case-mid">+62<em>%</em></div>
                <div>
                  <h4>Pipeline qualificado</h4>
                  <p>Projeto · B2B · 1º trimestre</p>
                </div>
              </div>
              <div className="vb-case-row">
                <div className="vb-case-mid">+155<em>%</em></div>
                <div>
                  <h4>Receita orgânica</h4>
                  <p>Mentoria · Varejo · 9 meses</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TESTIMONIAL hero + small */}
      <section className="vb-section" style={{ paddingTop: 0 }}>
        <div className="vb-wrap">
          <div className="vb-section-head">
            <div>
              <div className="vb-eyebrow">Depoimentos</div>
              <h2 className="vb-h2">O que dizem<br/>os <em>clientes</em>.</h2>
            </div>
          </div>

          <div className="vb-testimonial">
            <blockquote>
              "A AS reorganizou nossa operação de marketing em três meses. O que mais me surpreendeu foi a <em>clareza dos KPIs</em> — finalmente sei onde estamos ganhando e onde corrigir."
            </blockquote>
            <div className="vb-testimonial-meta">
              <div className="vb-avatar-l">RM</div>
              <div>
                <div className="vb-q-name">Roberto Macedo</div>
                <div className="vb-q-role">CEO · Indústria de bens de consumo</div>
              </div>
            </div>
          </div>

          <div className="vb-test-grid">
            <div className="vb-test-small">
              <p>"A mentoria foi um divisor de águas. Em seis meses, dobramos o ROAS e tiramos do papel processos travados havia anos."</p>
              <div className="vb-testimonial-meta">
                <div className="vb-avatar-l">PC</div>
                <div>
                  <div className="vb-q-name">Patrícia Câmara</div>
                  <div className="vb-q-role">Diretora de Marketing · SaaS B2B</div>
                </div>
              </div>
            </div>
            <div className="vb-test-small">
              <p>"Contratamos a consultoria para um diagnóstico. Saímos com um plano tão claro que decidimos contratar o projeto completo logo depois."</p>
              <div className="vb-testimonial-meta">
                <div className="vb-avatar-l">JS</div>
                <div>
                  <div className="vb-q-name">João Silveira</div>
                  <div className="vb-q-role">COO · Rede de varejo</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* BLOG */}
      <section className="vb-section vb-dark" style={{ background: 'var(--cream)', color: 'var(--ink-0)' }}>
        <div className="vb-wrap">
          <div className="vb-section-head">
            <div>
              <div className="vb-eyebrow">Por que a AS</div>
              <h2 className="vb-h2">Três razões que<br/><em>mudam o jogo</em>.</h2>
            </div>
            <p className="vb-lede">Acompanhamento sênior, método claro e resultado mensurável desde o primeiro dia. Nada de pacote pronto, nada de promessa vazia.</p>
          </div>

          <div className="vb-blog-feature">
            <div style={{
              width: '100%', aspectRatio: '5/4', borderRadius: 8,
              background: '#ffffff',
              border: '1px solid rgba(0,0,0,0.08)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: '8%',
            }}>
              <img src="assets/case-logo.png" alt="AS Marketing Digital"
                   style={{ maxWidth: '70%', maxHeight: '70%', width: 'auto', height: 'auto', objectFit: 'contain' }}/>
            </div>
            <div className="vb-blog-feature-body">
              <div className="vb-blog-tag">Case em destaque</div>
              <h3>+412% em leads qualificados em 12 meses de operação.</h3>
              <p>Reestruturamos a operação de mídia paga, CRM e funil completo de uma indústria de bens de consumo. Resultado consistente, mês após mês, com rituais semanais de revisão e ajustes de rota.</p>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, marginTop: 14, borderTop: '1px solid rgba(0,0,0,0.12)', borderBottom: '1px solid rgba(0,0,0,0.12)' }}>
                <div style={{ padding: '20px 0', borderRight: '1px solid rgba(0,0,0,0.12)' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 28, letterSpacing: '-0.02em', color: 'var(--blue-deep)' }}>+412%</div>
                  <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.55)', marginTop: 4 }}>Leads MQL</div>
                </div>
                <div style={{ padding: '20px 0 20px 18px', borderRight: '1px solid rgba(0,0,0,0.12)' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 28, letterSpacing: '-0.02em', color: 'var(--blue-deep)' }}>-37%</div>
                  <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.55)', marginTop: 4 }}>CAC</div>
                </div>
                <div style={{ padding: '20px 0 20px 18px' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 28, letterSpacing: '-0.02em', color: 'var(--blue-deep)' }}>12<span style={{ fontSize: 16, color: 'rgba(0,0,0,0.4)' }}>&nbsp;meses</span></div>
                  <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(0,0,0,0.55)', marginTop: 4 }}>Projeto</div>
                </div>
              </div>
            </div>
          </div>

          <div className="vb-blog-list">
            <div className="vb-blog-row" style={{ cursor: 'default' }}>
              <div className="vb-blog-date" style={{ color: 'var(--blue-deep)', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>01</div>
              <h4>Diagnóstico gratuito de 30 minutos antes de qualquer contrato.</h4>
              <div className="vb-blog-read">Sem compromisso · Sem peça comercial</div>
            </div>
            <div className="vb-blog-row" style={{ cursor: 'default' }}>
              <div className="vb-blog-date" style={{ color: 'var(--blue-deep)', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>02</div>
              <h4>Time sênior 1:1 — sem gerente de conta intermediando.</h4>
              <div className="vb-blog-read">Profissionais com 8+ anos de mercado</div>
            </div>
            <div className="vb-blog-row" style={{ cursor: 'default' }}>
              <div className="vb-blog-date" style={{ color: 'var(--blue-deep)', fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em' }}>03</div>
              <h4>KPIs claros e rituais semanais de revisão desde a primeira semana.</h4>
              <div className="vb-blog-read">Você sempre sabe onde está ganhando</div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="vb-wrap">
        <div className="vb-cta">
          <div className="vb-cta-inner">
            <div>
              <h2>Vamos conversar<br/>sobre o seu próximo<br/>ciclo de crescimento?</h2>
              <p>30 minutos de diagnóstico gratuito. Mostramos onde estão as maiores alavancas da sua operação antes de qualquer contrato.</p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <a href="#" className="vb-btn vb-btn-primary" onClick={(e) => { e.preventDefault(); go('servicos'); }}>
                Ver planos e contratar <VbIcon.arrow/>
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.VbHome = VbHome;