// Tractors / catalog page — rich spec tables for the three series.

function HfCatalogRow({ lang, m, flip }) {
  return (
    <article className={"hf-cat-row" + (flip ? " flip" : "")} id={m.id}>
      <div className="hf-cat-media">
        <span className={"tag" + (m.red ? " red" : "")}>{m.tag} / {hfT(lang, m.classKey)}</span>
        <image-slot id={"cat-" + m.id} shape="rect" placeholder={`Drop ${hfT(lang, m.nameKey)} photo`}
          style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
      </div>
      <div className="hf-cat-info">
        <div className="hf-cat-class">{hfT(lang, m.classKey)}</div>
        <div className="hf-cat-info-head">
          <h2 className="hf-h2 hf-cat-name">{hfT(lang, m.nameKey)}</h2>
          <span className="hf-cat-range">{m.range}</span>
        </div>
        <p className="hf-cat-desc">{hfT(lang, m.descKey)}</p>
        <table className="hf-spectable">
          <tbody>
            {m.specs.map(([labelKey, value], i) =>
              <tr key={i}>
                <td className="l">{hfT(lang, labelKey)}</td>
                <td className="v">{typeof value === "string" ? value : hfT(lang, value)}</td>
              </tr>
            )}
          </tbody>
        </table>
        <div className="hf-cat-actions">
          <HfRequestButton lang={lang} model={hfT(lang, m.nameKey)} />
          <a className="hf-btn" href="contact.html">{hfT(lang, "hi_cta_band_secondary")}</a>
        </div>
      </div>
    </article>);
}

function HfTractors({ lang, setLang }) {
  const models = [
    {
      id: "x8", tag: "01", red: true,
      nameKey: "hi_m_x8_name", classKey: "hi_m_x8_class", descKey: "pg_x8_desc",
      range: "343 hp",
      specs: [
        ["pg_spec_models", "X8.631 VT-Drive"],
        ["detail_spec_engine", "FPT NEF 6.7 L · 6-cyl · Tier 3"],
        ["detail_spec_power", "343 hp / 252 kW"],
        ["detail_spec_trans", "VT-Drive CVT · stepless"],
        ["detail_spec_hyd", "212 L/min · 4 valve pairs"],
        ["detail_spec_lift", "12 000 kg"],
        ["detail_spec_pto", "540E / 1000 / 1000E"],
        ["detail_spec_fuel", "550 L"],
        ["detail_spec_weight", "11 500 – 16 000 kg"],
      ],
    },
    {
      id: "x7", tag: "02", red: false,
      nameKey: "hi_m_x7_name", classKey: "hi_m_x7_class", descKey: "pg_x7_desc",
      range: "166 – 240 hp",
      specs: [
        ["pg_spec_models", "X7.616 – 623 P6-Drive · X7.621 – 624 VT-Drive"],
        ["detail_spec_engine", "FPT NEF 6.7 L · 6-cyl · Tier 3"],
        ["detail_spec_power", "166 – 225 hp (P6-Drive) · 210 – 240 hp (VT-Drive)"],
        ["detail_spec_trans", "Powershift 30/15 (P6-Drive) · VT-Drive CVT"],
        ["detail_spec_hyd", "123 / 160 L/min · 3–4 valve pairs"],
        ["detail_spec_lift", "9 300 kg"],
        ["detail_spec_pto", "540 / 540E / 1000 / 1000E"],
        ["detail_spec_fuel", "320 L"],
        ["detail_spec_weight", "8 000 – 13 000 kg"],
      ],
    },
    {
      id: "gmax", tag: "03", red: false,
      nameKey: "hi_m_g_name", classKey: "hi_m_g_class", descKey: "pg_gmax_desc",
      range: "117 – 158 hp",
      specs: [
        ["pg_spec_models", "G 125 / 135 / 145 / 165 Max II"],
        ["detail_spec_engine", "FPT NEF 6.7 L · 6-cyl · Tier 3"],
        ["detail_spec_power", "117 – 158 hp"],
        ["detail_spec_trans", "Mechanical 54/18 · power shuttle"],
        ["detail_spec_hyd", "110 L/min · 3 valve pairs"],
        ["detail_spec_lift", "8 400 kg"],
        ["detail_spec_pto", "540 / 1000"],
        ["detail_spec_fuel", "260 L"],
        ["detail_spec_weight", "6 250 – 11 300 kg"],
      ],
    },
  ];

  return (
    <HfPage>
      <HfHeader lang={lang} setLang={setLang} active="tractors" />
      <HfPageHero lang={lang}
        crumbKey="hi_nav_models" eyebrowKey="pg_trac_eyebrow"
        titleKey="pg_trac_title" subKey="pg_trac_sub"
        counter="03 SERIES" />

      <div className="hf-jumpbar">
        <span className="label">{hfT(lang, "pg_trac_jump")}</span>
        <a href="#x8"><span className="n">01</span>X8</a>
        <a href="#x7"><span className="n">02</span>X7</a>
        <a href="#gmax"><span className="n">03</span>G-Max</a>
      </div>

      <section className="hf-section" style={{ paddingTop: 0, paddingBottom: 0 }}>
        <div className="hf-catalog">
          {models.map((m, i) => <HfCatalogRow key={m.id} lang={lang} m={m} flip={i % 2 === 1} />)}
        </div>
      </section>

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

Object.assign(window, { HfTractors, HfCatalogRow });