// Hi-Fi Homepage sections — Westenstar
// Chrome (header/footer/modal/CTA band) lives in hf-chrome.jsx.
// This file holds the home-only sections + the HfHome assembly.

// =============================================================
// HERO CAROUSEL
// =============================================================
function HfHeroCarousel({ lang }) {
  const { useState, useEffect, useRef } = React;
  const [slide, setSlide] = useState(0);
  const [paused, setPaused] = useState(false);
  const timerRef = useRef(null);

  const L = (v) => typeof v === "string" ? v : v[lang] || v.en;

  const slides = [
    {
      id: "hf-car-0",
      placeholder: "Drop photo — McCormick X8 in field at dusk",
      line1: { en: "Built to work.", tr: "Çalışmak için yapıldı." },
      line2: { en: "Worldwide.", tr: "Dünya çapında." },
      model: { en: "X8 Series", tr: "X8 Serisi" },
      cls: { en: "343 hp · High-power platform", tr: "343 hp · Yüksek güç platformu" },
      specs: [
        { l: { en: "Engine", tr: "Motor" }, v: "FPT NEF 6.7 L · 6-cyl" },
        { l: { en: "Transmission", tr: "Şanzıman" }, v: "VT-Drive CVT" },
        { l: { en: "Rear lift", tr: "Arka kaldırma" }, v: "12 000 kg" },
        { l: { en: "Availability", tr: "Stok durumu" }, v: { en: "Ex-stock · Istanbul hub", tr: "Stoktan · İstanbul deposu" } }]
    },
    {
      id: "hf-car-1",
      placeholder: "Drop photo — McCormick X7 in field",
      line1: { en: "Mid-range power.", tr: "Orta sınıf güç." },
      line2: { en: "Zero compromise.", tr: "Sıfır taviz." },
      model: { en: "X7 Series", tr: "X7 Serisi" },
      cls: { en: "166 – 240 hp · Mid-range platform", tr: "166 – 240 hp · Orta sınıf platform" },
      specs: [
        { l: { en: "Engine", tr: "Motor" }, v: "FPT NEF 6.7 L · 6-cyl" },
        { l: { en: "Transmission", tr: "Şanzıman" }, v: "P6-Drive / VT-Drive CVT" },
        { l: { en: "Rear lift", tr: "Arka kaldırma" }, v: "9 300 kg" },
        { l: { en: "Availability", tr: "Stok durumu" }, v: { en: "Ex-stock · Dubai hub", tr: "Stoktan · Dubai deposu" } }]
    },
    {
      id: "hf-car-2",
      placeholder: "Drop photo — McCormick G-Max in orchard",
      line1: { en: "Compact.", tr: "Kompakt." },
      line2: { en: "Field-ready.", tr: "Sahaya hazır." },
      model: { en: "G-Max Series", tr: "G-Max Serisi" },
      cls: { en: "117 – 158 hp · Utility platform", tr: "117 – 158 hp · Genel amaçlı platform" },
      specs: [
        { l: { en: "Engine", tr: "Motor" }, v: "FPT NEF 6.7 L · 6-cyl" },
        { l: { en: "Transmission", tr: "Şanzıman" }, v: { en: "Mechanical 54/18", tr: "Mekanik 54/18" } },
        { l: { en: "Rear lift", tr: "Arka kaldırma" }, v: "8 400 kg" },
        { l: { en: "Application", tr: "Uygulama" }, v: { en: "Mixed farming · Livestock · Transport", tr: "Karışık tarım · Hayvancılık · Taşıma" } }]
    }];

  const goTo = (i) => { setSlide((i % 3 + 3) % 3); setPaused(true); };

  useEffect(() => {
    if (paused) return;
    timerRef.current = setTimeout(() => setSlide((s) => (s + 1) % 3), 5500);
    return () => clearTimeout(timerRef.current);
  }, [slide, paused]);

  const s = slides[slide];

  return (
    <section className="hf-hero"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}>

      {slides.map((sl, i) =>
        <div key={sl.id} className="hf-hero-photo"
          style={{ opacity: i === slide ? 1 : 0, transition: "opacity 0.9s ease",
            pointerEvents: i === slide ? "auto" : "none",
            zIndex: i === slide ? 2 : 1 }}>
          <image-slot id={sl.id} shape="rect" placeholder={sl.placeholder}
            style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
        </div>
      )}

      <div className="hf-hero-inner">
        <div className="hf-hero-top">
          <span className="hf-eyebrow on-dark" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
            <span style={{ width: 8, height: 8, background: "var(--hf-red)" }}></span>
            {hfT(lang, "hi_hero_eyebrow")}
          </span>
          <span className="hf-eyebrow on-dark hf-mono" style={{ display: "inline-flex", alignItems: "center", gap: 10 }}>
            <span style={{ color: "var(--hf-red)" }}>{String(slide + 1).padStart(2, "0")}</span>
            <span style={{ opacity: 0.35 }}>·</span>
            <span>{L(s.model)}</span>
            <span style={{ opacity: 0.35 }}>/ 03</span>
          </span>
        </div>

        <div style={{ height: "23px" }}></div>

        <div className="hf-hero-bottom">
          <div className="hf-hero-headline">
            <h1 className="hf-h1 hf-display hf-hero-title">
              {L(s.line1)}<br />
              <span className="red">{L(s.line2)}</span>
            </h1>
            <p className="hf-hero-sub">{hfT(lang, "hi_hero_sub")}</p>
            <div className="hf-hero-ctas">
              <a className="hf-btn primary lg" href="contact.html">{hfT(lang, "hi_hero_cta_primary")} <span className="arrow"></span></a>
              <a className="hf-btn lg on-dark" href="tractors.html">{hfT(lang, "hi_hero_cta_secondary")}</a>
            </div>

            <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 36 }}>
              <button onClick={() => goTo(slide - 1)}
                style={{ background: "none", border: "1px solid rgba(255,255,255,0.35)", color: "#fff",
                  width: 44, height: 44, cursor: "pointer", display: "flex", alignItems: "center",
                  justifyContent: "center", fontFamily: "monospace", fontSize: 18, flexShrink: 0 }}>
                ←
              </button>
              <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
                {slides.map((_, i) =>
                  <button key={i} onClick={() => goTo(i)}
                    style={{ width: i === slide ? 28 : 8, height: 8, border: 0, padding: 0, cursor: "pointer",
                      background: i === slide ? "var(--hf-red)" : "rgba(255,255,255,0.35)",
                      transition: "width 0.35s ease, background 0.35s ease" }}>
                  </button>
                )}
              </div>
              <button onClick={() => goTo(slide + 1)}
                style={{ background: "none", border: "1px solid rgba(255,255,255,0.35)", color: "#fff",
                  width: 44, height: 44, cursor: "pointer", display: "flex", alignItems: "center",
                  justifyContent: "center", fontFamily: "monospace", fontSize: 18, flexShrink: 0 }}>
                →
              </button>
              <span className="hf-mono" style={{ fontSize: 10, color: paused ? "rgba(255,255,255,0.55)" : "rgba(255,255,255,0.3)", letterSpacing: "0.14em", marginLeft: 4 }}>
                {paused ? "■ PAUSED" : "▶ AUTO"}
              </span>
            </div>
          </div>

          <div className="hf-spec-card">
            <div className="hf-spec-card-kicker">{hfT(lang, "hi_hero_card_kicker")}</div>
            <div className="hf-spec-card-model hf-h3">{L(s.model)}</div>
            <div className="hf-spec-card-class">{L(s.cls)}</div>
            <div className="hf-spec-card-divider"></div>
            <div className="hf-spec-rows">
              {s.specs.map((sp, i) =>
                <div key={i} className="hf-spec-row">
                  <div className="hf-spec-row-l">{L(sp.l)}</div>
                  <div className="hf-spec-row-v">{L(sp.v)}</div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);
}

