// Parts & Equipment page — category grid + ordering flow.

function HfParts({ lang, setLang }) {
  const cats = ["parts_cat1", "parts_cat2", "parts_cat3", "parts_cat4",
                "parts_cat5", "parts_cat6", "parts_cat7", "parts_cat8"];
  const flow = [
    ["01", "pg_pf1_t", "pg_pf1_b"], ["02", "pg_pf2_t", "pg_pf2_b"],
    ["03", "pg_pf3_t", "pg_pf3_b"], ["04", "pg_pf4_t", "pg_pf4_b"]];

  return (
    <HfPage>
      <HfHeader lang={lang} setLang={setLang} active="parts" />
      <HfPageHero lang={lang}
        crumbKey="hi_nav_parts" eyebrowKey="hi_ps_parts_kicker"
        titleKey="hi_ps_parts_title" subKey="hi_ps_parts_body"
        counter="12 000+ REF" />

      {/* Category grid */}
      <section className="hf-section">
        <div className="hf-section-head">
          <div className="left">
            <div className="hf-eyebrow hf-eyebrow-red">{hfT(lang, "sec_parts_kicker")}</div>
            <h2 className="hf-h2">{hfT(lang, "sec_parts_title")}</h2>
          </div>
          <div className="right" style={{ alignItems: "flex-start" }}>
            <p className="hf-body-lg">{hfT(lang, "parts_sub")}</p>
          </div>
        </div>

        <div className="hf-parts-grid">
          {cats.map((k, i) =>
            <div key={k} className="hf-pcat">
              <div className="hf-pcat-photo">
                <image-slot id={"parts-" + (i + 1)} shape="rect" placeholder={hfT(lang, k)}
                  style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
              </div>
              <div className="hf-pcat-body">
                <div className="hf-pcat-n">{String(i + 1).padStart(2, "0")}</div>
                <div className="hf-pcat-title">{hfT(lang, k)}</div>
                <p className="hf-pcat-desc">{hfT(lang, k + "_d")}</p>
              </div>
            </div>
          )}
        </div>
      </section>

      {/* Ordering flow */}
      <section className="hf-section dark">
        <div className="hf-section-head">
          <div className="left">
            <div className="hf-eyebrow hf-eyebrow-red">{hfT(lang, "pg_parts_flow_kicker")}</div>
            <h2 className="hf-h2" style={{ color: "#fff" }}>{hfT(lang, "pg_parts_flow_title")}</h2>
          </div>
          <div className="right"></div>
        </div>
        <div className="hf-steps">
          {flow.map(([n, t, b]) =>
            <div key={n} className="hf-step">
              <div className="hf-step-n">{n}</div>
              <div className="hf-step-t" style={{ color: "#fff" }}>{hfT(lang, t)}</div>
              <p className="hf-body" style={{ color: "rgba(255,255,255,0.7)" }}>{hfT(lang, b)}</p>
            </div>
          )}
        </div>
      </section>

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

Object.assign(window, { HfParts });