// Shared photo lightbox — gallery & event detail
function PhotoLightbox({ photos, index, onClose, onChange, labels }) {
  const open = index != null && index >= 0 && photos && photos.length > 0;
  const photo = open ? photos[index] : null;
  const count = photos ? photos.length : 0;
  const copy = labels || {};

  React.useEffect(function () {
    if (!open) return undefined;
    function onKey(e) {
      if (e.key === "Escape") onClose();
      else if (e.key === "ArrowRight") onChange((index + 1) % count);
      else if (e.key === "ArrowLeft") onChange((index - 1 + count) % count);
    }
    var prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", onKey);
    return function () {
      document.body.style.overflow = prev;
      window.removeEventListener("keydown", onKey);
    };
  }, [open, index, count, onClose, onChange]);

  var touchStartX = React.useRef(null);

  if (!open || !photo) return null;

  function goPrev(e) {
    if (e) e.stopPropagation();
    onChange((index - 1 + count) % count);
  }
  function goNext(e) {
    if (e) e.stopPropagation();
    onChange((index + 1) % count);
  }

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-label={copy.title || "Photo"}
      onClick={onClose}
      onTouchStart={function (e) { touchStartX.current = e.changedTouches[0].clientX; }}
      onTouchEnd={function (e) {
        if (touchStartX.current == null) return;
        var dx = e.changedTouches[0].clientX - touchStartX.current;
        touchStartX.current = null;
        if (Math.abs(dx) < 40) return;
        if (dx < 0) goNext();
        else goPrev();
      }}
      style={{
        position: "fixed",
        inset: 0,
        zIndex: 2000,
        background: "rgba(14, 10, 6, 0.92)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left))",
      }}
    >
      <button
        type="button"
        onClick={onClose}
        aria-label={copy.close || "Close"}
        style={{
          position: "absolute",
          top: "max(12px, env(safe-area-inset-top))",
          right: "max(12px, env(safe-area-inset-right))",
          width: "44px",
          height: "44px",
          borderRadius: "999px",
          border: "1px solid rgba(255,255,255,0.25)",
          background: "rgba(0,0,0,0.35)",
          color: "#fff",
          fontSize: "22px",
          cursor: "pointer",
          zIndex: 2,
        }}
      >
        ×
      </button>

      {count > 1 && (
        <button
          type="button"
          onClick={goPrev}
          aria-label={copy.prev || "Previous"}
          className="wn-lightbox-nav wn-lightbox-prev"
          style={{
            position: "absolute",
            left: "max(8px, env(safe-area-inset-left))",
            top: "50%",
            transform: "translateY(-50%)",
            width: "44px",
            height: "44px",
            borderRadius: "999px",
            border: "1px solid rgba(255,255,255,0.25)",
            background: "rgba(0,0,0,0.35)",
            color: "#fff",
            fontSize: "22px",
            cursor: "pointer",
            zIndex: 2,
          }}
        >
          ‹
        </button>
      )}

      {count > 1 && (
        <button
          type="button"
          onClick={goNext}
          aria-label={copy.next || "Next"}
          className="wn-lightbox-nav wn-lightbox-next"
          style={{
            position: "absolute",
            right: "max(8px, env(safe-area-inset-right))",
            top: "50%",
            transform: "translateY(-50%)",
            width: "44px",
            height: "44px",
            borderRadius: "999px",
            border: "1px solid rgba(255,255,255,0.25)",
            background: "rgba(0,0,0,0.35)",
            color: "#fff",
            fontSize: "22px",
            cursor: "pointer",
            zIndex: 2,
          }}
        >
          ›
        </button>
      )}

      <figure
        onClick={function (e) { e.stopPropagation(); }}
        style={{ margin: 0, maxWidth: "min(1100px, 100%)", maxHeight: "100%", display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" }}
      >
        <img
          src={photo.src}
          alt={photo.alt || ""}
          style={{
            maxWidth: "100%",
            maxHeight: "min(78vh, 900px)",
            width: "auto",
            height: "auto",
            objectFit: "contain",
            borderRadius: "12px",
            boxShadow: "0 24px 60px rgba(0,0,0,0.45)",
            background: "rgba(255,255,255,0.04)",
          }}
        />
        <figcaption style={{ color: "rgba(255,255,255,0.88)", fontFamily: "var(--font-body)", fontSize: "14px", textAlign: "center", maxWidth: "640px", lineHeight: 1.5 }}>
          {photo.alt || ""}
          {count > 1 && (
            <span style={{ display: "block", opacity: 0.65, marginTop: "4px", fontSize: "12px" }}>
              {index + 1} / {count}
            </span>
          )}
        </figcaption>
      </figure>
    </div>
  );
}