function ProblemSection() {
  return (
    <section id="problema" style={{ background: 'var(--bg-warm)' }}>
      <div className="container">
        <div className="section-header">
          <div className="eyebrow"><span className="dot" />O problema</div>
          <h2>O problema não é só gastar.<br/>É perceber tarde demais.</h2>
          <p>
            A maioria das pessoas só entende para onde o dinheiro foi quando o mês já acabou.
            O Econome foi criado para mudar esse momento — em vez de mostrar o resultado final,
            ele ajuda você a criar consciência a cada decisão.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 16,
        }}>
          {[
            {
              num: '01',
              icon: 'Bolt',
              title: 'Você registra na hora',
              text: 'Gastou ou recebeu? Anote em poucos segundos.',
              accent: 'var(--purple)',
            },
            {
              num: '02',
              icon: 'Eye',
              title: 'Você acompanha o mês',
              text: 'Veja quanto entrou, quanto saiu e quanto ainda pode usar.',
              accent: 'var(--green)',
            },
            {
              num: '03',
              icon: 'Lightbulb',
              title: 'Você entende seus hábitos',
              text: 'Gráficos e históricos mostram padrões que você talvez nunca tenha percebido.',
              accent: 'var(--orange)',
            },
          ].map(c => {
            const I = Icon[c.icon];
            return (
              <div key={c.num} className="card" style={{ padding: 28 }}>
                <div style={{
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                  marginBottom: 28,
                }}>
                  <div style={{
                    width: 44, height: 44,
                    borderRadius: 12,
                    background: c.accent,
                    color: 'white',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                  }}>
                    <I size={20} color="white" />
                  </div>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--ink-4)' }}>{c.num}</span>
                </div>
                <h3 style={{ fontSize: 22, marginBottom: 8 }}>{c.title}</h3>
                <p style={{ color: 'var(--ink-3)', fontSize: 15, lineHeight: 1.55 }}>{c.text}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

window.ProblemSection = ProblemSection;