// Why choose us — 4 numbered differentiators with Baskervville numerals
const WhyChoose = () => {
  const diffs = t("whyChoose.diffs");
  return (
    <section id="diferenciais" className="scl-section scl-section--navy">
      <div className="scl-container">
        <div className="scl-section__head scl-section__head--inverse">
          <div>
            <div className="scl-eyebrow scl-eyebrow--light"><span className="scl-rule" /> {t("whyChoose.eyebrow")}</div>
            <h2 className="scl-h2" style={{ color: "var(--fg-inverse)" }}>
              {t("whyChoose.title")}
            </h2>
          </div>
        </div>

        <div className="scl-diffs">
          {diffs.map((d, i) => (
            <article key={i} className="scl-diff">
              <span className="scl-diff__num">{String(i + 1).padStart(2, "0")}</span>
              <div className="scl-diff__body">
                <h3 className="scl-h4 scl-diff__title">{d.title}</h3>
                <p className="scl-diff__text">{d.body}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.WhyChoose = WhyChoose;