/* global React */
function WhyUs() {
  const { t } = window.useT();
  const items = [
    { kicker: "01", title: t("why.1.title"), copy: t("why.1.copy") },
    { kicker: "02", title: t("why.2.title"), copy: t("why.2.copy") },
    { kicker: "03", title: t("why.3.title"), copy: t("why.3.copy") },
    { kicker: "04", title: t("why.4.title"), copy: t("why.4.copy") },
  ];
  return (
    <section className="vsc-why" data-screen-label="Why us">
      <div className="vsc-wrap">
        <div className="vsc-why-head">
          <div className="vsc-eyebrow is-light is-centered">{t("why.eyebrow")}</div>
          <h2>
            {t("why.h2.a")} <em>{t("why.h2.b")}</em><br/>{t("why.h2.c")}
          </h2>
          <p>{t("why.lead")}</p>
        </div>
        <div className="vsc-why-grid">
          {items.map((it) => (
            <div key={it.kicker} className="vsc-why-cell">
              <div className="kicker">{it.kicker}</div>
              <h3>{it.title}</h3>
              <p>{it.copy}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WhyUs = WhyUs;