// Experiments — gallery of experiments as if installations. Hover glow.
function Experiments() {
  const [isMobile, setIsMobile] = React.useState(window.innerWidth < 768);
  React.useEffect(() => {
    const h = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener("resize", h);
    return () => window.removeEventListener("resize", h);
  }, []);

  const experiments = [
    {
      id: "01", area: "química · exotérmica", color: "magenta",
      title: "Pasta de dente de elefante",
      desc: "Água oxigenada, sabão e permanganato de potássio liberam oxigênio em segundos — espuma quente que sai do recipiente como uma erupção.",
      meta: "5 min · ensino fundamental II / médio",
    },
    {
      id: "02", area: "densidade · óptica", color: "cyan",
      title: "Chuva de cores",
      desc: "Uma camada de óleo flutua sobre a água. Gotas de corante atravessam o óleo e descem na água, formando uma chuva colorida visiva.",
      meta: "8 min · todos os públicos",
    },
    {
      id: "03", area: "eletricidade estática", color: "violet",
      title: "Experimentos de balão",
      desc: "Ao esfregar o balão num tecido, ele ganha carga elétrica e atrai pedaços de papel. A eletricidade invisível vira visualmente óbvia.",
      meta: "6 min · ensino fundamental",
    },
    {
      id: "04", area: "magnetismo", color: "cyan",
      title: "Campo magnético visível",
      desc: "Limalha de ferro revela as linhas de força em torno de imãs. O invisivel vira desenho.",
      meta: "10 min · ensino médio",
    },
    {
      id: "05", area: "mecânica", color: "magenta",
      title: "Pêndulo de Newton",
      desc: "Conservação de energia na mão. Cinco esferas, uma onda que não para.",
      meta: "8 min · todos os públicos",
    },
    {
      id: "06", area: "ondas", color: "violet",
      title: "Som que move chama",
      desc: "Frequências musicais fazem chamas dançarem em altura. Acústica abstrata vira visível.",
      meta: "15 min · ensino médio",
    },
  ];

  return (
    <section id="experimentos" className="section grain" style={{
      position: "relative",
      background: "linear-gradient(180deg, var(--void) 0%, #060912 100%)",
    }}>
      <div className="container-wide" style={{ position: "relative", zIndex: 2 }}>
        <div className="overline-row">/ 03 — Experimentos</div>

        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "end",
          flexWrap: "wrap", gap: 24, marginBottom: isMobile ? 36 : 56,
        }}>
          <h2 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(28px, 4.5vw, 64px)",
            fontWeight: 400, lineHeight: 1.0, letterSpacing: "-0.025em",
            color: "var(--fg-1)", margin: 0, maxWidth: 720,
          }}>
            Cada experimento é uma <span style={{
              background: "linear-gradient(135deg,#FF2D9D,#6B3FFF,#00E5FF)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
            }}>instalação interativa</span>.
          </h2>
          <a href="./catalogo.html" className="btn btn-secondary" style={isMobile ? { width: "100%", justifyContent: "center" } : {}}>
            Ver catálogo completo <span className="arrow">→</span>
          </a>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
          gap: isMobile ? 14 : 20,
        }}>
          {experiments.map((e, i) => (
            <ExperimentCard key={e.id} {...e} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ExperimentCard({ id, area, color, title, desc, meta, index }) {
  const [hover, setHover] = React.useState(false);
  const accent = { cyan: "#00E5FF", magenta: "#FF2D9D", violet: "#6B3FFF" }[color];
  const rgb   = { cyan: "0,229,255", magenta: "255,45,157", violet: "107,63,255" }[color];

  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "var(--slate)",
        border: `1px solid ${hover ? `rgba(${rgb},0.5)` : "var(--line)"}`,
        borderRadius: "var(--r-lg)",
        overflow: "hidden", cursor: "pointer",
        boxShadow: hover
          ? `0 1px 0 rgba(255,255,255,0.08) inset, 0 24px 60px rgba(0,0,0,0.5), 0 0 40px rgba(${rgb},0.18)`
          : "0 1px 0 rgba(255,255,255,0.04) inset",
        transform: hover ? "translateY(-4px)" : "translateY(0)",
        transition: "all 0.4s var(--ease-out)",
      }}
    >
      {/* media */}
      <div style={{
        position: "relative", aspectRatio: "4/3", overflow: "hidden",
        background: `radial-gradient(ellipse at ${30 + (index % 3) * 20}% ${40 + (index % 2) * 15}%, rgba(${rgb},0.35), transparent 60%), linear-gradient(135deg, #0E2A6F, #04060C)`,
      }}>
        {/* simulated science motif */}
        <div style={{
          position: "absolute", inset: 0,
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <div style={{
            width: 160, height: 160, borderRadius: "50%",
            border: `1px solid rgba(${rgb},0.4)`,
            transform: `rotate(${index * 15}deg) ${color === "magenta" ? "rotateX(60deg)" : ""}`,
            boxShadow: `0 0 30px rgba(${rgb},0.2)`,
            position: "relative",
          }}>
            <div style={{
              position: "absolute", width: 10, height: 10, borderRadius: "50%",
              background: accent, top: -5, left: "50%", marginLeft: -5,
              boxShadow: `0 0 16px ${accent}`,
            }} />
          </div>
        </div>

        {/* hover label */}
        <div style={{
          position: "absolute", left: 16, top: 16, right: 16,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontFamily: "var(--font-mono)", fontSize: 10,
          letterSpacing: "0.2em", textTransform: "uppercase",
          color: "rgba(255,255,255,0.7)",
        }}>
          <span>EXP · {id}</span>
          <span style={{ color: accent }}>{area}</span>
        </div>

        {/* grain */}
        <div style={{
          position: "absolute", inset: 0,
          backgroundImage: "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E\")",
          mixBlendMode: "overlay", opacity: 0.25, pointerEvents: "none",
        }} />
      </div>

      {/* body */}
      <div style={{ padding: "20px 22px 24px" }}>
        <h3 style={{
          fontFamily: "var(--font-display)", fontSize: 20,
          fontWeight: 500, color: "var(--fg-1)",
          margin: "0 0 8px", letterSpacing: "-0.01em", lineHeight: 1.2,
        }}>{title}</h3>
        <p style={{
          fontSize: 13.5, lineHeight: 1.55, color: "var(--fg-3)",
          margin: 0, minHeight: 60,
        }}>{desc}</p>
        <div style={{
          marginTop: 16, paddingTop: 14, borderTop: "1px solid var(--line)",
          display: "flex", justifyContent: "space-between", alignItems: "center",
        }}>
          <span style={{
            fontFamily: "var(--font-mono)", fontSize: 10,
            color: "var(--fg-3)", letterSpacing: "0.14em", textTransform: "uppercase",
          }}>{meta}</span>
          <span style={{
            fontFamily: "var(--font-display)", fontSize: 12,
            color: accent, letterSpacing: "0.02em",
            transform: hover ? "translateX(4px)" : "translateX(0)",
            transition: "transform 0.35s var(--ease-out)",
          }}>abrir →</span>
        </div>
      </div>
    </article>
  );
}

window.Experiments = Experiments;