// photo-gallery.jsx — the visual → photo PUBLIC gallery. Replaces the old locked
// archive: photography is now public, organized into named sections (nature,
// architecture, portrait, events). A discreet button at the top links out to the
// password-protected private archive (META.photoArchiveUrl) — the private albums
// and their credentials live on that external site, never in this repo.
//
// Reads window.PHOTO_SECTIONS (pages-data.jsx). Tiles reuse window.MotionMedia
// for the still/placeholder fill and open window.openImageLightbox on click.
// Loads AFTER motion-media.jsx, responsive.jsx, lightbox.jsx, direction-a.jsx
// (uses window.LockIcon); consumed by subcategory-page.jsx.

const PG2_RULE = 'var(--rule)', PG2_INK = 'var(--ink)', PG2_INK2 = 'var(--ink-2)',
      PG2_INK3 = 'var(--ink-3)';

function PhotoTile({ img, onOpen }) {
  const [h, setH] = React.useState(false);
  return (
    <figure onClick={onOpen} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ margin: 0, cursor: 'zoom-in', display: 'flex', flexDirection: 'column', gap: 9 }}>
      <div style={{ position: 'relative', overflow: 'hidden', aspectRatio: '4 / 3',
        border: `1px solid ${h ? PG2_INK : PG2_RULE}`, transition: 'border-color .18s' }}>
        {window.MotionMedia && <window.MotionMedia media={img} active={h} />}
        <div className="mono" style={{ position: 'absolute', top: 6, right: 6, width: 22, height: 22,
          display: 'flex', alignItems: 'center', justifyContent: 'center', background: PG2_INK,
          color: 'var(--paper)', fontSize: 12, lineHeight: 1, opacity: h ? 1 : 0,
          transform: h ? 'scale(1)' : 'scale(.8)', transition: 'opacity .15s, transform .15s' }}>⤢</div>
      </div>
      <figcaption className="mono" style={{ fontSize: 11, color: PG2_INK2, letterSpacing: 0.4,
        textTransform: 'uppercase', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
        {img.title || img.tag}
      </figcaption>
    </figure>
  );
}

function PhotoSection({ section, mobile }) {
  const imgs = section.images || [];
  const open = (i) => window.openImageLightbox && window.openImageLightbox(imgs, i);
  return (
    <section style={{ display: 'flex', flexDirection: 'column', gap: mobile ? 16 : 20 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14,
        borderBottom: `1px solid ${PG2_RULE}`, paddingBottom: 12 }}>
        <h2 style={{ margin: 0, fontSize: mobile ? 22 : 28, fontWeight: 500, letterSpacing: -0.8 }}>{section.label}</h2>
        <div className="mono" style={{ fontSize: mobile ? 11 : 12, color: PG2_INK3, letterSpacing: 0.3 }}>· {section.meta}</div>
        <div className="mono tnum" style={{ marginLeft: 'auto', fontSize: 12, color: PG2_INK3 }}>{String(imgs.length).padStart(2, '0')}</div>
      </div>
      <div style={{ display: 'grid',
        gridTemplateColumns: mobile ? 'repeat(2, 1fr)' : 'repeat(auto-fill, minmax(248px, 1fr))',
        gap: mobile ? 12 : 18 }}>
        {imgs.map((img, i) => <PhotoTile key={i} img={img} onOpen={() => open(i)} />)}
      </div>
    </section>
  );
}

// The discreet link out to the password-protected private archive.
function PrivateArchiveButton() {
  const [h, setH] = React.useState(false);
  const LockIcon = window.LockIcon;
  const url = (window.META && window.META.photoArchiveUrl) || '#';
  return (
    <a href={url} target="_blank" rel="noopener" className="mono"
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontSize: 12, letterSpacing: 0.3,
        padding: '9px 14px', textDecoration: 'none', flexShrink: 0,
        border: `1px solid ${h ? PG2_INK : PG2_RULE}`, color: h ? PG2_INK : PG2_INK2,
        background: 'transparent', transition: 'border-color .18s, color .18s' }}>
      {LockIcon && <LockIcon size={11} />}
      private archive <span style={{ opacity: 0.6 }}>↗</span>
    </a>
  );
}

function PhotoGallery({ mobile }) {
  const sections = window.PHOTO_SECTIONS || [];
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: mobile ? 40 : 56 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        gap: 16, flexWrap: 'wrap' }}>
        <div className="mono" style={{ fontSize: 11, color: PG2_INK3, letterSpacing: 0.5,
          textTransform: 'uppercase', maxWidth: 360, lineHeight: 1.5, textWrap: 'pretty' }}>
          Selected photography, public. Client and personal albums are kept private.
        </div>
        <PrivateArchiveButton />
      </div>
      {sections.map((s) => <PhotoSection key={s.id} section={s} mobile={mobile} />)}
    </div>
  );
}

window.PhotoTile = PhotoTile;
window.PhotoSection = PhotoSection;
window.PhotoGallery = PhotoGallery;