// CatalogoPage — full experiment catalog with discipline filter.

const ALL_EXPERIMENTS = [
  {
    id: "01", area: "química · exotérmica", discipline: "química", 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", discipline: "ó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 visível.",
    meta: "8 min · todos os públicos",
  },
  {
    id: "03", area: "eletricidade estática", discipline: "eletricidade", 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", discipline: "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 invisível vira desenho.",
    meta: "10 min · ensino médio",
  },
  {
    id: "05", area: "mecânica", discipline: "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 · acústica", discipline: "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",
  },
  {
    id: "07", area: "óptica", discipline: "óptica", color: "violet",
    title: "Espectro da luz",
    desc: "Um prisma decompõe a luz branca no arco-íris completo. A física das cores numa única superfície.",
    meta: "8 min · todos os públicos",
  },
  {
    id: "08", area: "química · fluidos", discipline: "química", color: "cyan",
    title: "Tensão superficial",
    desc: "Uma agulha flutua sobre água. Pimenta foge do sabão. A tensão entre moléculas vira espetáculo.",
    meta: "10 min · ensino fundamental",
  },
  {
    id: "09", area: "mecânica · fluidos", discipline: "mecânica", color: "violet",
    title: "Vórtice de Bernoulli",
    desc: "Duas garrafas conectadas formam um vórtice ao inverter. Pressão e fluxo se tornam visíveis em espiral.",
    meta: "12 min · ensino médio",
  },
  {
    id: "10", area: "eletromagnetismo", discipline: "eletricidade", color: "magenta",
    title: "Freio de Lenz",
    desc: "Um imã desce devagar por um tubo de cobre sem tocá-lo — indução eletromagnética tornada resistência visível.",
    meta: "10 min · ensino médio",
  },
  {
    id: "11", area: "ondas · mecânicas", discipline: "ondas", color: "cyan",
    title: "Padrões de Chladni",
    desc: "Areia em uma placa metálica vibra com um arco de violino e forma figuras simétricas — a geometria oculta do som.",
    meta: "15 min · ensino médio",
  },
  {
    id: "12", area: "óptica · reflexão", discipline: "óptica", color: "magenta",
    title: "Espelho d'água",
    desc: "Um feixe de laser muda de direção ao entrar na água — refração e reflexão total interna em tempo real.",
    meta: "12 min · ensino fundamental II / médio",
  },
];

const DISCIPLINES = [
  { key: "todas",        label: "Todas"         },
  { key: "química",      label: "Química"        },
  { key: "óptica",       label: "Óptica"         },
  { key: "eletricidade", label: "Eletricidade"   },
  { key: "magnetismo",   label: "Magnetismo"     },
  { key: "mecânica",     label: "Mecânica"       },
  { key: "ondas",        label: "Ondas"          },
];


// ——— Single experiment card ———
function CatalogCard({ id, area, color, title, desc, meta, discipline, 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.50)` : "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 area */}
      <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.32), transparent 60%), linear-gradient(135deg, #0E2A6F, #04060C)`,
      }}>
        <div style={{
          position: "absolute", inset: 0,
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <div style={{
            width: 140, height: 140, borderRadius: "50%",
            border: `1px solid rgba(${rgb},0.40)`,
            transform: `rotate(${index * 17}deg) ${color === "magenta" ? "rotateX(60deg)" : ""}`,
            boxShadow: `0 0 30px rgba(${rgb},0.20)`,
            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>

        <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>

        <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.22, pointerEvents: "none",
        }} />
      </div>

      {/* body */}
      <div style={{ padding: "20px 22px 24px" }}>
        <h3 style={{
          fontFamily: "var(--font-display)", fontSize: 19,
          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: 56,
        }}>{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,
            transform: hover ? "translateX(4px)" : "translateX(0)",
            transition: "transform 0.35s var(--ease-out)",
          }}>ver →</span>
        </div>
      </div>
    </article>
  );
}

