// Regions of supply page — map + three region detail blocks.

function HfRegionsPage({ lang, setLang }) {
  const regions = [
    { num: "01", nameKey: "hi_reg_africa", markets: "8", warehouse: "Mombasa, KE", leadKey: "pg_reg_africa_lead",
      countries: [["KE", "Kenya"], ["NG", "Nigeria"], ["ET", "Ethiopia"], ["ZA", "South Africa"], ["MA", "Morocco"], ["EG", "Egypt"], ["TZ", "Tanzania"], ["GH", "Ghana"]] },
    { num: "02", nameKey: "hi_reg_me", markets: "7", warehouse: "Jebel Ali, AE", leadKey: "pg_reg_me_lead",
      countries: [["AE", "UAE"], ["SA", "Saudi Arabia"], ["IQ", "Iraq"], ["JO", "Jordan"], ["OM", "Oman"], ["QA", "Qatar"], ["KW", "Kuwait"]] },
    { num: "03", nameKey: "hi_reg_ea", markets: "9", warehouse: "Istanbul, TR", leadKey: "pg_reg_ea_lead",
      countries: [["MN", "Mongolia"], ["KZ", "Kazakhstan"], ["UZ", "Uzbekistan"], ["VN", "Vietnam"], ["ID", "Indonesia"], ["MY", "Malaysia"], ["HK", "Hong Kong"], ["LA", "Laos"], ["KH", "Cambodia"]] }];

  return (
    <HfPage>
      <HfHeader lang={lang} setLang={setLang} active="regions" />
      <HfPageHero lang={lang}
        crumbKey="hi_nav_regions" eyebrowKey="hi_reg_kicker"
        titleKey="hi_reg_title" subKey="hi_reg_sub"
        counter="3 HUBS" />

      {/* Region blocks */}
      <section className="hf-section">
        <div className="hf-regions-page">
          {regions.map((r) =>
            <div key={r.num} className="hf-region-block">
              <div className="num">{r.num}</div>
              <div className="side">
                <h2 className="hf-h2 name">{hfT(lang, r.nameKey)}</h2>
                <div style={{ width: 32, height: 2, background: "var(--hf-red)" }}></div>
                <div className="hf-region-stats">
                  <div className="row"><span className="k">{hfT(lang, "pg_reg_markets")}</span><span className="v">{r.markets}</span></div>
                  <div className="row"><span className="k">{hfT(lang, "pg_reg_warehouse")}</span><span className="v">{r.warehouse}</span></div>
                  <div className="row"><span className="k">{hfT(lang, "pg_reg_lead")}</span><span className="v">{hfT(lang, r.leadKey)}</span></div>
                </div>
              </div>
              <div>
                <div className="markets-label">{hfT(lang, "pg_reg_markets")}</div>
                <ul className="markets">
                  {r.countries.map(([c, n]) =>
                    <li key={c}><span className="hf-flag">{c}</span><span>{n}</span></li>
                  )}
                </ul>
              </div>
            </div>
          )}
        </div>
      </section>

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

Object.assign(window, { HfRegionsPage });