// ExperimentModal — lightbox with photo/video gallery for an experiment card.
function ExperimentModal({ experiment, onClose }) {
  const [index, setIndex] = React.useState(0);

  React.useEffect(() => {
    setIndex(0);
  }, [experiment]);

  React.useEffect(() => {
    if (!experiment) return;
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "ArrowRight") setIndex(i => Math.min(i + 1, experiment.media.length - 1));
      if (e.key === "ArrowLeft") setIndex(i => Math.max(i - 1, 0));
    };
    document.addEventListener("keydown", onKey);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prevOverflow;
    };
  }, [experiment, onClose]);

  if (!experiment) return null;

  const accent = { cyan: "#00E5FF", magenta: "#FF2D9D", violet: "#6B3FFF" }[experiment.color] || "#00E5FF";
  const rgb = { cyan: "0,229,255", magenta: "255,45,157", violet: "107,63,255" }[experiment.color] || "0,229,255";
  const media = experiment.media || [];
  const current = media[index];

  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 1000,
        background: "rgba(4,6,12,0.88)",
        backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: 20,
        animation: "heroReveal 0.25s ease-out both",
      }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          width: "100%", maxWidth: 920,
          maxHeight: "92vh", overflow: "auto",
          background: "var(--slate)",
          border: `1px solid rgba(${rgb},0.35)`,
          borderRadius: "var(--r-lg)",
          boxShadow: `0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(${rgb},0.15)`,
        }}
      >
        {/* media viewer */}
        <div style={{
          position: "relative", aspectRatio: "4/3", overflow: "hidden",
          background: "#000",
        }}>
          {current && current.type === "video" ? (
            <video
              key={current.src}
              src={current.src}
              autoPlay loop muted playsInline controls
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", background: "#000" }}
            />
          ) : (
            <img
              key={current && current.src}
              src={current && current.src}
              alt={experiment.title}
              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "contain", background: "#000" }}
            />
          )}

          <button
            onClick={onClose}
            aria-label="Fechar"
            style={{
              position: "absolute", top: 14, right: 14, zIndex: 2,
              width: 36, height: 36, borderRadius: "50%",
              background: "rgba(4,6,12,0.6)", border: "1px solid rgba(255,255,255,0.2)",
              color: "#fff", fontSize: 18, lineHeight: 1, cursor: "pointer",
              display: "flex", alignItems: "center", justifyContent: "center",
            }}
          >×</button>

          {media.length > 1 && (
            <>
              <button
                onClick={() => setIndex(i => Math.max(i - 1, 0))}
                disabled={index === 0}
                aria-label="Anterior"
                style={{
                  position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", zIndex: 2,
                  width: 38, height: 38, borderRadius: "50%",
                  background: "rgba(4,6,12,0.55)", border: "1px solid rgba(255,255,255,0.2)",
                  color: "#fff", fontSize: 18, cursor: index === 0 ? "default" : "pointer",
                  opacity: index === 0 ? 0.3 : 1,
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}
              >‹</button>
              <button
                onClick={() => setIndex(i => Math.min(i + 1, media.length - 1))}
                disabled={index === media.length - 1}
                aria-label="Próximo"
                style={{
                  position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", zIndex: 2,
                  width: 38, height: 38, borderRadius: "50%",
                  background: "rgba(4,6,12,0.55)", border: "1px solid rgba(255,255,255,0.2)",
                  color: "#fff", fontSize: 18, cursor: index === media.length - 1 ? "default" : "pointer",
                  opacity: index === media.length - 1 ? 0.3 : 1,
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}
              >›</button>
            </>
          )}
        </div>

        {/* thumbnails */}
        {media.length > 1 && (
          <div style={{
            display: "flex", gap: 8, padding: "14px 20px 0",
            overflowX: "auto",
          }}>
            {media.map((m, i) => (
              <button
                key={i}
                onClick={() => setIndex(i)}
                style={{
                  flex: "0 0 auto", width: 64, height: 48, borderRadius: 8,
                  overflow: "hidden", cursor: "pointer", position: "relative",
                  border: i === index ? `2px solid ${accent}` : "1px solid var(--line)",
                  padding: 0, background: "#000",
                }}
              >
                {m.type === "video" ? (
                  <video src={m.src} muted style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                ) : (
                  <img src={m.src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                )}
                {m.type === "video" && (
                  <span style={{
                    position: "absolute", inset: 0, display: "flex",
                    alignItems: "center", justifyContent: "center",
                    color: "#fff", fontSize: 14, textShadow: "0 0 6px rgba(0,0,0,0.8)",
                  }}>▶</span>
                )}
              </button>
            ))}
          </div>
        )}

        {/* body */}
        <div style={{ padding: "18px 22px 26px" }}>
          <div style={{
            fontFamily: "var(--font-mono)", fontSize: 10,
            color: accent, letterSpacing: "0.2em", textTransform: "uppercase",
            marginBottom: 8,
          }}>{experiment.area}</div>
          <h3 style={{
            fontFamily: "var(--font-display)", fontSize: 24,
            fontWeight: 500, color: "var(--fg-1)",
            margin: "0 0 10px", letterSpacing: "-0.01em", lineHeight: 1.2,
          }}>{experiment.title}</h3>
          <p style={{
            fontSize: 14.5, lineHeight: 1.65, color: "var(--fg-3)", margin: 0,
          }}>{experiment.desc}</p>
        </div>
      </div>
    </div>
  );
}

window.ExperimentModal = ExperimentModal;