const Home = ({ navigate }) => {
  const C = { coral: '#fc6466', bg: '#111111', bg2: '#1A1A1A', bg3: '#242424', surf: '#2F2F2F', white: '#FFFFFF', sec: '#D9D9D9', muted: '#A6A6A6', border: 'rgba(255,255,255,0.10)' };

  const SectionLabel = ({ children, style = {}, ...props }) =>
  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 12, ...style }} {...props}>{children}</div>;

  const H2 = ({ children, style = {}, ...props }) =>
  <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 }} {...props}>{children}</h2>;

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

  const CTABtn = ({ primary, children, onClick, disabled }) =>
  <button onClick={disabled ? undefined : onClick} disabled={disabled}
  style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, background: disabled ? '#555' : primary ? C.coral : 'transparent', color: primary ? '#000' : C.white, border: primary ? 'none' : '1px solid rgba(255,255,255,0.25)', padding: '14px 28px', borderRadius: 7, cursor: disabled ? 'not-allowed' : 'pointer', transition: 'all 0.2s', whiteSpace: 'nowrap', opacity: disabled ? 0.7 : 1 }}
  onMouseEnter={(e) => { if (!disabled) e.target.style.background = primary ? '#ff4f51' : 'rgba(255,255,255,0.08)'; }}
  onMouseLeave={(e) => { if (!disabled) e.target.style.background = primary ? C.coral : 'transparent'; }}>
    {children}</button>;


  const sectionPad = { padding: '96px 32px' };
  const maxW = { maxWidth: 1280, margin: '0 auto' };

  // ── HERO VISUAL ──
  const DashboardVisual = () =>
  <div style={{ position: 'relative', width: '100%', maxWidth: 650, margin: '0 auto' }}>
      <div style={{ background: '#1A1A1A', border: `1px solid ${C.border}`, borderRadius: 20, padding: 32, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: 'linear-gradient(90deg, #fc6466, #ff9a9b, transparent)' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
          <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white }}>Pipeline Comercial</span>
          <span style={{ fontFamily: 'Montserrat,sans-serif', fontSize: 12, color: C.coral, background: 'rgba(252,100,102,0.12)', padding: '6px 14px', borderRadius: 20 }} data-badge-blink="true">Ao vivo</span>
        </div>
        {[{ label: 'Leads Gerados', value: 248, pct: 100, color: '#fc6466' }, { label: 'Qualificados', value: 112, pct: 45, color: '#ff8a8b' }, { label: 'Em Proposta', value: 47, pct: 19, color: '#ffaaab' }, { label: 'Fechamentos', value: 18, pct: 7, color: '#ffc9ca' }].map((row, i) =>
      <div key={i} style={{ marginBottom: 18 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
              <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.muted }}>{row.label}</span>
              <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white, fontVariantNumeric: 'tabular-nums' }} className="counter-number" data-counter={row.value}>{row.value}</span>
            </div>
            <div style={{ background: '#2F2F2F', borderRadius: 5, height: 8, overflow: 'hidden' }}>
              <div style={{ width: `${row.pct}%`, height: '100%', background: row.color, borderRadius: 5 }} />
            </div>
          </div>
      )}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14, marginTop: 28 }}>
          {[{ label: 'Taxa Conv.', val: '7,3%', up: true }, { label: 'Ciclo Médio', val: '18d', up: false }, { label: 'Ticket Médio', val: 'R$12k', up: true }].map((k, i) =>
        <div key={i} style={{ background: '#242424', borderRadius: 10, padding: '14px 16px', border: `1px solid ${C.border}` }}>
              <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.muted, marginBottom: 6 }}>{k.label}</div>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 20, color: C.white }}>{k.val}</div>
              <div style={{ fontSize: 11, color: k.up ? '#4ade80' : '#fc6466', marginTop: 4 }}>{k.up ? '▲ +12%' : '▼ −3%'}</div>
            </div>
        )}
        </div>
      </div>
      <div style={{ position: 'absolute', top: 8, right: 8, background: '#242424', border: `1px solid ${C.border}`, borderRadius: 12, padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10 }} data-badge-pulse="true">
        <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#4ade80', boxShadow: '0 0 8px #4ade80' }} data-pulse-dot="true" />
        <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 13, color: C.white }}>SDR Ativo</span>
      </div>
      <div style={{ position: 'absolute', bottom: 8, left: 8, background: '#242424', border: `1px solid ${C.border}`, borderRadius: 12, padding: '12px 16px' }}>
        <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, marginBottom: 2 }}>Próxima tarefa</div>
        <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 13, color: C.white }}>Follow-up · 14h30</div>
      </div>
    </div>;


  // ── SIMULADOR STATE ──
  const [simMeta, setSimMeta] = React.useState(100000);
  const [simTicket, setSimTicket] = React.useState(20000);
  const [simConvProp, setSimConvProp] = React.useState(25);
  const [simConvSQL, setSimConvSQL] = React.useState(50);
  const [simConvLead, setSimConvLead] = React.useState(20);

  const simVendas = simTicket > 0 ? Math.ceil(simMeta / simTicket) : 0;
  const simProps = simConvProp > 0 ? Math.ceil(simVendas / (simConvProp / 100)) : 0;
  const simSQLs = simConvSQL > 0 ? Math.ceil(simProps / (simConvSQL / 100)) : 0;
  const simLeads = simConvLead > 0 ? Math.ceil(simSQLs / (simConvLead / 100)) : 0;

  const simSteps = [
  { label: 'Leads necessários', val: simLeads, color: 'rgba(252,100,102,0.15)', border: 'rgba(252,100,102,0.3)' },
  { label: 'SQLs qualificados', val: simSQLs, color: 'rgba(252,100,102,0.2)', border: 'rgba(252,100,102,0.4)' },
  { label: 'Propostas enviadas', val: simProps, color: 'rgba(252,100,102,0.28)', border: 'rgba(252,100,102,0.55)' },
  { label: 'Vendas fechadas', val: simVendas, color: C.coral, border: C.coral }];


  const inputSlider = { width: '100%', accentColor: C.coral, cursor: 'pointer' };

  // ── FAQ STATE ──
  const [openFaq, setOpenFaq] = React.useState(null);
  const faqs = [
  { q: 'O diagnóstico é indicado para empresas em que estágio?', a: 'Para empresas B2B que já vendem, possuem operação comercial ativa e querem entender onde estão os gargalos de prospecção.' },
  { q: 'A BARPES Prospecção Estratégica atua só com consultoria ou também implanta?', a: 'A BARPES Prospecção Estratégica combina consultoria, estruturação de processos, implantação de tecnologia parceira e acompanhamento da execução.' },
  { q: 'Vocês ajudam a organizar Pipeline e processo comercial?', a: 'Sim. O trabalho pode incluir desenho de funil, etapas, campos obrigatórios, critérios de avanço, rotina de follow-up, governança do CRM e indicadores comerciais.' },
  { q: 'É necessário já ter uma equipe comercial estruturada?', a: 'Não necessariamente. O trabalho atende empresas em diferentes níveis de maturidade, desde operações pouco estruturadas até equipes que precisam ganhar controle e previsibilidade.' },
  { q: 'Como funciona o primeiro contato?', a: 'O primeiro passo é o Diagnóstico de Prospecção Estratégica — uma conversa consultiva para entender cenário, gargalos, oportunidades e próximos passos.' }];


  // ── FORM STATE ──
  const [formData, setFormData] = React.useState({ nome: '', empresa: '', cargo: '', whatsapp: '', email: '', desafio: '' });
  const [submitted, setSubmitted] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  const [sendError, setSendError] = React.useState(null);

  const handleSubmit = async () => {
    if (!formData.nome || !formData.email) {
      setSendError('Preencha pelo menos nome e e-mail.');
      return;
    }
    setSending(true);
    setSendError(null);
    try {
      await window.sendDiagnosticoEmail(formData);
      setSubmitted(true);
    } catch (err) {
      setSendError('Não foi possível enviar. Tente novamente ou nos chame pelo WhatsApp.');
    } finally {
      setSending(false);
    }
  };
  const inputStyle = { width: '100%', background: '#1A1A1A', border: '1px solid rgba(255,255,255,0.12)', borderRadius: 8, padding: '14px 16px', color: C.white, fontFamily: 'Arial,sans-serif', fontSize: 15, boxSizing: 'border-box', outline: 'none', transition: 'border-color 0.2s' };

  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)'
  });
  const revealRight = (delay = 0) => ({
    opacity: 0,
    transform: 'translateX(32px)',
    transition: 'opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1)'
  });

  React.useEffect(() => {

    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));
    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);
        if (isNaN(target)) {cobs.unobserve(entry.target);return;}
        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 () => {};
  }, []);

  return (
    <div style={{ background: C.bg }}>
      <div id="home-progress" data-progress-bar="" style={{ position: 'fixed', top: 68, left: 0, height: 2, background: C.coral, zIndex: 999, width: '0%', transition: 'width 80ms linear', pointerEvents: 'none' }} />
      <AnimationController />

      {/* ── HERO ── */}
      <section id="hero" style={{ ...sectionPad, paddingTop: 160, background: 'radial-gradient(ellipse 80% 60% at 60% 0%, rgba(252,100,102,0.06) 0%, transparent 70%), #111111' }}>
        <div style={{ ...maxW, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="hero-grid">
          <div>
            <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>Processo + Tecnologia + Gestão</SectionLabel>
            <h1 data-metodo-reveal="120" style={{ ...reveal(120), fontFamily: 'Montserrat,sans-serif', fontWeight: 800, color: C.white, lineHeight: 1.1, margin: '0 0 24px', letterSpacing: '-0.5px', fontSize: "clamp(32px, 5.5vw, 52px)" }}>
              Não é sobre vender...{' '}
              <span style={{ color: C.coral }}><span style={{ color: C.white }}>é sobre planejar quando a </span><span style={{ color: C.white }}>próxima oportunidade qualificada</span> chegará ao funil.</span>
            </h1>
            <Body data-metodo-reveal="280" style={{ ...reveal(280) }}>Toda empresa ativa já tem um processo comercial, ainda que informal. O gargalo, na maioria das vezes, não é vender: o desafio é fazer os clientes certos chegarem ao comercial, no momento certo, com informação suficiente para avançar.</Body>

            <div data-metodo-reveal="560" style={{ ...reveal(560), display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 32 }} className="cta-group">
              <CTABtn primary onClick={() => navigate('diagnostico')}>Agendar Diagnóstico</CTABtn>
              <CTABtn onClick={() => navigate('metodologia')}>Conhecer a metodologia</CTABtn>
            </div>
            <div data-metodo-reveal="700" style={{ ...reveal(700), display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              {['Diagnóstico estratégico', 'Estruturação prática', 'Implantação com acompanhamento', 'Foco em resultado'].map((tag) =>
              <div key={tag} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                  <div style={{ width: 5, height: 5, borderRadius: '50%', background: C.coral }} />
                  <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.muted }}>{tag}</span>
                </div>
              )}
            </div>
          </div>
          <div data-metodo-reveal="350" style={{ ...revealRight(350), display: 'flex', justifyContent: 'center', padding: '24px 0 24px 24px' }} className="hero-visual">
            <DashboardVisual />
          </div>
        </div>
      </section>

      {/* ── PROBLEMA: GRÁFICO DE GARGALOS ── */}
      <section id="problema" style={{ ...sectionPad, background: C.bg2, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }} data-reveal="true">
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 56px' }}>
            <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>Diagnóstico</SectionLabel>
            <H2 data-metodo-reveal="80" style={{ ...reveal(80) }}>O maior gargalo não está apenas na venda. Está antes da oportunidade chegar.</H2>
            <Body data-metodo-reveal="180" style={{ ...reveal(180), margin: 0 }}>Muitas empresas não têm um problema de venda. Têm um problema de previsibilidade na geração de oportunidades. O resultado é uma operação que até vende, mas não consegue crescer com controle.</Body>
          </div>

          {/* Horizontal bar chart */}
          <div data-metodo-reveal="280" style={{ ...reveal(280), background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 16, padding: '36px 40px', maxWidth: 900, margin: '0 auto 40px' }} data-bar-animate="true">
            <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 13, color: C.muted, letterSpacing: '1.5px', textTransform: 'uppercase', marginBottom: 28, borderBottom: `1px solid ${C.border}`, paddingBottom: 16 }}>
              Principais sintomas encontrados em PMEs
            </div>
            {[
            { label: 'Dependência de indicação', pct: 91 },
            { label: 'Baixa geração de leads qualificados', pct: 84 },
            { label: 'Outbound sem cadência definida', pct: 78 },
            { label: 'Inbound sem nutrição estruturada', pct: 73 },
            { label: 'CRM usado apenas como cadastro', pct: 68 },
            { label: 'Falta de critérios de qualificação', pct: 65 },
            { label: 'Propostas sem rastreabilidade', pct: 58 },
            { label: 'Indicadores comerciais dispersos', pct: 52 }].
            map((item, i) =>
            <div key={i} style={{ marginBottom: 18 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 7 }}>
                  <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.sec }}>{item.label}</span>
                  <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, fontVariantNumeric: 'tabular-nums' }}>{item.pct}%</span>
                </div>
                <div style={{ background: '#1A1A1A', borderRadius: 4, height: 8, overflow: 'hidden', border: `1px solid ${C.border}` }}>
                  <div style={{ height: '100%', background: `linear-gradient(90deg, #fc6466 0%, rgba(252,100,102,0.5) 100%)`, borderRadius: 4 }} data-bar-width={`${item.pct}%`} data-bar-animate="item" />
                </div>
              </div>
            )}
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, marginTop: 20, fontStyle: 'italic', margin: '20px 0 0' }}>
              Leitura conceitual baseada nos principais sintomas identificados em PMEs. Os percentuais são ilustrativos.
            </p>
          </div>

          <div data-metodo-reveal="400" style={{ ...reveal(400), textAlign: 'center' }}>
            <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 15, color: C.muted }}>Descubra onde sua prospecção está travando. </span>
            <span onClick={() => navigate('diagnostico')} style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 15, color: C.coral, cursor: 'pointer' }}>Agendar diagnóstico →</span>
          </div>
        </div>
      </section>

      {/* ── SOLUÇÃO: FUNIL COM NÚMEROS ── */}
      <section id="solucao" style={{ ...sectionPad, background: C.bg }} data-reveal="true">
        <div style={{ ...maxW, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }} className="hero-grid">
          <div>
            <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>Solução</SectionLabel>
            <H2 data-metodo-reveal="80" style={{ ...reveal(80) }}>O cliente certo precisa ser encontrado, atraído, convertido e qualificado antes de chegar ao comercial.</H2>
            <Body data-metodo-reveal="180" style={{ ...reveal(180) }}>A BARPES estrutura uma arquitetura de prospecção que organiza a jornada da oportunidade até a chegada do lead para o vendedor/closer: do primeiro contato a entrega da oportunidade para inciar o trabalho de conversão, observando indicadores em cada etapa.</Body>
            <Body data-metodo-reveal="260" style={{ ...reveal(260) }}>Começamos pelo Planejamento Estratégico de Marketing, Vendas e Operação. A partir dele, organizamos canais, inbound, outbound, pipeline, automações, propostas e rotina de análise.</Body>
            <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginTop: 24 }}>
              {[{ phase: 'ESTRATÉGIA', desc: 'Planejamento, perfil do cliente ideal, jornada do lead, canais de tração, estratégias inbound & outbound e plano de ação de marketing & vendas' }, { phase: 'EXECUÇÃO', desc: 'Nutrição e qualificação de leads, estudo das fases do funil de vendas, implantação de tecnologias e documetação do processo de prospecção' }, { phase: 'MEDIÇÃO E CONTROLE', desc: 'Indicadores, análise de resultados e dos planos de ação de vendas e aplicação da melhoria contínua' }].map((p, i) =>
              <div key={i} data-metodo-reveal={(i + 1) * 80} style={{ ...reveal((i + 1) * 80), background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 10, padding: "12px 18px" }}>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '1px', textTransform: 'uppercase', marginBottom: 8 }}>{p.phase}</div>
                  <p style={{ fontFamily: 'Arial,sans-serif', color: C.muted, lineHeight: 1.6, margin: 0, fontSize: "15px" }}>{p.desc}</p>
                </div>
              )}
            </div>
          </div>

          {/* Funil visual */}
          <div data-metodo-reveal="200" style={{ ...revealRight(200), background: 'linear-gradient(145deg, #161616 0%, #1a1a1a 50%, rgba(252,100,102,0.04) 100%)', border: `1px solid rgba(255,255,255,0.08)`, borderRadius: 20, padding: '40px 36px', position: 'relative', overflow: 'hidden' }}>
            {/* Glow bg */}
            <div style={{ position: 'absolute', top: -60, right: -60, width: 240, height: 240, borderRadius: '50%', background: 'radial-gradient(circle, rgba(252,100,102,0.07) 0%, transparent 70%)', pointerEvents: 'none' }} />
            <div style={{ position: 'absolute', bottom: -40, left: -40, width: 180, height: 180, borderRadius: '50%', background: 'radial-gradient(circle, rgba(59,130,246,0.06) 0%, transparent 70%)', pointerEvents: 'none' }} />

            {/* Header */}
            <div style={{ marginBottom: 32, position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                <div style={{ width: 3, height: 14, background: C.coral, borderRadius: 2 }} />
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, letterSpacing: '2px', textTransform: 'uppercase' }}>Estrutura Comercial</div>
              </div>
              <h2 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 20, color: C.white, marginBottom: 6, lineHeight: 1.2 }}>Onde a oportunidade se perde</h2>
              <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted }}>Etapas do pipeline • volume relativo por fase</div>
            </div>

            {/* Funil SVG - Sophisticated */}
            <svg viewBox="0 0 620 420" style={{ width: '100%', height: 'auto', marginBottom: 32 }}>
              <defs>
                {/* Glass blue */}
                <linearGradient id="fg-blueGrad" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="#93c5fd" stopOpacity="0.25" />
                  <stop offset="40%" stopColor="#3b82f6" stopOpacity="0.18" />
                  <stop offset="100%" stopColor="#1e3a8a" stopOpacity="0.28" />
                </linearGradient>
                {/* Glass red variants */}
                <linearGradient id="fg-redGrad1" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="#fca5a5" stopOpacity="0.22" />
                  <stop offset="40%" stopColor="#ef4444" stopOpacity="0.16" />
                  <stop offset="100%" stopColor="#7f1d1d" stopOpacity="0.26" />
                </linearGradient>
                <linearGradient id="fg-redGrad2" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="#fca5a5" stopOpacity="0.28" />
                  <stop offset="40%" stopColor="#dc2626" stopOpacity="0.20" />
                  <stop offset="100%" stopColor="#991b1b" stopOpacity="0.30" />
                </linearGradient>
                <linearGradient id="fg-redGrad3" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="#fca5a5" stopOpacity="0.20" />
                  <stop offset="40%" stopColor="#b91c1c" stopOpacity="0.15" />
                  <stop offset="100%" stopColor="#7f1d1d" stopOpacity="0.24" />
                </linearGradient>
                {/* Glass green variants */}
                <linearGradient id="fg-greenGrad1" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="#86efac" stopOpacity="0.25" />
                  <stop offset="40%" stopColor="#22c55e" stopOpacity="0.18" />
                  <stop offset="100%" stopColor="#15803d" stopOpacity="0.28" />
                </linearGradient>
                <linearGradient id="fg-greenGrad2" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="#86efac" stopOpacity="0.22" />
                  <stop offset="40%" stopColor="#16a34a" stopOpacity="0.16" />
                  <stop offset="100%" stopColor="#166534" stopOpacity="0.26" />
                </linearGradient>
                {/* Glass highlight (white shimmer at top of each layer) */}
                <linearGradient id="fg-shine" x1="0%" y1="0%" x2="0%" y2="100%">
                  <stop offset="0%" stopColor="white" stopOpacity="0.18" />
                  <stop offset="100%" stopColor="white" stopOpacity="0" />
                </linearGradient>
                <filter id="fg-shadow">
                  <feDropShadow dx="0" dy="4" stdDeviation="6" floodColor="#000" floodOpacity="0.4" />
                </filter>
              </defs>

              {/* ── Camadas do funil ── */}

              {/* 1. Mercado potencial - Azul glass */}
              <polygon points="80,30 440,30 408,88 112,88" fill="url(#fg-blueGrad)" stroke="#3b82f6" strokeWidth="1.5" filter="url(#fg-shadow)" />
              <polygon points="80,30 440,30 408,88 112,88" fill="url(#fg-shine)" />
              <polygon points="80,30 440,30 408,88 112,88" fill="none" stroke="rgba(147,197,253,0.5)" strokeWidth="0.8" />
              <text x="260" y="59" textAnchor="middle" dominantBaseline="middle" fill="white" fontSize="11" fontWeight="bold" fontFamily="Montserrat" letterSpacing="0.5">Mercado potencial</text>
              <text x="458" y="59" dominantBaseline="middle" fill="#93c5fd" fontSize="11" fontWeight="800" fontFamily="Montserrat">100%</text>
              <line x1="446" y1="59" x2="456" y2="59" stroke="#3b82f6" strokeWidth="1" opacity="0.6" />

              {/* 2. Atrair - Vermelho glass */}
              <polygon points="112,92 408,92 376,148 144,148" fill="url(#fg-redGrad1)" stroke="#ef4444" strokeWidth="1.5" filter="url(#fg-shadow)" />
              <polygon points="112,92 408,92 376,148 144,148" fill="url(#fg-shine)" />
              <polygon points="112,92 408,92 376,148 144,148" fill="none" stroke="rgba(252,165,165,0.4)" strokeWidth="0.8" />
              <text x="260" y="120" textAnchor="middle" dominantBaseline="middle" fill="white" fontSize="11" fontWeight="bold" fontFamily="Montserrat" letterSpacing="0.5">Atrair</text>
              <text x="458" y="120" dominantBaseline="middle" fill="#fca5a5" fontSize="11" fontWeight="800" fontFamily="Montserrat">55%</text>
              <line x1="446" y1="120" x2="456" y2="120" stroke="#ef4444" strokeWidth="1" opacity="0.6" />

              {/* 3. Converter - Vermelho glass (destaque CRÍTICO) */}
              <polygon points="144,152 376,152 344,208 176,208" fill="url(#fg-redGrad2)" stroke="#ef4444" strokeWidth="2" filter="url(#fg-shadow)" />
              <polygon points="144,152 376,152 344,208 176,208" fill="url(#fg-shine)" />
              <polygon points="144,152 376,152 344,208 176,208" fill="none" stroke="rgba(252,100,102,0.55)" strokeWidth="1" />
              <text x="260" y="180" textAnchor="middle" dominantBaseline="middle" fill="white" fontSize="11" fontWeight="bold" fontFamily="Montserrat" letterSpacing="0.5">Converter</text>
              <text x="458" y="180" dominantBaseline="middle" fill="#fca5a5" fontSize="11" fontWeight="800" fontFamily="Montserrat">28%</text>
              <line x1="446" y1="180" x2="456" y2="180" stroke="#ef4444" strokeWidth="1" opacity="0.6" />
              <rect x="456" y="188" width="52" height="15" rx="3" fill="rgba(239,68,68,0.15)" stroke="#ef4444" strokeWidth="1" />
              <text x="482" y="196" textAnchor="middle" dominantBaseline="middle" fill="#ef4444" fontSize="8" fontWeight="800" fontFamily="Montserrat" letterSpacing="1">CRÍTICO</text>

              {/* 4. Relacionar - Vermelho glass */}
              <polygon points="176,212 344,212 312,268 208,268" fill="url(#fg-redGrad3)" stroke="#dc2626" strokeWidth="1.5" filter="url(#fg-shadow)" />
              <polygon points="176,212 344,212 312,268 208,268" fill="url(#fg-shine)" />
              <polygon points="176,212 344,212 312,268 208,268" fill="none" stroke="rgba(252,165,165,0.35)" strokeWidth="0.8" />
              <text x="260" y="240" textAnchor="middle" dominantBaseline="middle" fill="white" fontSize="11" fontWeight="bold" fontFamily="Montserrat" letterSpacing="0.5">Relacionar</text>
              <text x="458" y="240" dominantBaseline="middle" fill="#fca5a5" fontSize="11" fontWeight="800" fontFamily="Montserrat">14%</text>
              <line x1="446" y1="240" x2="456" y2="240" stroke="#dc2626" strokeWidth="1" opacity="0.6" />

              {/* 5. Qualificar - Verde glass */}
              <polygon points="208,272 312,272 292,318 228,318" fill="url(#fg-greenGrad1)" stroke="#22c55e" strokeWidth="1.5" filter="url(#fg-shadow)" />
              <polygon points="208,272 312,272 292,318 228,318" fill="url(#fg-shine)" />
              <polygon points="208,272 312,272 292,318 228,318" fill="none" stroke="rgba(134,239,172,0.45)" strokeWidth="0.8" />
              <text x="260" y="295" textAnchor="middle" dominantBaseline="middle" fill="white" fontSize="10" fontWeight="bold" fontFamily="Montserrat" letterSpacing="0.5">Qualificar</text>
              <text x="458" y="295" dominantBaseline="middle" fill="#86efac" fontSize="11" fontWeight="800" fontFamily="Montserrat">7%</text>
              <line x1="446" y1="295" x2="456" y2="295" stroke="#22c55e" strokeWidth="1" opacity="0.6" />

              {/* 6. Vender - Verde glass */}
              <polygon points="228,322 292,322 276,368 244,368" fill="url(#fg-greenGrad2)" stroke="#22c55e" strokeWidth="1.5" filter="url(#fg-shadow)" />
              <polygon points="228,322 292,322 276,368 244,368" fill="url(#fg-shine)" />
              <polygon points="228,322 292,322 276,368 244,368" fill="none" stroke="rgba(134,239,172,0.45)" strokeWidth="0.8" />
              <text x="260" y="345" textAnchor="middle" dominantBaseline="middle" fill="white" fontSize="10" fontWeight="bold" fontFamily="Montserrat" letterSpacing="0.5">Vender</text>
              <text x="458" y="345" dominantBaseline="middle" fill="#86efac" fontSize="11" fontWeight="800" fontFamily="Montserrat">3%</text>
              <line x1="446" y1="345" x2="456" y2="345" stroke="#22c55e" strokeWidth="1" opacity="0.6" />

              {/* ── Bracket GARGALO ── */}
              <line x1="58" y1="105" x2="58" y2="265" stroke="rgba(220,38,38,0.6)" strokeWidth="1.5" />
              <line x1="58" y1="105" x2="68" y2="105" stroke="rgba(220,38,38,0.6)" strokeWidth="1.5" />
              <line x1="58" y1="265" x2="68" y2="265" stroke="rgba(220,38,38,0.6)" strokeWidth="1.5" />
              <text x="50" y="190" fill="rgba(220,38,38,0.85)" fontSize="8" fontWeight="700" fontFamily="Montserrat" letterSpacing="2" textAnchor="middle" transform="rotate(-90 50 190)">GARGALO</text>
            </svg>

            {/* Bottom stats */}
            <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
              <div style={{ background: 'linear-gradient(135deg, rgba(59,130,246,0.1) 0%, rgba(30,58,138,0.05) 100%)', border: `1px solid rgba(59,130,246,0.35)`, borderRadius: 12, padding: '18px 16px', textAlign: 'center' }}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 11, color: '#93c5fd', marginBottom: 6, lineHeight: 1 }}>100%</div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 11, color: '#6b8ab5', letterSpacing: '1.2px', textTransform: 'uppercase', lineHeight: 1.6 }}>Mercado<br />Potencial</div>
              </div>
              <div style={{ background: 'linear-gradient(135deg, rgba(220,38,38,0.1) 0%, rgba(127,29,29,0.05) 100%)', border: `1px solid rgba(220,38,38,0.35)`, borderRadius: 12, padding: '18px 16px', textAlign: 'center' }}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 11, color: '#fca5a5', marginBottom: 6, lineHeight: 1 }}>Etapas 2–4</div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 11, color: '#9b6b6b', letterSpacing: '1.2px', textTransform: 'uppercase', lineHeight: 1.6 }}>Zona do<br />Gargalo</div>
              </div>
              <div style={{ background: 'linear-gradient(135deg, rgba(34,197,94,0.1) 0%, rgba(21,128,61,0.05) 100%)', border: `1px solid rgba(34,197,94,0.35)`, borderRadius: 12, padding: '18px 16px', textAlign: 'center' }}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 11, color: '#86efac', marginBottom: 6, lineHeight: 1 }}>3%</div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 11, color: '#5a9b72', letterSpacing: '1.2px', textTransform: 'uppercase', lineHeight: 1.6 }}>Taxa de<br />Conversão Final</div>
              </div>
            </div>

            <div style={{ marginTop: 24, borderTop: `1px solid rgba(255,255,255,0.06)`, paddingTop: 18, display: 'flex', justifyContent: 'flex-end' }}>
              <span onClick={() => navigate('diagnostico')} style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.coral, cursor: 'pointer', letterSpacing: '0.5px', display: 'flex', alignItems: 'center', gap: 6 }} onMouseEnter={(e) => e.currentTarget.style.opacity = '0.75'} onMouseLeave={(e) => e.currentTarget.style.opacity = '1'}>
                Estruturar meu funil →
              </span>
            </div>
          </div>
        </div>
      </section>

      {/* ── DIFERENCIAÇÃO: DIAGRAMA DE INTEGRAÇÃO ── */}
      <section id="diferenciacao" style={{ ...sectionPad, background: C.bg2, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }} data-reveal="true">
        <div style={{ ...maxW, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="hero-grid">
          <div>
            <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>Diferenciação</SectionLabel>
            <H2 data-metodo-reveal="80" style={{ ...reveal(80) }}>Processo, Tecnologia e Gestão conectados em uma única arquitetura comercial.</H2>
            <Body data-metodo-reveal="180" style={{ ...reveal(180) }}>A BARPES não entrega ferramentas isoladas. Integra método, tecnologia e rotina de gestão para que marketing, prospecção e vendas trabalhem conectados.</Body>
            <div data-metodo-reveal="280" style={{ ...reveal(280), background: C.bg3, border: `1px solid rgba(252,100,102,0.2)`, borderLeft: `3px solid ${C.coral}`, borderRadius: 10, padding: '20px 24px', marginTop: 8 }}>
              <p style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 15, color: C.white, margin: 0, lineHeight: 1.65 }}>
                Tecnologia só gera resultado quando está conectada ao método, servindo como base para medicão e controle do processos.
              </p>
            </div>
            <div data-metodo-reveal="380" style={{ ...reveal(380), marginTop: 28, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Não somos agência de marketing', 'Não somos revenda de software', 'Não somos implantadora de CRM', 'Somos uma integradora de crescimento comercial'].map((d, i) =>
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 20, height: 20, borderRadius: 6, background: i === 3 ? 'rgba(252,100,102,0.15)' : 'rgba(255,255,255,0.04)', border: `1px solid ${i === 3 ? 'rgba(252,100,102,0.4)' : C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                    <svg width="10" height="8" viewBox="0 0 10 8" fill="none"><path d={i === 3 ? 'M1 4L3.5 6.5L9 1' : 'M3 4H7M3 4L1 2M3 4L1 6'} stroke={i === 3 ? '#fc6466' : '#666'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
                  </div>
                  <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: i === 3 ? C.white : C.muted, fontWeight: i === 3 ? 'bold' : 'normal' }}>{d}</span>
                </div>
              )}
            </div>
          </div>

          {/* Integration diagram */}
          <div data-metodo-reveal="200" style={{ ...revealRight(200), position: 'relative', background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 20, padding: '48px 40px', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0 }}>
            <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse at center, rgba(252,100,102,0.08) 0%, transparent 65%)', borderRadius: 20, pointerEvents: 'none' }} />

            {/* Título acima */}
            <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.muted, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 16, zIndex: 1 }}>Arquitetura Comercial Integrada</div>

            {/* Botão central */}
            <div onClick={() => navigate('metodologia')} style={{ background: C.coral, color: '#000', borderRadius: 14, padding: '18px 36px', fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 18, textAlign: 'center', lineHeight: 1.4, zIndex: 1, marginBottom: 32, cursor: 'pointer', transition: 'all 0.2s', boxShadow: '0 8px 32px rgba(252,100,102,0.35)' }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = '#ff4f51';
              e.currentTarget.style.transform = 'scale(1.04)';
              e.currentTarget.style.boxShadow = '0 12px 40px rgba(252,100,102,0.5)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = C.coral;
              e.currentTarget.style.transform = 'scale(1)';
              e.currentTarget.style.boxShadow = '0 8px 32px rgba(252,100,102,0.35)';
            }}>
              <div style={{ fontSize: 18, fontWeight: 800, letterSpacing: '-0.3px' }}>Metodologia: P.A.C.T.O.</div>
              <div style={{ fontSize: 13, fontWeight: 600, marginTop: 4, opacity: 0.8 }}>Saiba Mais →</div>
            </div>

            {/* Linha divisória */}
            <div style={{ width: '100%', height: 1, background: `linear-gradient(90deg, transparent, ${C.border}, transparent)`, marginBottom: 28, zIndex: 1 }} />

            {/* Satellites em grid organizado */}
            <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, width: '100%', zIndex: 1 }}>
              {[
              'Planejamento estratégico', 'Inbound', 'Outbound',
              'Pipeline', 'Automação de marketing', 'Sales engagement',
              'Gestão de Planos de Ação', 'Indicadores e BI', 'Rotina de performance'].
              map((item, i) =>
              <div key={i} style={{ background: 'rgba(255,255,255,0.04)', border: `1px solid rgba(255,255,255,0.10)`, borderRadius: 10, padding: '12px 16px', fontFamily: 'Montserrat,sans-serif', fontSize: 13, fontWeight: 500, color: C.sec, textAlign: 'center', display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: 56, transition: 'all 0.3s cubic-bezier(0.16,1,0.3,1)' }}
              onMouseEnter={(e) => {
                e.currentTarget.style.borderColor = 'rgba(252,100,102,0.5)';
                e.currentTarget.style.background = 'rgba(252,100,102,0.06)';
                e.currentTarget.style.color = C.white;
                e.currentTarget.style.transform = 'translateY(-2px)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.borderColor = 'rgba(255,255,255,0.10)';
                e.currentTarget.style.background = 'rgba(255,255,255,0.04)';
                e.currentTarget.style.color = C.sec;
                e.currentTarget.style.transform = '';
              }}>
                  {item}
                </div>
              )}
            </div>
          </div>
        </div>
      </section>



      {/* ── RÉGUA DE MATURIDADE ── */}
      <section id="maturidade" style={{ ...sectionPad, background: C.bg, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }} data-reveal="true">
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>Maturidade Comercial</SectionLabel>
            <H2 data-metodo-reveal="80" style={{ ...reveal(80) }}>Em que estágio está a prospecção da sua empresa?</H2>
            <Body data-metodo-reveal="160" style={{ ...reveal(160), margin: 0 }}>Nem toda empresa está no mesmo estágio. A BARPES Prospecção Estratégica identifica o estágio atual da prospecção e estrutura o próximo nível de evolução.</Body>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 0, maxWidth: 1100, margin: '0 auto 40px', borderRadius: 14, overflow: 'hidden', border: `1px solid ${C.border}` }} className="pacto-grid">
            {[
            { num: 1, label: 'Reativo', desc: 'Depende de indicação, relacionamento e oportunidades ocasionais.', active: false },
            { num: 2, label: 'Disperso', desc: 'Executa ações de marketing e vendas sem integração clara.', active: false },
            { num: 3, label: 'Organizado', desc: 'Possui CRM, campanhas e algum processo de prospecção.', active: false },
            { num: 4, label: 'Estruturado', desc: 'Integra inbound, outbound, qualificação, CRM e indicadores.', active: false },
            { num: 5, label: 'Previsível', desc: 'Opera com metas, dados, rotina de gestão e melhoria contínua.', active: true }].
            map((lvl, i) =>
            <div key={i} data-metodo-reveal={(i + 1) * 80} style={{ ...reveal((i + 1) * 80), background: lvl.active ? 'rgba(252,100,102,0.1)' : C.bg3, borderRight: i < 4 ? `1px solid ${C.border}` : 'none', padding: '28px 20px', position: 'relative', overflow: 'hidden' }}>
                {lvl.active && <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: C.coral }} />}
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                  <div style={{ width: 28, height: 28, borderRadius: '50%', background: lvl.active ? C.coral : C.bg2, border: `1px solid ${lvl.active ? C.coral : C.border}`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 12, color: lvl.active ? '#000' : C.muted }}>{lvl.num}</span>
                  </div>
                </div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, color: lvl.active ? C.white : C.sec, marginBottom: 8 }}>{lvl.label}</div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.muted, lineHeight: 1.6, margin: 0 }}>{lvl.desc}</p>
              </div>
            )}
          </div>
          <div data-metodo-reveal="500" style={{ ...reveal(500), textAlign: 'center' }}>
            <CTABtn primary onClick={() => navigate('diagnostico')}>Faça um Diagnóstico de Prospecção Estratégica</CTABtn>
          </div>
        </div>
      </section>

      {/* ── SIMULADOR DE PREVISIBILIDADE ── */}
      <section id="simulador" style={{ ...sectionPad, background: C.bg2 }} data-reveal="true">
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>Simulador de Funil Ideal</SectionLabel>
            <H2 data-metodo-reveal="80" style={{ ...reveal(80) }}>Sua meta começa antes da entrada da oportunidade no funil de vendas.</H2>
            <Body data-metodo-reveal="160" style={{ ...reveal(160), margin: 0 }}>Toda meta comercial precisa ser traduzida em números operacionais. A BARPES Prospecção Estratégica ajuda a transformar metas em indicadores gerenciáveis.</Body>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'start', maxWidth: 1100, margin: '0 auto' }} className="hero-grid">
            {/* Inputs */}
            <div data-metodo-reveal="120" style={{ ...reveal(120, 'x'), background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 14, padding: 36 }}>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, color: C.white, marginBottom: 28 }}>Configure sua simulação</div>
              {[
              { label: 'Meta mensal de receita', key: 'meta', val: simMeta, set: setSimMeta, min: 10000, max: 1000000, step: 10000, fmt: (v) => `R$ ${v.toLocaleString('pt-BR')}` },
              { label: 'Ticket médio', key: 'ticket', val: simTicket, set: setSimTicket, min: 1000, max: 200000, step: 1000, fmt: (v) => `R$ ${v.toLocaleString('pt-BR')}` },
              { label: 'Taxa conversão proposta → venda', key: 'prop', val: simConvProp, set: setSimConvProp, min: 5, max: 80, step: 5, fmt: (v) => `${v}%` },
              { label: 'Taxa conversão SQL → proposta', key: 'sql', val: simConvSQL, set: setSimConvSQL, min: 10, max: 90, step: 5, fmt: (v) => `${v}%` },
              { label: 'Taxa conversão lead → SQL', key: 'lead', val: simConvLead, set: setSimConvLead, min: 5, max: 60, step: 5, fmt: (v) => `${v}%` }].
              map((f) =>
              <div key={f.key} style={{ marginBottom: 22 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.muted }}>{f.label}</span>
                    <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 13, color: C.coral, fontVariantNumeric: 'tabular-nums' }}>{f.fmt(f.val)}</span>
                  </div>
                  <input type="range" min={f.min} max={f.max} step={f.step} value={f.val}
                onChange={(e) => f.set(Number(e.target.value))}
                style={inputSlider} />
                </div>
              )}
              <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.muted, marginTop: 12, fontStyle: 'italic', margin: '16px 0 0' }}>
                Simulação ilustrativa. Os números reais dependem do mercado, ciclo de venda, oferta, canais e maturidade comercial.
              </p>
            </div>

            {/* Output */}
            <div data-metodo-reveal="200" style={{ ...revealRight(200), background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 14, padding: 36 }}>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, color: C.white, marginBottom: 8 }}>Para bater a meta, você precisa gerar:</div>
              <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.muted, marginBottom: 28 }}>
                Meta: <strong style={{ color: C.white }}>R$ {simMeta.toLocaleString('pt-BR')}</strong> · Ticket médio: <strong style={{ color: C.white }}>R$ {simTicket.toLocaleString('pt-BR')}</strong>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                {simSteps.map((s, i) =>
                <div key={i} style={{ background: s.color, border: `1px solid ${s.border}`, borderRadius: 10, padding: '16px 20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: i === 3 ? '#000' : C.sec }}>{s.label}</span>
                    <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 28, color: i === 3 ? '#000' : C.white, fontVariantNumeric: 'tabular-nums' }}>{s.val.toLocaleString('pt-BR')}</span>
                  </div>
                )}
              </div>
              <div style={{ marginTop: 24, padding: '16px 20px', background: C.bg3, borderRadius: 10, border: `1px solid ${C.border}` }}>
                <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.muted, marginBottom: 6 }}>Receita prevista com essa operação</div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 28, color: C.coral, fontVariantNumeric: 'tabular-nums' }}>
                  R$ {(simVendas * simTicket).toLocaleString('pt-BR')}
                </div>
              </div>
              <div style={{ marginTop: 20, textAlign: 'center' }}>
                <span onClick={() => navigate('diagnostico')} style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, cursor: 'pointer' }}>
                  Quer estruturar esses números na prática? Agende um diagnóstico →
                </span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ── INDICADORES COMERCIAIS ── */}
      <section id="indicadores" style={{ ...sectionPad, background: C.bg, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }} data-reveal="true">
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>Indicadores Comerciais</SectionLabel>
            <H2 data-metodo-reveal="80" style={{ ...reveal(80) }}>Decisões melhores começam com indicadores melhores.</H2>
            <Body data-metodo-reveal="160" style={{ ...reveal(160), margin: 0 }}>Crescimento previsível exige indicadores visíveis. A BARPES Prospecção Estratégica organiza os dados comerciais para que a liderança saiba quais canais funcionam, onde o funil trava e quais ações precisam ser corrigidas.</Body>
          </div>
          <div data-metodo-reveal="240" style={{ ...reveal(240), background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 16, padding: '32px 36px', maxWidth: 1000, margin: '0 auto' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28, paddingBottom: 16, borderBottom: `1px solid ${C.border}` }}>
              <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 14, color: C.white }}>Painel Executivo Comercial</span>
              <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, background: C.bg2, border: `1px solid ${C.border}`, padding: '4px 12px', borderRadius: 20 }}>Exemplo ilustrativo</span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 14 }} className="pacto-grid">
              {[
              { label: 'Leads gerados', val: '248', sub: '/mês', trend: '+18%', up: true },
              { label: 'SQLs gerados', val: '42', sub: '/mês', trend: '+24%', up: true },
              { label: 'Conv. lead → SQL', val: '17', sub: '%', trend: '+3pp', up: true },
              { label: 'Propostas enviadas', val: '19', sub: '/mês', trend: '+8%', up: true },
              { label: 'Taxa de fechamento', val: '26', sub: '%', trend: '−2pp', up: false },
              { label: 'Ticket médio', val: '18000', sub: ' R$', trend: '+12%', up: true },
              { label: 'Receita prevista', val: '126000', sub: ' R$', trend: '+21%', up: true },
              { label: 'Diagnósticos agendados', val: '11', sub: '/mês', trend: 'novo', up: true },
              { label: 'Origem principal', val: 'Inbound', sub: '58%', trend: '', up: null },
              { label: 'Principais perdas', val: 'Preço', sub: '34%', trend: '', up: null }].
              map((kpi, i) =>
              <div key={i} style={{ background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 10, padding: '14px 16px' }}>
                  <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.muted, marginBottom: 6, letterSpacing: '0.5px' }}>{kpi.label}</div>
                  <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 18, color: C.white, fontVariantNumeric: 'tabular-nums', marginBottom: 4 }}>
                    <span className="counter-number" data-counter={kpi.val} data-counter-format={kpi.sub === '%' ? 'percentage' : 'number'} data-metodo-count={kpi.val} data-prefix="" data-suffix="">
                      {kpi.val}
                    </span>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontWeight: 400, fontSize: 11, color: C.muted }}>{kpi.sub}</span>
                  </div>
                  {kpi.trend && <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: kpi.up === null ? C.muted : kpi.up ? '#4ade80' : C.coral }}>{kpi.up === true ? '▲' : kpi.up === false ? '▼' : ''} {kpi.trend}</div>}
                </div>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* ── ICP / PARA QUEM ── */}
      <section id="para-quem" style={{ ...sectionPad, background: C.bg2, borderBottom: `1px solid ${C.border}` }} data-reveal="true">
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>Para quem é</SectionLabel>
            <H2 data-metodo-reveal="80" style={{ ...reveal(80) }}>Para empresas que já vendem, mas precisam gerar oportunidades com mais previsibilidade.</H2>
            <Body data-metodo-reveal="160" style={{ ...reveal(160), margin: 0 }}>A BARPES Prospecção Estratégica atende PMEs com operação comercial ativa, produto ou serviço validado e ambição de crescimento que ainda enfrentam desafio em gerar oportunidades qualificadas de forma recorrente.de de gerar oportunidades qualificadas de forma recorrente.</Body>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 18, marginBottom: 40 }} className="grid-3">
            {[
            { icon: '◉', title: 'Depende de indicação', desc: 'A maior parte das oportunidades vem de relacionamento e indicações. O crescimento é irregular e difícil de controlar.' },
            { icon: '◉', title: 'CRM subutilizado', desc: 'Possui ferramenta de CRM, mas ela não gera inteligência real sobre o funil, a conversão ou o desempenho da equipe.' },
            { icon: '◉', title: 'Marketing sem clareza', desc: 'Investe em marketing mas não consegue medir o retorno sobre o funil ou justificar o investimento em canais.' },
            { icon: '◉', title: 'Outbound irregular', desc: 'Tenta prospecção ativa mas sem cadência, critérios claros de ICP ou rotina estruturada para o time.' },
            { icon: '◉', title: 'Poucos SQLs consistentes', desc: 'Gera leads, mas a maioria não tem perfil ou momento adequado. O time comercial perde tempo com oportunidades fracas.' },
            { icon: '◉', title: 'Precisa crescer com controle', desc: 'Sente que a operação cresce, mas sem previsibilidade. Não sabe exatamente o que está funcionando ou onde agir primeiro.' }].
            map((c, i) =>
            <div key={i} data-metodo-reveal={(i + 1) * 80} style={{ ...reveal((i + 1) * 80), background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 12, padding: '24px 28px', transition: 'opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1), border-color 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1)' }} data-card-hover="true"
            onMouseEnter={(e) => {
              e.currentTarget.style.borderColor = 'rgba(252,100,102,0.5)';
              e.currentTarget.style.transform = 'translateY(-4px)';
              e.currentTarget.style.boxShadow = '0 12px 32px rgba(252,100,102,0.15)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = C.border;
              e.currentTarget.style.transform = '';
              e.currentTarget.style.boxShadow = '';
            }}>
              
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: C.coral, marginBottom: 14 }} />
                <h3 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white, marginBottom: 10 }}>{c.title}</h3>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.muted, lineHeight: 1.7, margin: 0 }}>{c.desc}</p>
              </div>
            )}
          </div>
          <div data-metodo-reveal="560" style={{ ...reveal(560), textAlign: 'center' }}>
            <CTABtn primary onClick={() => navigate('diagnostico')}>Agendar Diagnóstico de Prospecção Estratégica</CTABtn>
          </div>
        </div>
      </section>

      {/* ── PARCEIROS ── */}
      <section id="tecnologia-parceira" style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto 48px' }}>
            <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>Tecnologia Parceira</SectionLabel>
            <H2 data-metodo-reveal="80" style={{ ...reveal(80) }}>Tecnologias parceiras para sustentar a máquina comercial</H2>
            <Body data-metodo-reveal="160" style={{ ...reveal(160), margin: 0 }}>Parceira autorizada de soluções que apoiam planejamento, prospecção, pipeline, automação, atendimento, propostas e análise comercial.</Body>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }} className="grid-3">
            {[
            { name: 'QOCKPIT', cat: 'Gestão Estratégica', benefit: 'Apoia o planejamento, os indicadores, as metas, os planos de ação e a rotina de gestão.' },
            { name: 'Exact Sales / Spotter', cat: 'Sales Engagement', benefit: 'Dá consistência à prospecção ativa, à qualificação, às cadências e à rotina SDR.' },
            { name: 'RD Station CRM', cat: 'CRM Comercial', benefit: 'Organiza pipeline, oportunidades, atividades, histórico de vendas e previsibilidade comercial.' },
            { name: 'RD Station Marketing', cat: 'Automação de Marketing', benefit: 'Apoia geração, segmentação, nutrição e automação de leads inbound.' },
            { name: 'RD Station Conversas', cat: 'Atendimento Digital', benefit: 'Centraliza interações comerciais e atendimento via canais digitais, reduzindo perda de contatos.' },
            { name: 'Provelo', cat: 'Gestão de Propostas', benefit: 'Padroniza a emissão, o controle e o acompanhamento de propostas comerciais.' }].
            map((p, i) =>
            <div key={p.name} data-metodo-reveal={(i + 1) * 80} style={{ ...reveal((i + 1) * 80), background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 12, padding: 28, transition: 'opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1), border-color 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1)' }}
            onMouseEnter={(e) => {
              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.4)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.borderColor = C.border;
              e.currentTarget.style.transform = '';
              e.currentTarget.style.boxShadow = '';
            }}>
              
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white, marginBottom: 4 }}>{p.name}</div>
                <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.coral, marginBottom: 14 }}>{p.cat}</div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.muted, lineHeight: 1.7, margin: 0 }}>{p.benefit}</p>
              </div>
            )}
          </div>
        </div>
        <div data-metodo-reveal="300" style={{ ...reveal(300), textAlign: 'center', marginTop: 40 }}>
          <button onClick={() => navigate('tecnologia')} style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 15, background: C.coral, color: '#000', border: 'none', padding: '16px 32px', borderRadius: 8, cursor: 'pointer', transition: 'all 0.2s' }}
          onMouseEnter={(e) => {e.currentTarget.style.background = '#ff4f51';e.currentTarget.style.transform = 'scale(1.02)';}}
          onMouseLeave={(e) => {e.currentTarget.style.background = C.coral;e.currentTarget.style.transform = 'scale(1)';}}>
            Conheça todas as soluções →
          </button>
        </div>
      </section>

      {/* ── FORMULÁRIO ── */}
      <section id="diagnostico" style={{ ...sectionPad, background: C.bg3, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }}>
        <div style={{ ...maxW, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64 }} className="hero-grid">
          <div>
            <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>Diagnóstico Gratuito</SectionLabel>
            <H2 data-metodo-reveal="80" style={{ ...reveal(80) }}>Agende um diagnóstico e entenda onde sua operação comercial está travando</H2>
            <Body data-metodo-reveal="180" style={{ ...reveal(180) }}>Converse com a BARPES Prospecção Estratégica e tenha uma visão mais clara sobre processo, pipeline, marketing, vendas, indicadores e prioridades de estruturação.</Body>
            <div data-metodo-reveal="300" style={{ ...reveal(300), display: 'flex', gap: 12, alignItems: 'center', marginTop: 24, padding: '16px 20px', background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 10 }}>
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z" fill="#25D366" /><path d="M13 1C6.373 1 1 6.373 1 13s5.373 12 12 12 12-5.373 12-12S19.627 1 13 1zm0 22C7.486 23 3 18.514 3 13S7.486 3 13 3s10 4.486 10 10-4.486 10-10 10z" fill="#25D366" /></svg>
              <div>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 14, color: C.white }}>Prefere falar agora?</div>
                <a href="https://wa.me/5500000000000" style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: '#25D366', textDecoration: 'none' }}>Chamar no WhatsApp →</a>
              </div>
            </div>
            <p data-metodo-reveal="400" style={{ ...reveal(400), fontFamily: 'Arial,sans-serif', fontSize: 13, color: C.muted, marginTop: 20, lineHeight: 1.6 }}>Atendimento consultivo. Conversa objetiva. Foco em diagnóstico prático.</p>
          </div>
          <div data-metodo-reveal="150" style={{ ...revealRight(150) }}>
            {submitted ?
            <div style={{ background: C.bg2, border: '1px solid rgba(74,222,128,0.25)', borderRadius: 14, padding: 40, textAlign: 'center' }}>
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 32, color: '#4ade80', marginBottom: 16 }}>✓</div>
                <h3 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 22, color: C.white, marginBottom: 12 }}>Solicitação recebida!</h3>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 15, color: C.muted }}>Nossa equipe entrará em contato em breve para agendar seu diagnóstico.</p>
              </div> :

            <div style={{ background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 14, padding: 36 }}>
                <h3 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 18, color: C.white, marginBottom: 24 }}>Fale com a nossa equipe</h3>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 14 }}>
                  {[{ key: 'nome', label: 'Nome completo', placeholder: 'Seu nome' }, { key: 'empresa', label: 'Empresa', placeholder: 'Nome da empresa' }, { key: 'cargo', label: 'Cargo', placeholder: 'Seu cargo' }, { key: 'whatsapp', label: 'WhatsApp', placeholder: '(00) 00000-0000' }].map((f) =>
                <div key={f.key}>
                      <label style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, display: 'block', marginBottom: 6 }}>{f.label}</label>
                      <input placeholder={f.placeholder} value={formData[f.key]} onChange={(e) => setFormData({ ...formData, [f.key]: e.target.value })} style={inputStyle} onFocus={(e) => e.target.style.borderColor = 'rgba(252,100,102,0.5)'} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.12)'} />
                    </div>
                )}
                </div>
                <div style={{ marginBottom: 14 }}>
                  <label style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, display: 'block', marginBottom: 6 }}>E-mail</label>
                  <input placeholder="seu@email.com.br" value={formData.email} onChange={(e) => setFormData({ ...formData, email: e.target.value })} style={inputStyle} onFocus={(e) => e.target.style.borderColor = 'rgba(252,100,102,0.5)'} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.12)'} />
                </div>
                <div style={{ marginBottom: 24 }}>
                  <label style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, display: 'block', marginBottom: 6 }}>Principal desafio hoje</label>
                  <textarea placeholder="Descreva o seu principal desafio comercial..." value={formData.desafio} onChange={(e) => setFormData({ ...formData, desafio: e.target.value })} style={{ ...inputStyle, height: 100, resize: 'vertical' }} onFocus={(e) => e.target.style.borderColor = 'rgba(252,100,102,0.5)'} onBlur={(e) => e.target.style.borderColor = 'rgba(255,255,255,0.12)'} />
                </div>
                <CTABtn primary onClick={handleSubmit} disabled={sending} style={{ opacity: sending ? 0.7 : 1, cursor: sending ? 'not-allowed' : 'pointer' }}>
                  {sending ? 'Enviando...' : 'Quero agendar um diagnóstico'}
                </CTABtn>
                {sendError && (
                  <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: '#fc6466', textAlign: 'center', marginTop: 12 }}>{sendError}</p>
                )}
              </div>
            }
          </div>
        </div>
      </section>

      {/* ── FAQ ── */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={{ ...maxW, maxWidth: 820, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>FAQ</SectionLabel>
            <H2 data-metodo-reveal="80" style={{ ...reveal(80) }}>Dúvidas frequentes</H2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {faqs.map((faq, i) =>
            <div key={i} data-metodo-reveal={[80, 140, 200, 260, 320][i]} style={{ ...reveal([80, 140, 200, 260, 320][i]), border: `1px solid ${openFaq === i ? 'rgba(252,100,102,0.25)' : C.border}`, borderRadius: 10, overflow: 'hidden', transition: 'opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1), border-color 0.2s cubic-bezier(0.16,1,0.3,1)' }}>
                <button onClick={() => setOpenFaq(openFaq === i ? null : i)} style={{ width: '100%', background: openFaq === i ? '#1A1A1A' : 'transparent', border: 'none', cursor: 'pointer', padding: '20px 24px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }}>
                  <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 15, color: C.white, textAlign: 'left', lineHeight: 1.5 }}>{faq.q}</span>
                  <span style={{ color: C.coral, fontSize: 18, flexShrink: 0, transition: 'transform 0.2s', display: 'inline-block', transform: openFaq === i ? 'rotate(45deg)' : 'none' }}>+</span>
                </button>
                {openFaq === i &&
              <div style={{ padding: '0 24px 20px', background: '#1A1A1A' }}>
                    <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 15, color: C.muted, lineHeight: 1.75, margin: 0 }}>{faq.a}</p>
                  </div>
              }
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── CTA FINAL ── */}
      <section id="proximo-passo" style={{ ...sectionPad, background: 'linear-gradient(135deg, #1A0A0A 0%, #1A1A1A 50%, #0A0A0A 100%)', borderTop: '1px solid rgba(252,100,102,0.15)', textAlign: 'center' }}>
        <div style={{ ...maxW, maxWidth: 760, margin: '0 auto' }}>
          <SectionLabel data-metodo-reveal="0" style={{ ...reveal(0) }}>Próximo passo</SectionLabel>
          <H2 data-metodo-reveal="80" style={{ opacity: 0, transform: 'translateY(16px) scale(0.97)', transition: 'opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1)' }}>A BARPES Prospecção Estratégica existe para transformar prospecção dispersa em crescimento previsível.</H2>
          <Body data-metodo-reveal="220" style={{ ...reveal(220), maxWidth: 600, margin: '0 auto 40px' }}>Ajudamos empresas B2B que já sabem vender a estruturar o processo anterior à venda: encontrar o cliente certo, atrair sua atenção, nutrir o relacionamento, qualificar o interesse e entregar oportunidades com mais contexto para o time comercial.</Body>
          <div data-metodo-reveal="380" style={{ ...reveal(380), display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <CTABtn primary onClick={() => navigate('diagnostico')}>Agendar Diagnóstico Comercial</CTABtn>
            <CTABtn onClick={() => navigate('diagnostico')}>Falar com especialista</CTABtn>
          </div>
        </div>
      </section>

    </div>);

};

Object.assign(window, { Home });