/* Variation B — Serviços page */

function VbServicos({ go }) {
  const services = [
    {
      num: '01', kind: 'Projeto · 6 a 12 meses',
      name: 'Projeto de marketing personalizado',
      summary: 'Gestão completa das mídias da sua empresa por um período que pode variar de 6 a 12 meses, renovável.',
      diagMsg: 'Olá! Vim pelo site da AS e quero um diagnóstico gratuito para entender se o Projeto de marketing personalizado faz sentido pra minha empresa. Quando podemos conversar?',
      pillars: [
        ['Planejamento', 'Estratégia trimestral com OKRs claros e cronograma de execução.'],
        ['Mídia', 'Gestão integrada de canais pagos e orgânicos, com testes recorrentes.'],
        ['Conteúdo', 'Produção criativa, copy e CRM alinhados ao funil completo.'],
        ['Análise', 'KPIs, dashboards e revisões semanais com plano de otimização.'],
      ],
    },
    {
      num: '02', kind: 'Mentoria · 3, 6 ou 12 meses',
      name: 'Mentoria individual',
      summary: 'Acompanhamento próximo de 3, 6 ou 12 meses, entendendo seus desafios e direcionando de forma prática e efetiva.',
      diagMsg: 'Olá! Vim pelo site da AS e quero um diagnóstico gratuito sobre a Mentoria individual. Quero entender formato, duração e se faz sentido pra mim. Quando podemos conversar?',
      pillars: [
        ['Diagnóstico', 'Mapeamento do momento atual, desafios e oportunidades.'],
        ['Plano de ação', 'Roteiro prático com prioridades e responsáveis.'],
        ['Sessões 1:1', 'Encontros semanais ou quinzenais com acompanhamento próximo.'],
        ['Materiais', 'Frameworks, templates e referências para apoiar a execução.'],
      ],
    },
    {
      num: '03', kind: 'Consultoria · Pontual ou recorrente',
      name: 'Consultoria individual',
      summary: 'Mergulho na infraestrutura da empresa para analisar gargalos, falhas operacionais e ajustar processos para alcançar performance.',
      diagMsg: 'Olá! Vim pelo site da AS e quero um diagnóstico gratuito para a Consultoria individual. Quero entender como identificam gargalos e como funciona o próximo passo. Quando podemos conversar?',
      pillars: [
        ['Auditoria', 'Análise da infraestrutura, ferramentas, dados e equipe.'],
        ['Mapeamento', 'Identificação de gargalos e falhas operacionais.'],
        ['Plano', 'Ajustes de processo, governança e pessoas com priorização.'],
        ['Aceleração', 'Implementação acompanhada para aumento de performance.'],
      ],
    },
  ];

  return (
    <main>
      <VbPageHeader
        section="— 01 / Serviços"
        eyebrow="O que entregamos"
        title='Três formatos.<br/><em>Um compromisso:</em> resultado.'
        lede="Cada serviço foi desenhado para um momento específico. Conheça os formatos, o que está incluso e qual se encaixa melhor no seu cenário."
      />

      {services.map((s, i) => (
        <section key={s.num} style={{ padding: '60px 0', borderTop: '1px solid rgba(0,0,0,0.12)' }}>
          <div className="vb-wrap">
            <div style={{ display: 'grid', gridTemplateColumns: '120px 1fr 1.4fr', gap: 48, alignItems: 'start' }} className="vb-svc-deep-grid">
              <div className="vb-method-num" style={{ fontSize: 88 }}><em style={{ color: 'var(--blue-deep)' }}>{s.num}</em></div>
              <div>
                <div className="vb-eyebrow" style={{ marginBottom: 14 }}>{s.kind}</div>
                <h2 className="vb-h2" style={{ fontSize: 'clamp(34px, 4vw, 56px)', marginTop: 0 }}>{s.name}</h2>
              </div>
              <div>
                <p style={{ fontSize: 18, lineHeight: 1.65, color: 'rgba(0,0,0,0.72)', marginTop: 0 }}>{s.summary}</p>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, marginTop: 32 }}>
                  {s.pillars.map(([t, d]) => (
                    <div key={t} style={{ borderTop: '1px solid rgba(0,0,0,0.12)', paddingTop: 16 }}>
                      <h4 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, margin: '0 0 6px', letterSpacing: '0.02em' }}>{t}</h4>
                      <p style={{ fontSize: 14, lineHeight: 1.6, color: 'rgba(0,0,0,0.65)', margin: 0 }}>{d}</p>
                    </div>
                  ))}
                </div>
                <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  <a href={VbWa(s.diagMsg)} target="_blank" rel="noopener"
                     className="vb-btn vb-btn-primary"
                     style={{ padding: '14px 22px', fontSize: 13 }}>
                    Diagnóstico grátis <VbIcon.arrow size={14}/>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </section>
      ))}

      <style>{`
        @media (max-width: 980px) {
          .vb-svc-deep-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>

      {/* PRICING */}
      <section className="vb-section">
        <div className="vb-wrap">
          <div className="vb-section-head">
            <div>
              <div className="vb-eyebrow">Planos & investimento</div>
              <h2 className="vb-h2">Escolha o<br/><em>ponto de partida</em>.</h2>
            </div>
            <p className="vb-lede">Pacotes pensados para empresas em diferentes momentos. Todos podem ser ajustados ao escopo da sua operação.</p>
          </div>

          <div className="vb-tiers">
            <div className="vb-tier">
              <div className="vb-tier-tag">Mentoria essencial</div>
              <h3>Direção & acompanhamento</h3>
              <div className="vb-tier-price">R$ 1.500<small>/mês</small></div>
              <p className="vb-tier-desc">Para quem precisa de direção sênior e acompanhamento prático.</p>
              <ul>
                <li><VbIcon.check/> Sessões 1:1 quinzenais</li>
                <li><VbIcon.check/> Plano de ação por trimestre</li>
                <li><VbIcon.check/> Frameworks & templates</li>
                <li><VbIcon.check/> Acompanhamento por WhatsApp</li>
              </ul>
              <a href={VbWa(VbWaMsgs.mentoria)} target="_blank" rel="noopener" className="vb-tier-btn">Contratar mentoria</a>
            </div>

            <div className="vb-tier vb-tier-featured">
              <div className="vb-tier-tag">Mais escolhido</div>
              <h3>Projeto personalizado</h3>
              <div className="vb-tier-price">Sob<br/>consulta</div>
              <p className="vb-tier-desc">Operação completa de marketing dedicada à sua empresa.</p>
              <ul>
                <li><VbIcon.check/> Gestão integrada de mídias</li>
                <li><VbIcon.check/> Estratégia, criação e operação</li>
                <li><VbIcon.check/> Rituais semanais com KPIs</li>
                <li><VbIcon.check/> Time multidisciplinar dedicado</li>
                <li><VbIcon.check/> 6 a 12 meses, renovável</li>
              </ul>
              <a href={VbWa(VbWaMsgs.projeto)} target="_blank" rel="noopener" className="vb-tier-btn">Falar com especialista</a>
            </div>

            <div className="vb-tier">
              <div className="vb-tier-tag">Consultoria operacional</div>
              <h3>Diagnóstico & ajustes</h3>
              <div className="vb-tier-price">Sob consulta<small>/projeto</small></div>
              <p className="vb-tier-desc">Diagnóstico completo + plano prático de ajustes operacionais.</p>
              <ul>
                <li><VbIcon.check/> Auditoria operacional</li>
                <li><VbIcon.check/> Mapeamento de gargalos</li>
                <li><VbIcon.check/> Plano de aumento de performance</li>
                <li><VbIcon.check/> Apresentação executiva final</li>
              </ul>
              <a href={VbWa(VbWaMsgs.consultoria)} target="_blank" rel="noopener" className="vb-tier-btn">Solicitar consultoria</a>
            </div>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="vb-section" style={{ paddingTop: 0 }}>
        <div className="vb-wrap">
          <div className="vb-section-head">
            <div>
              <div className="vb-eyebrow">Perguntas frequentes</div>
              <h2 className="vb-h2">Antes de<br/><em>começar</em>.</h2>
            </div>
            <p className="vb-lede">Se restar dúvida, fale com a gente — respondemos em até 24 horas úteis.</p>
          </div>

          <div className="vb-faq">
            {[
              ['Como começa um projeto com a AS?',
                'Começamos com um diagnóstico gratuito de 30 minutos. A partir daí, montamos uma proposta personalizada com escopo, cronograma e investimento. Toda a relação começa com clareza.'],
              ['Vocês atendem empresas de quais tamanhos?',
                'Nosso foco são pequenas e médias empresas. Trabalhamos melhor com operações que já têm receita estabelecida, estrutura mínima e desejo de organizar para escalar.'],
              ['Qual a duração mínima de um contrato de projeto?',
                'O projeto personalizado tem ciclo mínimo de 6 meses, renovável. É o tempo necessário para colher resultados consistentes após a fase de estruturação.'],
              ['A mentoria é online ou presencial?',
                'Por padrão é online, com agenda flexível e super acessível.'],
              ['Como vocês medem o resultado?',
                'Definimos KPIs claros logo na primeira semana, com dashboards atualizados e rituais semanais de revisão. Você sempre sabe onde está ganhando e onde precisamos ajustar.'],
              ['Posso contratar apenas a consultoria?',
                'Sim. Muitos clientes começam pela consultoria, recebem o plano de ação e depois decidem se querem que executemos junto via projeto ou mentoria.'],
            ].map(([q, a]) => (
              <details className="vb-faq-item" key={q}>
                <summary className="vb-faq-q">
                  <span>{q}</span>
                  <span className="vb-faq-toggle"><VbIcon.plus/></span>
                </summary>
                <div className="vb-faq-a">{a}</div>
              </details>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="vb-wrap">
        <div className="vb-cta">
          <div className="vb-cta-inner">
            <div>
              <h2>Pronto para<br/>destravar o próximo<br/>ciclo?</h2>
              <p>30 minutos de diagnóstico gratuito. Mostramos as principais alavancas da sua operação antes de qualquer contrato.</p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <a href={VbWa()} target="_blank" rel="noopener" className="vb-btn vb-btn-primary">
                Agendar diagnóstico <VbIcon.arrow/>
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

window.VbServicos = VbServicos;