// Showcase grid + lightbox
const { useState: useS_s, useEffect: useE_s, useCallback } = React;

function ShowcaseGrid({ images, captions, limit }) {
  const [open, setOpen] = useS_s(null);
  const imgs = limit ? images.slice(0, limit) : images;

  const close = useCallback(() => setOpen(null), []);
  const next = useCallback(() => setOpen(i => (i + 1) % images.length), [images.length]);
  const prev = useCallback(() => setOpen(i => (i - 1 + images.length) % images.length), [images.length]);

  useE_s(() => {
    if (open === null) return;
    const onKey = (e) => {
      if (e.key === 'Escape') close();
      if (e.key === 'ArrowRight') next();
      if (e.key === 'ArrowLeft') prev();
    };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, close, next, prev]);

  // touch swipe
  const touchRef = React.useRef({ x: 0 });
  const onTouchStart = (e) => { touchRef.current.x = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    const dx = e.changedTouches[0].clientX - touchRef.current.x;
    if (dx > 40) prev();
    else if (dx < -40) next();
  };

  return (
    <>
      <div className="masonry">
        {imgs.map((src, i) => {
          const cap = captions?.[i] || "Custom framing — Wildman Art Framing";
          return (
            <button key={i} onClick={() => setOpen(i)} className="group block w-full text-left">
              <div className="relative overflow-hidden bg-hairline/40">
                <img src={src} alt={cap} loading="lazy" className="w-full h-auto img-hover block" />
                <div className="absolute inset-x-0 bottom-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-500 bg-gradient-to-t from-ink/85 to-transparent text-cream">
                  <div className="eyebrow text-gold/80">No. {String(i + 1).padStart(2, '0')}</div>
                  <div className="font-display italic text-lg mt-1">{cap}</div>
                </div>
              </div>
            </button>
          );
        })}
      </div>
      {open !== null && (
        <div className="fixed inset-0 z-[60] bg-ink/95 flex items-center justify-center p-4 lightbox-enter lightbox-enter-active" onClick={close} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
          <button onClick={(e) => { e.stopPropagation(); close(); }} className="absolute top-6 right-6 text-cream text-3xl leading-none w-12 h-12 flex items-center justify-center hover:text-gold" aria-label="Close">×</button>
          <button onClick={(e) => { e.stopPropagation(); prev(); }} className="absolute left-4 md:left-10 top-1/2 -translate-y-1/2 text-cream text-2xl w-12 h-12 flex items-center justify-center hover:text-gold" aria-label="Previous">‹</button>
          <button onClick={(e) => { e.stopPropagation(); next(); }} className="absolute right-4 md:right-10 top-1/2 -translate-y-1/2 text-cream text-2xl w-12 h-12 flex items-center justify-center hover:text-gold" aria-label="Next">›</button>
          <div className="max-w-5xl max-h-[85vh] flex flex-col items-center" onClick={(e) => e.stopPropagation()}>
            <img src={images[open]} className="max-h-[78vh] w-auto object-contain shadow-2xl" alt="" />
            <div className="mt-5 text-center text-cream/70">
              <div className="eyebrow text-gold/70">No. {String(open + 1).padStart(2, '0')} · {open + 1} / {images.length}</div>
              <div className="font-display italic text-2xl text-cream mt-2">{captions?.[open] || "Custom framing — Wildman Art Framing"}</div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { ShowcaseGrid });