/* gallery.jsx — filterable masonry + (lightbox lives in app, opened via prop) */
const { useState: useStateG, useMemo: useMemoG } = React;

function Gallery({ openLightbox }) {
  const all = window.RIAD.gallery;
  const cats = ["All", "Courtyard", "Rooms", "Table", "Details"];
  const [cat, setCat] = useStateG("All");

  const shown = useMemoG(
    () => (cat === "All" ? all : all.filter((g) => g.cat === cat)),
    [cat, all]
  );
  // lightbox always navigates the full filtered set
  const lbImgs = shown.map((g) => ({ src: window.PX(g.id, 1700), cap: g.cap }));

  return (
    <section className="section" id="gallery" data-screen-label="Gallery">
      <div className="wrap">
        <SectionHead
          eyebrow="Gallery"
          title="A walk through the house."
          sub="The courtyard, the rooms, the table and the small details that take the longest to make."
        />
        <Reveal className="gal-filters">
          {cats.map((c) => (
            <button key={c} className={cat === c ? "on" : ""} onClick={() => setCat(c)}>{c}</button>
          ))}
        </Reveal>
        <div className="masonry">
          {shown.map((g, k) => (
            <div className="cell" key={g.id} onClick={() => openLightbox(lbImgs, k)}>
              <div className="img" style={{ backgroundImage: "url(" + window.PX(g.id, 800) + ")", paddingTop: (g.h * 100) + "%" }}></div>
              <div className="cap">{g.cap}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Gallery = Gallery;