// Gallery — split into two collections: Cities (street, garage, non-circuit) and Track (Sepang).
// Each collection has its own grid, its own lightbox, and its own keyboard navigation scope.

const GALLERY_CITIES = [
  // Row 1 — full bleed hero
  { src: "uploads/photos/20200315_150750_01.jpg", alt: "Front-on through the Singapore CBD canyon", loc: "Singapore CBD", when: "Mar 2020 · Day", ratio: "3 / 2", span: "full" },
  // Row 2 — sq + wide  (CBD portrait pair — front + rear down the canyon)
  { src: "uploads/photos/20200315_150750_03.jpg", alt: "Front three-quarter low between CBD towers", loc: "Singapore CBD", when: "Mar 2020 · Day", ratio: "2 / 3", span: "sq" },
  { src: "uploads/photos/20200315_150750_07.jpg", alt: "Side profile against Hamburg Süd containers", loc: "Tanjong Pagar Port", when: "Mar 2020 · Day", ratio: "3 / 2", span: "wide" },
  // Row 3 — wide + sq
  { src: "uploads/photos/20200315_150752_16.jpg", alt: "Front three-quarter against an industrial steel-frame structure", loc: "Tanjong Pagar Port", when: "Mar 2020 · Day", ratio: "3 / 2", span: "wide" },
  { src: "uploads/photos/20200315_150750_04.jpg", alt: "Rear walk-away through the CBD canyon, twin tips visible", loc: "Singapore CBD", when: "Mar 2020 · Day", ratio: "2 / 3", span: "sq" },
  // Row 4 — sq + wide  (alt CBD angle + JB roadside trio with the GTI and Swift)
  { src: "uploads/photos/20200315_151320.jpeg", alt: "Singapore CBD alternate angle", loc: "Singapore", when: "Mar 2020 · Day", ratio: "1 / 1", span: "sq" },
  { src: "uploads/photos/jb_roadside_trio.jpeg", alt: "Roadside lineup with a Swift and a black i30 N, Johor jungle backdrop", loc: "Johor", when: "Convoy roadside", ratio: "3 / 2", span: "wide" },
  // Row 5 — wide + sq  (Johor convoy + dusk detail)
  { src: "uploads/photos/20260425_221610_07.jpeg", alt: "Side panning through Johor shophouses on the convoy north", loc: "Johor", when: "Apr 2026 · Day", ratio: "3 / 2", span: "wide" },
  { src: "uploads/photos/20260425_221610_02.jpeg", alt: "Front detail at dusk, Malaysian suburb backdrop", loc: "Johor", when: "Apr 2026 · Dusk", ratio: "2 / 3", span: "sq" },
  // Row 6 — sq + wide  (detailing + Caltex fuel)
  { src: "uploads/photos/newage_polishing.jpeg", alt: "White i30 N being polished at NewAge Polish", loc: "Singapore", when: "Detailing day", ratio: "3 / 4", span: "sq" },
  { src: "uploads/photos/20260425_221610_03.jpeg", alt: "Front three-quarter at a Caltex petrol station, Malaysia", loc: "Johor", when: "Apr 2026 · Dusk", ratio: "3 / 2", span: "wide" },
  // Row 7 — wide + sq  (Millenia carpark red-glow rear closes the chapter)
  { src: "uploads/photos/20200316_075744.jpeg", alt: "Rear under red service-bay strip lights, Millenia Tower carpark", loc: "Millenia Tower B2", when: "Carpark · Red glow", ratio: "2 / 3", span: "wide" },
  { src: "uploads/photos/20260425_221337_02_clean.jpeg", alt: "Shell V-Power fuel stop before crossing the Causeway", loc: "Singapore", when: "Pre-trip · Fuel up", ratio: "3 / 2", span: "sq" },
];

