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 }) => (
    <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 11, color: C.coral, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 12 }}>{children}</div>
  );
  const H2 = ({ children, style = {} }) => (
    <h2 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(26px,3.5vw,40px)', color: C.white, margin: '0 0 16px', lineHeight: 1.2, ...style }}>{children}</h2>
  );
  const Body = ({ children, style = {} }) => (
    <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 16, color: C.sec, lineHeight: 1.75, margin: '0 0 16px', ...style }}>{children}</p>
  );
  const CTABtn = ({ 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 rgba(255,255,255,0.25)', padding: '14px 28px', borderRadius: 7, cursor: 'pointer', transition: 'all 0.2s', whiteSpace: 'nowrap' }}
      onMouseEnter={e => { e.target.style.background = primary ? '#ff4f51' : 'rgba(255,255,255,0.08)'; }}
      onMouseLeave={e => { 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: 500, margin: '0 auto' }}>
      <div style={{ background: '#1A1A1A', border: `1px solid ${C.border}`, borderRadius: 16, padding: 24, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 3, background: 'linear-gradient(90deg, #fc6466, #ff9a9b, transparent)' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 20 }}>
          <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 13, color: C.white }}>Pipeline Comercial</span>
          <span style={{ fontFamily: 'Montserrat,sans-serif', fontSize: 11, color: C.coral, background: 'rgba(252,100,102,0.12)', padding: '4px 10px', borderRadius: 20 }}>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: 14 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
              <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted }}>{row.label}</span>
              <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 12, color: C.white }}>{row.value}</span>
            </div>
            <div style={{ background: '#2F2F2F', borderRadius: 4, height: 6, overflow: 'hidden' }}>
              <div style={{ width: `${row.pct}%`, height: '100%', background: row.color, borderRadius: 4 }} />
            </div>
          </div>
        ))}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, marginTop: 20 }}>
          {[{ 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: 8, padding: '10px 12px', border: `1px solid ${C.border}` }}>
              <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 10, color: C.muted, marginBottom: 4 }}>{k.label}</div>
              <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 16, color: C.white }}>{k.val}</div>
              <div style={{ fontSize: 10, color: k.up ? '#4ade80' : '#fc6466', marginTop: 2 }}>{k.up ? '▲ +12%' : '▼ −3%'}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ position: 'absolute', top: -16, right: -16, background: '#242424', border: `1px solid ${C.border}`, borderRadius: 10, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#4ade80', boxShadow: '0 0 8px #4ade80' }} />
        <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 12, color: C.white }}>SDR Ativo</span>
      </div>
      <div style={{ position: 'absolute', bottom: -16, left: -16, background: '#242424', border: `1px solid ${C.border}`, borderRadius: 10, padding: '10px 14px' }}>
        <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 11, color: C.muted, marginBottom: 2 }}>Próxima tarefa</div>
        <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 600, fontSize: 12, 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, CRM, funil, indicadores e rotina comercial.' },
    { q: 'A BARPES DIGITAL atua só com consultoria ou também implanta?', a: 'A BARPES DIGITAL combina consultoria, estruturação de processos, implantação de tecnologia parceira e acompanhamento da execução.' },
    { q: 'Vocês ajudam a organizar CRM 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 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' };

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

      {/* ── HERO ── */}
      <section 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>Prospecção Estratégica · Processo + Tecnologia + Gestão</SectionLabel>
            <h1 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 'clamp(32px,4.5vw,54px)', color: C.white, lineHeight: 1.1, margin: '0 0 24px', letterSpacing: '-0.5px' }}>
              Prospecção Estratégica para{' '}
              <span style={{ color: C.coral }}>crescer com previsibilidade</span>
            </h1>
            <Body>Implantamos processo, tecnologia e gestão para automatizar a captação, qualificação e gestão de oportunidades comerciais, criando um novo padrão em planejamento e análise de vendas.</Body>
            <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 15, color: C.muted, lineHeight: 1.7, marginBottom: 32, fontStyle: 'italic' }}>
              Sua empresa já sabe vender. O desafio é fazer o cliente certo chegar até o seu time comercial com mais frequência, mais qualidade e no momento certo.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 32 }}>
              <CTABtn primary onClick={() => navigate('diagnostico')}>Agendar Diagnóstico</CTABtn>
              <CTABtn onClick={() => navigate('metodologia')}>Conhecer a metodologia</CTABtn>
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
              {['Diagnóstico consultivo','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 style={{ display: 'flex', justifyContent: 'center', padding: '24px 0 24px 24px' }} className="hero-visual">
            <DashboardVisual />
          </div>
        </div>
      </section>

      {/* ── PROBLEMA: GRÁFICO DE GARGALOS ── */}
      <section style={{ ...sectionPad, background: C.bg2, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 56px' }}>
            <SectionLabel>Diagnóstico</SectionLabel>
            <H2>O maior gargalo não está apenas na venda. Está antes da oportunidade chegar.</H2>
            <Body style={{ 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 style={{ background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 16, padding: '36px 40px', maxWidth: 900, margin: '0 auto 40px' }}>
            <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 B2B
            </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={{ width: `${item.pct}%`, height: '100%', background: `linear-gradient(90deg, #fc6466 0%, rgba(252,100,102,0.5) 100%)`, borderRadius: 4 }} />
                </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 B2B. Os percentuais são ilustrativos.
            </p>
          </div>

          <div style={{ 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 style={{ ...sectionPad, background: C.bg }}>
        <div style={{ ...maxW, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start' }} className="hero-grid">
          <div>
            <SectionLabel>Solução</SectionLabel>
            <H2>Da atração ao fechamento: cada etapa precisa ser medida.</H2>
            <Body>A BARPES DIGITAL estrutura uma arquitetura de Prospecção Estratégica que organiza a jornada da oportunidade de ponta a ponta — do primeiro contato ao fechamento — com indicadores em cada etapa.</Body>
            <Body>Começamos pelo Planejamento Estratégico de Marketing, Vendas e Operação. A partir dele, organizamos canais, inbound, outbound, CRM, automações, propostas e rotina de análise.</Body>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12, marginTop: 24 }}>
              {[{ phase: 'Antes', desc: 'Planejamento, ICP, inbound, outbound, nutrição e qualificação' },{ phase: 'Durante', desc: 'CRM, pipeline, follow-up, proposta e conversão' },{ phase: 'Depois', desc: 'Indicadores, análise, planos de ação e melhoria contínua' }].map((p, i) => (
                <div key={i} style={{ background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 10, padding: '16px 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', fontSize: 13, color: C.muted, lineHeight: 1.6, margin: 0 }}>{p.desc}</p>
                </div>
              ))}
            </div>
          </div>

          {/* Funil visual */}
          <div style={{ background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 16, padding: 32 }}>
            <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 13, color: C.white, marginBottom: 6 }}>Funil de Prospecção Estratégica</div>
            <div style={{ fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.muted, marginBottom: 24 }}>Exemplo ilustrativo · os resultados variam conforme mercado e maturidade comercial</div>
            {[
              { stage: 'Mercado impactado', val: '1.000', pct: 100, icon: '◉' },
              { stage: 'Leads capturados', val: '200', pct: 70, icon: '◎' },
              { stage: 'Leads qualificados', val: '80', pct: 52, icon: '◎' },
              { stage: 'SQLs gerados', val: '30', pct: 36, icon: '◈' },
              { stage: 'Oportunidades comerciais', val: '15', pct: 24, icon: '◈' },
              { stage: 'Propostas enviadas', val: '8', pct: 16, icon: '◈' },
              { stage: 'Vendas fechadas', val: '3', pct: 10, icon: '★' },
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 10 }}>
                <div style={{ width: 26, textAlign: 'center', fontFamily: 'Montserrat,sans-serif', fontSize: 13, color: i === 6 ? C.coral : C.muted, flexShrink: 0 }}>{s.icon}</div>
                <div style={{ flex: 1 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 5 }}>
                    <span style={{ fontFamily: 'Arial,sans-serif', fontSize: 13, color: i === 6 ? C.white : C.sec }}>{s.stage}</span>
                    <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 13, color: i === 6 ? C.coral : C.white, fontVariantNumeric: 'tabular-nums' }}>{s.val}</span>
                  </div>
                  <div style={{ background: C.bg3, borderRadius: 3, height: 5, overflow: 'hidden' }}>
                    <div style={{ width: `${s.pct}%`, height: '100%', background: i === 6 ? C.coral : `rgba(252,100,102,${0.2 + i * 0.08})`, borderRadius: 3 }} />
                  </div>
                </div>
              </div>
            ))}
            <div style={{ marginTop: 24, borderTop: `1px solid ${C.border}`, paddingTop: 16, display: 'flex', justifyContent: 'flex-end' }}>
              <span onClick={() => navigate('diagnostico')} style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 13, color: C.coral, cursor: 'pointer' }}>Estruturar meu funil →</span>
            </div>
          </div>
        </div>
      </section>

      {/* ── DIFERENCIAÇÃO: DIAGRAMA DE INTEGRAÇÃO ── */}
      <section style={{ ...sectionPad, background: C.bg2, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }}>
        <div style={{ ...maxW, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center' }} className="hero-grid">
          <div>
            <SectionLabel>Diferenciação</SectionLabel>
            <H2>Tecnologia, processo e gestão conectados em uma única arquitetura comercial.</H2>
            <Body>A BARPES DIGITAL 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 style={{ 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, ao processo e aos indicadores.
              </p>
            </div>
            <div style={{ 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 style={{ position: 'relative', background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 16, padding: 40, 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.06) 0%, transparent 65%)', borderRadius: 16, pointerEvents: 'none' }} />
            {/* Center */}
            <div style={{ background: C.coral, color: '#000', borderRadius: 12, padding: '14px 24px', fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 13, textAlign: 'center', lineHeight: 1.4, zIndex: 1, marginBottom: 20 }}>
              Prospecção Estratégica<br /><span style={{ fontSize: 11, fontWeight: 600 }}>BARPES DIGITAL</span>
            </div>
            {/* Satellites in 3 rows */}
            {[
              ['Planejamento estratégico', 'Inbound', 'Outbound'],
              ['CRM', 'Automação de marketing', 'Sales engagement'],
              ['Gestão de propostas', 'Indicadores e BI', 'Rotina de performance'],
            ].map((row, ri) => (
              <div key={ri} style={{ display: 'flex', gap: 10, marginBottom: 10, flexWrap: 'wrap', justifyContent: 'center' }}>
                {row.map((item, ii) => (
                  <div key={ii} style={{ background: '#1A1A1A', border: `1px solid ${C.border}`, borderRadius: 8, padding: '8px 14px', fontFamily: 'Arial,sans-serif', fontSize: 12, color: C.sec, whiteSpace: 'nowrap' }}>
                    {item}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── METODOLOGIA PACTO ── */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <SectionLabel>Metodologia</SectionLabel>
            <H2>PACTO: a metodologia para transformar prospecção em processo de crescimento.</H2>
            <Body>Uma metodologia criada para estruturar a máquina comercial de ponta a ponta, conectando estratégia, prospecção, processo, tecnologia e melhoria contínua.</Body>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 16, marginBottom: 40 }} className="pacto-grid">
            {[
              { letter: 'P', title: 'Planejamento', desc: 'Definimos ICP, metas, canais, proposta de valor, indicadores e prioridades comerciais.' },
              { letter: 'A', title: 'Atração', desc: 'Estruturamos inbound e outbound para gerar oportunidades qualificadas com mais consistência.' },
              { letter: 'C', title: 'Conversão', desc: 'Organizamos funil, qualificação, follow-up, CRM e gestão de propostas.' },
              { letter: 'T', title: 'Tecnologia', desc: 'Conectamos softwares parceiros para automatizar, rastrear e medir a operação.' },
              { letter: 'O', title: 'Otimização', desc: 'Criamos rotina de análise, planos de ação e melhoria contínua baseada em indicadores.' },
            ].map(p => (
              <div key={p.letter} style={{ background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 12, padding: 28 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 14 }}>
                  <div style={{ width: 40, height: 40, borderRadius: 8, background: 'rgba(252,100,102,0.15)', border: '1px solid rgba(252,100,102,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 18, color: C.coral }}>{p.letter}</span>
                  </div>
                  <span style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 15, color: C.white }}>{p.title}</span>
                </div>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.muted, lineHeight: 1.7, margin: 0 }}>{p.desc}</p>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center' }}>
            <CTABtn onClick={() => navigate('metodologia')}>Conhecer a metodologia completa →</CTABtn>
          </div>
        </div>
      </section>

      {/* ── RÉGUA DE MATURIDADE ── */}
      <section style={{ ...sectionPad, background: C.bg2, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <SectionLabel>Maturidade Comercial</SectionLabel>
            <H2>Em que estágio está a prospecção da sua empresa?</H2>
            <Body style={{ margin: 0 }}>Nem toda empresa está no mesmo estágio. A BARPES DIGITAL 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} style={{ 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 style={{ 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 style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <SectionLabel>Simulador Comercial</SectionLabel>
            <H2>Sua meta de vendas começa antes da venda.</H2>
            <Body style={{ margin: 0 }}>Toda meta comercial precisa ser traduzida em números operacionais. A BARPES DIGITAL 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 style={{ 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 style={{ 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: 13, 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 style={{ ...sectionPad, background: C.bg2, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <SectionLabel>Indicadores Comerciais</SectionLabel>
            <H2>Decisões melhores começam com indicadores melhores.</H2>
            <Body style={{ margin: 0 }}>Crescimento previsível exige indicadores visíveis. A BARPES DIGITAL 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 style={{ 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: 'R$ 18k', sub: '', trend: '+12%', up: true },
                { label: 'Receita prevista', val: 'R$ 126k', sub: '', 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 }}>{kpi.val} <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 style={{ ...sectionPad, background: C.bg, borderBottom: `1px solid ${C.border}` }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 720, margin: '0 auto 56px' }}>
            <SectionLabel>Para quem é</SectionLabel>
            <H2>Para empresas que já vendem, mas precisam gerar oportunidades com mais previsibilidade.</H2>
            <Body style={{ margin: 0 }}>A BARPES DIGITAL atende PMEs B2B com operação comercial ativa, produto ou serviço validado e ambição de crescimento — mas com dificuldade 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} style={{ background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 12, padding: '24px 28px', transition: 'border-color 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(252,100,102,0.3)'}
                onMouseLeave={e => e.currentTarget.style.borderColor = C.border}
              >
                <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 style={{ textAlign: 'center' }}>
            <CTABtn primary onClick={() => navigate('diagnostico')}>Agendar Diagnóstico de Prospecção Estratégica</CTABtn>
          </div>
        </div>
      </section>

      {/* ── SERVIÇOS ── */}
      <section style={{ ...sectionPad, background: C.bg2, borderBottom: `1px solid ${C.border}` }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 700, margin: '0 auto 56px' }}>
            <SectionLabel>Serviços</SectionLabel>
            <H2>Atuamos antes, durante e depois da oportunidade comercial.</H2>
            <Body style={{ margin: 0 }}>A BARPES DIGITAL combina planejamento, estruturação de prospecção, implantação de tecnologias e rotina de análise comercial em uma arquitetura integrada.</Body>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20 }} className="grid-4">
            {[
              { num: '01', title: 'Planejamento Estratégico Comercial', desc: 'Definimos direção, ICP, metas, canais, mensagens, indicadores e plano de ação.' },
              { num: '02', title: 'Estruturação Inbound', desc: 'Organizamos presença digital, ofertas, landing pages, automações, nutrição e qualificação.' },
              { num: '03', title: 'Estruturação Outbound', desc: 'Desenhamos segmentação, listas, cadências, scripts, abordagem e rotina SDR.' },
              { num: '04', title: 'CRM e Processo Comercial', desc: 'Estruturamos funil, etapas, critérios de avanço, follow-up e governança do CRM.' },
              { num: '05', title: 'Implantação de Tecnologias', desc: 'Conectamos softwares parceiros para automatizar, rastrear e medir a operação.' },
              { num: '06', title: 'Gestão de Propostas', desc: 'Padronizamos emissão, acompanhamento, controle e rastreabilidade das propostas.' },
              { num: '07', title: 'Indicadores e Performance', desc: 'Implantamos rituais, indicadores, relatórios e planos de ação orientados por dados.' },
            ].map(s => (
              <div key={s.num} style={{ background: C.bg3, border: `1px solid ${C.border}`, borderRadius: 12, padding: '28px 24px', transition: 'border-color 0.2s, transform 0.2s', cursor: 'default' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'rgba(252,100,102,0.35)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = C.border; e.currentTarget.style.transform = 'translateY(0)'; }}
              >
                <div style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 800, fontSize: 28, color: 'rgba(252,100,102,0.2)', marginBottom: 12 }}>{s.num}</div>
                <h3 style={{ fontFamily: 'Montserrat,sans-serif', fontWeight: 700, fontSize: 15, color: C.white, marginBottom: 10 }}>{s.title}</h3>
                <p style={{ fontFamily: 'Arial,sans-serif', fontSize: 14, color: C.muted, lineHeight: 1.7, margin: 0 }}>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PARCEIROS ── */}
      <section style={{ ...sectionPad, background: C.bg }}>
        <div style={maxW}>
          <div style={{ textAlign: 'center', maxWidth: 680, margin: '0 auto 48px' }}>
            <SectionLabel>Tecnologia Parceira</SectionLabel>
            <H2>Tecnologias parceiras para sustentar a máquina comercial</H2>
            <Body style={{ margin: 0 }}>Parceira autorizada de soluções que apoiam planejamento, prospecção, CRM, 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 => (
              <div key={p.name} style={{ background: C.bg2, border: `1px solid ${C.border}`, borderRadius: 12, padding: 28, transition: 'border-color 0.2s' }}
                onMouseEnter={e => e.currentTarget.style.borderColor = 'rgba(252,100,102,0.3)'}
                onMouseLeave={e => e.currentTarget.style.borderColor = C.border}
              >
                <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>
      </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>Diagnóstico Gratuito</SectionLabel>
            <H2>Agende um diagnóstico e entenda onde sua operação comercial está travando</H2>
            <Body>Converse com a BARPES DIGITAL e tenha uma visão mais clara sobre processo, CRM, marketing, vendas, indicadores e prioridades de estruturação.</Body>
            <div style={{ 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 style={{ 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>
            {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={() => setSubmitted(true)}>Quero agendar um diagnóstico</CTABtn>
              </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>FAQ</SectionLabel>
            <H2>Dúvidas frequentes</H2>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {faqs.map((faq, i) => (
              <div key={i} style={{ border: `1px solid ${openFaq === i ? 'rgba(252,100,102,0.25)' : C.border}`, borderRadius: 10, overflow: 'hidden', transition: 'border-color 0.2s' }}>
                <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 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>Próximo passo</SectionLabel>
          <H2>A BARPES DIGITAL existe para transformar prospecção dispersa em crescimento previsível.</H2>
          <Body style={{ 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 style={{ 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 });