// gallery-page.jsx — tüm galeri fotoğraflarını listeleyen ayrı sayfa (header'daki
// "Galeri" linki artık anasayfadaki bölüme kaymak yerine buraya yönlendirir)
const { useEffect: useEffectGalP } = React;

function GalleryPage({ lang, setLang }) {
  const c = window.CONTENT[lang];
  const g = c.gallery;
  const items = (g && g.items) || [];

  useEffectGalP(() => { window.scrollTo(0, 0); }, []);

  return (
    <div style={{ backgroundColor: "#faf7f2" }}>
      <Nav c={c} lang={lang} setLang={setLang} />
      <main className="pt-[110px] lg:pt-[128px]">
        <section className="mx-auto max-w-[1240px] px-6 lg:px-10 pb-6">
          <nav className="flex items-center gap-2 text-ink/45" style={{ fontSize: 13 }}>
            <a href="/" className="hover:text-ink transition-colors">{c.pdp.home}</a>
            <span>/</span>
            <span className="text-ink/70">{c.nav.gallery}</span>
          </nav>
          <Eyebrow className="mt-8">{g.eyebrow}</Eyebrow>
          <h1 className="font-serif text-ink mt-5" style={{ fontSize: "clamp(30px,4vw,52px)", lineHeight: 1.08, letterSpacing: "-0.01em" }}>
            {g.title}
          </h1>
          <p className="text-ink/60 mt-4 max-w-xl" style={{ fontSize: 15, lineHeight: 1.7 }}>{g.sub}</p>
        </section>

        <section className="mx-auto max-w-[1240px] px-6 lg:px-10 pb-28">
          {items.length === 0
            ? <p className="text-ink/50" style={{ fontSize: 15 }}>{lang === "tr" ? "Henüz fotoğraf eklenmedi." : "No photos yet."}</p>
            : <GalleryGrid items={items} />}
        </section>
      </main>
      <Footer c={c} />
    </div>
  );
}

Object.assign(window, { GalleryPage });