// GalleryPage.jsx — Anika Williams Design

const GALLERY_ITEMS = [
  { id: 1, title: 'Studio, Washington D.C.', cat: 'Studio', year: '2026', wide: true },
  { id: 2, title: 'Identity Presentation', cat: 'Process', year: '2025' },
  { id: 3, title: 'Type Study No. 12', cat: 'Typography', year: '2025' },
  { id: 4, title: 'Print Production Run', cat: 'Print', year: '2025', tall: true },
  { id: 5, title: 'Spatial Installation View', cat: 'Environmental', year: '2026', wide: true },
  { id: 6, title: 'Brand System Overview', cat: 'Brand', year: '2025' },
  { id: 7, title: 'Detail — Book Cover', cat: 'Print', year: '2024' },
  { id: 8, title: 'Color & Material Study', cat: 'Process', year: '2024' },
  { id: 9, title: 'Atelier Work-in-Progress', cat: 'Studio', year: '2026', wide: true },
  { id: 10, title: 'Type Specimen Sheet', cat: 'Typography', year: '2025' },
  { id: 11, title: 'Packaging — Detail Shot', cat: 'Packaging', year: '2026' },
  { id: 12, title: 'Motion Frame Capture', cat: 'Moving Image', year: '2026' },
];

const GAL_CATS = ['All', 'Studio', 'Process', 'Typography', 'Print', 'Brand', 'Environmental', 'Packaging', 'Moving Image'];

const galGrads = [
  'linear-gradient(135deg, #0f0f0f 0%, #282828 100%)',
  'linear-gradient(160deg, #1c1c1c 0%, #0a0a0a 100%)',
  'linear-gradient(135deg, #202020 0%, #141414 100%)',
  'linear-gradient(120deg, #080808 0%, #1e1e1e 100%)',
  'linear-gradient(155deg, #181818 0%, #0d0d0d 100%)',
  'linear-gradient(135deg, #242424 0%, #0d0d0d 100%)',
  'linear-gradient(140deg, #111 0%, #222 100%)',
  'linear-gradient(135deg, #0d0d0d 0%, #1c1c1c 100%)',
  'linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%)',
  'linear-gradient(145deg, #131313 0%, #252525 100%)',
  'linear-gradient(135deg, #202020 0%, #111 100%)',
  'linear-gradient(150deg, #0e0e0e 0%, #2a2a2a 100%)',
];

function GalleryPage({ onNavigate }) {
  const [activeFilter, setActiveFilter] = React.useState('All');
  const [lightbox, setLightbox] = React.useState(null);

  const filtered = activeFilter === 'All'
    ? GALLERY_ITEMS
    : GALLERY_ITEMS.filter(i => i.cat === activeFilter);

  return (
    <div style={{ background: '#000', minHeight: '100vh', paddingTop: 68 }}>

      {/* Page Header */}
      <section style={{ padding: '80px 56px 64px', borderBottom: '1px solid #262626' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 10, letterSpacing: '3px', textTransform: 'uppercase',
            color: '#444', marginBottom: 20,
          }}>Photo Gallery</div>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
            <h1 style={{
              fontFamily: "'sedgwick-ave-display', sans-serif",
              fontSize: 'clamp(48px, 6vw, 80px)', fontWeight: 400,
              letterSpacing: '3px', textTransform: 'uppercase',
              color: '#F2EADB', lineHeight: 1.0, margin: 0,
            }}>Archive</h1>
            <div style={{
              fontFamily: "'EB Garamond', serif",
              fontSize: 16, color: '#666', maxWidth: 360, textAlign: 'right',
            }}>
              Photography from the studio, process documentation, and imagery from completed commissions.
            </div>
          </div>
        </div>
      </section>

      {/* Filter Bar */}
      <section style={{
        padding: '0 56px', borderBottom: '1px solid #262626',
        background: '#000', position: 'sticky', top: 68, zIndex: 50,
      }}>
        <div style={{
          maxWidth: 1280, margin: '0 auto',
          display: 'flex', alignItems: 'center', height: 52, gap: 0,
          overflowX: 'auto',
        }}>
          {GAL_CATS.map(c => (
            <GalFilterBtn key={c} label={c} active={activeFilter === c} onClick={() => setActiveFilter(c)} />
          ))}
        </div>
      </section>

      {/* Masonry-style Grid */}
      <section style={{ padding: '48px 56px 120px' }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{
            columns: 3,
            columnGap: 1,
            background: '#262626',
          }}>
            {filtered.map((item, i) => (
              <GalleryThumb
                key={item.id} item={item}
                grad={galGrads[item.id - 1]}
                onClick={() => setLightbox(item)}
              />
            ))}
          </div>
          {filtered.length === 0 && (
            <div style={{
              padding: '80px 0', textAlign: 'center',
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 11, letterSpacing: '2px', textTransform: 'uppercase',
              color: '#444',
            }}>No items in this category</div>
          )}
        </div>
      </section>

      {/* Lightbox */}
      {lightbox && (
        <GalleryLightbox item={lightbox} grad={galGrads[lightbox.id - 1]} onClose={() => setLightbox(null)} />
      )}

      <AWFooter onNavigate={onNavigate} />
    </div>
  );
}