// =============================================================
// STAT BAND
// =============================================================
function HfStatBand({ lang }) {
  const stats = [
    ["hi_stat1_n", "hi_stat1_l"], ["hi_stat2_n", "hi_stat2_l"],
    ["hi_stat3_n", "hi_stat3_l"]];
  return (
    <div className="hf-statband">
      {stats.map(([n, l]) =>
        <div key={n} className="hf-stat">
          <div className="hf-stat-num">{hfT(lang, n)}</div>
          <div className="hf-stat-lbl">{hfT(lang, l)}</div>
        </div>
      )}
    </div>);
}

// =============================================================
// MODELS
// =============================================================
function HfModels({ lang }) {
  const models = [
    { key: "x8", tag: "01", red: true, b: "hi_m_x8" },
    { key: "x7", tag: "02", red: false, b: "hi_m_x7" },
    { key: "g", tag: "03", red: false, b: "hi_m_g" }];

  return (
    <section className="hf-section" id="nav_models">
      <div className="hf-section-head">
        <div className="left">
          <div className="hf-eyebrow hf-eyebrow-red">{hfT(lang, "hi_models_kicker")}</div>
          <h2 className="hf-h2">{hfT(lang, "hi_models_title")}</h2>
        </div>
        <div className="right" style={{ alignItems: "flex-start" }}>
          <p className="hf-body-lg">{hfT(lang, "hi_models_sub")}</p>
          <a className="hf-btn sm" href="tractors.html" style={{ marginTop: 8 }}>
            {hfT(lang, "hi_models_all")} <span className="arrow"></span>
          </a>
        </div>
      </div>

      <div className="hf-models-grid">
        {models.map(({ key, tag, red, b }) =>
          <article key={key} className="hf-model">
            <div className="hf-model-photo">
              <span className={"tag" + (red ? " red" : "")}>{tag} / {hfT(lang, b + "_class")}</span>
              <image-slot id={"hf-model-" + key} shape="rect" fit="contain" placeholder={`Drop ${hfT(lang, b + "_name")} photo`}
                style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
            </div>
            <div className="hf-model-body">
              <div className="hf-model-head">
                <h3 className="hf-h3 hf-model-name">{hfT(lang, b + "_name")}</h3>
                <span className="hf-model-range">{hfT(lang, b + "_range")}</span>
              </div>
              <p className="hf-model-use">{hfT(lang, b + "_use")}</p>
              <ul className="hf-model-bullets">
                <li>{hfT(lang, b + "_b1")}</li>
                <li>{hfT(lang, b + "_b2")}</li>
                <li>{hfT(lang, b + "_b3")}</li>
              </ul>
              <div className="hf-model-ctas">
                <HfRequestButton lang={lang} model={hfT(lang, b + "_name")} />
              </div>
            </div>
          </article>
        )}
      </div>
    </section>);
}

