/* Variation B — Sobre page */

function VbSobre({ go }) {
  return (
    <main>
      <VbPageHeader
        section="— 02 / Sobre"
        eyebrow="Sobre a AS"
        title="Marketing como<br/><em>parceria estratégica</em>,<br/>não como entrega."
        lede="Somos uma operação enxuta e sênior. Cada cliente é tratado como prioridade — buscamos entender em profundidade o que não permite avançar e construímos, junto, o caminho prático para chegar lá."
      />

      {/* Manifesto */}
      <section className="vb-section" style={{ paddingTop: 40 }}>
        <div className="vb-wrap">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }} className="vb-two">
            <div className="vb-quote-block">
              Marketing <b>não é sobre fazer mais coisas</b>. <em>É sobre fazer as coisas certas, no tempo certo, com método e clareza.</em>
            </div>
            <div>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: 'rgba(0,0,0,0.72)', margin: 0 }}>
                A AS Marketing Digital nasceu para preencher uma lacuna que vemos no mercado: a de empresas que investem alto em marketing, mas continuam sem clareza sobre o que está funcionando, por que está funcionando e como replicar.
              </p>
              <p style={{ fontSize: 17, lineHeight: 1.7, color: 'rgba(0,0,0,0.72)', marginTop: 18 }}>
                Trabalhamos com método, dados e proximidade. Estratégia sem execução é teoria, e execução sem estratégia é desperdício. Por isso, nossos serviços sempre conectam os dois lados.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Principles */}
      <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">Princípios</div>
              <h2 className="vb-h2">O que guia<br/><em>cada decisão</em>.</h2>
            </div>
          </div>

          <div className="vb-principles">
            <div className="vb-principle">
              <div className="vb-pnum">01 — Prioridade</div>
              <h3>Cliente é prioridade</h3>
              <p>Atendemos poucos clientes simultaneamente. Cada projeto recebe atenção sênior e personalizada — sem terceirização disfarçada, sem gestor de conta intermediando.</p>
            </div>
            <div className="vb-principle">
              <div className="vb-pnum">02 — Profundidade</div>
              <h3>Entender antes de propor</h3>
              <p>Investigamos com profundidade o que trava o crescimento. Não chegamos com receitas prontas: ouvimos, perguntamos, mapeamos e só depois desenhamos o plano.</p>
            </div>
            <div className="vb-principle">
              <div className="vb-pnum">03 — Prática</div>
              <h3>Estratégia que executa</h3>
              <p>Cada plano vem com acompanhamento de KPIs, rituais de revisão e desenvolvimento de novas ideias. Estratégia parada na PPT não é estratégia — é decoração.</p>
            </div>
          </div>
        </div>
      </section>

      {/* Numbers — DARK */}
      <section className="vb-section vb-dark">
        <div className="vb-wrap">
          <div className="vb-section-head">
            <div>
              <div className="vb-eyebrow">A AS em números</div>
              <h2 className="vb-h2">Operação<br/>com <em>track record</em>.</h2>
            </div>
            <p className="vb-lede">Mais de uma década no mercado, com foco em projetos sênior para empresas que tomam decisão baseada em dados.</p>
          </div>

          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
            border: '1px solid rgba(255,255,255,0.15)',
            borderRadius: 8, overflow: 'hidden',
          }} className="vb-numgrid">
            {[
              ['+10', 'ANOS', 'de mercado'],
              ['+80', 'PROJETOS', 'entregues'],
              ['+45', 'CLIENTES', 'ativos hoje'],
              ['12', 'PESSOAS', 'especialistas sênior'],
            ].map(([n, k, l], i) => (
              <div key={i} style={{
                padding: '48px 32px',
                borderRight: i < 3 ? '1px solid rgba(255,255,255,0.15)' : 0,
              }}>
                <div style={{
                  fontFamily: 'var(--font-display)', fontWeight: 800,
                  fontSize: 'clamp(48px, 5vw, 76px)', letterSpacing: '-0.03em', lineHeight: 1,
                }}>{n}</div>
                <div style={{
                  marginTop: 24, fontSize: 11,
                  letterSpacing: '0.22em', color: 'var(--blue-sky)',
                  fontFamily: 'var(--font-display)', fontWeight: 700,
                }}>{k}</div>
                <div style={{ marginTop: 6, color: 'rgba(255,255,255,0.7)', fontSize: 14 }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="vb-section">
        <div className="vb-wrap">
          <div className="vb-section-head">
            <div>
              <div className="vb-eyebrow">Áreas de especialidade</div>
              <h2 className="vb-h2">Onde a AS é<br/><em>profundamente sênior</em>.</h2>
            </div>
            <p className="vb-lede">Atuamos com profundidade em quatro frentes que, juntas, cobrem o ciclo completo de marketing — da estratégia ao número que aparece no fim do mês.</p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }} className="vb-team-grid">
            {[
              {
                num: '01',
                area: 'Estratégia',
                title: 'Planejamento & posicionamento',
                bullets: ['Mapeamento de mercado', 'OKRs e plano trimestral', 'Posicionamento de marca', 'Roadmap de canais'],
              },
              {
                num: '02',
                area: 'Mídia',
                title: 'Performance & aquisição',
                bullets: ['Meta, Google e LinkedIn Ads', 'Mídia programática', 'Funil pago de ponta a ponta', 'Otimização semanal'],
              },
              {
                num: '03',
                area: 'Conteúdo',
                title: 'Marca, criativo & social',
                bullets: ['Identidade verbal e visual', 'Produção de criativos', 'Calendário editorial', 'Branded content'],
              },
              {
                num: '04',
                area: 'Dados',
                title: 'Operação, KPIs & CRM',
                bullets: ['Dashboards e GA4', 'Atribuição multi-canal', 'CRM e automação', 'Rituais de revisão'],
              },
            ].map((a) => (
              <div key={a.num} style={{
                background: 'var(--cream)',
                border: '1px solid rgba(0,0,0,0.1)',
                borderRadius: 8, padding: 28,
                display: 'flex', flexDirection: 'column', gap: 18,
                minHeight: 320,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <span style={{
                    fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 12,
                    letterSpacing: '0.2em', color: 'var(--blue-deep)',
                  }}>{a.num} — {a.area.toUpperCase()}</span>
                  <span style={{
                    width: 8, height: 8, borderRadius: '50%',
                    background: 'var(--blue-bright)',
                    boxShadow: '0 0 10px var(--blue-bright)',
                  }}></span>
                </div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22,
                  letterSpacing: '-0.02em', lineHeight: 1.15, margin: 0,
                }}>{a.title}</h3>
                <ul style={{
                  listStyle: 'none', padding: 0, margin: '6px 0 0',
                  display: 'flex', flexDirection: 'column', gap: 10,
                  borderTop: '1px solid rgba(0,0,0,0.1)', paddingTop: 18,
                  marginTop: 'auto',
                }}>
                  {a.bullets.map((b) => (
                    <li key={b} style={{
                      fontSize: 14, lineHeight: 1.4, color: 'rgba(0,0,0,0.72)',
                      display: 'flex', gap: 10, alignItems: 'start',
                    }}>
                      <span style={{
                        flex: '0 0 14px', height: 1, marginTop: 10,
                        background: 'var(--ink-0)',
                      }}></span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="vb-wrap">
        <div className="vb-cta">
          <div className="vb-cta-inner">
            <div>
              <h2>Quer conhecer<br/>a operação por<br/>dentro?</h2>
              <p>Em uma conversa de 30 minutos, mostramos o método, ferramentas e como organizamos cada projeto.</p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <a href={VbWa('Olá! Vim pelo site da AS e gostaria de conhecer a operação por dentro — o método, ferramentas e como organizam cada projeto. Podemos agendar uma conversa?')} target="_blank" rel="noopener" className="vb-btn vb-btn-primary">
                Agendar conversa <VbIcon.arrow/>
              </a>
            </div>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 880px) {
          .vb-two { grid-template-columns: 1fr !important; gap: 32px !important; }
          .vb-numgrid { grid-template-columns: 1fr 1fr !important; }
          .vb-team-grid { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </main>
  );
}

window.VbSobre = VbSobre;