function Differentials() {
  const items = [
    { title: 'Regularização completa', body: 'SICAF, PNCP, certidões, CNAE — organizado antes do primeiro pregão.' },
    { title: 'Editais compatíveis', body: 'Filtramos os pregões com real compatibilidade. Sem perder tempo.' },
    { title: 'Proposta sem erro', body: 'Sem margem para desclassificação por erro formal.' },
    { title: 'Suporte na sessão', body: 'Acompanhamos o pregão em tempo real — da abertura ao resultado.' },
  ];
  return (
    <section id="diferenciais" style={{ background: 'var(--cream-50)', padding: '120px 0' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <div className="two-col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'flex-start' }}>
          <div>
            <span className="eyebrow on-light" data-anim="fade-up">
              <Bars size={14} light/>
              Diferencial ResultaHub
            </span>
            <h2 data-anim="fade-up" data-anim-delay="1" style={{
              fontFamily: 'var(--font-sans)', fontWeight: 700,
              fontSize: 'clamp(32px, 3.6vw, 44px)', lineHeight: 1.1,
              letterSpacing: '-0.02em', color: 'var(--ink-900)',
              margin: '20px 0 20px', textWrap: 'balance',
            }}>
              Não é orientação — é <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--magenta-700)' }}>execução junto com você</span>
            </h2>
            <p data-anim="fade-up" data-anim-delay="2" style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--ink-700)', margin: '0 0 16px' }}>
              A maioria das consultorias entrega um manual e te manda embora. A ResultaHub fica com você da regularização até o contrato assinado — porque o que garante resultado é a <strong style={{ color: 'var(--ink-900)' }}>execução</strong>, não o PDF.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {items.map((it, i) => (
              <div key={i} data-anim="slide-left" data-anim-delay={i + 1} style={{
                display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 20,
                padding: '24px 0',
                borderBottom: i < items.length - 1 ? '1px solid var(--border-on-light)' : 'none',
              }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 999,
                  background: 'var(--magenta-500)', color: '#fff',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                  boxShadow: '0 8px 20px -8px rgba(201,168,76,.55)',
                }}>
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <div>
                  <h3 style={{ margin: '6px 0 6px', fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 19, color: 'var(--ink-900)', letterSpacing: '-0.005em' }}>{it.title}</h3>
                  <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--ink-700)' }}>{it.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Differentials = Differentials;