// =============================================================
// PARTS + SERVICE
// =============================================================
function HfPartsService({ lang }) {
  return (
    <section className="hf-section muted" id="nav_parts">
      <div className="hf-ps-grid">
        <div className="hf-ps-tile light">
          <div className="hf-eyebrow hf-eyebrow-red">{hfT(lang, "hi_ps_parts_kicker")}</div>
          <h3 className="hf-h2-sm">{hfT(lang, "hi_ps_parts_title")}</h3>
          <p className="hf-body">{hfT(lang, "hi_ps_parts_body")}</p>
          <div className="hf-ps-photo">
            <image-slot id="hf-parts" shape="rect" placeholder="Drop parts warehouse / exploded diagram photo"
              style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
          </div>
          <div className="hf-ps-tags">
            {["hi_ps_parts_tag1", "hi_ps_parts_tag2", "hi_ps_parts_tag3", "hi_ps_parts_tag4", "hi_ps_parts_tag5", "hi_ps_parts_tag6"].
              map((k) => <span key={k} className="hf-ps-tag">{hfT(lang, k)}</span>)}
          </div>
          <a className="hf-btn" href="parts.html">{hfT(lang, "hi_ps_parts_cta")} <span className="arrow"></span></a>
        </div>

        <div className="hf-ps-tile dark" id="nav_service">
          <div className="hf-eyebrow">{hfT(lang, "hi_ps_serv_kicker")}</div>
          <h3 className="hf-h2-sm" style={{ color: "#fff" }}>{hfT(lang, "hi_ps_serv_title")}</h3>
          <p className="hf-body">{hfT(lang, "hi_ps_serv_body")}</p>
          <div className="hf-ps-photo">
            <image-slot id="hf-service" shape="rect" placeholder="Drop technician / diagnostics terminal photo"
              style={{ width: "100%", height: "100%", display: "block" }}></image-slot>
          </div>
          <ul className="hf-ps-bullets">
            <li><span className="num">01</span><span>{hfT(lang, "hi_ps_serv_b1")}</span></li>
            <li><span className="num">02</span><span>{hfT(lang, "hi_ps_serv_b2")}</span></li>
            <li><span className="num">03</span><span>{hfT(lang, "hi_ps_serv_b3")}</span></li>
            <li><span className="num">04</span><span>{hfT(lang, "hi_ps_serv_b4")}</span></li>
          </ul>
          <a className="hf-btn on-dark" href="service.html">{hfT(lang, "hi_ps_serv_cta")} <span className="arrow"></span></a>
        </div>
      </div>
    </section>);
}

