/* GALLERY — full-bleed uniform grid, filterable. Frames are baked in here as the
   public default, so every visitor (search engine, any device, fresh browser)
   sees the same curated set. No browser storage. */

const GALLERY_ITEMS = [
// use = filter bucket (editorial / ecommerce / lifestyle). 'all' shows everything.
{ id: 'g-01', src: 'assets/gallery-laying.jpg',          position: 'center 40%', use: 'editorial', label: 'EDT 01', subject: 'reclining · studio' },
{ id: 'g-02', src: 'assets/gallery-makeup.jpg',          position: 'center 22%', use: 'editorial', label: 'EDT 02', subject: 'beauty · close-up' },
{ id: 'g-03', src: 'assets/gallery-gymnast.jpg',         position: 'center 22%', use: 'editorial', label: 'EDT 03', subject: 'movement · studio' },
{ id: 'g-04', src: 'assets/gallery-greece.jpg',          position: 'center 20%', use: 'lifestyle', label: 'LFE 04', subject: 'resort · location' },
{ id: 'g-05', src: 'assets/gallery-car-female.jpg',      position: 'center 28%', use: 'lifestyle', label: 'LFE 05', subject: 'street · automotive' },
{ id: 'g-06', src: 'assets/gallery-mustard.jpg',         position: 'center 18%', use: 'lifestyle', label: 'LFE 06', subject: 'daywear · location' },
{ id: 'g-07', src: 'assets/gallery-man-car.jpg',         position: 'center 28%', use: 'lifestyle', label: 'LFE 07', subject: 'menswear · automotive' },
{ id: 'g-08', src: 'assets/gallery-leather-bw.jpg',      position: 'center 18%', use: 'editorial', label: 'EDT 08', subject: 'leather · editorial' },
{ id: 'g-09', src: 'assets/gallery-yellow-shirt.jpg',    position: 'center 18%', use: 'ecommerce', label: 'PDP 09', subject: 'shirting · studio' },
{ id: 'g-10', src: 'assets/gallery-plus.jpg',            position: 'center 12%', use: 'ecommerce', label: 'PDP 10', subject: 'knit dress · studio' },
{ id: 'g-11', src: 'assets/gallery-orange-dress.jpg',    position: 'center 22%', use: 'lifestyle', label: 'LFE 11', subject: 'summer · location' },
{ id: 'g-12', src: 'assets/gallery-chair.jpg',           position: 'center 26%', use: 'editorial', label: 'EDT 12', subject: 'lounge · studio' },
{ id: 'g-13', src: 'assets/gallery-leather-girl-bw.jpg', position: 'center 20%', use: 'editorial', label: 'EDT 13', subject: 'leather · editorial' },
{ id: 'g-14', src: 'assets/gallery-crosswalk.jpg',       position: 'center 22%', use: 'editorial', label: 'EDT 14', subject: 'city · nightfall' },
{ id: 'g-15', src: 'assets/gallery-green-suit.jpg',      position: 'center 30%', use: 'ecommerce', label: 'PDP 15', subject: 'tailoring · detail' },
{ id: 'g-16', src: 'assets/gallery-surfer.jpg',          position: 'center 22%', use: 'lifestyle', label: 'LFE 16', subject: 'swim · location' },
{ id: 'g-17', src: 'assets/gallery-icecream.jpg',        position: 'center 28%', use: 'editorial', label: 'EDT 17', subject: 'summer · campaign' },
{ id: 'g-18', src: 'assets/gallery-silver-street.jpg',   position: 'center 30%', use: 'lifestyle', label: 'LFE 18', subject: 'eveningwear · city' },
{ id: 'g-19', src: 'assets/gallery-man-chair.jpg',       position: 'center 30%', use: 'editorial', label: 'EDT 19', subject: 'menswear · studio' }];

// The Editorial filter uses its own running order so its front row differs from the
// All view / homepage strip (which follow the array order above). Any editorial item
// not listed here falls back to array order, appended after.
const EDITORIAL_ORDER = ['g-14', 'g-08', 'g-19', 'g-12', 'g-13', 'g-17', 'g-01', 'g-03', 'g-02'];


const GALLERY_FILTERS = [
{ key: 'all', label: 'All' },
{ key: 'editorial', label: 'Editorial' },
{ key: 'ecommerce', label: 'E-Commerce' },
{ key: 'lifestyle', label: 'Lifestyle' }];


