// ─────────── Home page ───────────

function Hero({ heroStyle, setRoute }) {
  const t = window.__T;
  if (heroStyle === "split") return <HeroSplit setRoute={setRoute} />;
  if (heroStyle === "editorial") return <HeroEditorial setRoute={setRoute} />;
  return <HeroFull setRoute={setRoute} />;
}

function HeroFull({ setRoute }) {
  const t = window.__T;
  return (
    <section className="hero hero-full">
      <div className="hero-bg">
        <PH label="HERO ŞANTİYE FOTOĞRAFI" code="H.01" scale="full-bleed" />
        <div className="hero-vignette" />
      </div>
      <div className="container hero-inner">
        <div className="hero-top">
          <span className="eyebrow">{t.home.eyebrow}</span>
          <span className="tag accent">▢ canlı stok · 12.483 SKU</span>
        </div>
        <h1 className="h-display x1 hero-title">
          {t.home.heroTitle.map((line, i) => (
            <span key={i} className="hero-line">
              <span>{line}</span>
            </span>
          ))}
        </h1>
        <div className="hero-bottom">
          <p className="hero-lead">{t.home.heroLead}</p>
          <div className="hero-cta">
            <button className="btn solid" onClick={() => setRoute("quote")}>
              {t.nav.quote} <Arr />
            </button>
            <button className="btn ghost" onClick={() => setRoute("products")}>
              {t.nav.products}
            </button>
          </div>
        </div>
        <div className="hero-rail">
          {["F.01 ÇELİK", "F.02 BETON", "F.03 KABA", "F.04 BOYA", "F.05 YALITIM", "F.06 TESİSAT", "F.07 İNCE", "F.08 EKİPMAN"].map((x) => (
            <span key={x}>{x}</span>
          ))}
        </div>
      </div>
    </section>
  );
}

