/* ============================================================================
   Photo gallery
   ========================================================================== */
function PhotoGallery({ go }) {
  return (
    <main className="wrap" style={{ paddingTop: 56, paddingBottom: 72 }}>
      <div className="section-head" style={{ marginBottom: 28 }}>
        <div>
          <Eyebrow idx="05">Photos</Eyebrow>
          <h1 className="section-title" style={{ fontSize: "var(--text-4xl)" }}>Seen, kept</h1>
        </div>
        <span className="meta-line">35mm · mostly monochrome</span>
      </div>
      <p style={{ fontFamily: "var(--font-serif)", fontSize: 18, color: "var(--fg-2)", lineHeight: 1.6, maxWidth: "52ch", margin: "0 0 36px" }}>
        A lighter surface. Frames I kept because they held still long enough to mean
        something.
      </p>
      <div className="photo-grid">
        {PHOTOS.map((ph, i) => (
          <figure className="photo-item" key={ph.id}>
            <Placeholder label={"№ " + String(i + 1).padStart(2, "0")} style={{ aspectRatio: ph.ar }} />
            <figcaption className="cap"><span>{ph.cap}</span><span>{ph.meta}</span></figcaption>
          </figure>
        ))}
      </div>
    </main>
  );
}
Object.assign(window, { PhotoGallery });