// Nova seção "Entende rápido" (home-v3) — substitui o teaser antigo de 2
// cards que ficava embaixo do "Registra fácil" (removido de how-v3.jsx) por
// uma seção própria, com 3 mockups de celular ilustrando "Pode gastar hoje",
// "Compras parceladas" e "Gastos no mês".
// As imagens (img-de-olho.png, img-compras-parceladas.png,
// img-gastos-no-mes.png) já vêm com a moldura e o esmaecido/fade embutidos
// na própria arte, pintados em cima do MESMO bg-warm (#F7F5EF) que a seção
// usa — por isso o fundo da seção tem que ser var(--bg-warm) também, senão
// aparece uma costura ao redor de cada imagem (mesma lição do fone-degrade.png
// na Hero).
// Sobrescreve nada ainda (seção nova); window.EntendeRapidoSection.

const ENTENDE_RAPIDO_COLS = [
  {
    img: 'assets/img-de-olho.png',
    alt: 'Tela "De olho nas finanças": pode gastar hoje R$ 444,17',
    title: 'Quanto ainda cabe hoje?',
    text: 'O "Pode gastar hoje" transforma o saldo disponível do mês em uma referência diária, considerando suas receitas, despesas registradas e os dias que faltam.',
  },
  {
    img: 'assets/img-compras-parceladas.png',
    alt: 'Tela de compras parceladas: R$ 513,50 por mês',
    title: 'Uma parcela cabe. E todas juntas?',
    text: 'Veja quanto suas compras parceladas comprometem nos próximos meses e quando cada uma termina.',
  },
  {
    img: 'assets/img-gastos-no-mes.png',
    alt: 'Tela de gastos no mês: R$ 1.583,28, 79% da meta',
    title: 'Definiu quanto quer gastar? Acompanhe durante o mês.',
    text: 'Com as metas de gastos, você confere quanto já consumiu do limite que estabeleceu.',
  },
];

function EntendeRapidoSection() {
  return (
    <section id="entende-rapido" style={{ background: 'var(--bg-warm)' }}>
      <div className="container">
        <div className="section-header">
          <div className="eyebrow"><span className="dot" />Entende rápido</div>
          <h2>Saiba o que cabe hoje.<br /><span style={{ color: 'var(--purple)' }}>Fique de olho</span> no que vem depois.</h2>
          <p>
            Seu dinheiro tem destino antes mesmo de sair da conta. O Econome ajuda você a
            enxergar o que já está comprometido e quanto ainda pode gastar.
          </p>
        </div>

        <div className="entende-rapido-grid">
          {ENTENDE_RAPIDO_COLS.map((c) => (
            <div key={c.title} className="entende-rapido-col">
              <img src={c.img} alt={c.alt} className="entende-rapido-img" />
              <h3>{c.title}</h3>
              <p>{c.text}</p>
            </div>
          ))}
        </div>

        <style>{`
          .entende-rapido-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 40px;
          }
          .entende-rapido-img { display: block; width: 100%; height: auto; margin-bottom: -10px; }
          .entende-rapido-col h3 { font-size: 21px; margin-bottom: 10px; line-height: 1.25; padding: 0 6px; }
          .entende-rapido-col p { font-size: 15.5px; color: var(--ink-3); line-height: 1.6; padding: 0 6px; }
          @media (max-width: 880px) {
            .entende-rapido-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
            .entende-rapido-img { max-width: 320px; margin-left: auto; margin-right: auto; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.EntendeRapidoSection = EntendeRapidoSection;