const GALLERY_TRACK = [
  // Row 1 — wide + sq
  { src: "uploads/photos/20221128_191503_replacement.jpg", alt: "Sunset silhouette at Sepang", loc: "Sepang", when: "Nov 2022 · Dusk", ratio: "3 / 2", span: "wide" },
  { src: "uploads/photos/20260425_221501_03_clean.jpeg", alt: "Rear three-quarter at Sepang, dry session", loc: "Sepang", when: "Apr 2026 · Dry", ratio: "2 / 3", span: "sq" },
  // Row 2 — sq + wide
  { src: "uploads/photos/20250928_161814_clean3.jpg", alt: "Daytime panning, main straight", loc: "Sepang", when: "Sep 2025 · Day", ratio: "1 / 1", span: "sq" },
  { src: "uploads/photos/20221128_192738_01_replacement.jpg", alt: "Night track action under floodlights", loc: "Sepang", when: "Nov 2022 · Night", ratio: "3 / 2", span: "wide" },
  // Row 3 — wide + sq
  { src: "uploads/photos/20260425_134837_clean.jpeg", alt: "Side panning, hill backdrop", loc: "Sepang", when: "Apr 2026 · Day", ratio: "3 / 2", span: "wide" },
  { src: "uploads/photos/20240921_195230_replacement.jpg", alt: "LYNLEX dusk panning shot", loc: "Sepang", when: "Sep 2024 · Dusk", ratio: "1 / 1", span: "sq" },
  // Row 4 — sq + wide
  { src: "uploads/photos/20250928_104209_clean.jpg", alt: "Wet rear, brake lights on, spray off the rear tyres", loc: "Sepang", when: "Sep 2025 · Wet", ratio: "1 / 1", span: "sq" },
  { src: "uploads/photos/20250928_120546_replacement_clean3.jpg", alt: "Wet front three-quarter at Sepang", loc: "Sepang", when: "Sep 2025 · Wet", ratio: "3 / 2", span: "wide" },
  // Row 5 — wide + sq
  { src: "uploads/photos/dusk_69_motul.jpeg", alt: "Dusk side panning — race number 69, MOTUL livery", loc: "Sepang", when: "Time Attack · Dusk", ratio: "3 / 2", span: "wide" },
  { src: "uploads/photos/20220523_092605.png", alt: "May 2022 track action", loc: "Sepang", when: "May 2022 · Day", ratio: "1 / 1", span: "sq" },
  // Row 6 — sq + wide
  { src: "uploads/photos/detail_brembo_throughspoke.jpeg", alt: "Cracked rim spoke discovered post-session", loc: "Cracked spoke", when: "Found, post-session", ratio: "3 / 4", span: "sq" },
  { src: "uploads/photos/side_shop_with_skirt_clean.jpg", alt: "Side profile on the Sepang main straight, race number 7 on the door", loc: "Sepang", when: "Track day · Day", ratio: "3 / 2", span: "wide" },
];

function GalleryGrid({ photos, lb }) {
  return (
    <div className="gal-grid">
      {photos.map((p, i) => (
        <button
          key={i}
          className={"gal-cell gal-cell--" + p.span}
          onClick={() => lb.open(i)}
          aria-label={`Open ${p.alt}`}
        >
          <Photo src={p.src} alt={p.alt} ratio={p.ratio} />
          <span className="gal-cell-meta mono-up">
            <span>·{String(i + 1).padStart(2, "0")} {p.loc}</span>
            <span>{p.when}</span>
          </span>
        </button>
      ))}
    </div>
  );
}

