const Metodologia = ({ navigate }) => {
  const C = {
    coral: '#fc6466', bg: '#111111', bg2: '#1A1A1A', bg3: '#2F2F2F',
    white: '#FFFFFF', sec: '#D9D9D9', muted: '#A6A6A6',
    border: 'rgba(252,100,102,0.25)'
  };
  const sectionPad = { padding: '96px 32px' };
  const maxW = { maxWidth: 1280, margin: '0 auto' };

  // ── Reusable UI ────────────────────────────────────────────────────────────
  const Tag = ({ children }) =>
  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 16, border: `1px solid ${C.border}`, display: 'inline-block', padding: '5px 12px', borderRadius: 4 }}>{children}</div>;

  const H2 = ({ children, style = {} }) =>
  <h2 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(26px,3.5vw,40px)', color: C.white, margin: '0 0 16px', lineHeight: 1.2, ...style }}>{children}</h2>;

  const Body = ({ children, style = {} }) =>
  <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 16, color: C.sec, lineHeight: 1.8, margin: '0 0 16px', ...style }}>{children}</p>;

  const Btn = ({ primary, children, onClick }) =>
  <button onClick={onClick}
  style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, background: primary ? C.coral : 'transparent', color: primary ? '#000' : C.white, border: primary ? 'none' : `1px solid ${C.coral}`, padding: '14px 28px', borderRadius: 6, cursor: 'pointer', transition: 'transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease', display: 'inline-block' }}
  onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';if (primary) e.currentTarget.style.boxShadow = '0 8px 24px rgba(252,100,102,0.4)';else e.currentTarget.style.background = 'rgba(252,100,102,0.1)';}}
  onMouseLeave={(e) => {e.currentTarget.style.transform = '';e.currentTarget.style.boxShadow = '';if (!primary) e.currentTarget.style.background = 'transparent';}}>
    {children}</button>;


  // ── State ──────────────────────────────────────────────────────────────────
  const [activePilar, setActivePilar] = React.useState(null);
  const [activeEtapa, setActiveEtapa] = React.useState(null);

  // ── Progress bar + scroll reveal ──────────────────────────────────────────
  React.useEffect(() => {


    // Staggered scroll reveal
    const els = document.querySelectorAll('[data-metodo-reveal]');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          const delay = parseInt(entry.target.dataset.metodoReveal) || 0;
          setTimeout(() => {
            entry.target.style.opacity = '1';
            entry.target.style.transform = 'translateY(0) translateX(0)';
          }, delay);
          obs.unobserve(entry.target);
        }
      });
    }, { threshold: 0.12 });
    els.forEach((el) => obs.observe(el));

    // Counter animation
    const counters = document.querySelectorAll('[data-metodo-count]');
    const cobs = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting || entry.target._counted) return;
        entry.target._counted = true;
        const target = parseFloat(entry.target.dataset.metodoCount);
        const prefix = entry.target.dataset.prefix || '';
        const suffix = entry.target.dataset.suffix || '';
        const dec = parseInt(entry.target.dataset.dec || '0');
        const dur = 1800,t0 = Date.now();
        const tick = () => {
          const p = Math.min((Date.now() - t0) / dur, 1);
          const e = 1 - Math.pow(1 - p, 3);
          const v = target * e;
          entry.target.textContent = prefix + (dec ? v.toFixed(dec) : Math.floor(v)) + suffix;
          if (p < 1) requestAnimationFrame(tick);else
          entry.target.textContent = prefix + (dec ? target.toFixed(dec) : target) + suffix;
        };
        tick();
        cobs.unobserve(entry.target);
      });
    }, { threshold: 0.3 });
    counters.forEach((el) => cobs.observe(el));

    return () => {};
  }, []);

  const reveal = (delay = 0, axis = 'y') => ({
    opacity: 0,
    transform: axis === 'x' ? 'translateX(-16px)' : 'translateY(24px)',
    transition: 'opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1)',
    'data-metodo-reveal': String(delay)
  });

  // ── Data ───────────────────────────────────────────────────────────────────
  const pilares = [
  {
    letter: 'P', tag: 'P — PLANEJAMENTO',
    title: 'A base que sustenta tudo',
    fullTitle: 'Planejamento Comercial',
    resultado: 'Clareza estratégica.',
    pergunta: 'Para quem vender, com qual proposta de valor, por quais canais e com quais metas?',
    entregas: ['Diagnóstico da operação comercial atual', 'Análise da maturidade de marketing e vendas', 'Definição ou refinamento do ICP', 'Segmentação de mercado', 'Proposta de valor', 'Objetivos comerciais', 'Canais prioritários', 'Indicadores comerciais', 'Plano de ação comercial e de marketing'],
    objetivo: 'Sem planejamento, qualquer ação é tentativa. O primeiro pilar do P.A.C.T.O. define com precisão cirúrgica o plano estratégico a seguir. O resultado esperado é a clareza estratégica.',
    destaques: [{ bold: 'ICP & Persona:', text: ' Quem compra e por quê.' }, { bold: 'Jornada de compra:', text: ' Mapear pontos de contato críticos.' }, { bold: 'Targets e KPIs:', text: ' Métricas que orientam decisões.' }],
    texto1: 'Sem planejamento, qualquer ação é tentativa. O primeiro pilar do P.A.C.T.O. define com precisão cirúrgica quem é seu cliente ideal (ICP), qual é sua proposta de valor única e quais são as métricas que realmente importam.',
    texto2: 'Aqui, eliminamos suposições e substituímos por dados — mercado, concorrência, posicionamento e objetivos de crescimento alinhados à realidade do negócio.',
    entregaveis: [
    { title: 'Definição de ICP', desc: 'Perfil detalhado do cliente ideal com critérios quantitativos' },
    { title: 'Análise de Mercado', desc: 'Mapeamento competitivo e identificação de oportunidades' },
    { title: 'Proposta de Valor', desc: 'Diferenciação clara e mensurável vs. concorrência' },
    { title: 'OKRs de Crescimento', desc: 'Metas e indicadores alinhados à estratégia' }]

  },
  {
    letter: 'A', tag: 'A — ATRAÇÃO',
    title: 'Os clientes certos chegando até você',
    fullTitle: 'Atração e Prospecção',
    resultado: 'Geração de oportunidades qualificadas.',
    pergunta: 'Como encontrar, atrair, despertar interesse e iniciar relacionamento com o cliente certo?',
    entregas: ['Estratégia de conteúdo', 'Landing pages', 'Campanhas de atração', 'Fluxos de nutrição', 'Segmentação outbound', 'Cadências comerciais', 'Scripts de abordagem', 'Critérios de qualificação', 'Regras de passagem para vendas'],
    objetivo: 'Não se trata de gerar volume. Trata-se de atrair as empresas certas, no momento certo, com a mensagem certa. O resultado esperado é geração de oportunidades qualificadas.',
    destaques: [{ bold: 'Canais integrados:', text: ' SEO, conteúdo, LinkedIn, prospecção ativa.' }, { bold: 'Geração e qualificação:', text: ' Leads entram com contexto e intenção.' }],
    texto1: 'Não se trata de gerar volume. Trata-se de atrair as empresas certas, no momento certo, com a mensagem certa.',
    texto2: 'Combinamos estratégias inbound e outbound calibradas para o seu ICP — criando um fluxo constante e previsível de oportunidades qualificadas, sem depender de indicações ou de sorte.',
    entregaveis: [
    { title: 'Prospecção Outbound', desc: 'Cadências estruturadas para o perfil ideal' },
    { title: 'Geração Inbound', desc: 'Conteúdo e SEO que atraem decisores' },
    { title: 'Social Selling', desc: 'Presença estratégica onde seu cliente está' },
    { title: 'Qualificação Automática', desc: 'Filtros que separam oportunidades reais de ruído' }]

  },
  {
    letter: 'C', tag: 'C — CONVERSÃO',
    title: 'De interesse para contrato, mais rápido',
    fullTitle: 'Conversão e Processo Comercial',
    resultado: 'Pipeline controlável.',
    pergunta: 'Como transformar uma oportunidade qualificada em uma venda acompanhável, rastreável e previsível?',
    entregas: ['Desenho do funil comercial', 'Etapas do pipeline', 'Critérios de avanço', 'Regras de follow-up', 'Política de uso do Pipeline', 'Campos obrigatórios', 'Gestão de Planos de Ação', 'Motivos de perda', 'Governança do funil'],
    objetivo: 'O pilar de Conversão estrutura todo o processo comercial, do primeiro contato ao fechamento, com scripts, ferramentas e rituais que encurtam o ciclo de vendas sem abrir mão de ticket ou margem. O resultado esperado é o funil de vendas controlável.',
    destaques: [{ bold: 'Cadência de contato:', text: ' Sequências multi-canal.' }, { bold: 'Qualificação BANT:', text: ' Budget, Authority, Need, Timeline.' }],
    texto1: 'A maioria dos leads qualificados se perde no meio do caminho. Ciclos longos, follow-ups esquecidos, propostas sem diferenciação.',
    texto2: 'O pilar de Conversão estrutura todo o processo comercial — do primeiro contato ao fechamento — com scripts, ferramentas e rituais que encurtam o ciclo de vendas sem abrir mão de ticket ou margem.',
    entregaveis: [
    { title: 'Processo Comercial', desc: 'Funil estruturado com etapas e critérios claros' },
    { title: 'Playbook de Vendas', desc: 'Scripts, objeções e abordagens testadas' },
    { title: 'Gestão de Pipeline', desc: 'CRM configurado para visibilidade e controle' },
    { title: 'Aceleração de Fechamento', desc: 'Táticas para reduzir tempo de decisão' }]

  },
  {
    letter: 'T', tag: 'T — TECNOLOGIA',
    title: 'O sistema que não deixa oportunidades escaparem',
    fullTitle: 'Tecnologia e Automação',
    resultado: 'Automação, rastreabilidade e dados.',
    pergunta: 'Quais tecnologias precisam sustentar a máquina comercial para que ela funcione com controle, automação e dados?',
    entregas: ['Definição de ferramentas', 'Papel de cada tecnologia na jornada comercial', 'Organização dos dados', 'Integrações prioritárias', 'Automações essenciais', 'Indicadores acompanháveis'],
    objetivo: 'Crescimento sem tecnologia é trabalho braçal. Tecnologia sem estratégia é custo sem retorno. Implementamos e integramos as ferramentas certas para que seu time foque no que gera resultado. O resultado esperado é ganho de tempo e de segurança com a automação e rastreabilidade.',
    destaques: [{ bold: 'CRM e automação:', text: ' Registro, enriquecimento e fluxo.' }, { bold: 'Dados e BI:', text: ' Dashboards para decisão.' }],
    texto1: 'Crescimento sem tecnologia é trabalho braçal. Tecnologia sem estratégia é custo sem retorno.',
    texto2: 'Implementamos e integramos as ferramentas certas — CRM, automação, análise de dados — para que seu time foque no que gera resultado, enquanto os sistemas cuidam do resto.',
    entregaveis: [
    { title: 'Stack de Crescimento', desc: 'Seleção e implementação das ferramentas certas' },
    { title: 'Automação de Marketing', desc: 'Nutrição e qualificação em escala' },
    { title: 'CRM Configurado', desc: 'Visibilidade total do pipeline comercial' },
    { title: 'Dashboard de Crescimento', desc: 'Dados em tempo real para decisões rápidas' }]

  },
  {
    letter: 'O', tag: 'O — OTIMIZAÇÃO',
    title: 'Crescimento que melhora todo mês',
    fullTitle: 'Otimização e Gestão Contínua',
    resultado: 'Previsibilidade e melhoria contínua.',
    pergunta: 'O que os dados mostram e quais ajustes precisam ser feitos para melhorar o resultado?',
    entregas: ['Reuniões comerciais', 'Análise recorrente de indicadores', 'Performance por canal', 'Performance por vendedor', 'Conversão por etapa', 'Motivos de perda', 'Revisão de campanhas', 'Revisão de cadências', 'Planos de ação', 'Relatórios executivos'],
    objetivo: 'O que foi bom ontem pode não ser suficiente amanhã. O pilar de Otimização garante que o sistema evolua continuamente, com ciclos de análise, experimentação e melhoria que compõem resultados ao longo do tempo. O resultado esperado é previsibilidade e melhoria contínua.',
    destaques: [{ bold: 'Análise de funil:', text: ' Identificar gargalos e dropout.' }, { bold: 'Experimentos A/B:', text: ' Testar e validar hipóteses.' }],
    texto1: 'O que foi bom ontem pode não ser suficiente amanhã. O pilar de Otimização garante que o sistema evolua continuamente — com ciclos de análise, experimentação e melhoria que compõem resultados ao longo do tempo.',
    texto2: 'Não trabalhamos com projetos pontuais. Construímos parceiros de crescimento de longo prazo.',
    entregaveis: [
    { title: 'Ciclos de Revisão', desc: 'Análise mensal de performance e ajustes' },
    { title: 'Testes A/B', desc: 'Experimentação estruturada em copy, canais e abordagens' },
    { title: 'Relatórios Executivos', desc: 'Visibilidade clara para liderança e stakeholders' },
    { title: 'Escala Planejada', desc: 'Expansão do que funciona, eliminação do que não funciona' }]

  }];


  const depoimentos = [
  { quote: 'Com o trabalho da Barpes, conseguimos triplicar a geração de leads e organizar melhor o processo de captação de novos alunos para o Studio.', name: 'Marcelo Caetano', role: 'CEO', empresa: 'Studio Marcelo Caetano', foto: 'https://res.cloudinary.com/deh9dk8wn/image/upload/w_104,h_104,c_fill,f_auto,q_auto/v1779033213/CEO_-_Marcelo_Caetano_crpgrq.png' },
  { quote: 'Com leads mais qualificados e um processo comercial mais organizado, conseguimos reduzir em 30% nosso ciclo de vendas e ganhar mais previsibilidade na conversão.', name: 'Bruno Neri', role: 'CEO', empresa: 'Nova Belles', foto: 'https://res.cloudinary.com/deh9dk8wn/image/upload/w_104,h_104,c_fill,f_auto,q_auto/v1779231065/Bruno_Neri_yav3ct.png' },
  { quote: 'Com a Barpes, conseguimos estruturar melhor nossa divulgação digital, comunicar com mais clareza nossas soluções e aumentar a presença da Inovit nos canais certos.', name: 'Renato Carneiro', role: 'CEO', empresa: 'Inovit Soluções em TI', foto: 'https://res.cloudinary.com/deh9dk8wn/image/upload/w_104,h_104,c_fill,f_auto,q_auto/v1779230204/Renato_Carneiro_a7ylku.png' }];


  const diferenciais = [
  {
    title: 'Metodologia proprietária',
    desc: 'O P.A.C.T.O. não é uma coleção de boas práticas. É um sistema desenvolvido e refinado em projetos B2B reais no Brasil.',
    icon: <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="14" r="10" stroke="#fc6466" strokeWidth="1.5" /><circle cx="14" cy="14" r="5" stroke="#fc6466" strokeWidth="1.5" /><circle cx="14" cy="14" r="1.5" fill="#fc6466" /><line x1="14" y1="4" x2="14" y2="8" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" /></svg>
  },
  {
    title: 'Foco em resultado, não em entregável',
    desc: 'Não medimos sucesso por horas trabalhadas ou documentos entregues. Medimos por crescimento real no seu negócio.',
    icon: <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><polyline points="4,20 10,13 16,16 24,7" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /><polyline points="19,7 24,7 24,12" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
  },
  {
    title: 'Integração total',
    desc: 'Marketing, vendas e tecnologia trabalhando juntos. Sem silos, sem contradições, sem desperdício de esforço.',
    icon: <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><circle cx="7" cy="14" r="3" stroke="#fc6466" strokeWidth="1.5" /><circle cx="21" cy="7" r="3" stroke="#fc6466" strokeWidth="1.5" /><circle cx="21" cy="21" r="3" stroke="#fc6466" strokeWidth="1.5" /><line x1="10" y1="14" x2="18" y2="8.5" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" /><line x1="10" y1="14" x2="18" y2="19.5" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" /></svg>
  },
  {
    title: 'Parceria de longo prazo',
    desc: 'Não fazemos projetos pontuais. Construímos sistemas de crescimento sustentável com nossos clientes.',
    icon: <svg width="28" height="28" viewBox="0 0 28 28" fill="none"><path d="M5 15 C5 11, 8 8, 12 9 C13 6, 17 5, 19 8 C22 7, 25 10, 23 14 L14 23 L5 15Z" stroke="#fc6466" strokeWidth="1.5" strokeLinejoin="round" fill="none" /></svg>
  }];


  // SVG icons for problem cards
  const IconCaos = () =>
  <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <polyline points="4,34 10,20 15,28 20,12 26,22 31,16 38,28" stroke="#fc6466" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      <line x1="4" y1="38" x2="40" y2="38" stroke="rgba(252,100,102,0.3)" strokeWidth="1" />
    </svg>;

  const IconFunil = () =>
  <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <path d="M8 10 L20 24 L20 36 L24 36 L24 24 L36 10 Z" stroke="#fc6466" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none" />
      <line x1="18" y1="28" x2="26" y2="20" stroke="#fc6466" strokeWidth="2" strokeLinecap="round" strokeDasharray="3 3" />
    </svg>;

  const IconEscala = () =>
  <svg width="44" height="44" viewBox="0 0 44 44" fill="none">
      <rect x="6" y="28" width="8" height="10" rx="2" stroke="#fc6466" strokeWidth="1.5" fill="none" />
      <rect x="18" y="20" width="8" height="18" rx="2" stroke="#fc6466" strokeWidth="1.5" fill="none" />
      <rect x="30" y="12" width="8" height="26" rx="2" stroke="rgba(252,100,102,0.35)" strokeWidth="1.5" strokeDasharray="3 3" fill="none" />
      <line x1="30" y1="20" x2="38" y2="12" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeDasharray="2 4" />
    </svg>;


  // ── Render ────────────────────────────────────────────────────────────────
  return (
    <div style={{ background: C.bg }}>

      {/* ── Reading Progress Bar ─────────────────────────────────────────── */}
      <div id="metodo-progress" data-progress-bar="" style={{ position: 'fixed', top: 80, left: 0, height: 2, background: C.coral, zIndex: 999, width: '0%', transition: 'width 80ms linear', pointerEvents: 'none' }} />



      {/* ── Hero ─────────────────────────────────────────────────────────── */}
      <section className="page-hero" style={{ ...sectionPad, paddingTop: 100, paddingBottom: 80, background: `linear-gradient(135deg, ${C.bg} 0%, ${C.bg2} 100%)`, overflow: 'hidden' }}>
        <div style={maxW}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="hero-grid">

            {/* Left */}
            <div>
              <div data-metodo-reveal="0" style={{ ...reveal(0, 'y'), marginBottom: 8 }}>
                <Tag>Metodologia BARPES Prospecção Estratégica</Tag>
              </div>
              <h1 data-metodo-reveal="100" style={{ ...reveal(100), fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(30px,4.5vw,52px)', color: C.white, margin: '0 0 24px', lineHeight: 1.15 }}>
                Sua empresa já sabe vender.{' '}<span style={{ color: '#fc6466' }}>O desafio é gerar oportunidades qualificadas para o comercial avançar.</span>
              </h1>
              <p data-metodo-reveal="220" style={{ ...reveal(220), fontFamily: 'Arial,sans-serif', fontSize: 16, color: C.sec, lineHeight: 1.8, maxWidth: 560, marginBottom: 24 }}>
                A Metodologia P.A.C.T.O. é o modelo da BARPES Prospecção Estratégica para conectar estratégia, prospecção, processo, tecnologia e análise de desempenho em uma única arquitetura. Crescimento previsível não acontece por ação isolada. Exige compromisso entre liderança, marketing, prospecção, vendas, tecnologia e gestão.
              </p>
              <div data-metodo-reveal="350" style={{ ...reveal(350), background: 'rgba(252,100,102,0.08)', border: `1px solid ${C.border}`, borderRadius: 12, padding: '20px 24px', marginBottom: 32 }}>
                <p style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 17, color: C.coral, lineHeight: 1.6, margin: 0 }}>
                  "Não vendemos estratégia. Entregamos crescimento mensurável."
                </p>
              </div>
              <div data-metodo-reveal="480" style={{ ...reveal(480), display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Btn primary onClick={() => navigate('diagnostico')}>Solicitar Diagnóstico Gratuito</Btn>
                <Btn primary={false}>Ver nossos cases</Btn>
              </div>
            </div>

            {/* Right — Pilar Cards */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              {pilares.map((p, i) =>
              <div key={i}
              data-metodo-reveal={String(500 + i * 80)}
              style={{
                ...reveal(500 + i * 80, 'x'),
                display: 'flex', alignItems: 'center', gap: 20,
                background: activePilar === i ? 'rgba(252,100,102,0.06)' : '#0d0d0d',
                border: `1px solid ${activePilar === i ? C.coral : 'rgba(252,100,102,0.18)'}`,
                borderRadius: 16, padding: '18px 24px', cursor: 'pointer',
                transition: 'all 0.35s cubic-bezier(0.16,1,0.3,1)',
                transform: activePilar === i ? 'translateX(6px)' : 'translateX(0)',
                boxShadow: activePilar === i ? '0 8px 28px rgba(252,100,102,0.2), inset 0 0 0 1px rgba(252,100,102,0.06)' : '0 2px 12px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.03)'
              }}
              onClick={() => {
                const el = document.getElementById('pacto-crescimento');
                if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' });
              }}
              onMouseEnter={() => setActivePilar(i)}
              onMouseLeave={() => setActivePilar(null)}>
                
                  {/* Ícone estilo P.A.C.T.O. */}
                  <div style={{ flexShrink: 0, position: 'relative' }}>
                    <div style={{ position: 'absolute', inset: -5, borderRadius: 14, border: '1px dashed rgba(252,100,102,0.4)' }} />
                    <div style={{ width: 52, height: 52, background: '#111', borderRadius: 11, border: '1.5px solid rgba(252,100,102,0.65)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Montserrat,sans-serif', fontWeight: 900, fontSize: 26, color: C.coral }}>{p.letter}</div>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 15, color: C.white }}>
                      {p.fullTitle}
                    </div>
                    <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.sec, marginTop: 4 }}>
                      Resultado: {p.resultado}
                    </div>
                  </div>
                  <svg width="18" height="18" viewBox="0 0 16 16" fill="none" style={{ opacity: activePilar === i ? 1 : 0.2, transition: 'opacity 0.25s', flexShrink: 0 }}>
                    <path d="M4 8h8M9 5l3 3-3 3" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </div>
              )}
            </div>

          </div>
        </div>
      </section>

      {/* ── Por que o P.A.C.T.O. existe ────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg, borderTop: `1px solid ${C.border}` }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div data-metodo-reveal="0" style={reveal(0)}>
              <H2>O crescimento B2B não acontece por acidente</H2>
            </div>
            <div data-metodo-reveal="100" style={{ ...reveal(100), maxWidth: 720, margin: '0 auto' }}>
              <Body>A maioria das empresas B2B brasileiras enfrenta os mesmos obstáculos: geração de leads inconsistente, ciclos de vendas longos, dependência excessiva de indicações e falta de previsibilidade de receita.</Body>
              <Body>O P.A.C.T.O. foi criado para resolver exatamente isso — de forma estruturada, mensurável e adaptada à realidade do mercado brasileiro.</Body>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="grid-3">
            {[
            { Icon: IconCaos, title: 'Crescimento imprevisível', desc: 'Meses de alta seguidos de quedas bruscas. Sem processo, sem previsão.' },
            { Icon: IconFunil, title: 'Funil desconectado', desc: 'Marketing gera leads que vendas não aproveita. Energia desperdiçada.' },
            { Icon: IconEscala, title: 'Esforço sem escala', desc: 'O que funciona para 10 clientes quebra com 50. Crescimento trava.' }].
            map((card, i) =>
            <div key={i} data-metodo-reveal={String(i * 120)} style={{ ...reveal(i * 120), background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 12, padding: 28 }} className="service-card-hover">
                <div style={{ marginBottom: 20 }}><card.Icon /></div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white, marginBottom: 10 }}>{card.title}</div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.7, margin: 0 }}>{card.desc}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── Os 5 Pilares ─────────────────────────────────────────────────── */}
      <section id="pacto-crescimento" style={{ ...sectionPad, background: `linear-gradient(180deg, ${C.bg2} 0%, ${C.bg} 100%)` }}>
        <div style={maxW}>

          {/* Título grande estilo imagem */}
          <div data-metodo-reveal="0" style={{ ...reveal(0), textAlign: 'center', marginBottom: 72 }}>
            <h2 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 900, fontSize: 'clamp(30px,4.5vw,52px)', margin: '0 0 14px', lineHeight: 1.15 }}>
              <span style={{ color: C.coral }}>P.A.C.T.O.</span>
              <span style={{ color: C.white }}> DE CRESCIMENTO</span>
            </h2>
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 16, color: C.sec, margin: 0 }}>
              A metodologia para estruturar crescimento previsível e sustentável
            </p>
          </div>

          {/* Cards horizontais com linha conectora */}
          <div style={{ position: 'relative' }}>
            {/* Linha conectora coral */}
            <div style={{ position: 'absolute', top: 58, left: 'calc(10% + 8px)', right: 'calc(10% + 8px)', height: 2, background: `linear-gradient(90deg, transparent, ${C.coral}, transparent)`, zIndex: 0, opacity: 0.5, pointerEvents: 'none' }} />

            <div className="pacto-grid" style={{ position: 'relative', zIndex: 1 }}>
              {pilares.map((p, i) =>
              <div key={i}
              data-metodo-reveal={String(i * 100)}
              style={{
                ...reveal(i * 100),
                background: '#0d0d0d',
                border: '1px solid rgba(252,100,102,0.18)',
                borderRadius: 18,
                padding: '32px 18px 26px',
                cursor: 'default',
                boxShadow: '0 2px 24px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.03)',
                transition: 'border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease'
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = 'rgba(252,100,102,0.7)';
                e.currentTarget.style.transform = 'translateY(-6px)';
                e.currentTarget.style.boxShadow = '0 20px 48px rgba(252,100,102,0.2), 0 4px 12px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(252,100,102,0.08)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = 'rgba(252,100,102,0.18)';
                e.currentTarget.style.transform = '';
                e.currentTarget.style.boxShadow = '0 2px 24px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.03)';
              }}>
                
                  {/* Ícone — dark bg, letra coral, borda + anel dashed */}
                  <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
                    <div style={{ position: 'relative' }}>
                      {/* Anel dashed externo */}
                      <div style={{ position: 'absolute', inset: -6, borderRadius: 22, border: '1px dashed rgba(252,100,102,0.4)' }} />
                      {/* Quadrado interno */}
                      <div style={{
                      width: 72, height: 72,
                      background: '#111',
                      borderRadius: 14,
                      border: '1.5px solid rgba(252,100,102,0.65)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'Montserrat,sans-serif', fontWeight: 900, fontSize: 36,
                      color: C.coral,
                      boxShadow: `0 0 20px rgba(252,100,102,0.12)`
                    }}>
                        {p.letter}
                      </div>
                    </div>
                  </div>

                  {/* ETAPA 0X */}
                  <div style={{ textAlign: 'center', fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, letterSpacing: '0.22em', marginBottom: 10 }}>
                    ETAPA {String(i + 1).padStart(2, '0')}
                  </div>

                  {/* Nome do pilar */}
                  <div style={{ textAlign: 'center', fontFamily: 'Montserrat,sans-serif', fontWeight: 900, fontSize: 'clamp(12px,1.1vw,16px)', color: C.white, textTransform: 'uppercase', letterSpacing: '0.07em', marginBottom: 20, paddingBottom: 20, borderBottom: '1px solid rgba(252,100,102,0.15)' }}>
                    {p.tag.split(' \u2014 ')[1]}
                  </div>

                  {/* OBJETIVO label */}
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.22em', textTransform: 'uppercase', marginBottom: 10 }}>
                    OBJETIVO
                  </div>

                  {/* Texto objetivo */}
                  <p style={{ fontFamily: 'Montserrat,sans-serif', fontSize: 13, color: C.white, lineHeight: 1.55, margin: '0 0 14px', fontWeight: "400" }}>
                    {p.objetivo}
                  </p>


                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ── As Cinco Etapas ──────────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg2 }}>
        <div style={maxW}>

          <div style={{ textAlign: 'center', marginBottom: 56 }} data-metodo-reveal="0">
            <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.15em', textTransform: 'uppercase', marginBottom: 16, border: `1px solid ${C.border}`, display: 'inline-block', padding: '5px 12px', borderRadius: 4 }}>AS CINCO ETAPAS</div>
            <H2>Cada etapa com propósito, entregas e resultado esperado</H2>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {pilares.map((p, i) => {
              const isOpen = activeEtapa === i;
              return (
                <div key={i}
                data-metodo-reveal={String(i * 80)}
                style={{
                  ...reveal(i * 80),
                  background: '#161616',
                  border: `1px solid ${isOpen ? 'rgba(252,100,102,0.45)' : 'rgba(255,255,255,0.08)'}`,
                  borderRadius: 12,
                  overflow: 'hidden',
                  transition: 'border-color 0.3s ease, box-shadow 0.3s ease',
                  boxShadow: isOpen ? '0 0 0 1px rgba(252,100,102,0.1), 0 8px 32px rgba(0,0,0,0.4)' : 'none'
                }}>
                  
                  {/* Header row */}
                  <div
                    onClick={() => setActiveEtapa(isOpen ? null : i)}
                    style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '22px 28px', cursor: 'pointer', userSelect: 'none' }}
                    onMouseEnter={(e) => {if (!isOpen) e.currentTarget.parentElement.style.borderColor = 'rgba(252,100,102,0.28)';}}
                    onMouseLeave={(e) => {if (!isOpen) e.currentTarget.parentElement.style.borderColor = 'rgba(255,255,255,0.08)';}}>
                    
                    {/* Letter icon */}
                    <div style={{
                      width: 48, height: 48, borderRadius: 10,
                      background: 'rgba(252,100,102,0.15)',
                      border: '1px solid rgba(252,100,102,0.35)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'Montserrat,sans-serif', fontWeight: 900, fontSize: 22, color: C.coral, flexShrink: 0
                    }}>{p.letter}</div>

                    {/* Title + subtitle */}
                    <div style={{ flex: 1 }}>
                      <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white, marginBottom: 4 }}>{p.fullTitle}</div>
                      <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.muted, lineHeight: 1.5 }}>{p.pergunta}</div>
                    </div>

                    {/* Toggle button */}
                    <div style={{
                      color: C.coral, fontSize: 22, lineHeight: 1,
                      width: 28, height: 28, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
                      fontFamily: 'Montserrat,sans-serif', fontWeight: 300,
                      transition: 'transform 0.35s cubic-bezier(0.16,1,0.3,1)',
                      transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)'
                    }}>+</div>
                  </div>

                  {/* Expanded content */}
                  {isOpen &&
                  <div style={{ borderTop: '1px solid rgba(252,100,102,0.15)', padding: '28px 28px 36px', background: 'rgba(252,100,102,0.025)' }}>
                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }} className="hero-grid">

                        {/* Left: Entregas */}
                        <div>
                          <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, letterSpacing: '0.22em', textTransform: 'uppercase', marginBottom: 18 }}>Entregas</div>
                          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                            {p.entregas.map((item, ei) =>
                          <div key={ei} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                                <div style={{ width: 6, height: 6, background: C.coral, borderRadius: '50%', marginTop: 7, flexShrink: 0 }} />
                                <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.6 }}>{item}</span>
                              </div>
                          )}
                          </div>
                        </div>

                        {/* Right: Pergunta central + Resultado */}
                        <div>
                          <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, letterSpacing: '0.22em', textTransform: 'uppercase', marginBottom: 18 }}>Pergunta Central</div>
                          <p style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white, lineHeight: 1.65, margin: '0 0 28px' }}>{p.pergunta}</p>
                          <div style={{ background: 'rgba(252,100,102,0.06)', border: '1px solid rgba(252,100,102,0.2)', borderRadius: 10, padding: '16px 20px' }}>
                            <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.muted, marginBottom: 8 }}>Resultado esperado</div>
                            <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.coral }}>{p.resultado}</div>
                          </div>
                        </div>

                      </div>
                    </div>
                  }
                </div>);

            })}
          </div>

        </div>
      </section>

      {/* ── Resultados ───────────────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg, borderTop: `1px solid ${C.border}` }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', marginBottom: 56 }} data-metodo-reveal="0">
            <H2>O que nossos clientes alcançam</H2>
            <Body style={{ maxWidth: 620, margin: '0 auto' }}>Resultados reais de empresas B2B brasileiras que implementaram o P.A.C.T.O.</Body>
          </div>

          {/* Métricas */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24, marginBottom: 64 }} className="grid-3">
            {[
            { prefix: '+', count: 127, suffix: '%', label: 'Aumento médio em leads qualificados' },
            { prefix: '-', count: 30, suffix: '%', label: 'Redução no ciclo médio de vendas' },
            { prefix: '3-8', count: null, suffix: 'x', label: 'ROI médio gerado' }].
            map((m, i) =>
            <div key={i} data-metodo-reveal={String(i * 120)} style={{ ...reveal(i * 120), textAlign: 'center', background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 14, padding: '36px 24px' }}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(36px,5vw,52px)', color: C.coral, lineHeight: 1, marginBottom: 14 }}>
                  {m.count !== null ?
                <><span data-metodo-count={String(m.count)} data-prefix={m.prefix} data-suffix={m.suffix}>{m.prefix}0{m.suffix}</span></> :
                <span>{m.prefix}{m.suffix}</span>
                }
                </div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.6, margin: 0 }}>{m.label}</p>
              </div>
            )}
          </div>

          {/* Depoimentos */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }} className="grid-3">
            {depoimentos.map((d, i) =>
            <div key={i} data-metodo-reveal={String(i * 150)} style={{ ...reveal(i * 150), position: 'relative', background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 16, padding: '36px 28px 28px', display: 'flex', flexDirection: 'column', transition: 'border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease' }}
            onMouseEnter={(e) => { e.currentTarget.style.borderColor = 'rgba(252,100,102,0.4)'; e.currentTarget.style.boxShadow = '0 12px 40px rgba(0,0,0,0.5)'; e.currentTarget.style.transform = 'translateY(-4px)'; }}
            onMouseLeave={(e) => { e.currentTarget.style.borderColor = C.border; e.currentTarget.style.boxShadow = ''; e.currentTarget.style.transform = ''; }}>

              {/* Aspas decorativas */}
              <div style={{ position: 'absolute', top: 20, right: 24, fontFamily: 'Georgia, serif', fontSize: 72, lineHeight: 1, color: 'rgba(252,100,102,0.12)', userSelect: 'none', pointerEvents: 'none' }}>"</div>

              {/* Estrelas */}
              <div style={{ display: 'flex', gap: 3, marginBottom: 20 }}>
                {[...Array(5)].map((_, s) =>
                  <svg key={s} width="13" height="13" viewBox="0 0 14 14" fill="#fc6466"><path d="M7 1l1.5 3.5L12 5l-2.5 2.5.6 3.5L7 9.5 3.9 11l.6-3.5L2 5l3.5-.5z" /></svg>
                )}
              </div>

              {/* Citação */}
              <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14.5, color: C.sec, lineHeight: 1.8, margin: '0 0 28px', flexGrow: 1 }}>"{d.quote}"</p>

              {/* Autor */}
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, borderTop: `1px solid ${C.border}`, paddingTop: 20 }}>
                {/* Foto */}
                <div style={{ position: 'relative', flexShrink: 0 }}>
                  <div style={{ width: 52, height: 52, borderRadius: '50%', overflow: 'hidden', border: '2px solid rgba(252,100,102,0.4)', boxShadow: '0 0 0 3px rgba(252,100,102,0.1)' }}>
                    <img
                      src={d.foto}
                      alt={d.name}
                      loading="lazy"
                      decoding="async"
                      style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', display: 'block' }}
                    />
                  </div>
                </div>
                {/* Nome e cargo */}
                <div>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 13, color: C.white, marginBottom: 2 }}>{d.name}</div>
                  <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.coral }}>{d.role} · {d.empresa}</div>
                </div>
              </div>
            </div>
            )}
          </div>
        </div>
      </section>

      {/* ── Para quem é ──────────────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg3 }}>
        <div style={{ ...maxW }}>
          <div style={{ maxWidth: 960, margin: '0 auto' }}>
            <div data-metodo-reveal="0" style={reveal(0)}>
              <H2 style={{ textAlign: 'center', marginBottom: 40 }}>O P.A.C.T.O. foi desenhado para você se...</H2>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 40 }}>
              {[
              'Sua empresa B2B fatura entre R$1M e R$30M ao ano',
              'Você depende excessivamente de indicações para crescer',
              'Seu processo comercial existe mas não é consistente',
              'Você já tentou estratégias isoladas sem resultado sustentável',
              'Você quer crescimento previsível, não picos seguidos de quedas',
              'Sua equipe de vendas tem potencial mas falta metodologia'].
              map((item, i) =>
              <div key={i} data-metodo-reveal={String(i * 80)} style={{ ...reveal(i * 80, 'x'), display: 'flex', alignItems: 'center', gap: 14 }}>
                  <div style={{ width: 24, height: 24, background: C.coral, borderRadius: 6, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <svg width="12" height="10" viewBox="0 0 12 10" fill="none"><path d="M1 5L4.5 8.5L11 1" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </div>
                  <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 15, color: C.white, lineHeight: 1.5 }}>{item}</span>
                </div>
              )}
            </div>
            <div data-metodo-reveal="600" style={{ ...reveal(600), background: 'rgba(252,100,102,0.07)', border: `1px solid ${C.border}`, borderRadius: 12, padding: '20px 24px' }}>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, marginBottom: 8, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Atenção</div>
              <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.7, margin: 0 }}>
                Este programa <strong style={{ color: C.white }}>NÃO</strong> é para empresas que buscam resultados da noite para o dia ou que não estão dispostas a implementar mudanças no processo comercial.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ── Diferenciais ─────────────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: `linear-gradient(180deg, ${C.bg} 0%, ${C.bg2} 100%)` }}>
        <div style={maxW}>
          <div data-metodo-reveal="0" style={{ ...reveal(0), textAlign: 'center', marginBottom: 56 }}>
            <H2>Por que a BARPES Prospecção Estratégica, não outra consultoria?</H2>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 24 }} className="grid-4">
            {diferenciais.map((d, i) =>
            <div key={i} data-metodo-reveal={String(i * 100)} style={{ ...reveal(i * 100), background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 12, padding: 28, transition: 'all 0.3s cubic-bezier(0.16,1,0.3,1)' }}
            onMouseEnter={(e) => {e.currentTarget.style.background = 'rgba(252,100,102,0.06)';e.currentTarget.style.borderColor = 'rgba(252,100,102,0.5)';e.currentTarget.style.transform = 'translateY(-4px)';e.currentTarget.style.boxShadow = '0 12px 32px rgba(0,0,0,0.35)';}}
            onMouseLeave={(e) => {e.currentTarget.style.background = C.bg3;e.currentTarget.style.borderColor = C.border;e.currentTarget.style.transform = '';e.currentTarget.style.boxShadow = '';}}>
              
                <div style={{ marginBottom: 16 }}>{d.icon}</div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white, marginBottom: 10 }}>{d.title}</div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.7, margin: 0 }}>{d.desc}</p>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── CTA Final ────────────────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.coral, textAlign: 'center' }}>
        <div style={{ ...maxW, maxWidth: 800 }}>
          <div data-metodo-reveal="0" style={reveal(0)}>
            <h2 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(30px,5vw,48px)', color: 'white', margin: '0 0 20px', lineHeight: 1.2 }}>
              Pronto para crescer de forma previsível?
            </h2>
          </div>
          <div data-metodo-reveal="150" style={reveal(150)}>
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 17, lineHeight: 1.7, maxWidth: 640, margin: '0 auto 36px', color: "rgb(255, 255, 255)" }}>
              Agende seu Diagnóstico Gratuito e descubra como o P.A.C.T.O. pode ser aplicado ao seu negócio em menos de 30 dias.
            </p>
          </div>
          <div data-metodo-reveal="300" style={reveal(300)}>
            <button onClick={() => navigate('diagnostico')}
            style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 16, background: 'white', color: C.coral, border: 'none', padding: '18px 40px', borderRadius: 6, cursor: 'pointer', transition: 'transform 0.25s ease, box-shadow 0.25s ease', display: 'inline-block' }}
            onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-2px)';e.currentTarget.style.boxShadow = '0 10px 30px rgba(0,0,0,0.2)';}}
            onMouseLeave={(e) => {e.currentTarget.style.transform = '';e.currentTarget.style.boxShadow = '';}}>
              
              Solicitar diagnóstico gratuito →
            </button>
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, marginTop: 16, color: "rgb(255, 255, 255)" }}>Sem compromisso. Sem burocracia. 100% focado no seu crescimento.</p>
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, marginTop: 6, color: "rgb(255, 255, 255)" }}>Respondemos em até 24 horas úteis.</p>
          </div>
        </div>
      </section>

    </div>);

};

Object.assign(window, { Metodologia });