// Gallery — posts/registries as premium publications.
function Gallery() {
  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 posts = [
    {
      kind: "Vídeo", duration: "2:14",
      title: "Como o som vira fogo no tubo de Rubens",
      date: "12.04.2026", view: "8.2k",
      tone: "magenta",
    },
    {
      kind: "Post", duration: null,
      title: "Sábado às 9h: física como deve ser, na prática",
      date: "29.03.2026", view: "1.4k",
      tone: "cyan",
    },
    {
      kind: "Reportagem", duration: "leitura 4 min",
      title: "Dois anos: o que aprendemos visitando 42 escolas",
      date: "15.03.2026", view: "612",
      tone: "violet",
    },
    {
      kind: "Vídeo", duration: "1:08",
      title: "Limalha de ferro mostra o que livro nenhum mostra",
      date: "07.03.2026", view: "11.3k",
      tone: "cyan",
    },
  ];

  return (
    <section id="galeria" className="section" style={{
      position: "relative",
      background: "var(--void)",
    }}>
      <div className="container-wide">
        <div className="overline-row">/ 05 — Galeria & Posts</div>

        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "end",
          flexWrap: "wrap", gap: 24, marginBottom: isMobile ? 28 : 48,
        }}>
          <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,
          }}>
            O que sai do laboratório, vira história.
          </h2>
          {!isMobile && (
            <div style={{ display: "flex", gap: 8 }}>
              <FilterChip active>Todos</FilterChip>
              <FilterChip>Vídeos</FilterChip>
              <FilterChip>Posts</FilterChip>
              <FilterChip>Reportagens</FilterChip>
            </div>
          )}
        </div>

        {isMobile ? (
          /* Mobile: simple stacked list */
          <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
            {posts.map((p, i) => (
              <GalleryCard key={i} {...p} />
            ))}
          </div>
        ) : (
          /* Desktop: original masonry-style grid */
          <div style={{
            display: "grid",
            gridTemplateColumns: "1.5fr 1fr 1fr",
            gridTemplateRows: "auto auto",
            gap: 20,
          }}>
            <GalleryCard {...posts[0]} large />
            <GalleryCard {...posts[1]} />
            <GalleryCard {...posts[2]} />
            <GalleryCard {...posts[3]} spanCols={3} wide />
          </div>
        )}
      </div>
    </section>
  );
}

function FilterChip({ children, active }) {
  return (
    <button style={{
      fontFamily: "var(--font-mono)", fontSize: 11,
      letterSpacing: "0.16em", textTransform: "uppercase",
      padding: "8px 14px", borderRadius: 999, border: "none",
      background: active ? "rgba(0,229,255,0.1)" : "transparent",
      color: active ? "var(--plasma-cyan)" : "var(--fg-3)",
      boxShadow: active ? "0 0 0 1px rgba(0,229,255,0.35) inset" : "0 0 0 1px var(--line) inset",
      cursor: "pointer", transition: "all 0.2s",
    }}>{children}</button>
  );
}

function GalleryCard({ kind, duration, title, date, view, tone, large, wide, spanCols }) {
  const [hover, setHover] = React.useState(false);
  const accent = { cyan: "#00E5FF", magenta: "#FF2D9D", violet: "#6B3FFF" }[tone];
  const rgb   = { cyan: "0,229,255", magenta: "255,45,157", violet: "107,63,255" }[tone];

  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        gridColumn: spanCols ? `span ${spanCols}` : "auto",
        position: "relative",
        background: "var(--slate)",
        border: `1px solid ${hover ? `rgba(${rgb},0.5)` : "var(--line)"}`,
        borderRadius: "var(--r-lg)",
        overflow: "hidden", cursor: "pointer",
        aspectRatio: wide ? "3.2" : (large ? "1.05" : "0.95"),
        boxShadow: hover ? `0 24px 60px rgba(0,0,0,0.5), 0 0 50px rgba(${rgb},0.18)` : "none",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
        transition: "all 0.4s var(--ease-out)",
      }}>
      {/* media bg */}
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(ellipse at ${large ? "30% 30%" : "60% 50%"}, rgba(${rgb},0.4), transparent 60%), linear-gradient(135deg, #0E2A6F, #04060C)`,
      }}>
        {/* science motif */}
        {large && (
          <div style={{
            position: "absolute", left: "60%", top: "55%", transform: "translate(-50%,-50%)",
            width: 200, height: 200, borderRadius: "50%",
            border: `1.5px solid rgba(${rgb},0.4)`,
            boxShadow: `0 0 50px rgba(${rgb},0.25)`,
          }}>
            <div style={{
              position: "absolute", inset: -20, borderRadius: "50%",
              border: `1px solid rgba(${rgb},0.18)`,
              transform: "rotateX(70deg)",
            }} />
          </div>
        )}
        {/* play badge */}
        {kind === "Vídeo" && (
          <div style={{
            position: "absolute", left: 24, bottom: 24,
            width: 56, height: 56, borderRadius: "50%",
            background: hover ? accent : "rgba(255,255,255,0.1)",
            display: "flex", alignItems: "center", justifyContent: "center",
            boxShadow: hover ? `0 0 28px ${accent}` : "0 0 0 1px rgba(255,255,255,0.2) inset",
            transition: "all 0.3s var(--ease-out)",
            backdropFilter: "blur(8px)",
          }}>
            <div style={{
              width: 0, height: 0,
              borderLeft: hover ? "14px solid #04060C" : "12px solid #fff",
              borderTop: "8px solid transparent", borderBottom: "8px solid transparent",
              marginLeft: 4,
            }} />
          </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>

      {/* gradient scrim for text */}
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, transparent 30%, rgba(4,6,12,0.85) 100%)",
      }} />

      {/* top meta */}
      <div style={{
        position: "absolute", left: 20, top: 20, right: 20,
        display: "flex", justifyContent: "space-between", alignItems: "center",
        fontFamily: "var(--font-mono)", fontSize: 10,
        letterSpacing: "0.2em", textTransform: "uppercase",
        color: "rgba(255,255,255,0.75)",
      }}>
        <span style={{ color: accent }}>{kind}</span>
        {duration && <span>{duration}</span>}
      </div>

      {/* bottom content */}
      <div style={{ position: "absolute", left: 24, right: 24, bottom: 20 }}>
        <h3 style={{
          fontFamily: "var(--font-display)",
          fontSize: large ? 28 : (wide ? 26 : 17),
          fontWeight: 500, letterSpacing: "-0.01em", lineHeight: 1.2,
          color: "var(--fg-1)", margin: "0 0 12px",
          maxWidth: wide ? 560 : "none",
        }}>{title}</h3>
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontFamily: "var(--font-mono)", fontSize: 10,
          color: "var(--fg-3)", letterSpacing: "0.14em", textTransform: "uppercase",
        }}>
          <span>{date}</span>
          <span>{view} views</span>
        </div>
      </div>
    </article>
  );
}

window.Gallery = Gallery;