function ProblemGrid() {
  const items = [
    { title: 'Não sabe por onde começar', body: 'SICAF, PNCP, edital, habilitação: o processo parece um labirinto.' },
    { title: 'Medo de errar na documentação', body: 'Um documento fora do formato cancela sua participação.' },
    { title: 'Acha que só grande empresa ganha', body: 'PMEs vencem mais de 60% dos pregões eletrônicos.' },
    { title: 'Perde tempo estudando sozinho', body: 'Sem experiência, o processo demora o triplo.' },
  ];
  return (
    <section style={{ background: 'var(--cream-50)', padding: '120px 0' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <span className="eyebrow on-light" data-anim="fade-up">
            <Bars size={14} light/>
            A realidade do mercado
          </span>
          <h2 className="h2" data-anim="fade-up" data-anim-delay="1" style={{
            fontFamily: 'var(--font-sans)', fontWeight: 700,
            fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1.1,
            letterSpacing: '-0.02em', color: 'var(--ink-900)',
            margin: '20px 0 16px', textWrap: 'balance',
          }}>
            Licitação parece complicada. <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400, color: 'var(--magenta-700)' }}>E é mesmo</span> para quem está sozinho.
          </h2>
          <p data-anim="fade-up" data-anim-delay="2" style={{ fontSize: 18, lineHeight: 1.6, color: 'var(--ink-700)', margin: 0, maxWidth: 600 }}>
            A maioria das empresas desiste antes de começar. Não por falta de capacidade — por falta de quem conhece o caminho.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20, marginBottom: 64 }} className="two-col">
          {items.map((it, i) => (
            <div
              key={i}
              data-anim="fade-up"
              data-anim-delay={i + 1}
              className="tilt"
              data-tilt-max="4"
              style={{
                background: '#fff',
                border: '1px solid var(--border-on-light)',
                borderRadius: 20,
                padding: '28px 28px 32px',
                display: 'flex', flexDirection: 'column', gap: 10,
                boxShadow: '0 1px 2px rgba(10,24,48,.04), 0 12px 32px -16px rgba(10,24,48,.18)',
              }}
            >
              <span style={{ color: 'var(--magenta-700)', fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 28, lineHeight: 1 }}>
                0{i + 1}
              </span>
              <h3 style={{ margin: 0, fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 21, color: 'var(--ink-900)', letterSpacing: '-0.01em' }}>{it.title}</h3>
              <p style={{ margin: 0, fontSize: 15, lineHeight: 1.6, color: 'var(--ink-700)' }}>{it.body}</p>
            </div>
          ))}
        </div>

        <blockquote data-anim="fade-up" style={{
          margin: 0, padding: '32px 40px',
          borderLeft: '3px solid var(--magenta-500)',
          fontFamily: 'var(--font-serif)', fontStyle: 'italic',
          fontSize: 28, lineHeight: 1.3, color: 'var(--ink-900)',
          maxWidth: 760, letterSpacing: '-0.005em',
        }}>
          "A burocracia existe — mas não precisa ser sua responsabilidade. A ResultaHub conhece cada etapa, cada exigência, cada prazo. Você foca no seu negócio."
        </blockquote>
      </div>
    </section>
  );
}
window.ProblemGrid = ProblemGrid;