/* global React */
function Pillars() {
  const { t } = window.useT();
  return (
    <section className="vsc-pillars-band" data-screen-label="Promise pillars">
      <div className="vsc-wrap">
        <div className="vsc-pillars-head">
          <div>
            <div className="vsc-eyebrow">{t("pillars.eyebrow")}</div>
            <h2>
              {t("pillars.h2.a")}<br/>
              {t("pillars.h2.b")} <em>{t("pillars.h2.c")}</em> {t("pillars.h2.d")}
            </h2>
          </div>
          <p>{t("pillars.lead")}</p>
        </div>
        <div className="vsc-pillars">
          <div className="vsc-pillar-cell">
            <span className="num">01</span>
            <h3>{t("pillars.1.title")}</h3>
            <p>{t("pillars.1.copy")}</p>
          </div>
          <div className="vsc-pillar-cell">
            <span className="num">02</span>
            <h3>{t("pillars.2.title")}</h3>
            <p>{t("pillars.2.copy")}</p>
          </div>
          <div className="vsc-pillar-cell">
            <span className="num">03</span>
            <h3>{t("pillars.3.title")}</h3>
            <p>{t("pillars.3.copy")}</p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Pillars = Pillars;