/* ── Lightbox Component ──────────────────────────────────── */
const { useEffect } = React;

const Lightbox = ({ images, index, onClose, onNav }) => {
  useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape')      onClose();
      if (e.key === 'ArrowLeft')   onNav(-1);
      if (e.key === 'ArrowRight')  onNav(1);
    };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, []);

  return (
    <div className="lb" onClick={onClose}>
      <button className="lb-close" onClick={onClose}>✕</button>

      <img
        className="lb-img"
        src={images[index]}
        alt={`Photo ${index + 1}`}
        onClick={e => e.stopPropagation()}
      />

      <button
        className="lb-arrow lb-prev"
        onClick={e => { e.stopPropagation(); onNav(-1); }}
      >‹</button>
      <button
        className="lb-arrow lb-next"
        onClick={e => { e.stopPropagation(); onNav(1); }}
      >›</button>

      <div className="lb-count">{index + 1} / {images.length}</div>
    </div>
  );
};

Object.assign(window, { Lightbox });