// Service & Maintenance page — pillars + service commitments.

function HfService({ lang, setLang }) {
  const pillars = [
    ["01", "service_b1_t", "service_b1_b", "Warranty desk"],
    ["02", "service_b2_t", "service_b2_b", "Diagnostics terminal"],
    ["03", "service_b3_t", "service_b3_b", "Field technician"],
    ["04", "service_b4_t", "service_b4_b", "Operator training"]];
  const sla = [
    ["pg_serv_sla1_n", "pg_serv_sla1_l"], ["pg_serv_sla2_n", "pg_serv_sla2_l"],
    ["pg_serv_sla3_n", "pg_serv_sla3_l"], ["pg_serv_sla4_n", "pg_serv_sla4_l"]];

  return (
    <HfPage>
      <HfHeader lang={lang} setLang={setLang} active="service" />
      <HfPageHero lang={lang}
        crumbKey="hi_nav_service" eyebrowKey="hi_ps_serv_kicker"
        titleKey="hi_ps_serv_title" subKey="hi_ps_serv_body"
        counter="CERTIFIED" />

      {/* Pillars */}
      <section className="hf-section">
        <div className="hf-section-head">
          <div className="left">
            <div className="hf-eyebrow hf-eyebrow-red">{hfT(lang, "sec_service_kicker")}</div>
            <h2 className="hf-h2">{hfT(lang, "sec_service_title")}</h2>
          </div>
          <div className="right" style={{ alignItems: "flex-start" }}>
            <p className="hf-body-lg">{hfT(lang, "service_sub")}</p>
          </div>
        </div>

        <div className="hf-pillars">
          {pillars.map(([n, t, b, ph]) =>
            <div key={n} className="hf-pillar">
              <div className="hf-pillar-photo">
                <image-slot id={"service-" + n} shape="rect" placeholder={ph}
                  style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
              </div>
              <div className="hf-pillar-body">
                <div className="hf-pillar-n">{n} / 04</div>
                <h3 className="hf-pillar-t">{hfT(lang, t)}</h3>
                <p className="hf-body" style={{ fontSize: 14 }}>{hfT(lang, b)}</p>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Service commitments */}
      <section className="hf-section dark">
        <div className="hf-section-head">
          <div className="left">
            <div className="hf-eyebrow hf-eyebrow-red">{hfT(lang, "pg_serv_sla_kicker")}</div>
            <h2 className="hf-h2" style={{ color: "#fff" }}>{hfT(lang, "pg_serv_sla_title")}</h2>
          </div>
          <div className="right"></div>
        </div>
        <div className="hf-statband" style={{ borderColor: "#1f1f1f" }}>
          {sla.map(([n, l]) =>
            <div key={n} className="hf-stat">
              <div className="hf-stat-num" style={{ color: "#fff" }}>{hfT(lang, n)}</div>
              <div className="hf-stat-lbl">{hfT(lang, l)}</div>
            </div>
          )}
        </div>
      </section>

      <HfCtaBand lang={lang} />
      <HfFooter lang={lang} />
    </HfPage>);
}

Object.assign(window, { HfService });