// Gallery page
function PageGallery() {
  const S = window.SITE;
  const [lightbox, setLightbox] = React.useState(null);

  return (
    <div className="page" data-screen-label="Gallery">
      <section className="hero" style={{paddingBottom: 48}}>
        <div className="container">
          <div className="hero-meta">
            <span className="eyebrow">Gallery · 2001 — 2022</span>
            <span className="eyebrow">A career in photos</span>
          </div>
          <h1 className="serif" style={{fontSize: 'clamp(48px, 7vw, 88px)', lineHeight: 1.0}}>
            Twenty years of <em style={{color: 'var(--accent-2)', fontStyle: 'italic'}}>teams,</em><br/>
            in photos.
          </h1>
          <p className="lede" style={{marginTop: 24, maxWidth: '52ch'}}>
            The work has always been about the people. Hikes, farewells, sports
            days, team lunches across three continents and a couple of decades.
          </p>
        </div>
      </section>

      <section>
        <div className="container wide">
          {S.galleryGroups.map((group, gi) => (
            <div className="gallery-group" key={gi}>
              <div className="gallery-group-head">
                <span className="year">{group.year}</span>
                <span className="label">{group.label}</span>
                <span className="label" style={{marginLeft: 'auto'}}>
                  {group.items.length} {group.items.length === 1 ? 'photo' : 'photos'}
                </span>
              </div>
              <div className="gallery-grid">
                {group.items.map((it, i) => (
                  <div
                    key={i}
                    className="gallery-item"
                    style={{
                      gridColumn: `span ${it.span}`,
                      aspectRatio: it.aspect,
                    }}
                    onClick={() => setLightbox(it)}
                  >
                    <img
                      src={it.src}
                      alt={it.caption}
                      loading="lazy"
                      onError={(e) => {
                        e.target.style.display = 'none';
                        e.target.parentElement.innerHTML += `
                          <div class="img-placeholder">
                            <span>${it.caption}</span>
                          </div>`;
                      }}
                    />
                    <div className="caption">{it.caption}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section>
        <div className="container">
          <ConnectStrip />
        </div>
      </section>

      {lightbox && (
        <div className="lightbox" onClick={() => setLightbox(null)}>
          <div className="lightbox-inner" onClick={e => e.stopPropagation()}>
            <button className="lightbox-close" onClick={() => setLightbox(null)}>✕</button>
            <img src={lightbox.full || lightbox.src} alt={lightbox.caption} />
            <div className="lightbox-caption">{lightbox.caption}</div>
          </div>
        </div>
      )}
    </div>
  );
}

window.PageGallery = PageGallery;