function GalFilterBtn({ label, active, onClick }) {
  const [hov, setHov] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      style={{
        background: 'transparent', border: 'none',
        borderBottom: active ? '2px solid #F2EADB' : '2px solid transparent',
        padding: '0 14px', height: 52,
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 10, letterSpacing: '2px', textTransform: 'uppercase',
        color: active ? '#F2EADB' : hov ? '#ccc' : '#555',
        cursor: 'pointer', transition: 'color 200ms, border-color 200ms',
        marginBottom: -1, whiteSpace: 'nowrap',
      }}
    >{label}</button>
  );
}

function GalleryThumb({ item, grad, onClick }) {
  const [hov, setHov] = React.useState(false);
  const aspectMap = item.wide ? '16/9' : item.tall ? '3/4' : '4/3';
  return (
    <div
      onMouseEnter={() => setHov(true)}
      onMouseLeave={() => setHov(false)}
      onClick={onClick}
      style={{
        display: 'block', breakInside: 'avoid',
        background: '#0d0d0d',
        marginBottom: 1, cursor: 'pointer',
        position: 'relative', overflow: 'hidden',
      }}
    >
      <div style={{
        width: '100%', aspectRatio: aspectMap,
        background: grad, position: 'relative', overflow: 'hidden',
        transition: 'opacity 300ms',
        opacity: hov ? 0.85 : 1,
      }}>
        <img src={`https://picsum.photos/seed/aw-gal-${item.id}/600/${item.tall ? '800' : item.wide ? '340' : '450'}?grayscale`}
          alt={`${item.title} — ${item.cat} photography from the Anika Williams Design archive, ${item.year}`}
          loading="lazy" style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            objectFit: 'cover',
          }} />
      </div>
      {/* Hover overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        background: 'rgba(0,0,0,0.6)',
        opacity: hov ? 1 : 0,
        transition: 'opacity 250ms',
        display: 'flex', flexDirection: 'column',
        justifyContent: 'flex-end', padding: 16,
      }}>
        <div style={{
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 9, letterSpacing: '2px', textTransform: 'uppercase',
          color: '#888', marginBottom: 4,
        }}>{item.cat} — {item.year}</div>
        <div style={{
          fontFamily: "'sedgwick-ave-display', sans-serif",
          fontSize: 16, fontWeight: 400, letterSpacing: '1.5px',
          textTransform: 'uppercase', color: '#F2EADB',
        }}>{item.title}</div>
        <div style={{
          marginTop: 8,
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 9, letterSpacing: '2px', textTransform: 'uppercase',
          color: '#c3d9f3',
        }}>View Full →</div>
      </div>
    </div>
  );
}

function GalleryLightbox({ item, grad, onClose }) {
  React.useEffect(() => {
    const handler = e => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose]);

  return (
    <div
      onClick={onClose}
      style={{
        position: 'fixed', inset: 0, zIndex: 500,
        background: 'rgba(0,0,0,0.95)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 40,
      }}
    >
      <div onClick={e => e.stopPropagation()} style={{ maxWidth: 900, width: '100%' }}>
        {/* Image */}
        <div style={{
          width: '100%', aspectRatio: '16/9',
          background: grad, position: 'relative', overflow: 'hidden',
          marginBottom: 24,
        }}>
          <img src={`https://picsum.photos/seed/aw-gal-${item.id}/1200/675?grayscale`}
            alt={`${item.title} — ${item.cat} photograph by Anika Williams Design, ${item.year} (full view)`}
            style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%',
              objectFit: 'cover',
            }} />
        </div>
        {/* Meta */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div>
            <div style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 9, letterSpacing: '2px', textTransform: 'uppercase',
              color: '#555', marginBottom: 6,
            }}>{item.cat} — {item.year}</div>
            <div style={{
              fontFamily: "'sedgwick-ave-display', sans-serif",
              fontSize: 28, fontWeight: 400, letterSpacing: '2px',
              textTransform: 'uppercase', color: '#F2EADB',
            }}>{item.title}</div>
          </div>
          <button onClick={onClose} style={{
            background: 'none', border: '1px solid #444', color: '#888',
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 9, letterSpacing: '2px', textTransform: 'uppercase',
            padding: '8px 16px', cursor: 'pointer',
            transition: 'color 200ms, border-color 200ms',
          }}
            onMouseEnter={e => { e.currentTarget.style.color = '#F2EADB'; e.currentTarget.style.borderColor = '#F2EADB'; }}
            onMouseLeave={e => { e.currentTarget.style.color = '#888'; e.currentTarget.style.borderColor = '#444'; }}
          >Close</button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { GalleryPage });