
const Operacoes = ({ 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' };

  // ── UI primitives — mesmas do Planejamento.jsx ─────────────────────────────
  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>;

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


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

  // ── Animação ao trocar pilar ───────────────────────────────────────────────
  const [openPilar, setOpenPilar] = React.useState(0);

  React.useEffect(() => {
    const el = document.getElementById('ops-pilar-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);
  }, [openPilar]);

  const rv = (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)',
  });

  // ── Dados ─────────────────────────────────────────────────────────────────
  const dores = [
    { t: 'Ações desconectadas', d: 'Operação comercial e digital sem lógica comum — sem sequência e sem integração entre si.' },
    { t: 'Público pouco definido', d: 'Baixa clareza sobre quem priorizar, como abordar e qual mensagem usar para cada segmento.' },
    { t: 'Geração irregular', d: 'Oportunidades que chegam de forma imprevisível, sem padrão de qualidade e sem rastreabilidade.' },
    { t: 'Prospecção sem método', d: 'Abordagem reativa, sem cadência, sem critério de qualificação e sem priorização de contas.' },
    { t: 'Baixa previsibilidade', d: 'Dificuldade para antecipar quando a próxima oportunidade qualificada vai entrar no funil.' },
    { t: 'Dependência de indicação', d: 'Parte relevante da receita depende de indicações sem critério, timing ou volume controlável.' },
  ];

  const pilares = [
    {
      num: '01', title: 'Atrair',
      subtitle: 'Topo do Funil — faça seu público-alvo conhecer a sua marca',
      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: 'A frente de atração tem um objetivo claro: fazer com que o público certo conheça a sua marca. Isso acontece por meio de conteúdos educativos focados nas dores do cliente — publicados nas redes sociais certas — e de campanhas de anúncios segmentados para alcançar quem tem maior potencial de compra. A Barpes orienta a estruturação desse canal para que a atração deixe de ser dispersa e passe a gerar volume qualificado de forma consistente.',
      entregas: [
        'Diagnóstico da presença digital atual',
        'Definição de públicos e segmentações prioritárias',
        'Orientação sobre canais de atração (Instagram, TikTok, LinkedIn)',
        'Estruturação de pauta de conteúdo educativo por dor do cliente',
        'Direcionamento para campanhas de anúncios (Meta Ads, Google Ads)',
        'Recomendações de mensagem e posicionamento por canal',
        'Definição de pontos de entrada para novas oportunidades',
        'Recomendações de melhoria contínua',
      ],
      tags: ['Redes Sociais', 'Meta Ads', 'Conteúdo Educativo', 'Topo do Funil'],
    },
    {
      num: '02', title: 'Converter',
      subtitle: 'Meio do Funil — transforme visitantes em leads qualificados',
      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: 'A conversão acontece quando a empresa oferece algo de valor em troca do contato do potencial cliente. Materiais ricos como e-books, webinars ou cupons de desconto, combinados com páginas de captura bem estruturadas, são os mecanismos que transformam visitantes em leads. A Barpes orienta a criação desses pontos de conversão e o processo comercial que os acompanha — do lead gerado à oportunidade qualificada.',
      entregas: [
        'Diagnóstico dos pontos de conversão atuais',
        'Orientação sobre criação de materiais ricos (e-books, webinars, cupons)',
        'Estruturação de páginas de captura e landing pages',
        'Definição de critérios de qualificação de leads',
        'Organização do processo comercial pós-captura',
        'Padronização da rotina de follow-up inicial',
        'Análise de gargalos de conversão',
        'Recomendações de melhoria contínua',
      ],
      tags: ['Lead Magnets', 'Landing Pages', 'Qualificação', 'Meio do Funil'],
    },
    {
      num: '03', title: 'Relacionar',
      subtitle: 'Construção de Confiança — nutre sem pressão, convence com autoridade',
      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 relacionamento é o pilar principal da jornada pré-venda. O objetivo é nutrir os contatos com informações relevantes e sem pressão de venda — respondendo dúvidas, interagindo nas redes e enviando conteúdos personalizados por estágio. A Barpes estrutura os fluxos de automação de e-mail marketing e WhatsApp Business para que esse relacionamento aconteça de forma escalável, consistente e mensurável.',
      entregas: [
        'Diagnóstico dos pontos de contato pré-venda',
        'Definição de fluxos de nutrição por perfil e estágio do lead',
        'Estruturação de cadências via e-mail marketing e WhatsApp Business',
        'Orientação sobre conteúdo educativo e de autoridade',
        'Critérios para avançar o lead ao comercial sem pressão',
        'Réguas de comunicação personalizadas por segmento',
        'Automação de relacionamento com ferramentas digitais',
        'Indicadores de engajamento e maturidade do lead',
      ],
      tags: ['E-mail Marketing', 'WhatsApp Business', 'Nutrição', 'Automação'],
    },
  ];

  const barpesFaz = [
    'Diagnosticar gargalos da operação atual',
    'Definir a estratégia de crescimento B2B',
    'Estruturar o modelo operacional',
    'Desenhar processos comerciais e digitais',
    'Orientar a implantação das ferramentas',
    'Criar critérios, fluxos e rotinas',
    'Capacitar a equipe do cliente',
    'Acompanhar a evolução da operação',
    'Apoiar a tomada de decisão com dados',
    'Recomendar melhorias contínuas',
  ];

  const clienteFaz = [
    'Executar campanhas e ações recorrentes',
    'Produzir conteúdos de forma contínua',
    'Operar as rotinas comerciais diárias',
    'Realizar follow-ups com as oportunidades',
    'Executar as cadências de prospecção',
    'Atualizar páginas e materiais',
    'Alimentar informações nas ferramentas',
    'Conduzir a rotina com base no modelo definido',
  ];

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

      {/* Barra de progresso de leitura */}
      <div id="ops-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.09), 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: copy */}
            <div>
              <div data-ops-reveal="0" style={rv(0)}>
                <Tag>Operações B2B</Tag>
              </div>
              <h1 data-ops-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' }}>
                Atrair, Converter e Relacionar: uma operação integrada para gerar oportunidades com <span style={{ color: C.coral }}>previsibilidade.</span>
              </h1>
              <p data-ops-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, estruturação e acompanhamento da operação de Atrair, Converter e Relacionar — para que sua equipe execute com mais clareza, controle e previsibilidade.
              </p>
              <div data-ops-reveal="350" style={{ ...rv(350), 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 Barpes estrutura o caminho. A execução acontece com a equipe do cliente, com <span style={{ color: C.coral }}>direção, método e acompanhamento.</span>
                </p>
              </div>
              <div data-ops-reveal="480" style={{ ...rv(480), display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <Btn primary onClick={() => navigate('diagnostico')}>Diagnosticar minha operação B2B</Btn>
                <Btn primary={false} onClick={() => { const el = document.getElementById('ops-pilares'); if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: 'smooth' }); }}>Como funciona</Btn>
              </div>
            </div>

            {/* Direita: Diagrama Atração → Conversão → Relacionamento */}
            <div data-ops-reveal="320" style={{ ...rv(320) }} className="hero-visual">
              {[
                { num: '01', label: 'ATRAIR', title: 'Topo do Funil', desc: 'Conteúdo educativo nas redes sociais e anúncios segmentados para fazer o público-alvo conhecer a marca.' },
                { num: '02', label: 'CONVERTER', title: 'Meio do Funil', desc: 'Materiais ricos, páginas de captura e ofertas de valor para transformar visitantes em leads qualificados.' },
                { num: '03', label: 'RELACIONAR', title: 'Construção de Confiança', desc: 'Conteúdo educativo via e-mail e WhatsApp Business para nutrir leads sem pressão de venda e construir autoridade.' },
              ].map((step, i) => (
                <div key={i} style={{ display: 'flex', flexDirection: 'column', alignItems: 'stretch' }}>
                  <div
                    style={{ display: 'flex', alignItems: 'center', gap: 18, minHeight: 88, background: '#0d0d0d', border: `1px solid rgba(252,100,102,${i === 1 ? '0.38' : '0.18'})`, borderRadius: 14, padding: '18px 22px', transition: 'all 0.3s ease', boxShadow: i === 1 ? '0 4px 24px rgba(252,100,102,0.10)' : '0 2px 12px rgba(0,0,0,0.4)' }}
                    onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(252,100,102,0.65)'; e.currentTarget.style.transform = 'translateX(5px)'; }}
                    onMouseLeave={e => { e.currentTarget.style.borderColor = `rgba(252,100,102,${i === 1 ? '0.38' : '0.18'})`; e.currentTarget.style.transform = ''; }}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 3, width: 72, flexShrink: 0 }}>
                      <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 900, fontSize: 26, color: C.coral, letterSpacing: '-0.02em', lineHeight: 1 }}>{step.num}</div>
                      <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{step.label}</div>
                    </div>
                    <div style={{ flex: 1 }}>
                      <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 15, color: C.white, marginBottom: 4 }}>{step.title}</div>
                      <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.muted, lineHeight: 1.55 }}>{step.desc}</div>
                    </div>
                  </div>
                  {i < 2 && (
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', height: 26, justifyContent: 'center', opacity: 0.7 }}>
                      <div style={{ width: 1.5, height: 12, background: 'rgba(252,100,102,0.5)', borderRadius: 1 }} />
                      <div style={{ width: 0, height: 0, borderLeft: '5px solid transparent', borderRight: '5px solid transparent', borderTop: '6px solid rgba(252,100,102,0.6)' }} />
                    </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-ops-reveal="0" style={rv(0)}><Eyebrow>O Problema</Eyebrow></div>
            <div data-ops-reveal="80" style={rv(80)}>
              <H2>O crescimento trava quando atrair, converter e relacionar não seguem a mesma lógica</H2>
            </div>
            <div data-ops-reveal="180" style={rv(180)}>
              <Body style={{ marginBottom: 0 }}>Muitas empresas já têm presença digital, fazem ações de marketing e usam ferramentas comerciais. Mesmo assim, não conseguem prever quando a próxima oportunidade qualificada vai chegar ao funil. O problema não está em uma ação isolada — está na falta de uma operação estruturada nas três frentes essenciais.</Body>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="grid-3">
            {dores.map((card, i) =>
              <div key={i} data-ops-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-ops-reveal="520" style={{ ...rv(520), maxWidth: 700, 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 }}>
              O problema não é apenas fazer mais. O problema é conectar melhor <span style={{ color: C.coral }}>Atrair, Converter e Relacionar.</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-ops-reveal="0" style={rv(0)}><Eyebrow>Virada estratégica</Eyebrow></div>
            <div data-ops-reveal="80" style={rv(80)}>
              <H2>Mais ações não resolvem uma operação sem sequência clara</H2>
            </div>
            <div data-ops-reveal="180" style={rv(180)}>
              <Body style={{ marginBottom: 0 }}>Antes de ampliar campanhas, intensificar prospecção ou cobrar mais vendas, a empresa precisa organizar a lógica da operação. A Barpes ajuda sua empresa a estruturar essa sequência para que cada frente cumpra uma função clara dentro da operação B2B.</Body>
            </div>
          </div>

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

            {/* Antes */}
            <div data-ops-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 }}>Captação dispersa, sem sequência clara</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {['Ações comerciais e digitais desconectadas', 'Prospecção sem priorização de contas', 'Oportunidades mal qualificadas', 'Follow-up inconsistente', 'Baixa visibilidade da jornada comercial', 'Decisões baseadas em percepção', 'Dependência excessiva de indicação'].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-ops-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 estrutura B2B</div>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 20, color: C.white, marginBottom: 24, lineHeight: 1.25 }}>Operação estruturada em três frentes</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {['Atração mais direcionada ao público certo', 'Relacionamento estruturado com critérios claros', 'Conversão mais organizada e rastreável', 'Responsabilidades comerciais definidas', 'Jornada comercial mais visível e mensurável', 'Operação com maior previsibilidade', 'Decisões orientadas por dados e indicadores'].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 }}>
                      <svg width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M1 4L3.5 6.5L9 1" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                    </div>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.6 }}>{item}</span>
                  </div>
                ))}
              </div>
            </div>

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

      {/* ── 3 PILARES ────────────────────────────────────────────────────── */}
      <section id="ops-pilares" style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto 56px' }}>
            <div data-ops-reveal="0" style={rv(0)}><Eyebrow>Os três pilares</Eyebrow></div>
            <div data-ops-reveal="80" style={rv(80)}>
              <H2>Atrair, Converter e Relacionar: três frentes conectadas em uma única operação</H2>
            </div>
            <div data-ops-reveal="180" style={rv(180)}>
              <Body style={{ marginBottom: 0 }}>A Barpes estrutura a operação B2B conectando essas três frentes de forma complementar. A atuação é consultiva: a Barpes define, organiza, orienta, capacita e acompanha. A execução recorrente acontece com a equipe do cliente ou parceiros operacionais.</Body>
            </div>
          </div>

          {/* Diagrama horizontal clicável */}
          <div data-ops-reveal="240" style={{ ...rv(240), display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 0, marginBottom: 48 }}>
            {pilares.map((p, i) => (
              <React.Fragment key={i}>
                <button
                  onClick={() => setOpenPilar(i)}
                  style={{ background: openPilar === i ? 'rgba(252,100,102,0.10)' : C.bg2, border: `1px solid ${openPilar === 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: openPilar === i ? C.coral : C.white, transition: 'color 0.25s ease' }}>{p.title}</div>
                  <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: openPilar === i ? C.coral : C.muted, marginTop: 4, opacity: openPilar === i ? 0.85 : 1, transition: 'all 0.25s ease' }}>{p.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 pilar selecionado */}
          <div id="ops-pilar-detail" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 28, alignItems: 'start' }} className="hero-grid">
            <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 }}>
                  {pilares[openPilar].icon}
                </div>
                <div>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '0.14em', textTransform: 'uppercase', marginBottom: 4 }}>Pilar {pilares[openPilar].num}</div>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 26, color: C.white, lineHeight: 1.1 }}>{pilares[openPilar].title}</div>
                </div>
              </div>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 14, color: C.coral, marginBottom: 16, lineHeight: 1.5 }}>{pilares[openPilar].subtitle}</div>
              <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 15, color: C.sec, lineHeight: 1.8, margin: 0 }}>{pilares[openPilar].desc}</p>
            </div>

            <div style={{ background: C.bg2, 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 }}>Principais entregas consultivas</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 13 }}>
                {pilares[openPilar].entregas.map((e, i) => (
                  <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, minWidth: 24, fontVariantNumeric: 'tabular-nums' }}>{String(i + 1).padStart(2, '0')}</div>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.65 }}>{e}</span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid rgba(255,255,255,0.07)', display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {pilares[openPilar].tags.map((tag, i) => (
                  <span key={i} style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.white, background: 'rgba(252,100,102,0.10)', border: '1px solid rgba(252,100,102,0.25)', padding: '5px 12px', borderRadius: 999 }}>{tag}</span>
                ))}
              </div>
            </div>
          </div>

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

      {/* ── ARGUMENTO EXECUTIVO ───────────────────────────────────────────── */}
      <section style={{ ...sectionPad, background: C.bg2 }}>
        <div style={{ ...maxW, maxWidth: 880 }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <div data-ops-reveal="0" style={rv(0)}><Eyebrow>Por que a conexão importa</Eyebrow></div>
            <div data-ops-reveal="80" style={rv(80)}>
              <H2>O crescimento previsível depende da conexão entre atrair, converter e relacionar</H2>
            </div>
          </div>
          <div data-ops-reveal="200" style={{ ...rv(200), background: '#0d0d0d', border: '1px solid rgba(252,100,102,0.18)', borderRadius: 16, padding: '36px 40px', marginBottom: 20 }}>
            <Body style={{ fontSize: 17, lineHeight: 1.85, marginBottom: 0 }}>
              Ter presença digital, fazer ações de marketing, usar ferramentas comerciais ou prospectar ativamente não garante crescimento previsível. O resultado aparece quando Atrair, Converter e Relacionar seguem uma lógica comum — cada frente com papel claro, responsabilidades definidas e indicadores para acompanhar.
            </Body>
          </div>
          <div data-ops-reveal="320" style={{ ...rv(320), background: 'rgba(252,100,102,0.06)', border: `1px solid ${C.border}`, borderRadius: 12, padding: '22px 28px' }}>
            <p style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 16, color: C.white, lineHeight: 1.65, margin: 0 }}>
              A Barpes não substitui a equipe do cliente. A atuação dá <span style={{ color: C.coral }}>direção, método, estrutura e acompanhamento</span> para que a operação seja executada com mais clareza e controle — e não dependa apenas de esforços isolados ou indicações.
            </p>
          </div>
        </div>
      </section>

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

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

            {/* Barpes */}
            <div data-ops-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.25 }}>Assessoria estratégica de estruturação e acompanhamento</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 }}>
                      <svg width="10" height="8" viewBox="0 0 10 8" fill="none"><path d="M1 4L3.5 6.5L9 1" stroke="#fc6466" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                    </div>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec, lineHeight: 1.6 }}>{item}</span>
                  </div>
                ))}
              </div>
            </div>

            {/* Cliente */}
            <div data-ops-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.25 }}>Execução recorrente da operação com método e acompanhamento</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-ops-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 estruturação, governança e melhoria contínua da operação.</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-ops-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 operação B2B conecta atrair, converter e relacionar?
            </h2>
          </div>
          <div data-ops-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 os gargalos da sua operação e estruturar um caminho prático para transformar captação dispersa em oportunidades qualificadas — com mais clareza entre atrair, converter e relacionar.
            </p>
          </div>
          <div data-ops-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', 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 da operação
            </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', display: 'inline-block' }}
              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-ops-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 operação.
          </p>
        </div>
      </section>

    </div>
  );
};

Object.assign(window, { Operacoes });