function Gallery() {
  const lbCities = usePhotoLightbox(GALLERY_CITIES.map((p) => ({
    src: p.src, alt: p.alt, caption: `${p.loc} · ${p.when}`, sub: p.alt,
  })));
  const lbTrack = usePhotoLightbox(GALLERY_TRACK.map((p) => ({
    src: p.src, alt: p.alt, caption: `${p.loc} · ${p.when}`, sub: p.alt,
  })));

  return (
    <section id="gallery" className="section-pad gallery">
      <div className="section-inner">
        <Reveal>
          <span className="eyebrow">Gallery</span>
          <h2 className="h-display gal-h">
            Five years.<br/>
            <span className="muted">Two cities. Many tires.</span>
          </h2>
        </Reveal>

        <Reveal className="gal-group">
          <div className="gal-group-head">
            <span className="mono-up gal-group-tag">⎯⎯ I · Cities</span>
            <span className="mono gal-group-count">{String(GALLERY_CITIES.length).padStart(2, "0")} photos</span>
          </div>
          <h3 className="h-display gal-group-h">Streets, garages, fuel stops.</h3>
          <GalleryGrid photos={GALLERY_CITIES} lb={lbCities} />
        </Reveal>

        <Reveal className="gal-group">
          <div className="gal-group-head">
            <span className="mono-up gal-group-tag">⎯⎯ II · Track</span>
            <span className="mono gal-group-count">{String(GALLERY_TRACK.length).padStart(2, "0")} photos</span>
          </div>
          <h3 className="h-display gal-group-h">Sepang, in all weather.</h3>
          <GalleryGrid photos={GALLERY_TRACK} lb={lbTrack} />
        </Reveal>
      </div>

      <lbCities.Lightbox />
      <lbTrack.Lightbox />

      <style>{`
        .gallery { background: var(--bg-0); }
        .gal-h { font-size: clamp(40px, 6vw, 96px); margin: 24px 0 64px; max-width: 18ch; }
        .gal-h .muted { color: var(--ink-2); }

        .gal-group { display: flex; flex-direction: column; gap: 20px; }
        .gal-group + .gal-group {
          margin-top: 88px;
          padding-top: 56px;
          border-top: 1px dashed var(--line);
        }
        .gal-group-head {
          display: flex; justify-content: space-between; align-items: baseline;
        }
        .gal-group-tag { color: var(--accent); font-size: 11px; }
        .gal-group-count { color: var(--ink-3); font-size: 11px; }
        .gal-group-h {
          font-size: clamp(24px, 2.4vw, 36px);
          line-height: 1.05;
          margin: 0 0 24px;
          color: var(--ink-1);
        }

        .gal-grid {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 16px;
        }
        .gal-cell {
          padding: 0; text-align: left;
          display: flex; flex-direction: column; gap: 8px;
          background: transparent; border: 0; cursor: pointer;
          transition: transform 0.4s ease;
        }
        .gal-cell:hover { transform: translateY(-3px); }
        .gal-cell:hover .ph { border-color: var(--accent); }
        .gal-cell--wide { grid-column: span 4; }
        .gal-cell--sq { grid-column: span 2; }
        .gal-cell--full { grid-column: span 6; }
        .gal-cell-meta { display: flex; justify-content: space-between; color: var(--ink-2); font-size: 10px; }
        .gal-cell-meta span:first-child { color: var(--accent); }

        .gal-lightbox {
          position: fixed; inset: 0; z-index: 100;
          background: rgba(3, 4, 6, 0.92);
          backdrop-filter: blur(6px);
          display: flex; align-items: center; justify-content: center;
          padding: clamp(20px, 5vw, 80px);
        }
        .gal-lightbox-inner {
          max-width: 1400px; width: 100%;
          height: 100%;
          display: flex; flex-direction: column; gap: 12px;
          min-height: 0;
        }
        .gal-lightbox-imgwrap {
          flex: 1 1 auto;
          min-height: 0;
          display: flex; align-items: center; justify-content: center;
        }
        .gal-lightbox-img {
          max-width: 100%;
          max-height: 100%;
          width: auto; height: auto;
          object-fit: contain;
          display: block;
          border: 1px solid var(--line);
        }
        .gal-lightbox-meta {
          flex: 0 0 auto;
        }
        .gal-lightbox-meta { display: flex; justify-content: space-between; color: var(--ink-1); }
        .gal-lightbox-close, .gal-arrow {
          position: absolute;
          color: var(--ink-0);
          font-size: 36px; line-height: 1;
          width: 48px; height: 48px;
          display: inline-flex; align-items: center; justify-content: center;
          border: 1px solid var(--line);
          background: rgba(0,0,0,0.4);
          backdrop-filter: blur(8px);
        }
        .gal-lightbox-close { top: 24px; right: 24px; font-size: 28px; }
        .gal-arrow { top: 50%; transform: translateY(-50%); }
        .gal-arrow--l { left: 24px; }
        .gal-arrow--r { right: 24px; }
        .gal-lightbox-close:hover, .gal-arrow:hover { border-color: var(--accent); color: var(--accent); }

        @media (max-width: 820px) {
          .gal-grid { grid-template-columns: repeat(2, 1fr); }
          .gal-cell--wide, .gal-cell--sq, .gal-cell--full { grid-column: span 1; }
        }
      `}</style>
    </section>
  );
}
window.Gallery = Gallery;