// ——— Filter pill button ———
function FilterPill({ label, active, onClick }) {
  const [hover, setHover] = React.useState(false);
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        fontFamily: "var(--font-display)", fontSize: 13, fontWeight: 500,
        padding: "9px 20px", borderRadius: "var(--r-pill)",
        border: active ? "1px solid rgba(0,229,255,0.50)" : "1px solid var(--line-strong)",
        background: active ? "rgba(0,229,255,0.10)" : hover ? "rgba(255,255,255,0.04)" : "transparent",
        color: active ? "var(--plasma-cyan)" : hover ? "var(--fg-1)" : "var(--fg-2)",
        cursor: "pointer",
        transition: "all 0.22s var(--ease-out)",
        whiteSpace: "nowrap",
        letterSpacing: "0.01em",
      }}
    >{label}</button>
  );
}

// ——— Main page ———
function CatalogoPage() {
  const [active, setActive] = React.useState("todas");
  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 filtered = active === "todas"
    ? ALL_EXPERIMENTS
    : ALL_EXPERIMENTS.filter(e => e.discipline === active);

  return (
    <>
      {/* back button */}
      <header style={{ position: "fixed", top: 16, left: 16, zIndex: 100, pointerEvents: "none" }}>
        <a href="./index.html" style={{
          pointerEvents: "auto",
          display: "flex", alignItems: "center", gap: 10,
          padding: "11px 16px",
          background: "rgba(6,9,20,0.82)", backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
          border: "1px solid rgba(255,255,255,0.10)", borderRadius: "var(--r-lg)",
          transition: "border-color 0.2s",
        }}>
          <img src="./assets/logo-white.svg" alt="" style={{ width: 24, height: 24, filter: "drop-shadow(0 0 8px rgba(45,111,247,0.5))" }} />
          <span style={{ fontFamily: "var(--font-display)", fontSize: 13, fontWeight: 500, color: "var(--fg-2)", letterSpacing: "0.03em" }}>← Voltar</span>
        </a>
      </header>

      {/* hero */}
      <section className="grain" style={{
        position: "relative", minHeight: isMobile ? "60vh" : "72vh",
        paddingTop: isMobile ? 100 : 140, paddingBottom: isMobile ? 56 : 80,
        background: "linear-gradient(160deg, #06030F 0%, #080918 50%, #04060C 100%)",
        overflow: "hidden",
        display: "flex", flexDirection: "column", justifyContent: "center",
      }}>
        <WaveInterference />

        {/* centre text veil — keeps text readable over wave interference canvas */}
        <div aria-hidden="true" style={{
          position: "absolute", inset: 0,
          background: "radial-gradient(ellipse at 50% 44%, rgba(7,3,16,0.65) 0%, rgba(4,6,12,0.12) 60%, transparent 100%)",
          pointerEvents: "none",
        }} />

        <div className="container" style={{ position: "relative", zIndex: 2, textAlign: "center" }}>

          {/* eyebrow */}
          <div style={{
            display: "inline-flex", alignItems: "center", gap: 10, marginBottom: 32,
            padding: "7px 20px",
            border: "1px solid rgba(255,45,157,0.30)", borderRadius: 999,
            background: "rgba(255,45,157,0.08)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)",
            animation: "heroReveal 0.7s ease-out both",
          }}>
            <div style={{
              width: 6, height: 6, borderRadius: "50%",
              background: "var(--plasma-magenta)", boxShadow: "0 0 10px var(--plasma-magenta)",
              animation: "pulse 2.6s ease-in-out infinite",
            }} />
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--plasma-magenta)", letterSpacing: "0.26em", textTransform: "uppercase" }}>
              Catálogo · Física Além do Papel
            </span>
          </div>

          <h1 style={{
            fontFamily: "var(--font-display)",
            fontSize: "clamp(36px, 5.5vw, 80px)",
            fontWeight: 300, lineHeight: 1.06, letterSpacing: "-0.03em",
            color: "var(--fg-1)", margin: "0 auto 28px", maxWidth: 900,
            animation: "heroReveal 0.8s 0.1s ease-out both",
          }}>
            Doze experiências.{" "}
            <span style={{
              fontWeight: 500,
              background: "linear-gradient(135deg, #FFB347 0%, #FF6B35 40%, #FF2D9D 100%)",
              WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent", backgroundClip: "text",
            }}>Uma física viva.</span>
          </h1>

          <p style={{
            fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.65,
            color: "var(--fg-2)", maxWidth: 560, margin: "0 auto",
            animation: "heroReveal 0.8s 0.2s ease-out both",
          }}>
            Cada experimento foi escolhido para revelar algo que a fórmula esconde —
            e que os olhos e as mãos conseguem descobrir.
          </p>

          {/* stats row */}
          <div style={{
            marginTop: 48,
            display: "flex", gap: 40, justifyContent: "center", flexWrap: "wrap",
            animation: "heroReveal 0.8s 0.3s ease-out both",
          }}>
            {[
              { val: "12", label: "Experimentos" },
              { val: "6",  label: "Áreas da física" },
              { val: "5–15 min", label: "Por sessão" },
            ].map(s => (
              <div key={s.label} style={{ textAlign: "center" }}>
                <div style={{
                  fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 500,
                  color: "var(--plasma-magenta)", letterSpacing: "-0.02em",
                }}>{s.val}</div>
                <div style={{
                  fontFamily: "var(--font-mono)", fontSize: 10,
                  color: "var(--fg-3)", letterSpacing: "0.18em", textTransform: "uppercase",
                  marginTop: 6,
                }}>{s.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* filter + grid */}
      <section className="section" style={{
        background: "linear-gradient(180deg, #060912 0%, var(--void) 100%)",
        paddingTop: 64,
      }}>
        <div className="container-wide">
          <div className="overline-row">/ Experimentos</div>

          {/* filter pills */}
          <div style={{
            display: "flex", gap: 10, flexWrap: "wrap",
            marginBottom: 48, alignItems: "center",
          }}>
            {DISCIPLINES.map(d => (
              <FilterPill
                key={d.key}
                label={d.label}
                active={active === d.key}
                onClick={() => setActive(d.key)}
              />
            ))}
            <span style={{
              marginLeft: "auto",
              fontFamily: "var(--font-mono)", fontSize: 11,
              color: "var(--fg-3)", letterSpacing: "0.14em",
            }}>
              {filtered.length} / {ALL_EXPERIMENTS.length}
            </span>
          </div>

          {/* grid */}
          <div style={{
            display: "grid",
            gridTemplateColumns: isMobile ? "1fr" : "repeat(auto-fill, minmax(320px, 1fr))",
            gap: isMobile ? 14 : 20,
          }}>
            {filtered.map((e, i) => (
              <CatalogCard key={e.id} {...e} index={i} />
            ))}
          </div>

          {filtered.length === 0 && (
            <div style={{
              textAlign: "center", padding: "80px 0",
              fontFamily: "var(--font-display)", fontSize: 18,
              color: "var(--fg-3)",
            }}>
              Nenhum experimento nesta área ainda.
            </div>
          )}
        </div>
      </section>

      {/* bottom CTA */}
      <section className="section-tight" style={{ background: "var(--void)" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.65,
            color: "var(--fg-2)", maxWidth: 520, margin: "0 auto 28px",
          }}>
            Quer levar esses experimentos para a sua escola?
          </p>
          <a href="./index.html#contato" className="btn btn-primary">
            Fale com a gente <span className="arrow">→</span>
          </a>
        </div>
      </section>

      <Footer />
    </>
  );
}

const catalogoRoot = ReactDOM.createRoot(document.getElementById("root"));
catalogoRoot.render(<CatalogoPage />);