// Portfolio — pure photo gallery
const GALLERY_PHOTOS = [
  { src: 'assets/portfolio/p27.jpg', span: 'tall' },
  { src: 'assets/portfolio/p28.jpg', span: 'tall' },
  { src: 'assets/portfolio/p21.jpg', span: 'wide' },
  { src: 'assets/portfolio/p23.jpg', span: 'tall' },
  { src: 'assets/portfolio/p25.jpg', span: 'tall' },
  { src: 'assets/portfolio/p24.jpg', span: 'tall' },
  { src: 'assets/portfolio/p26.jpg', span: 'tall' },
  { src: 'assets/portfolio/p01.jpg', span: 'tall' },
  { src: 'assets/portfolio/p02.jpg', span: 'tall' },
  { src: 'assets/portfolio/p04.jpg', span: 'tall' },
  { src: 'assets/portfolio/p06.jpg', span: 'wide' },
  { src: 'assets/portfolio/p07.jpg', span: 'wide' },
  { src: 'assets/portfolio/p08.jpg', span: 'wide' },
  { src: 'assets/portfolio/p09.jpg', span: 'wide' },
  { src: 'assets/portfolio/p10.jpg', span: 'tall' },
  { src: 'assets/portfolio/p11.jpg', span: 'tall' },
  { src: 'assets/portfolio/p12.jpg', span: 'tall' },
  { src: 'assets/portfolio/p13.jpg', span: 'tall' },
  { src: 'assets/portfolio/p14.jpg', span: 'wide' },
  { src: 'assets/portfolio/p15.jpg', span: 'wide' },
  { src: 'assets/portfolio/p16.jpg', span: 'tall' },
];

function Portfolio({ navigate }) {
  const [lightbox, setLightbox] = useState(null);
  const isMobile = useIsMobile();

  const close = () => setLightbox(null);

  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') close(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  return (
    <main style={{ paddingTop: isMobile ? '100px' : '140px', paddingBottom: isMobile ? '100px' : '160px' }}>

      <section className="container" style={{ paddingBottom: '56px' }}>
        <Reveal>
          <div className="eyebrow" style={{ display: 'flex', alignItems: 'center', gap: '14px' }}>
            <span style={{ width: '24px', height: '1px', background: 'var(--ink-3)' }} />
            Portfolio
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="serif" style={{
            fontSize: 'clamp(60px, 10vw, 148px)',
            lineHeight: 0.94, letterSpacing: '-0.03em',
            margin: '20px 0 0', fontWeight: 300,
          }}>
            The <em style={{ fontWeight: 400 }}>work</em>,<br />
            room by <span className="script" style={{ color: 'var(--accent-2)', fontSize: '0.84em' }}>room</span>.
          </h1>
        </Reveal>
      </section>

      <section style={{ padding: isMobile ? '0 16px' : '0 48px' }}>
        <div style={{ columns: isMobile ? 1 : 2, columnGap: '16px' }}>
          {GALLERY_PHOTOS.map((photo, i) => (
            <GalleryItem key={i} photo={photo} index={i} onClick={() => setLightbox(i)} />
          ))}
        </div>
      </section>

      <section className="container" style={{ paddingTop: '80px', textAlign: 'center' }}>
        <Reveal>
          <p className="serif" style={{ fontSize: 'clamp(24px, 3vw, 40px)', fontStyle: 'italic', fontWeight: 300, margin: '0 auto', maxWidth: '720px', lineHeight: 1.35, letterSpacing: '-0.01em' }}>
            Ready to see what your home could look like?
          </p>
        </Reveal>
        <Reveal delay={120}>
          <button className="btn" style={{ marginTop: '40px' }} onClick={() => navigate('inquiry')}>
            Start your inquiry <span>→</span>
          </button>
        </Reveal>
      </section>

      {lightbox !== null && (
        <Lightbox photos={GALLERY_PHOTOS} index={lightbox} setIndex={setLightbox} onClose={close} />
      )}

      <style>{`
        .gallery-item { break-inside: avoid; margin-bottom: 16px; display: block; }
        .gallery-img { width: 100%; display: block; transition: transform 0.8s cubic-bezier(.2,.7,.2,1), filter 0.4s; }
        .gallery-item:hover .gallery-img { transform: scale(1.02); filter: brightness(0.96); }
        .gallery-item-wrap { overflow: hidden; position: relative; cursor: zoom-in; }
        .gallery-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; background: rgba(30,26,23,0.08); }
        .gallery-item-wrap:hover .gallery-overlay { opacity: 1; }
      `}</style>
    </main>
  );
}

