// "The Cities" — small Singapore essay between Build and Sepang.
// Two big photos, side-by-side, with location chips and a paragraph.

const CITIES_PHOTOS = [
  {
    src: "uploads/photos/20200316_075734.jpeg",
    alt: "Front three-quarter outside 71 Robinson Road, Singapore CBD",
    loc: "71 Robinson Road · CBD",
    coord: "1.2783° N · 2020",
  },
  {
    src: "uploads/photos/20200315_150752_15.jpg",
    alt: "Side profile against Hamburg Süd container stacks",
    loc: "Container Terminal · Tanjong Pagar Port",
    coord: "1.2589° N · 2020",
  },
  {
    src: "uploads/photos/shell_canopy_dusk.jpeg",
    alt: "White i30 N parked under a Shell V-Power canopy at dusk",
    loc: "Shell · Pasir Gudang Highway",
    coord: "1.4710° N · 2024",
  },
];

function Cities() {
  const lb = usePhotoLightbox(CITIES_PHOTOS.map((p) => ({ src: p.src, alt: p.alt, caption: p.loc, sub: p.coord })));
  return (
    <section id="cities" className="section-pad cities">
      <div className="section-inner">
        <Reveal stagger>
          <span className="eyebrow">The Cities · 01</span>
          <h2 className="h-display cities-h">
            Before the track,<br/>
            <span className="muted">there was the city.</span>
          </h2>
          <p className="cities-sub">
            Singapore, March 2020. A long weekend with a borrowed photographer,
            a quiet CBD, and a working container terminal. The car had less than
            5,000 km on it.
          </p>
        </Reveal>

        <Reveal className="cities-trio">
          {CITIES_PHOTOS.map((p, i) => (
            <figure className="cities-fig" key={i}>
              <button className="cities-btn" onClick={() => lb.open(i)} aria-label={`Open ${p.alt}`}>
                <Photo src={p.src} alt={p.alt} ratio="4 / 5" position="center" />
              </button>
              <figcaption className="cities-cap">
                <span className="mono-up cities-loc">{p.loc}</span>
                <span className="mono cities-coord">{p.coord}</span>
              </figcaption>
            </figure>
          ))}
        </Reveal>

        <Reveal>
          <p className="cities-essay">
            By 2025 the occasional routine was in: cross the border before 7am for a
            breakfast run.
          </p>
        </Reveal>
      </div>

      <lb.Lightbox />

      <style>{`
        .cities { background: var(--bg-0); }
        .cities-btn { padding: 0; background: transparent; border: 0; cursor: pointer; transition: transform 0.4s ease; display: block; width: 100%; }
        .cities-btn:hover { transform: translateY(-3px); }
        .cities-btn:hover .ph { border-color: var(--accent); }
        .cities-h {
          font-size: clamp(40px, 6vw, 96px);
          margin: 24px 0 24px;
          max-width: 14ch;
        }
        .cities-h .muted { color: var(--ink-2); }
        .cities-sub {
          font-family: var(--font-mono);
          font-size: 13px;
          color: var(--ink-2);
          max-width: 56ch;
          line-height: 1.7;
          margin-bottom: 64px;
        }

        .cities-trio {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
          margin-bottom: 56px;
        }
        .cities-fig { margin: 0; display: flex; flex-direction: column; gap: 12px; }
        .cities-cap {
          display: flex; justify-content: space-between;
          color: var(--ink-2);
          font-size: 11px;
        }
        .cities-loc { color: var(--accent); }
        .cities-coord { color: var(--ink-3); }

        .cities-essay {
          font-family: var(--font-display);
          font-size: clamp(20px, 2vw, 28px);
          line-height: 1.5;
          color: var(--ink-1);
          max-width: 38ch;
          margin-left: auto;
          text-align: right;
          border-right: 1px solid var(--accent);
          padding-right: 24px;
        }

        @media (max-width: 980px) {
          .cities-trio { grid-template-columns: 1fr 1fr; }
          .cities-trio > :last-child { grid-column: span 2; }
        }
        @media (max-width: 620px) {
          .cities-trio { grid-template-columns: 1fr; }
          .cities-trio > :last-child { grid-column: auto; }
          .cities-essay { text-align: left; border-right: none; border-left: 1px solid var(--accent); padding-right: 0; padding-left: 24px; margin-left: 0; }
        }
      `}</style>
    </section>
  );
}
window.Cities = Cities;