// pages/gallery.jsx — Gallery with category filter

function GalleryPage() {
  const { t, lang } = useApp();
  const [active, setActive] = useState(0);
  const [lightbox, setLightbox] = useState(null);

  // Real photo pool. Category index: 0 All · 1 Rooms · 2 Common · 3 Kraków.
  // Files live under project/images/{rooms/<slug>,hostel,krakow}/.
  const R = "images/rooms/", K = "images/krakow/", H = "images/hostel/";
  const images = [
    { cat: 1, src: R + "comfort-2/01.jpg", pl: "Pokój Comfort", en: "Comfort room" },
    { cat: 2, src: H + "kitchen.jpg", pl: "Wspólna kuchnia", en: "Shared kitchen" },
    { cat: 1, src: R + "standard-1/01.jpg", pl: "Pokój Standard", en: "Standard room" },
    { cat: 3, src: K + "rynek-aerial.jpg", pl: "Rynek Główny", en: "Main Square" },
    { cat: 1, src: R + "comfort-2/02.jpg", pl: "Pokój Comfort · detal", en: "Comfort room · detail" },
    { cat: 1, src: R + "standard-1/02.jpg", pl: "Pokój Standard", en: "Standard room" },
    { cat: 3, src: K + "old-town-street.jpg", pl: "Stare Miasto", en: "Old Town" },
    { cat: 1, src: R + "comfort-1/01.jpg", pl: "Pokój Comfort I", en: "Comfort room I" },
    { cat: 1, src: R + "standard-2/01.jpg", pl: "Pokój Standard II", en: "Standard room II" },
    { cat: 3, src: K + "wawel-dusk.jpg", pl: "Wawel o zmierzchu", en: "Wawel at dusk" },
    { cat: 1, src: R + "comfort-2/03.jpg", pl: "Pokój Comfort", en: "Comfort room" },
    { cat: 1, src: R + "standard-1/03.jpg", pl: "Pokój Standard", en: "Standard room" },
    { cat: 3, src: K + "mariacka.jpg", pl: "Bazylika Mariacka", en: "St. Mary's Basilica" },
    { cat: 1, src: R + "comfort-2/04.jpg", pl: "Prywatna łazienka", en: "Private bathroom" },
    { cat: 1, src: R + "comfort-1/02.jpg", pl: "Pokój Comfort I", en: "Comfort room I" },
    { cat: 3, src: K + "old-town-carriage.jpg", pl: "Stare Miasto · dorożka", en: "Old Town · carriage" },
    { cat: 1, src: R + "comfort-2/05.jpg", pl: "Pokój Comfort", en: "Comfort room" },
    { cat: 1, src: R + "standard-1/04.jpg", pl: "Pokój Standard", en: "Standard room" },
    { cat: 3, src: K + "wawel-aerial.jpg", pl: "Wawel z lotu ptaka", en: "Wawel from above" },
    { cat: 1, src: R + "standard-2/02.jpg", pl: "Pokój Standard II", en: "Standard room II" },
    { cat: 1, src: R + "comfort-2/06.jpg", pl: "Pokój Comfort", en: "Comfort room" },
    { cat: 3, src: K + "wawel-cathedral.jpg", pl: "Katedra na Wawelu", en: "Wawel Cathedral" },
    { cat: 3, src: K + "wawel-vistula.jpg", pl: "Wawel nad Wisłą", en: "Wawel over the Vistula" },
    { cat: 3, src: K + "wawel-dusk-portrait.jpg", pl: "Wawel o zmierzchu", en: "Wawel at dusk" },
  ];

  const label = (im) => (lang === "pl" ? im.pl : im.en);
  const filtered = images.filter((im) => active === 0 || im.cat === active);

  return (
    <div className="page-enter">
      <section className="page-hero" style={{ padding: "180px 0 80px" }}>
        <div className="container">
          <div style={{ textAlign: "center" }}>
            <div className="eyebrow" style={{ marginBottom: 24, justifyContent: "center" }}>{t.gallery.eyebrow}</div>
            <h1 style={{ fontFamily: "var(--font-display)", fontSize: "clamp(56px, 8vw, 104px)", fontWeight: 400, lineHeight: 1, marginBottom: 28 }}>
              {t.gallery.title}
            </h1>
            <p className="lead" style={{ margin: "0 auto 48px" }}>{t.gallery.body}</p>
            <div style={{ display: "inline-flex", gap: 4, padding: 6, background: "var(--paper)", border: "1px solid var(--line)" }}>
              {t.gallery.cats.map((c, i) => (
                <button key={i} onClick={() => setActive(i)} style={{
                  padding: "10px 20px",
                  background: active === i ? "var(--ink)" : "transparent",
                  color: active === i ? "var(--bg)" : "var(--ink-2)",
                  border: 0,
                  fontSize: 11,
                  letterSpacing: "0.16em",
                  textTransform: "uppercase",
                  cursor: "pointer",
                  transition: "background .3s, color .3s",
                }}>
                  {c}
                </button>
              ))}
            </div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          {/* Uniform responsive grid — equal 4:3 tiles, columns auto-fill the
              width, so rows always align and there is no ragged negative space. */}
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 16 }}>
            {filtered.map((im, i) => (
              <button key={i} onClick={() => setLightbox(im)} style={{
                background: "none", border: 0, padding: 0, cursor: "zoom-in",
              }}>
                <Photo src={im.src} alt={label(im)} ratio="4/3" />
              </button>
            ))}
          </div>
        </div>
      </section>

      {lightbox && (
        <div onClick={() => setLightbox(null)} style={{
          position: "fixed", inset: 0, background: "rgba(15,12,10,.88)",
          backdropFilter: "blur(8px)", zIndex: 1000,
          display: "grid", placeItems: "center", padding: 40, cursor: "zoom-out",
        }}>
          <button onClick={(e) => { e.stopPropagation(); setLightbox(null); }} style={{
            position: "absolute", top: 24, right: 24,
            background: "rgba(255,255,255,.08)", color: "#FAF7F2",
            border: "1px solid rgba(255,255,255,.2)", padding: 12, cursor: "pointer",
          }}>
            <Ic.close />
          </button>
          <div style={{ width: "min(1100px, 92vw)" }}>
            <Photo src={lightbox.src} alt={label(lightbox)} ratio="16/9" />
            <div style={{ marginTop: 16, color: "rgba(250,247,242,.7)", fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", textAlign: "center" }}>
              {label(lightbox)} · Long Street Aparthostel
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { GalleryPage });