function GalleryItem({ photo, index, onClick }) {
  const [loaded, setLoaded] = useState(false);
  return (
    <div className="gallery-item">
      <Reveal delay={Math.min((index % 6) * 60, 300)}>
        <div className="gallery-item-wrap" onClick={onClick}>
          <img src={photo.src} alt="" className="gallery-img"
            onLoad={() => setLoaded(true)}
            style={{ opacity: loaded ? 1 : 0, transition: 'opacity 0.6s, transform 0.8s cubic-bezier(.2,.7,.2,1), filter 0.4s' }}
          />
          <div className="gallery-overlay">
            <div style={{
              width: '48px', height: '48px', borderRadius: '50%',
              border: '1px solid rgba(244,237,227,0.8)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'rgba(244,237,227,0.9)', fontSize: '20px',
            }}>+</div>
          </div>
        </div>
      </Reveal>
    </div>
  );
}

function Lightbox({ photos, index, setIndex, onClose }) {
  const prev = () => setIndex((index - 1 + photos.length) % photos.length);
  const next = () => setIndex((index + 1) % photos.length);

  useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowLeft') prev();
      if (e.key === 'ArrowRight') next();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [index]);

  const touchStart = useRef(null);
  const onTouchStart = (e) => { touchStart.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touchStart.current === null) return;
    const dx = e.changedTouches[0].clientX - touchStart.current;
    if (Math.abs(dx) > 50) { dx < 0 ? next() : prev(); }
    touchStart.current = null;
  };

  return (
    <div onClick={onClose} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd} style={{
      position: 'fixed', inset: 0, zIndex: 500,
      background: 'rgba(20,16,14,0.96)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <img src={photos[index].src} alt="" onClick={e => e.stopPropagation()} style={{
        maxHeight: '88vh', maxWidth: '92vw',
        objectFit: 'contain', display: 'block',
        boxShadow: '0 40px 120px rgba(0,0,0,0.6)',
      }}/>
      <button onClick={onClose} style={{
        position: 'absolute', top: '20px', right: '20px',
        background: 'none', border: '1px solid rgba(244,237,227,0.3)',
        color: '#f4ede3', width: '44px', height: '44px',
        fontSize: '18px', cursor: 'pointer', borderRadius: '50%',
      }}>✕</button>
      <button onClick={(e) => { e.stopPropagation(); prev(); }} style={{
        position: 'absolute', left: '16px', top: '50%', transform: 'translateY(-50%)',
        background: 'none', border: '1px solid rgba(244,237,227,0.2)',
        color: '#f4ede3', width: '48px', height: '48px',
        fontSize: '20px', cursor: 'pointer', borderRadius: '50%',
      }}>←</button>
      <button onClick={(e) => { e.stopPropagation(); next(); }} style={{
        position: 'absolute', right: '16px', top: '50%', transform: 'translateY(-50%)',
        background: 'none', border: '1px solid rgba(244,237,227,0.2)',
        color: '#f4ede3', width: '48px', height: '48px',
        fontSize: '20px', cursor: 'pointer', borderRadius: '50%',
      }}>→</button>
      <div style={{
        position: 'absolute', bottom: '24px', left: '50%', transform: 'translateX(-50%)',
        color: 'rgba(244,237,227,0.4)', fontFamily: 'Manrope, sans-serif',
        fontSize: '11px', letterSpacing: '0.22em',
      }}>
        {String(index + 1).padStart(2, '0')} / {String(photos.length).padStart(2, '0')}
      </div>
    </div>
  );
}

Object.assign(window, { Portfolio });