/* global React, Crumbs */
/* ============================================================================
   sections/gallery.jsx — the "gallery/" section.
   ----------------------------------------------------------------------------
   A masonry of travel photos from data.photography. No captions — the photos
   speak for themselves.

   📷 ADDING MORE PHOTOS
     1. Drop the file into  public/images/gallery/
     2. In src/data.js, add an entry to `photography`:
            { id: "p8", image: "public/images/gallery/photo-08.jpg" }
   ============================================================================ */
function ViewGallery({ data }) {
  const photos = data.photography.filter((ph) => ph.image);
  return (
    <>
      <Crumbs parts={["~", "portfolio", "gallery/"]} />
      <h1 className="rm-h1"><span className="hash">#</span>Gallery</h1>
      <div className="rm-prose">
        <p style={{ color: "var(--muted)" }}>
          A small selection from recent travel. Mostly quiet, mostly accidents. The
          full gallery, with more photos and videos, lives at{" "}
          <a className="link" href={`https://${data.person.gallery}`} data-cursor-label="open">{data.person.gallery}</a>.
        </p>

        <div className="rm-pho-grid">
          {photos.map((ph) => (
            <figure key={ph.id} className="rm-pho" data-cursor-label="view">
              <img src={ph.image} alt="" />
            </figure>
          ))}
        </div>
      </div>
    </>
  );
}

Object.assign(window, { ViewGallery });