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

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

  const Eyebrow = ({ children }) =>
    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 14 }}>{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, letterSpacing: '-0.01em', ...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>;

  const CheckIcon = ({ color }) => (
    <svg width="10" height="8" viewBox="0 0 10 8" fill="none">
      <path d="M1 4L3.5 6.5L9 1" stroke={color || '#fc6466'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );

  // ── Scroll-reveal ──────────────────────────────────────────────────────────
  React.useEffect(() => {


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

  // ── Eixo selecionado ───────────────────────────────────────────────────────
  const [openEixo, setOpenEixo] = React.useState(0);

  React.useEffect(() => {
    const el = document.getElementById('mon-eixo-detail');
    if (!el) return;
    el.style.transition = 'none';
    el.style.opacity = '0';
    el.style.transform = 'translateY(12px)';
    const t = setTimeout(() => {
      el.style.transition = 'opacity 0.45s cubic-bezier(0.16,1,0.3,1), transform 0.45s cubic-bezier(0.16,1,0.3,1)';
      el.style.opacity = '1';
      el.style.transform = 'translateY(0)';
    }, 60);
    return () => clearTimeout(t);
  }, [openEixo]);

  const rv = (delay = 0) => ({
    opacity: 0,
    transform: '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)',
  });

  // ── Dados ──────────────────────────────────────────────────────────────────
  const dores = [
    { t: 'Muitos dados, pouca leitura', d: 'Informações espalhadas em ferramentas diferentes, sem uma visão consolidada para a liderança decidir.' },
    { t: 'Ausência de KPIs definidos', d: 'Sem indicadores claros, o acompanhamento vira percepção — não medição objetiva da performance.' },
    { t: 'Decisões baseadas em feeling', d: 'A liderança atua sem dados suficientes porque falta uma camada de controle estruturada sobre a jornada.' },
    { t: 'Gargalos invisíveis', d: 'Perdas entre atrair, converter e relacionar acontecem sem que a gestão identifique onde e por quê.' },
    { t: 'CRM alimentado, pouco analisado', d: 'As ferramentas têm dados, mas não há rotina de leitura crítica e interpretação gerencial consistente.' },
    { t: 'Acompanhamento irregular', d: 'Reuniões comerciais sem análise objetiva, sem comparação de períodos e sem priorização de ações.' },
  ];

  const eixos = [
    {
      num: '01', title: 'Atrair',
      subtitle: 'Topo do Funil — controle o alcance e a qualidade do público captado',
      icon: (
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
          <circle cx="13" cy="13" r="8" stroke="#fc6466" strokeWidth="1.5" />
          <path d="M13 5v2M13 19v2M5 13h2M19 13h2" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" />
          <circle cx="13" cy="13" r="3.5" stroke="#fc6466" strokeWidth="1.5" />
        </svg>
      ),
      desc: 'O controle do topo do funil mostra se o conteúdo educativo e os anúncios estão alcançando o público certo nas redes sociais certas. Monitora quais canais (Instagram, TikTok, Meta Ads) geram mais alcance qualificado e onde há desperdício de investimento.',
      perguntas: [
        'O conteúdo publicado está alcançando o público-alvo definido?',
        'Quais canais (orgânico x pago) geram mais alcance qualificado?',
        'Os anúncios estão segmentados para o perfil ideal de cliente?',
        'Há volume de alcance sem engajamento — muito clique, pouco avanço?',
        'Onde o investimento em mídia está gerando mais retorno?',
      ],
      kpis: [
        { label: 'Alcance mensal', val: '18,4k', trend: '+22%', up: true },
        { label: 'Engajamento', val: '4,7%', trend: '+0,8 pp', up: true },
        { label: 'Leads captados', val: '342', trend: '+12%', up: true },
        { label: 'Custo por lead', val: 'R$ 84', trend: '-8%', up: true },
      ],
    },
    {
      num: '02', title: 'Converter',
      subtitle: 'Meio do Funil — controle a transformação de visitantes em leads',
      icon: (
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
          <path d="M4 19l5-7 4 4 4-5 5 3" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          <circle cx="21" cy="7" r="3" stroke="#fc6466" strokeWidth="1.5" />
        </svg>
      ),
      desc: 'O controle do meio do funil mostra se os materiais ricos (e-books, webinars, cupons) e as páginas de captura estão convertendo visitantes em leads qualificados. Monitora a eficiência de cada ponto de conversão e o custo por lead gerado.',
      perguntas: [
        'As landing pages estão convertendo visitantes em leads?',
        'Quais materiais ricos geram mais cadastros qualificados?',
        'A taxa de conversão das páginas de captura está adequada?',
        'O follow-up inicial está sendo executado no tempo certo?',
        'Quais critérios definem um lead pronto para o próximo passo?',
      ],
      kpis: [
        { label: 'Visitantes únicos', val: '4,2k', trend: '+18%', up: true },
        { label: 'Taxa de conversão', val: '8,1%', trend: '+1,4 pp', up: true },
        { label: 'Leads qualificados', val: '89', trend: '+11 un.', up: true },
        { label: 'Custo por lead qual.', val: 'R$ 320', trend: '-9%', up: true },
      ],
    },
    {
      num: '03', title: 'Relacionar',
      subtitle: 'Construção de Confiança — controle a nutrição e o engajamento pré-venda',
      icon: (
        <svg width="26" height="26" viewBox="0 0 26 26" fill="none">
          <path d="M4 5h18l-6.5 8.5v7l-5-2.5V13.5L4 5z" stroke="#fc6466" strokeWidth="1.5" strokeLinejoin="round" />
        </svg>
      ),
      desc: 'O controle do relacionamento pré-venda mostra se os fluxos de nutrição via e-mail marketing e WhatsApp Business estão educando os leads, respondendo dúvidas e construindo autoridade — sem pressão de venda — até que estejam prontos para o comercial.',
      perguntas: [
        'Os e-mails de nutrição estão sendo abertos e lidos?',
        'O engajamento no WhatsApp Business está evoluindo?',
        'Os leads estão consumindo os conteúdos educativos enviados?',
        'Quantos leads avançaram para o comercial após a nutrição?',
        'Em que ponto do fluxo os leads param de responder?',
      ],
      kpis: [
        { label: 'Taxa de abertura', val: '34%', trend: '+4 pp', up: true },
        { label: 'Engajamento WA', val: '61%', trend: '+8 pp', up: true },
        { label: 'Leads p/ comercial', val: '41', trend: '+9 un.', up: true },
        { label: 'Tempo médio nutrição', val: '18 dias', trend: '-3 dias', up: true },
      ],
    },
  ];

  const funnelSteps = [
    { label: 'Leads captados', val: 342, pct: 100 },
    { label: 'Leads qualificados', val: 89, pct: 26 },
    { label: 'Reuniões realizadas', val: 41, pct: 12 },
    { label: 'Oportunidades criadas', val: 38, pct: 11 },
    { label: 'Propostas enviadas', val: 24, pct: 7 },
    { label: 'Fechamentos', val: 7, pct: 2 },
  ];

  const gargalos = [
    '74% dos leads captados não têm perfil adequado — gargalo de qualidade na atração',
    '54% dos qualificados não chegam a uma reunião — gargalo de avanço na prospecção',
    '37% das oportunidades criadas não viram proposta — gargalo de evolução na conversão',
    '71% das propostas enviadas não fecham — gargalo de fechamento e negociação',
  ];

  const blocos = [
    { num: '01', title: 'KPIs', desc: 'Definição dos indicadores que realmente mostram a evolução da jornada — sem excesso, sem ausência de informação crítica.' },
    { num: '02', title: 'Painéis gerenciais', desc: 'Organização da leitura visual dos resultados para que a liderança consuma dados com clareza e agilidade nas decisões.' },
    { num: '03', title: 'Rotina de acompanhamento', desc: 'Cadência estruturada para análise, controle e priorização — semanal, mensal ou por ciclo comercial definido.' },
    { num: '04', title: 'Análise crítica', desc: 'Interpretação dos dados para identificar causas, padrões e gargalos que os números isolados não revelam à liderança.' },
    { num: '05', title: 'Recomendações de melhoria', desc: 'Direcionamento das decisões com base nos pontos de maior impacto sobre a performance da jornada comercial.' },
  ];

  const barpesFaz = [
    'Diagnosticar gargalos de performance da jornada',
    'Definir KPIs relevantes para cada etapa',
    'Estruturar painéis e leituras gerenciais',
    'Orientar a rotina de acompanhamento',
    'Apoiar a análise crítica dos resultados',
    'Identificar desvios e perdas entre etapas',
    'Acompanhar a evolução dos indicadores',
    'Recomendar ajustes e prioridades de ação',
  ];

  const clienteFaz = [
    'Executar as ações recorrentes da operação',
    'Alimentar corretamente as ferramentas e CRM',
    'Manter a rotina operacional com disciplina',
    'Aplicar os ajustes recomendados pela assessoria',
    'Garantir a qualidade no registro dos dados',
    'Conduzir a execução com base nas prioridades definidas',
  ];

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

      {/* Barra de progresso */}
      <div id="mon-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: 140, paddingBottom: 80, background: `linear-gradient(135deg, ${C.bg} 0%, ${C.bg2} 100%)`, overflow: 'hidden', position: 'relative' }}>
        <div style={{ position: 'absolute', top: -100, right: -80, width: 500, height: 500, background: 'radial-gradient(circle, rgba(252,100,102,0.08), transparent 70%)', pointerEvents: 'none' }} />
        <div style={{ ...maxW, position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center' }} className="hero-grid">

            {/* Esquerda */}
            <div>
              <div data-mon-reveal="0" style={rv(0)}><Tag>Monitoramento &amp; Controle B2B</Tag></div>
              <h1 data-mon-reveal="100" style={{ ...rv(100), fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(30px,4.5vw,52px)', color: C.white, margin: '0 0 24px', lineHeight: 1.12, letterSpacing: '-0.015em' }}>
                Sua operação B2B tem dados.{' '}
                <span style={{ color: C.coral }}>Controle gerencial</span>{' '}
                é o que falta.
              </h1>
              <p data-mon-reveal="220" style={{ ...rv(220), fontFamily: 'Arial,sans-serif', fontSize: 17, color: C.sec, lineHeight: 1.75, maxWidth: 580, marginBottom: 20 }}>
                A Barpes assessora sua empresa na definição de KPIs, estruturação de painéis gerenciais e rotinas de acompanhamento para monitorar Atrair, Converter e Relacionar com clareza, controle e previsibilidade.
              </p>
              <div data-mon-reveal="340" style={{ ...rv(340), background: 'rgba(252,100,102,0.07)', border: `1px solid ${C.border}`, borderRadius: 12, padding: '20px 24px', marginBottom: 32 }}>
                <p style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 15, color: C.white, lineHeight: 1.6, margin: 0 }}>
                  A execução acontece com a equipe do cliente. A Barpes apoia com{' '}
                  <span style={{ color: C.coral }}>método, controle e leitura gerencial.</span>
                </p>
              </div>
              <div data-mon-reveal="460" style={{ ...rv(460), display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Btn primary onClick={() => navigate('diagnostico')}>Diagnosticar meu controle comercial</Btn>
                <Btn primary={false} onClick={() => { const el = document.getElementById('mon-eixos'); if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' }); }}>Entender a abordagem</Btn>
              </div>
            </div>

            {/* Direita: painel KPI simulado */}
            <div data-mon-reveal="300" style={{ ...rv(300) }} className="hero-visual">
              <div style={{ background: '#0d0d0d', border: '1px solid rgba(252,100,102,0.22)', borderRadius: 16, overflow: 'hidden', boxShadow: '0 12px 48px rgba(0,0,0,0.55)' }}>

                {/* Cabeçalho do painel */}
                <div style={{ background: '#0a0a0a', borderBottom: '1px solid rgba(255,255,255,0.06)', padding: '14px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.white }}>Painel Comercial — Visão Gerencial</div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <div style={{ width: 7, height: 7, borderRadius: '50%', background: '#4ade80' }} className="badge-pulse" />
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: '#4ade80' }}>Monitorando</span>
                  </div>
                </div>

                {/* 3 colunas de KPIs */}
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
                  {[
                    { label: 'Atrair', kpi: '342', sub: 'leads / mês', delta: '+12%', up: true },
                    { label: 'Converter', kpi: '8,1%', sub: 'tx. conversão', delta: '+1,4 pp', up: true },
                    { label: 'Relacionar', kpi: '34%', sub: 'abertura e-mail', delta: '+4 pp', up: true },
                  ].map((col, i) => (
                    <div key={i} style={{ padding: '16px', borderRight: i < 2 ? '1px solid rgba(255,255,255,0.05)' : 'none' }}>
                      <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.muted, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 8 }}>{col.label}</div>
                      <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 26, color: C.white, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>{col.kpi}</div>
                      <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.muted, marginTop: 4 }}>{col.sub}</div>
                      <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: col.up ? '#4ade80' : '#f87171', marginTop: 6 }}>{col.delta}</div>
                    </div>
                  ))}
                </div>

                {/* Funil de conversão mini */}
                <div style={{ padding: '16px 20px', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 12, color: C.muted, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>Funil de conversão</div>
                  {[
                    { label: 'Leads captados', pct: 100, val: '342' },
                    { label: 'Qualificados', pct: 26, val: '89' },
                    { label: 'Reuniões', pct: 12, val: '41' },
                    { label: 'Oportunidades', pct: 11, val: '38' },
                    { label: 'Fechamentos', pct: 2, val: '7' },
                  ].map((row, i) => (
                    <div key={i} style={{ marginBottom: 7 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 3 }}>
                        <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.muted }}>{row.label}</span>
                        <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.white, fontVariantNumeric: 'tabular-nums' }}>{row.val}</span>
                      </div>
                      <div style={{ height: 5, background: 'rgba(255,255,255,0.06)', borderRadius: 3, overflow: 'hidden' }}>
                        <div style={{ height: '100%', width: row.pct + '%', background: i === 4 ? C.coral : `rgba(252,100,102,${0.2 + (4 - i) * 0.12})`, borderRadius: 3 }} />
                      </div>
                    </div>
                  ))}
                </div>

                {/* Alertas de desvio */}
                <div style={{ padding: '12px 20px', display: 'flex', gap: 8, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: '#f87171', background: 'rgba(248,113,113,0.08)', padding: '3px 8px', borderRadius: 4, border: '1px solid rgba(248,113,113,0.2)' }}>
                    Taxa de fechamento abaixo da meta
                  </span>
                  <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: '#4ade80', background: 'rgba(74,222,128,0.08)', padding: '3px 8px', borderRadius: 4, border: '1px solid rgba(74,222,128,0.2)' }}>
                    Volume de leads acima do esperado
                  </span>
                </div>
              </div>
            </div>

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

      {/* ── PROBLEMA ──────────────────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg, borderTop: `1px solid ${C.borderSoft}` }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-mon-reveal="0" style={rv(0)}><Eyebrow>O problema</Eyebrow></div>
            <div data-mon-reveal="80" style={rv(80)}>
              <H2>O crescimento trava quando a liderança não enxerga os gargalos</H2>
            </div>
            <div data-mon-reveal="180" style={rv(180)}>
              <Body style={{ marginBottom: 0 }}>Muitas empresas B2B já executam ações de marketing, prospecção e vendas. O problema é que poucas conseguem monitorar com clareza onde a jornada está performando, onde está perdendo eficiência e quais decisões devem ser priorizadas.</Body>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="grid-3">
            {dores.map((card, i) => (
              <div key={i} data-mon-reveal={String(i * 80)} style={{ ...rv(i * 80), background: C.bg2, border: `1px solid ${C.borderSoft}`, borderRadius: 12, padding: 28, transition: 'border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(252,100,102,0.45)'; e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(252,100,102,0.12)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = C.borderSoft; e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
                <div style={{ width: 8, height: 8, background: C.coral, borderRadius: 2, marginBottom: 16 }} />
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 15, color: C.white, marginBottom: 10 }}>{card.t}</div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.7, margin: 0 }}>{card.d}</p>
              </div>
            ))}
          </div>

          <div data-mon-reveal="520" style={{ ...rv(520), maxWidth: 680, margin: '40px auto 0', background: 'rgba(252,100,102,0.06)', border: `1px solid ${C.border}`, borderRadius: 12, padding: '22px 28px', textAlign: 'center' }}>
            <p style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 16, color: C.white, lineHeight: 1.6, margin: 0 }}>
              Sem controle, a empresa depende de esforço.{' '}
              <span style={{ color: C.coral }}>Com monitoramento, passa a decidir com método.</span>
            </p>
          </div>
        </div>
      </section>

      {/* ── ANTES / DEPOIS ────────────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg2 }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-mon-reveal="0" style={rv(0)}><Eyebrow>Virada gerencial</Eyebrow></div>
            <div data-mon-reveal="80" style={rv(80)}>
              <H2>Mais execução não corrige uma operação sem controle gerencial</H2>
            </div>
            <div data-mon-reveal="180" style={rv(180)}>
              <Body style={{ marginBottom: 0 }}>Antes de aumentar investimento, intensificar prospecção ou cobrar mais vendas, a liderança precisa entender o que está funcionando, onde há perda de eficiência e quais indicadores devem orientar as próximas decisões.</Body>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }} className="grid-4">
            {/* Antes */}
            <div data-mon-reveal="200" style={{ ...rv(200), background: '#0d0d0d', border: '1px solid rgba(255,255,255,0.09)', borderRadius: 16, padding: '32px 32px 28px', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'rgba(255,255,255,0.10)' }} />
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.muted, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 14 }}>Antes</div>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 20, color: C.white, marginBottom: 24, lineHeight: 1.25 }}>Dados dispersos, baixa leitura gerencial</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {['Dados espalhados em ferramentas diferentes', 'Indicadores pouco confiáveis ou ausentes', 'Decisões orientadas por percepção', 'Gargalos invisíveis para a liderança', 'Acompanhamento irregular da jornada', 'Baixa previsibilidade de resultados', 'Esforço sem clareza objetiva de retorno'].map((item, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <div style={{ width: 18, height: 18, borderRadius: 4, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.10)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                      <div style={{ width: 8, height: 1.5, background: 'rgba(255,255,255,0.25)', borderRadius: 1 }} />
                    </div>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.muted, lineHeight: 1.6 }}>{item}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Depois */}
            <div data-mon-reveal="320" style={{ ...rv(320), background: '#0d0d0d', border: '1px solid rgba(252,100,102,0.28)', borderRadius: 16, padding: '32px 32px 28px', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: C.coral }} />
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 14 }}>Com monitoramento e controle</div>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 20, color: C.white, marginBottom: 24, lineHeight: 1.25 }}>KPIs definidos, leitura clara da jornada</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {['KPIs definidos para cada etapa da jornada', 'Painel gerencial estruturado para a liderança', 'Gargalos visíveis e priorizados com critério', 'Leitura objetiva da jornada comercial', 'Rotina de acompanhamento estruturada', 'Decisões orientadas por dados e análise', 'Prioridades definidas com mais objetividade'].map((item, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <div style={{ width: 18, height: 18, borderRadius: 4, background: 'rgba(252,100,102,0.10)', border: '1px solid rgba(252,100,102,0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                      <CheckIcon />
                    </div>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.6 }}>{item}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── MAPA DE GARGALOS ──────────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={{ ...maxW, maxWidth: 960 }}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <div data-mon-reveal="0" style={rv(0)}><Eyebrow>Mapa de gargalos</Eyebrow></div>
            <div data-mon-reveal="80" style={rv(80)}>
              <H2>Onde a jornada perde eficiência?</H2>
            </div>
            <div data-mon-reveal="180" style={rv(180)}>
              <Body style={{ marginBottom: 0 }}>A Barpes organiza uma visão de funil que mostra onde há perda entre etapas — para que a liderança saiba exatamente onde agir, não apenas que há um problema.</Body>
            </div>
          </div>

          <div data-mon-reveal="240" style={{ ...rv(240), display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, alignItems: 'start' }} className="hero-grid">

            {/* Funil visual */}
            <div style={{ background: '#0d0d0d', border: '1px solid rgba(252,100,102,0.18)', borderRadius: 16, padding: '36px 36px 32px' }}>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 24 }}>Funil de conversão — visão gerencial</div>
              {funnelSteps.map((step, i) => (
                <div key={i} style={{ marginBottom: i < funnelSteps.length - 1 ? 4 : 0 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 4 }}>
                    <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, minWidth: 132, textAlign: 'right' }}>{step.label}</div>
                    <div style={{ flex: 1, height: 26, background: 'rgba(255,255,255,0.04)', borderRadius: 4, overflow: 'hidden' }}>
                      <div style={{ height: '100%', width: step.pct + '%', background: i === 5 ? C.coral : `rgba(252,100,102,${0.18 + (5 - i) * 0.12})`, borderRadius: 4, display: 'flex', alignItems: 'center', paddingLeft: 8, minWidth: 30 }}>
                        <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.white, fontVariantNumeric: 'tabular-nums', whiteSpace: 'nowrap' }}>{step.val}</span>
                      </div>
                    </div>
                    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: i === 5 ? C.coral : C.muted, minWidth: 32, textAlign: 'right', fontVariantNumeric: 'tabular-nums' }}>{step.pct}%</div>
                  </div>
                  {i < funnelSteps.length - 1 && (
                    <div style={{ display: 'flex', alignItems: 'center', paddingLeft: 144, marginBottom: 4, gap: 6 }}>
                      <div style={{ width: 1.5, height: 14, background: 'rgba(252,100,102,0.22)', marginLeft: 12, flexShrink: 0 }} />
                    </div>
                  )}
                </div>
              ))}
            </div>

            {/* Gargalos identificados */}
            <div>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.muted, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 20 }}>Perdas identificadas por etapa</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {gargalos.map((g, i) => (
                  <div key={i} style={{ background: C.bg2, border: '1px solid rgba(248,113,113,0.15)', borderLeft: '3px solid rgba(248,113,113,0.55)', borderRadius: 10, padding: '16px 18px', transition: 'border-color 0.25s ease' }}
                    onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(248,113,113,0.45)'; e.currentTarget.style.borderLeftColor = '#f87171'; }}
                    onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(248,113,113,0.15)'; e.currentTarget.style.borderLeftColor = 'rgba(248,113,113,0.55)'; }}>
                    <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.65, margin: 0 }}>{g}</p>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 24, padding: '18px 20px', background: 'rgba(252,100,102,0.06)', border: `1px solid ${C.border}`, borderRadius: 10 }}>
                <p style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 14, color: C.white, lineHeight: 1.6, margin: 0 }}>
                  A Barpes organiza os indicadores para que a liderança <span style={{ color: C.coral }}>enxergue onde agir.</span>
                </p>
              </div>
            </div>

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

      {/* ── 3 EIXOS ───────────────────────────────────────────────────────── */}
      <section id="mon-eixos" style={{ ...sectionPad, background: C.bg2 }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-mon-reveal="0" style={rv(0)}><Eyebrow>Os três eixos de controle</Eyebrow></div>
            <div data-mon-reveal="80" style={rv(80)}>
              <H2>Atrair, Converter e Relacionar sob controle gerencial</H2>
            </div>
            <div data-mon-reveal="180" style={rv(180)}>
              <Body style={{ marginBottom: 0 }}>A proposta não é executar ações, mas estruturar a forma como os resultados são acompanhados e interpretados em cada etapa da jornada.</Body>
            </div>
          </div>

          {/* Tabs dos eixos */}
          <div data-mon-reveal="240" style={{ ...rv(240), display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0, marginBottom: 48 }}>
            {eixos.map((e, i) => (
              <React.Fragment key={i}>
                <button
                  onClick={() => setOpenEixo(i)}
                  style={{ background: openEixo === i ? 'rgba(252,100,102,0.10)' : C.bg3, border: `1px solid ${openEixo === i ? 'rgba(252,100,102,0.55)' : 'rgba(255,255,255,0.08)'}`, borderRadius: 10, padding: '14px 32px', textAlign: 'center', cursor: 'pointer', transition: 'all 0.25s ease', minWidth: 150 }}>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 15, color: openEixo === i ? C.coral : C.white, transition: 'color 0.25s ease' }}>{e.title}</div>
                  <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: openEixo === i ? C.coral : C.muted, marginTop: 4, transition: 'all 0.25s ease' }}>{e.num}</div>
                </button>
                {i < 2 && (
                  <div style={{ display: 'flex', alignItems: 'center', padding: '0 2px' }}>
                    <div style={{ width: 24, height: 1.5, background: 'rgba(252,100,102,0.35)' }} />
                    <div style={{ width: 0, height: 0, borderTop: '5px solid transparent', borderBottom: '5px solid transparent', borderLeft: '6px solid rgba(252,100,102,0.5)', marginLeft: -1 }} />
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>

          {/* Detalhe do eixo */}
          <div id="mon-eixo-detail" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, alignItems: 'start' }} className="hero-grid">

            {/* Esquerda: descrição + perguntas */}
            <div style={{ background: '#0d0d0d', border: '1px solid rgba(252,100,102,0.28)', borderRadius: 16, padding: '36px 36px 32px', boxShadow: '0 4px 28px rgba(252,100,102,0.07)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20 }}>
                <div style={{ width: 52, height: 52, borderRadius: 12, background: 'rgba(252,100,102,0.10)', border: '1px solid rgba(252,100,102,0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  {eixos[openEixo].icon}
                </div>
                <div>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 4 }}>Eixo {eixos[openEixo].num}</div>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 24, color: C.white, lineHeight: 1.1 }}>{eixos[openEixo].title}</div>
                </div>
              </div>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 14, color: C.coral, marginBottom: 16, lineHeight: 1.5 }}>{eixos[openEixo].subtitle}</div>
              <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 15, color: C.sec, lineHeight: 1.8, marginBottom: 24 }}>{eixos[openEixo].desc}</p>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.muted, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 14 }}>Perguntas que a gestão precisa responder</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {eixos[openEixo].perguntas.map((q, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 13, color: C.coral, marginTop: 1, flexShrink: 0 }}>→</div>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.6 }}>{q}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Direita: KPIs do eixo */}
            <div style={{ background: C.bg3, border: `1px solid ${C.borderSoft}`, borderRadius: 16, padding: '36px 36px 32px' }}>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 22 }}>KPIs monitorados neste eixo</div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
                {eixos[openEixo].kpis.map((kpi, i) => (
                  <div key={i} style={{ background: '#0d0d0d', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10, padding: '18px 18px 14px', transition: 'border-color 0.2s ease' }}
                    onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(252,100,102,0.3)'}
                    onMouseLeave={e => e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)'}>
                    <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.muted, marginBottom: 8 }}>{kpi.label}</div>
                    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 24, color: C.white, fontVariantNumeric: 'tabular-nums', lineHeight: 1, marginBottom: 6 }}>{kpi.val}</div>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                      <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: kpi.up ? '#4ade80' : '#f87171' }}>{kpi.trend}</span>
                      <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.muted }}>vs período ant.</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Nav dots */}
          <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 32 }}>
            {eixos.map((_, i) => (
              <button key={i} onClick={() => setOpenEixo(i)} style={{ width: openEixo === i ? 28 : 8, height: 8, borderRadius: 999, background: openEixo === i ? C.coral : 'rgba(255,255,255,0.18)', border: 'none', cursor: 'pointer', transition: 'all 0.25s ease', padding: 0 }} />
            ))}
          </div>
        </div>
      </section>

      {/* ── COMO A BARPES MONITORA ────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-mon-reveal="0" style={rv(0)}><Eyebrow>Como a Barpes estrutura o controle</Eyebrow></div>
            <div data-mon-reveal="80" style={rv(80)}>
              <H2>Monitorar é enxergar. Controlar é decidir melhor.</H2>
            </div>
            <div data-mon-reveal="180" style={rv(180)}>
              <Body style={{ marginBottom: 0 }}>A operação B2B melhora quando a liderança deixa de olhar apenas para volume de ações e passa a acompanhar indicadores que mostram qualidade, avanço, conversão e perdas entre etapas.</Body>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="grid-3">
            {blocos.map((b, i) => (
              <div key={i} data-mon-reveal={String(i * 80)} style={{ ...rv(i * 80), background: C.bg2, border: `1px solid ${C.borderSoft}`, borderRadius: 14, padding: '28px 28px 24px', transition: 'border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(252,100,102,0.45)'; e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 8px 24px rgba(252,100,102,0.12)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = C.borderSoft; e.currentTarget.style.transform = ''; e.currentTarget.style.boxShadow = ''; }}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 36, color: 'rgba(252,100,102,0.15)', lineHeight: 1, marginBottom: 14, fontVariantNumeric: 'tabular-nums' }}>{b.num}</div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white, marginBottom: 10 }}>{b.title}</div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.7, margin: 0 }}>{b.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PAPEL BARPES vs. CLIENTE ──────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg2 }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-mon-reveal="0" style={rv(0)}><Eyebrow>Modelo de atuação</Eyebrow></div>
            <div data-mon-reveal="80" style={rv(80)}>
              <H2>A Barpes estrutura o controle. Sua equipe executa com mais clareza.</H2>
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }} className="grid-4">

            {/* Barpes */}
            <div data-mon-reveal="180" style={{ ...rv(180), background: '#0d0d0d', border: '1px solid rgba(252,100,102,0.30)', borderRadius: 16, padding: '32px 32px 28px', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: C.coral }} />
              <div style={{ marginBottom: 22 }}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 8 }}>Papel da Barpes</div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 18, color: C.white, lineHeight: 1.3 }}>Assessoria de monitoramento, controle e governança comercial</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {barpesFaz.map((item, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <div style={{ width: 18, height: 18, borderRadius: 4, background: 'rgba(252,100,102,0.10)', border: '1px solid rgba(252,100,102,0.28)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                      <CheckIcon />
                    </div>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.6 }}>{item}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Cliente */}
            <div data-mon-reveal="300" style={{ ...rv(300), background: '#0d0d0d', border: '1px solid rgba(255,255,255,0.09)', borderRadius: 16, padding: '32px 32px 28px', position: 'relative', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'rgba(255,255,255,0.12)' }} />
              <div style={{ marginBottom: 22 }}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.muted, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 8 }}>Papel do cliente e equipe interna</div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 18, color: C.white, lineHeight: 1.3 }}>Execução recorrente com base nas prioridades definidas</div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {clienteFaz.map((item, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                    <div style={{ width: 18, height: 18, borderRadius: 4, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                      <div style={{ width: 6, height: 6, borderRadius: '50%', background: 'rgba(255,255,255,0.30)' }} />
                    </div>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.6 }}>{item}</span>
                  </div>
                ))}
              </div>
            </div>

          </div>

          <div data-mon-reveal="480" style={{ ...rv(480), maxWidth: 820, margin: '32px auto 0', textAlign: 'center' }}>
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 16, color: C.muted, lineHeight: 1.75, margin: 0 }}>
              A Barpes atua como{' '}
              <span style={{ color: C.white, fontWeight: 600 }}>parceira estratégica de monitoramento, controle e governança da jornada comercial.</span>{' '}
              A execução recorrente acontece com a equipe do cliente — com direção, método e acompanhamento.
            </p>
          </div>
        </div>
      </section>

      {/* ── CTA FINAL ─────────────────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.coral, textAlign: 'center' }}>
        <div style={{ ...maxW, maxWidth: 800 }}>
          <div data-mon-reveal="0" style={rv(0)}>
            <h2 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(28px,4.5vw,46px)', color: 'white', margin: '0 0 20px', lineHeight: 1.15, letterSpacing: '-0.01em' }}>
              Sua liderança controla a jornada ou apenas acompanha o resultado final?
            </h2>
          </div>
          <div data-mon-reveal="150" style={rv(150)}>
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 17, lineHeight: 1.75, maxWidth: 640, margin: '0 auto 36px', color: 'rgba(255,255,255,0.92)' }}>
              A Barpes pode diagnosticar a forma como sua empresa monitora Atração, Conversão e Relacionamento e estruturar uma visão gerencial para controlar KPIs, identificar gargalos e tomar decisões com mais previsibilidade.
            </p>
          </div>
          <div data-mon-reveal="280" style={{ ...rv(280), display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <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' }}
              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 de monitoramento
            </button>
            <button
              onClick={() => navigate('diagnostico')}
              style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 15, background: 'transparent', color: 'white', border: '2px solid rgba(255,255,255,0.55)', padding: '17px 32px', borderRadius: 6, cursor: 'pointer', transition: 'background 0.2s, border-color 0.2s' }}
              onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.15)'; e.currentTarget.style.borderColor = 'white'; }}
              onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.borderColor = 'rgba(255,255,255,0.55)'; }}>
              Falar com a Barpes
            </button>
          </div>
          <p data-mon-reveal="400" style={{ ...rv(400), fontFamily: 'Arial,sans-serif', fontSize: 13, marginTop: 20, color: 'rgba(255,255,255,0.75)' }}>
            Diagnóstico sem custo. Conversa objetiva e focada em monitoramento e controle.
          </p>
        </div>
      </section>

    </div>
  );
};

Object.assign(window, { Otimizacao });
