// WhySection.jsx
function WhySection() {
  const { t } = window.useI18n();
  return (
    <section className="section section--cream" id="why">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.why.eyebrow}</span>
            <h2 className="section-title">{t.why.title}</h2>
          </div>
          <p className="section-sub">{t.why.sub}</p>
        </div>
      </div>
      <div className="container">
        <div className="why-grid">
          {t.why.cards.map((c, i) => (
            <div className="why-card" key={i}>
              <div className="why-card__num">— {c.num}</div>
              <h3>{c.title}</h3>
              <p>{c.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhySection = WhySection;