// =============================================================
// REGIONS (home overview)
// =============================================================
function HfRegions({ lang }) {
  const regions = [
    { num: "01", name: "hi_reg_africa", count: "hi_reg_africa_count", hub: "hi_reg_africa_hub",
      countries: [["KE", "Kenya"], ["NG", "Nigeria"], ["ET", "Ethiopia"], ["ZA", "S. Africa"], ["MA", "Morocco"], ["EG", "Egypt"], ["TZ", "Tanzania"], ["GH", "Ghana"]] },
    { num: "02", name: "hi_reg_me", count: "hi_reg_me_count", hub: "hi_reg_me_hub",
      countries: [["AE", "UAE"], ["SA", "Saudi Arabia"], ["IQ", "Iraq"], ["JO", "Jordan"], ["OM", "Oman"], ["QA", "Qatar"], ["KW", "Kuwait"]] },
    { num: "03", name: "hi_reg_ea", count: "hi_reg_ea_count", hub: "hi_reg_ea_hub",
      countries: [["MN", "Mongolia"], ["KZ", "Kazakhstan"], ["UZ", "Uzbekistan"], ["VN", "Vietnam"], ["ID", "Indonesia"], ["MY", "Malaysia"], ["HK", "Hong Kong"], ["LA", "Laos"], ["KH", "Cambodia"]] }];

  return (
    <section className="hf-section" id="nav_regions">
      <div className="hf-section-head">
        <div className="left">
          <div className="hf-eyebrow hf-eyebrow-red">{hfT(lang, "hi_reg_kicker")}</div>
          <h2 className="hf-h2">{hfT(lang, "hi_reg_title")}</h2>
        </div>
        <div className="right" style={{ alignItems: "flex-start" }}>
          <p className="hf-body-lg">{hfT(lang, "hi_reg_sub")}</p>
          <a className="hf-btn sm" href="regions.html" style={{ marginTop: 8 }}>
            {hfT(lang, "hi_nav_regions")} <span className="arrow"></span>
          </a>
        </div>
      </div>

      <div className="hf-regions">
        {regions.map((r) =>
          <div key={r.num} className="hf-region">
            <div className="hf-region-head">
              <h3 className="hf-h3 hf-region-name">{hfT(lang, r.name)}</h3>
              <span className="hf-region-num">{r.num} / 03</span>
            </div>
            <div className="hf-region-meta">
              <span>{hfT(lang, r.count)}</span>
              <span>{hfT(lang, r.hub)}</span>
            </div>
            <ul className="hf-region-countries">
              {r.countries.map(([c, n]) =>
                <li key={c}>
                  <span className="hf-flag">{c}</span>
                  <span>{n}</span>
                </li>
              )}
            </ul>
          </div>
        )}
      </div>
    </section>);
}

// =============================================================
// WHY US
// =============================================================
function HfWhy({ lang }) {
  return (
    <section className="hf-section dark">
      <div className="hf-section-head">
        <div className="left">
          <div className="hf-eyebrow hf-eyebrow-red">{hfT(lang, "hi_why_kicker")}</div>
          <h2 className="hf-h2" style={{ color: "#fff" }}>{hfT(lang, "hi_why_title")}</h2>
        </div>
        <div className="right"></div>
      </div>
      <div className="hf-why-grid">
        {[1, 2, 3, 4].map((i) =>
          <div key={i} className="hf-why" style={{ borderTopColor: i === 1 ? "var(--hf-red)" : "rgba(255,255,255,0.25)" }}>
            <div className="hf-why-n">{hfT(lang, `hi_why_${i}_n`)}</div>
            <h4 className="hf-why-title" style={{ color: "#fff" }}>{hfT(lang, `hi_why_${i}_t`)}</h4>
            <p className="hf-body" style={{ color: "rgba(255,255,255,0.7)" }}>{hfT(lang, `hi_why_${i}_b`)}</p>
          </div>
        )}
      </div>
    </section>);
}

// =============================================================
// FULL HOMEPAGE
// =============================================================
function HfHome({ lang, setLang }) {
  return (
    <HfPage>
      <HfHeader lang={lang} setLang={setLang} active={null} />
      <HfHeroCarousel lang={lang} />
      <div id="hf-s-stats"><HfStatBand lang={lang} /></div>
      <div id="hf-s-models"><HfModels lang={lang} /></div>
      <div id="hf-s-parts"><HfPartsService lang={lang} /></div>
      <div id="hf-s-regions"><HfRegions lang={lang} /></div>
      <div id="hf-s-why"><HfWhy lang={lang} /></div>
      <div id="hf-s-contact"><HfCtaBand lang={lang} /></div>
      <HfFooter lang={lang} />
    </HfPage>);
}

Object.assign(window, {
  HfHome, HfHeroCarousel, HfStatBand, HfModels, HfPartsService,
  HfRegions, HfWhy,
});