// Lightbox / project detail overlay
const { useState: useStateLB, useEffect: useEffectLB } = React;

function Lightbox({ projectId, onClose, onSelect }) {
  const open = !!projectId;
  const project = open ? window.PROJECTS.find((p) => p.id === projectId) : null;

  useEffectLB(() => {
    if (open) {
      document.body.classList.add('lightbox-open');
      window.scrollTo({ top: 0, behavior: 'instant' });
    } else {
      document.body.classList.remove('lightbox-open');
    }
    return () => document.body.classList.remove('lightbox-open');
  }, [open]);

  useEffectLB(() => {
    const onKey = (e) => {
      if (!open) return;
      if (e.key === 'Escape') onClose();
      if (e.key === 'ArrowRight') goNext();
      if (e.key === 'ArrowLeft') goPrev();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  });

  if (!project) {
    return <div className="lightbox" aria-hidden="true"></div>;
  }

  const idx = window.PROJECTS.findIndex((p) => p.id === project.id);
  const prev = window.PROJECTS[(idx - 1 + window.PROJECTS.length) % window.PROJECTS.length];
  const next = window.PROJECTS[(idx + 1) % window.PROJECTS.length];

  const goPrev = () => onSelect(prev.id);
  const goNext = () => onSelect(next.id);

  return (
    <div className={`lightbox ${open ? 'open' : ''}`} role="dialog" aria-modal="true">
      <button className="lightbox-close" onClick={onClose} aria-label="Close">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
          <path d="M5 5l14 14M19 5L5 19" />
        </svg>
      </button>

      <div className="lb-inner">
        <div className="lb-head">
          <div>
            <div className="lb-eyebrow">
              <span>{project.status}</span> · {project.location}
            </div>
            <h2>{project.title} <em>{project.titleItalic}</em></h2>
          </div>
          <dl className="lb-meta">
            <dt>Year</dt><dd>{project.year}</dd>
            <dt>Typology</dt><dd>{project.typology}</dd>
            <dt>Area</dt><dd>{project.area}</dd>
            <dt>Materials</dt><dd>{project.materials}</dd>
          </dl>
        </div>

        <div className="lb-body">
          <div>
            <div className="lb-eyebrow">— Brief</div>
          </div>
          <div>
            {project.body.map((para, i) => (
              <p key={i} className={i === 0 ? 'first' : ''}>{para}</p>
            ))}
          </div>
        </div>

        <div className="lb-imggrid">
          {project.images.map((im, i) => (
            <img key={i} src={im.src} alt="" loading="lazy" className={im.size} />
          ))}
        </div>

        <div className="lb-footer">
          <button className="lb-nav-btn prev" onClick={goPrev}>
            <span>←</span>
            <span className="col">
              <span>Previous</span>
              <span className="ti">{prev.title} {prev.titleItalic}</span>
            </span>
          </button>
          <button className="lb-nav-btn next" onClick={goNext}>
            <span className="col">
              <span>Next</span>
              <span className="ti">{next.title} {next.titleItalic}</span>
            </span>
            <span>→</span>
          </button>
        </div>
      </div>
    </div>
  );
}

window.Lightbox = Lightbox;