// ─────────── About + Products + Projects ───────────

function PageHero({ eyebrow, title, lead, code }) {
  return (
    <section className="page-hero">
      <div className="container ph-grid">
        <div className="ph-text">
          <span className="eyebrow">{eyebrow}</span>
          <h1 className="h-display x1">
            {title.map((l, i) => <span key={i} style={{ display: "block" }}>{l}</span>)}
          </h1>
          {lead && <p className="ph-lead">{lead}</p>}
        </div>
        <div className="ph-meta">
          <div><span>REF</span><b>{code}</b></div>
          <div><span>UPDATED</span><b>2026.04</b></div>
          <div><span>LANG</span><b>TR / EN</b></div>
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────── About ─────────────────────── */

function AboutPage({ setRoute }) {
  const t = window.__T;
  const lang = window.__LANG;
  const timeline = window.__DATA.timeline;

  return (
    <>
      <PageHero
        eyebrow={t.about.eyebrow}
        title={t.about.title}
        lead={t.about.lead}
        code="A.00"
      />

      <section className="section about-narrative">
        <div className="container">
          <div className="an-grid">
            <div className="an-img">
              <PH label="MAĞAZA · BAHÇELİEVLER / İSTANBUL" code="A.01" scale="abt-photo" aspect="4/5" />
            </div>
            <div className="an-text">
              <span className="idx">N.01 — HİKAYE</span>
              <h2 className="h-display x3" style={{ marginTop: 12 }}>
                Küçük bir dükkanından, Türkiye'nin güvenilir yapı malzeme tedarikçisine.
              </h2>
              <p>
                1990 yılında İstanbul Bahçelievler'de küçük bir yapı malzemeleri
                dükkanı olarak başladığımız bu yolculukta, bugün Türkiye'nin dört
                bir yanına hizmet veren güvenilir bir tedarikçi haline geldik.
                TSE belgeli ürünlerimiz ve uzman ekibimizle her projeye değer katıyoruz.
              </p>
              <p>
                30 yılda büyüdük çünkü bir şey hiç değişmedi:{" "}
                <b>kalite, güven ve müşteri memnuniyeti.</b>{" "}
                5.000 üzerinde mutlu müşterimiz ve 1.000 üzerinde tamamlanan proje ile gurur duyuyoruz.
              </p>
              <div className="an-quote">
                <span style={{ fontFamily: "var(--font-display)", fontSize: 36, color: "var(--accent)" }}>"</span>
                <p>
                  Anadolu İnşaat ile çalışmak gerçekten çok profesyonelce.
                  Malzeme kalitesi ve teslimat süreçleri tam istediğimiz gibi. Kesinlikle tavsiye ediyorum.
                </p>
                <span className="an-attr">— Mustafa Özkan, İnşaat Mühendisi</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section values-section">
        <div className="container">
          <div className="section-head">
            <div className="sh-lead">
              <span className="eyebrow">{t.about.valuesTitle}</span>
              <h2 className="h-display x2">Dört değer, tek söz.</h2>
            </div>
            <p className="sh-meta">
              30 yıllık hikayemiz boyunca değişmeyen, hatta her geçen yıl daha kalın
              kafamıza kazıdığımız dört prensip.
            </p>
          </div>
          <div className="val-grid">
            {t.about.values.map((v, i) => (
              <Fade key={v.k} delay={i * 70}>
                <div className="val-cell">
                  <div className="vc-top">
                    <span className="idx">V.0{i + 1}</span>
                    <Mark size={18} />
                  </div>
                  <div className="h-display x3 vc-k">{v.k}</div>
                  <p>{v.v}</p>
                </div>
              </Fade>
            ))}
          </div>
        </div>
      </section>

      <section className="section timeline-section">
        <div className="container">
          <div className="section-head">
            <div className="sh-lead">
              <span className="eyebrow">{t.about.timelineTitle}</span>
              <h2 className="h-display x2">1990 → 2026.</h2>
            </div>
            <p className="sh-meta">
              Bir dükkanından başlayan yol — 30 yıl, 5.000+ müşteri, 1.000+ tamamlanan proje.
            </p>
          </div>
          <div className="tl">
            {timeline.map((e, i) => (
              <Fade key={e.year} delay={i * 50}>
                <div className="tl-row">
                  <div className="tl-y">
                    <span className="h-display x3">{e.year}</span>
                  </div>
                  <div className="tl-dot" />
                  <div className="tl-text">{e[lang]}</div>
                </div>
              </Fade>
            ))}
          </div>
        </div>
      </section>

      {/* certifications strip */}
      <section className="section compact" style={{ borderTop: "1px solid var(--line)" }}>
        <div className="container">
          <div className="cert-strip">
            <span className="eyebrow no-rule">{t.common.cert}</span>
            <div className="cert-list">
              {["CE", "TSE", "ISO 9001:2015", "ISO 14001:2015", "OHSAS 18001", "ISO 45001", "TÜV NORD"].map((c) => (
                <div key={c} className="cert-badge">
                  <Mark size={14} />
                  <span>{c}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      <CTASection setRoute={setRoute} />
    </>
  );
}

/* ─────────────────────── Products ─────────────────────── */

function ProductsPage({ setRoute }) {
  const t = window.__T;
  const lang = window.__LANG;
  const cats = window.__DATA.productCategories;
  const [active, setActive] = useState("all");

  const filtered = active === "all" ? cats : cats.filter((c) => c.id === active);

  return (
    <>
      <PageHero
        eyebrow={t.products.eyebrow}
        title={t.products.title}
        lead={t.products.lead}
        code="P.00"
      />

      <section className="section compact products-filter">
        <div className="container">
          <div className="pf-grid">
            <div className="pf-label">
              <span className="idx">F.01</span>
              <span>{t.products.filter}</span>
            </div>
            <div className="pf-buttons">
              <button onClick={() => setActive("all")} className={active === "all" ? "act" : ""}>
                {t.products.all}
                <span>{cats.reduce((a, c) => a + c.products.length, 0)}</span>
              </button>
              {cats.map((c) => (
                <button key={c.id} onClick={() => setActive(c.id)} className={active === c.id ? "act" : ""}>
                  {c[lang]}
                  <span>{c.products.length}</span>
                </button>
              ))}
            </div>
            <div className="pf-actions">
              <button className="btn ghost">{t.common.ourCatalog} <Arr /></button>
            </div>
          </div>
        </div>
      </section>

      {filtered.map((c, ci) => (
        <section key={c.id} className="section compact prod-family" id={c.id}>
          <div className="container">
            <div className="pfam-head">
              <div className="pfam-l">
                <span className="idx">{c.code}</span>
                <h2 className="h-display x2">{c[lang]}</h2>
              </div>
              <p className="pfam-d">{c.desc[lang]}</p>
            </div>
            <div className="pfam-grid">
              <div className="pfam-img">
                <PH label={c[lang]} code={c.code} scale="family" aspect="4/5" />
              </div>
              <div className="pfam-list">
                {c.products.map((p, pi) => (
                  <Fade key={p.code} delay={pi * 30}>
                    <div className="prod-row">
                      <div className="pr-l">
                        <span className="idx" style={{ width: 60 }}>{p.code}</span>
                        <span className="pr-name">{p[lang]}</span>
                      </div>
                      <div className="pr-r">
                        <span className={`stock ${p.stock ? "in" : "out"}`}>
                          ● {p.stock ? t.products.stockBadge : t.products.orderBadge}
                        </span>
                        <button className="pr-btn" onClick={() => setRoute("quote")}>
                          {t.nav.quote} <Arr size={10} />
                        </button>
                      </div>
                    </div>
                  </Fade>
                ))}
              </div>
            </div>
          </div>
        </section>
      ))}

      <CTASection setRoute={setRoute} />
    </>
  );
}

/* ─────────────────────── Projects ─────────────────────── */

function ProjectsPage({ setRoute }) {
  const t = window.__T;
  const lang = window.__LANG;
  const projects = window.__DATA.projects;
  const sectors = useMemo(() => {
    const set = new Set();
    projects.forEach((p) => set.add(lang === "tr" ? p.sectorTr : p.sectorEn));
    return ["all", ...Array.from(set)];
  }, [lang]);
  const [sector, setSector] = useState("all");

  const list = sector === "all"
    ? projects
    : projects.filter((p) => (lang === "tr" ? p.sectorTr : p.sectorEn) === sector);

  return (
    <>
      <PageHero
        eyebrow={t.projects.eyebrow}
        title={t.projects.title}
        lead={t.projects.lead}
        code="R.00"
      />

      {/* sector filter */}
      <section className="section compact">
        <div className="container">
          <div className="pf-grid">
            <div className="pf-label">
              <span className="idx">F.02</span>
              <span>{lang === "tr" ? "Sektör filtresi" : "Sector filter"}</span>
            </div>
            <div className="pf-buttons">
              {sectors.map((s) => (
                <button key={s} onClick={() => setSector(s)} className={sector === s ? "act" : ""}>
                  {s === "all" ? (lang === "tr" ? "Tümü" : "All") : s}
                  <span>{s === "all" ? projects.length :
                    projects.filter((p) => (lang === "tr" ? p.sectorTr : p.sectorEn) === s).length}</span>
                </button>
              ))}
            </div>
            <div className="pf-actions" />
          </div>
        </div>
      </section>

      {/* big project grid - masonry-style */}
      <section className="section compact">
        <div className="container">
          <div className="proj-grid">
            {list.map((p, i) => {
              const big = i % 5 === 0;
              return (
                <Fade key={p.code} delay={i * 40}>
                  <article className={`proj-card ${big ? "proj-big" : ""}`}>
                    <div className="proj-img">
                      <PH
                        label={p[lang]}
                        code={p.code}
                        scale="project"
                        aspect={big ? "16/9" : "4/3"}
                      />
                    </div>
                    <div className="proj-info">
                      <div className="proj-top">
                        <span className="idx">{p.code} · {p.year}</span>
                        <span className="tag">{lang === "tr" ? p.sectorTr : p.sectorEn}</span>
                      </div>
                      <h3 className="h-display x3" style={{ marginTop: 14 }}>{p[lang]}</h3>
                      <div className="proj-specs">
                        <div><span>{lang === "tr" ? "Şehir" : "City"}</span><b>{lang === "tr" ? p.cityTr : p.cityEn}</b></div>
                        <div><span>{lang === "tr" ? "Ölçek" : "Scale"}</span><b>{lang === "tr" ? p.scaleTr : p.scaleEn}</b></div>
                        <div><span>{lang === "tr" ? "Kapsam" : "Scope"}</span><b>{lang === "tr" ? p.scopeTr : p.scopeEn}</b></div>
                      </div>
                    </div>
                  </article>
                </Fade>
              );
            })}
          </div>
        </div>
      </section>

      {/* references list */}
      <section className="section compact references-detail">
        <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">
              {lang === "tr"
                ? "Düzenli olarak çalıştığımız müteahhit, müşavir ve mal sahibi firmalardan bazıları."
                : "A selection of contractors, consultants and owners we work with regularly."}
            </p>
          </div>
          <div className="ref-grid">
            {window.__DATA.references.map((r, i) => (
              <div key={r} className="ref-cell">
                <span className="idx" style={{ fontSize: 10 }}>R.{String(i + 1).padStart(2, "0")}</span>
                <Mark size={20} />
                <span style={{ fontFamily: "var(--font-display)", letterSpacing: "0.04em", textTransform: "uppercase", fontSize: 14 }}>{r}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTASection setRoute={setRoute} />
    </>
  );
}

Object.assign(window, { PageHero, AboutPage, ProductsPage, ProjectsPage });