// Por que estudar no Ábaco
const WhyAbaco = () => {
  const points = window.ABACO.whyPoints;
  return (
    <section id="why" className="why">
      <div className="container">
        <div className="why-grid">
          <div className="why-intro">
            <div className="eyebrow">Por que o Ábaco</div>
            <h2>Muito além do<br/>que se espera<br/>de uma escola.</h2>
            <p>
              Nossos alunos são capazes de resolver problemas, trabalhar em equipe e
              formar uma ampla visão de mundo. Tudo isso graças ao nosso projeto pedagógico,
              que privilegia os conhecimentos <strong>lógico, criativo e crítico</strong>,
              consolidado em mais de <strong>48 anos de história</strong> na educação.
            </p>
          </div>
          <div className="why-points">
            {points.map((p, i) => (
              <article key={i} className="why-point">
                <div className="why-num">0{i + 1}</div>
                <div>
                  <h3>{p.title}</h3>
                  <p>{p.body}</p>
                </div>
              </article>
            ))}
          </div>
        </div>
        <div className="why-cta">
          <a href="#why-more" className="btn btn-primary">Conhecer o projeto pedagógico →</a>
        </div>
      </div>
    </section>
  );
};

window.WhyAbaco = WhyAbaco;