function Problem() {
  const items = [
    { n: 'SINTOMA 01', icon: 'layout-grid', t: 'O perfil tá bagunçado',
      d: 'Bio confusa, destaques sem critério, grade sem padrão. Quem chega não entende em três segundos o que você faz — e vai embora.' },
    { n: 'SINTOMA 02', icon: 'filter', t: 'Não existe funil',
      d: 'Conteúdo é só conteúdo. Não tem caminho do feed até a venda. O seguidor curte, comenta, salva — e nunca compra.' },
    { n: 'SINTOMA 03', icon: 'message-circle', t: 'O atendimento é lento',
      d: 'A pessoa manda DM e leva horas pra ser respondida. Quando volta, a vontade de comprar passou. Lead quente vira lead frio.' },
  ];

  return (
    <section className="problem" id="problema">
      <div className="problem__inner">
        <div className="section-eyebrow">O QUE TÁ ACONTECENDO NO SEU PERFIL</div>
        <h2 className="section-h2">
          Você posta, faz reels, paga tráfego.
          <br/>
          <span style={{ color: 'var(--ink-3)' }}>Mas a venda não vem.</span>
        </h2>
        <p className="section-sub">
          Se você tá no Instagram pra vender e o resultado não aparece, não é
          falta de criatividade. É bastidor. Esses três sintomas, na prática,
          aparecem quase sempre juntos:
        </p>
        <div className="problem__grid">
          {items.map(it => (
            <div key={it.n} className="card">
              <div className="card__icon card__icon--light">
                <i data-lucide={it.icon}></i>
              </div>
              <div className="card__num">{it.n}</div>
              <h3 className="card__title">{it.t}</h3>
              <p className="card__desc">{it.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .problem {
          background: var(--bg-alt);
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .problem__inner { max-width: 1200px; margin: 0 auto; padding: 64px 20px; }
        .problem__grid {
          display: grid; grid-template-columns: 1fr; gap: 14px;
        }
        @media (min-width: 600px) {
          .problem__grid { grid-template-columns: 1fr 1fr; }
        }
        @media (min-width: 860px) {
          .problem__inner { padding: 96px 24px; }
          .problem__grid { grid-template-columns: repeat(3, 1fr); }
        }
      `}</style>
    </section>
  );
}