function GalleryPage() {
  const { isMobile, isTablet } = useBreakpoint();
  const [filter, setFilter] = React.useState('all');
  const [lightbox, setLightbox] = React.useState(null);

  const items = React.useMemo(() => {
    if (filter === 'all') return GALLERY_ITEMS;
    const subset = GALLERY_ITEMS.filter((i) => i.use === filter);
    if (filter === 'editorial') {
      const rank = (id) => {
        const i = EDITORIAL_ORDER.indexOf(id);
        return i === -1 ? EDITORIAL_ORDER.length : i;
      };
      return [...subset].sort((a, b) => rank(a.id) - rank(b.id));
    }
    return subset;
  }, [filter]);
  const columnCount = isMobile ? 2 : isTablet ? 3 : 4;
  const tightGap = isMobile;

  return (
    <div data-screen-label="04 Gallery">
      <section style={{ background: 'var(--paper)', padding: `clamp(28px, 4vw, 40px) var(--pad-x) clamp(40px, 6vw, 64px)` }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
          <Breadcrumbs trail={[{ l: 'Gallery' }]} />
          <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24 }}>
            <div>
              <Eyebrow>Gallery</Eyebrow>
              <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(44px, 9vw, 92px)', lineHeight: 0.96, letterSpacing: '-0.045em', color: 'var(--ink)', margin: '20px 0 0', maxWidth: '14ch' }}>
                Shot by <em style={{ fontStyle: 'italic' }}>ViZO.</em>
              </h1>
              <p style={{ marginTop: 20, fontSize: 'clamp(15px, 1.6vw, 18px)', lineHeight: 1.6, color: 'var(--graphite)', maxWidth: '52ch' }}>
                Every frame on this page came out of the studio. No location, no crew, no retoucher. Filter by use case to see how it sits in each context.
              </p>
            </div>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.06em', color: 'var(--slate)', textTransform: 'uppercase' }}>
              {String(items.length).padStart(2, '0')} / {String(GALLERY_ITEMS.length).padStart(2, '0')} frames
            </span>
          </div>

          {/* Filter chips */}
          <div className="vizo-chips" style={{ marginTop: 'clamp(28px, 4vw, 40px)', display: 'flex', gap: 8, flexWrap: isMobile ? 'nowrap' : 'wrap', overflowX: 'auto', paddingBottom: 4, marginLeft: isMobile ? 'calc(var(--pad-x) * -1)' : 0, marginRight: isMobile ? 'calc(var(--pad-x) * -1)' : 0, paddingLeft: isMobile ? 'var(--pad-x)' : 0, paddingRight: isMobile ? 'var(--pad-x)' : 0 }}>
            {GALLERY_FILTERS.map((f) =>
            <button key={f.key} onClick={() => setFilter(f.key)} style={{
              appearance: 'none', border: '1px solid ' + (filter === f.key ? 'var(--ink)' : 'var(--mist)'),
              background: filter === f.key ? 'var(--ink)' : 'transparent',
              color: filter === f.key ? 'var(--canvas)' : 'var(--ink)',
              fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 600, letterSpacing: '0.01em',
              padding: '8px 16px', borderRadius: 999, cursor: 'pointer', whiteSpace: 'nowrap', flexShrink: 0,
              transition: 'all 200ms var(--ease-standard)'
            }}>{f.label}</button>
            )}
          </div>
        </div>
      </section>

      {/* Uniform grid — every tile shares the same aspect ratio */}
      <section style={{ background: 'var(--paper)', padding: `0 clamp(12px, 2vw, 24px) clamp(64px, 10vw, 128px)` }}>
        <div style={{ maxWidth: 1640, margin: '0 auto' }}>
          {items.length === 0 ?
          <div style={{
            padding: 'clamp(48px, 10vw, 120px) 24px',
            border: '1px dashed var(--mist)', borderRadius: 8,
            textAlign: 'center', color: 'var(--slate)',
            fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.04em', textTransform: 'uppercase'
          }}>
              No frames yet
            </div> :
          <div style={{
            display: 'grid',
            gridTemplateColumns: `repeat(${columnCount}, 1fr)`,
            gap: tightGap ? 8 : 16
          }}>
            {items.map((it, i) =>
            <div key={it.id || i} style={{ position: 'relative', cursor: 'zoom-in' }}
            onClick={() => setLightbox(it)}>
                <GalleryTile item={it} idx={i} />
              </div>
            )}
          </div>
          }
        </div>
      </section>

      {/* Editorial credit strip */}
      <section style={{ background: 'var(--ink)', color: 'var(--canvas)', padding: `clamp(56px, 8vw, 96px) var(--pad-x)` }}>
        <div style={{ maxWidth: 'var(--container)', margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 'clamp(28px, 4vw, 48px)', alignItems: 'center' }}>
          <div>
            <Eyebrow color="var(--ash)">Credits</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 300, fontSize: 'clamp(34px, 5.8vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.03em', color: 'var(--canvas)', margin: '20px 0 0', maxWidth: '20ch' }}>
              <em style={{ fontStyle: 'italic' }}>Generated.</em> Not photographed.
            </h2>
            <p style={{ marginTop: 24, fontSize: 'clamp(15px, 1.5vw, 16px)', lineHeight: 1.65, color: 'var(--mist)', maxWidth: '52ch' }}>
              Every garment in the gallery was uploaded as a flat-lay or ghost-mannequin shot. The model, the location, the lighting — all directed inside the studio.
            </p>
            <div style={{ marginTop: 32 }}>
              <Link to="/platform"><Button variant="primaryInv" size="large" arrow>See how it works</Button></Link>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
            {[
            { v: '4K', l: 'Maximum export' },
            { v: '4:5', l: 'Default aspect' },
            { v: 'Real', l: 'Faces, not avatars' },
            { v: 'Pixel-true', l: 'Garment fidelity' }].
            map((s, i) =>
            <div key={i} style={{ padding: 'clamp(18px, 2.5vw, 24px)', border: '1px solid var(--ink-soft)', borderRadius: 10, background: 'var(--ink-soft)' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(26px, 3.6vw, 36px)', letterSpacing: '-0.03em', color: 'var(--canvas)' }}>{s.v}</div>
                <div style={{ marginTop: 8, fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.06em', color: 'var(--ash)', textTransform: 'uppercase' }}>— {s.l}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      <CTABand />

      {lightbox && <Lightbox item={lightbox} onClose={() => setLightbox(null)} />}
    </div>);

}

window.GalleryPage = GalleryPage;

/* ---- one tile ---- */
function GalleryTile({ item, idx }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
    style={{ position: 'relative', overflow: 'hidden', background: 'var(--paper)', transition: 'transform 250ms var(--ease-standard)', transform: hover ? 'translateY(-2px)' : 'translateY(0)' }}>
      <FashionPlate
        ratio="4 / 5"
        src={item.src}
        position={item.position}
        fit={item.fit}
        bg={item.bg}
        idx={idx}
        alt={'ViZO — ' + (item.subject || 'AI-generated fashion image')}
        label=""
        subject="" />
      
      <div style={{
        position: 'absolute', inset: 0,
        background: hover ? 'rgba(10,10,10,0.18)' : 'rgba(10,10,10,0)',
        transition: 'background 250ms var(--ease-standard)',
        display: 'flex', alignItems: 'flex-end',
        padding: 12, pointerEvents: 'none'
      }}>
        <span style={{
          background: 'var(--canvas)', color: 'var(--ink)',
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
          padding: '4px 8px',
          opacity: hover ? 1 : 0,
          transition: 'opacity 200ms var(--ease-standard)'
        }}>{item.use}</span>
      </div>
    </div>);

}

/* ---- Lightbox ---- */
function Lightbox({ item, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => {if (e.key === 'Escape') onClose();};
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {window.removeEventListener('keydown', onKey);document.body.style.overflow = '';};
  }, [onClose]);
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 70,
      background: 'rgba(10,10,10,0.85)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: 'clamp(16px, 3vw, 32px)', animation: 'fadeIn 200ms var(--ease-standard)'
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{ position: 'relative', width: 'min(720px, 90vw)', maxHeight: '88vh' }}>
        <div>
          <FashionPlate {...item} label="" subject="" idx={0} />
        </div>
        <div style={{
          marginTop: 12, color: 'var(--canvas)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, flexWrap: 'wrap',
          fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.08em', textTransform: 'uppercase'
        }}>
          <span>{item.label} · {item.subject}</span>
          <button onClick={onClose} style={{
            background: 'transparent', border: '1px solid var(--ash)', color: 'var(--canvas)',
            padding: '6px 12px', borderRadius: 999, cursor: 'pointer',
            fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase'
          }}>Close · esc</button>
        </div>
      </div>
      <style>{`@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }`}</style>
    </div>);

}

Object.assign(window, { GalleryTile, Lightbox, GALLERY_ITEMS });