// Hadid Group — gallery with lightbox
const { SectionLabel, Icon } = window.HadidGroupDesignSystem_9f7d08;

function Gallery() {
  const { useState, useEffect } = React;
  const imgs = window.SITE.gallery;
  const [open, setOpen] = useState(null); // index or null

  useEffect(() => {
    const onKey = (e) => {
      if (open === null) return;
      if (e.key === 'Escape') setOpen(null);
      if (e.key === 'ArrowRight') setOpen((i) => (i + 1) % imgs.length);
      if (e.key === 'ArrowLeft') setOpen((i) => (i - 1 + imgs.length) % imgs.length);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  // span pattern for editorial rhythm
  const spans = ['span 2', 'span 1', 'span 1', 'span 2', 'span 2', 'span 1', 'span 1', 'span 2'];

  return (
    <section id="gallery" style={{ background: 'var(--cream)', padding: 'var(--section-y) 0' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '0 var(--gutter)' }}>
        <div style={{ marginBottom: 'clamp(36px, 4vw, 56px)' }}>
          <Reveal><SectionLabel rule="before" variant="light">Gallery</SectionLabel></Reveal>
          <Reveal delay={90} as="h2" style={{ margin: '20px 0 0', fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(2.1rem, 3.4vw, 3.1rem)', lineHeight: 1.08, color: 'var(--navy-850)' }}>
            From the Field
          </Reveal>
        </div>

        <div className="hg-gallery-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gridAutoRows: '180px', gap: 14 }}>
          {imgs.map((src, i) => (
            <Reveal key={src} delay={(i % 4) * 60} style={{ gridColumn: spans[i % spans.length] }}>
              <button onClick={() => setOpen(i)} style={{
                position: 'relative', display: 'block', width: '100%', height: '100%', padding: 0, border: 'none', cursor: 'pointer',
                borderRadius: 'var(--radius-sm)', overflow: 'hidden', background: `url(${src}) center/cover`,
              }} className="hg-gallery-item">
                <span className="hg-gallery-overlay" style={{
                  position: 'absolute', inset: 0, background: 'rgba(8,18,30,0.42)', opacity: 0,
                  display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'opacity var(--dur) var(--ease-out)',
                }}>
                  <span style={{ display: 'inline-flex', width: 48, height: 48, alignItems: 'center', justifyContent: 'center', borderRadius: '50%', border: '1.5px solid var(--gold-400)', color: 'var(--gold-400)' }}>
                    <Icon name="arrow-up-right" size={22} strokeWidth={2} />
                  </span>
                </span>
              </button>
            </Reveal>
          ))}
        </div>
      </div>

      {open !== null && (
        <div onClick={() => setOpen(null)} style={{
          position: 'fixed', inset: 0, zIndex: 200, background: 'rgba(5,12,22,0.94)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '4vw',
        }}>
          <button onClick={() => setOpen(null)} aria-label="Close" style={{ position: 'absolute', top: 24, right: 28, background: 'none', border: 'none', color: '#fff', cursor: 'pointer' }}><Icon name="x" size={30} /></button>
          <button onClick={(e) => { e.stopPropagation(); setOpen((open - 1 + imgs.length) % imgs.length); }} aria-label="Previous" style={{ position: 'absolute', left: 18, background: 'none', border: 'none', color: '#fff', cursor: 'pointer' }}><Icon name="chevron-left" size={40} /></button>
          <img src={imgs[open]} alt="" onClick={(e) => e.stopPropagation()} style={{ maxWidth: '88vw', maxHeight: '84vh', borderRadius: 'var(--radius-sm)', boxShadow: 'var(--shadow-lg)', objectFit: 'contain' }} />
          <button onClick={(e) => { e.stopPropagation(); setOpen((open + 1) % imgs.length); }} aria-label="Next" style={{ position: 'absolute', right: 18, background: 'none', border: 'none', color: '#fff', cursor: 'pointer' }}><Icon name="chevron-right" size={40} /></button>
        </div>
      )}
    </section>
  );
}
window.Gallery = Gallery;