function HeroSplit({ setRoute }) {
  const t = window.__T;
  return (
    <section className="hero hero-split">
      <div className="container hs-grid">
        <div className="hs-left">
          <span className="eyebrow">{t.home.eyebrow}</span>
          <h1 className="h-display x1">
            {t.home.heroTitle.map((line, i) => (
              <span key={i} style={{ display: "block" }}>{line}</span>
            ))}
          </h1>
          <p style={{ color: "var(--text-mute)", maxWidth: 480, fontSize: 16, lineHeight: 1.55 }}>
            {t.home.heroLead}
          </p>
          <div className="row" style={{ gap: 12, marginTop: 28 }}>
            <button className="btn solid" onClick={() => setRoute("quote")}>{t.nav.quote} <Arr /></button>
            <button className="btn" onClick={() => setRoute("products")}>{t.nav.products}</button>
          </div>
          <div className="hs-stats">
            {t.home.stats.slice(0, 3).map((s) => (
              <div key={s.l}>
                <div className="h-display x3">{s.k}</div>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-mute)" }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
        <div className="hs-right">
          <PH label="ŞANTİYE / STEEL CLOSEUP" code="H.02" scale="hero-side" aspect="4/5" />
          <div className="hs-stamp">
            <Mark size={20} />
            <div>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-mute)" }}>VERIFIED · 2026</div>
              <div style={{ fontFamily: "var(--font-display)", fontSize: 16, letterSpacing: "0.04em", textTransform: "uppercase" }}>CE · TSE · ISO 9001</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroEditorial({ setRoute }) {
  const t = window.__T;
  return (
    <section className="hero hero-edit">
      <div className="container he-grid">
        <div className="he-top">
          <span className="eyebrow">{t.home.eyebrow}</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--text-mute)" }}>
            38.6500° N · 35.4828° E
          </span>
        </div>
        <h1 className="h-display x1 he-title">
          <span className="he-l1">{t.home.heroTitle[0]}</span>
          <span className="he-l2">
            <span className="he-img-inline"><PH label="DETAY" code="—" scale="inline" aspect="2/1" /></span>
            {t.home.heroTitle[1]}
          </span>
          <span className="he-l3">{t.home.heroTitle[2]}</span>
        </h1>
        <div className="he-bottom">
          <p style={{ color: "var(--text-mute)", fontSize: 15, maxWidth: 420 }}>{t.home.heroLead}</p>
          <div className="row">
            <button className="btn solid" onClick={() => setRoute("quote")}>{t.nav.quote} <Arr /></button>
            <button className="btn ghost" onClick={() => setRoute("about")}>{t.nav.about}</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsStrip() {
  const t = window.__T;
  return (
    <section className="stats-strip">
      <div className="container">
        <div className="ss-grid">
          {t.home.stats.map((s, i) => (
            <Fade key={s.l} delay={i * 70}>
              <div className="ss-cell">
                <span className="idx">S.0{i + 1}</span>
                <div className="h-display x2 ss-k">{s.k}</div>
                <div className="ss-l">{s.l}</div>
              </div>
            </Fade>
          ))}
        </div>
      </div>
    </section>
  );
}

function HomeCategories({ setRoute }) {
  const t = window.__T;
  const lang = window.__LANG;
  const cats = window.__DATA.productCategories;
  return (
    <section className="section" id="categories">
      <div className="container">
        <div className="section-head">
          <div className="sh-lead">
            <span className="eyebrow">{t.home.catEyebrow}</span>
            <h2 className="h-display x2">{t.home.catTitle}</h2>
          </div>
          <p className="sh-meta">{t.home.catMeta}</p>
        </div>
        <div className="cat-grid">
          {cats.map((c, i) => (
            <Fade key={c.id} delay={i * 40}>
              <a href="#/products" onClick={(e) => { e.preventDefault(); setRoute("products"); }}
                className="cat-cell">
                <div className="cc-top">
                  <span className="idx">{c.code}</span>
                  <span className="cc-cnt">{c.products.length} kalem</span>
                </div>
                <div className="cc-mid">
                  <PH label={c[lang].toUpperCase()} code={c.code} scale="cat-thumb" aspect="3/2" />
                </div>
                <div className="cc-bot">
                  <div>
                    <div className="h-display x4 cc-title">{c[lang]}</div>
                    <p className="cc-desc">{c.desc[lang]}</p>
                  </div>
                  <Arr size={14} />
                </div>
              </a>
            </Fade>
          ))}
        </div>
      </div>
    </section>
  );
}

function FeaturedProjects({ setRoute }) {
  const t = window.__T;
  const lang = window.__LANG;
  const items = window.__DATA.projects.slice(0, 4);
  return (
    <section className="section featured-projects">
      <div className="container">
        <div className="section-head">
          <div className="sh-lead">
            <span className="eyebrow">{t.home.featEyebrow}</span>
            <h2 className="h-display x2">{t.home.featTitle}</h2>
          </div>
          <p className="sh-meta">{t.home.featMeta}</p>
        </div>
        <div className="fp-grid">
          {items.map((p, i) => (
            <Fade key={p.code} delay={i * 60}>
              <a href="#/projects" onClick={(e) => { e.preventDefault(); setRoute("projects"); }} className="fp-cell">
                <div className="fp-img">
                  <PH label={p[lang]} code={p.code} scale="project" aspect={i % 3 === 0 ? "1/1" : "4/3"} />
                  <div className="fp-overlay">
                    <span className="tag accent">{p.code}</span>
                  </div>
                </div>
                <div className="fp-meta">
                  <div className="fp-meta-l">
                    <div className="h-display x4">{p[lang]}</div>
                    <div className="fp-tags">
                      <span>{p[`sector${lang === "tr" ? "Tr" : "En"}`]}</span>
                      <span>·</span>
                      <span>{p[`city${lang === "tr" ? "Tr" : "En"}`]}</span>
                      <span>·</span>
                      <span>{p.year}</span>
                    </div>
                  </div>
                  <Arr size={14} />
                </div>
              </a>
            </Fade>
          ))}
        </div>
        <div style={{ textAlign: "center", marginTop: 56 }}>
          <button className="btn" onClick={() => setRoute("projects")}>
            {t.common.viewAll} · {window.__DATA.projects.length} {t.nav.projects.toLowerCase()} <Arr />
          </button>
        </div>
      </div>
    </section>
  );
}

function ReferencesMarquee() {
  const t = window.__T;
  const refs = window.__DATA.references;
  const doubled = [...refs, ...refs];
  return (
    <section className="section compact references" >
      <div className="container">
        <div className="section-head">
          <div className="sh-lead">
            <span className="eyebrow">{t.home.refsEyebrow}</span>
            <h2 className="h-display x2">{t.home.refsTitle}</h2>
          </div>
          <p className="sh-meta">{window.__T.home.featMeta}</p>
        </div>
      </div>
      <div className="ref-marquee">
        <div className="ref-track">
          {doubled.map((r, i) => (
            <div key={i} className="ref-logo">
              <Mark size={18} />
              <span>{r}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection({ setRoute }) {
  const t = window.__T;
  return (
    <section className="section cta-section">
      <div className="container">
        <Fade>
          <div className="cta-box">
            <div className="cta-top">
              <span className="eyebrow">{t.home.ctaEyebrow}</span>
              <span className="idx">— S.09 / 09</span>
            </div>
            <h2 className="h-display x1 cta-title">
              {t.home.ctaTitle.map((l, i) => <span key={i} style={{ display: "block" }}>{l}</span>)}
            </h2>
            <div className="cta-bot">
              <p className="cta-lead">{t.home.ctaMeta}</p>
              <div className="row">
                <button className="btn solid" onClick={() => setRoute("quote")}>{t.nav.quote} <Arr /></button>
                <button className="btn ghost" onClick={() => setRoute("contact")}>{t.nav.contact}</button>
              </div>
            </div>
            <div className="cta-strip">
              {["WhatsApp +90 532 117 90 00", "satis@anadoluinsaat.com.tr", "7/24 sipariş portalı"].map((x) => (
                <span key={x}>{x}</span>
              ))}
            </div>
          </div>
        </Fade>
      </div>
    </section>
  );
}

function HomePage({ heroStyle, setRoute }) {
  return (
    <>
      <Hero heroStyle={heroStyle} setRoute={setRoute} />
      <StatsStrip />
      <HomeCategories setRoute={setRoute} />
      <FeaturedProjects setRoute={setRoute} />
      <ReferencesMarquee />
      <CTASection setRoute={setRoute} />
    </>
  );
}

Object.assign(window, {
  HomePage, Hero, HeroFull, HeroSplit, HeroEditorial,
  StatsStrip, HomeCategories, FeaturedProjects, ReferencesMarquee, CTASection,
});