/* Foto Neon — Gallery page. Filterable wall of neon-work tiles with a simple
   lightbox. Tiles are branded neon-word placeholders (source photos couldn't
   be imported); swap in real images via PortfolioTile's `src`. */

const FNG = window.FotoNeonDesignSystem_0a5c5f;
const { NeonHeading: GHeading, SectionLabel: GLabel } = FNG;
const GTile = window.FNVideoTile;

/* Filter collapsed to "Sve" until each clip is tagged by type (clip contents
   unknown here). Re-add { id, label } rows + set each work's `cat` to re-enable. */
const GCATS = [
  { id: "sve", label: "Sve" },
];

/* Full wall — all 13 real clips copied from the live site. Captions are neutral
   (numbered) since the clip contents aren't known from filenames alone. */
const WORKS = [
  { src: "videos/v1.mp4",  color: "pink",   cat: "sve", span: "big",  caption: "Foto Neon — rad 01" },
  { src: "videos/v2.mp4",  color: "cyan",   cat: "sve",               caption: "Foto Neon — rad 02" },
  { src: "videos/v3.mp4",  color: "yellow", cat: "sve",               caption: "Foto Neon — rad 03" },
  { src: "videos/v4.mp4",  color: "orange", cat: "sve", span: "wide", caption: "Foto Neon — rad 04" },
  { src: "videos/v5.mp4",  color: "green",  cat: "sve",               caption: "Foto Neon — rad 05" },
  { src: "videos/v6.mp4",  color: "purple", cat: "sve",               caption: "Foto Neon — rad 06" },
  { src: "videos/v7.mp4",  color: "red",    cat: "sve",               caption: "Foto Neon — rad 07" },
  { src: "videos/v8.mp4",  color: "cyan",   cat: "sve", span: "wide", caption: "Foto Neon — rad 08" },
  { src: "videos/v9.mp4",  color: "pink",   cat: "sve",               caption: "Foto Neon — rad 09" },
  { src: "videos/v10.mp4", color: "yellow", cat: "sve",               caption: "Foto Neon — rad 10" },
  { src: "videos/v11.mp4", color: "green",  cat: "sve",               caption: "Foto Neon — rad 11" },
  { src: "videos/v12.mp4", color: "orange", cat: "sve", span: "big",  caption: "Foto Neon — rad 12" },
  { src: "videos/v13.mp4", color: "purple", cat: "sve",               caption: "Foto Neon — rad 13" },
];

function GChip({ active, children, onClick }) {
  const [hover, setHover] = React.useState(false);
  const on = active || hover;
  return (
    <button onClick={onClick} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{ padding: "0.5rem 1.1rem", borderRadius: 9999, cursor: "pointer", fontFamily: "var(--font-body)",
        fontSize: "0.85rem", fontWeight: 500, background: "transparent",
        color: active ? "var(--neon-pink)" : "var(--text-secondary)",
        border: `1px solid ${on ? "var(--neon-pink)" : "rgba(255,255,255,0.18)"}`,
        boxShadow: active ? "0 0 12px rgba(255,16,240,0.35)" : "none",
        textShadow: active ? "0 0 8px var(--neon-pink)" : "none", transition: "all 0.25s ease" }}>{children}</button>
  );
}

function Lightbox({ item, onClose }) {
  if (!item) return null;
  const neon = `var(--neon-${item.color})`;
  return (
    <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 100, background: "rgba(5,5,8,0.9)", backdropFilter: "blur(8px)", display: "grid", placeItems: "center", padding: "2rem", cursor: "zoom-out" }}>
      <div onClick={(e) => e.stopPropagation()} style={{ maxWidth: "40rem", width: "100%", textAlign: "center" }}>
        <div style={{ aspectRatio: "16 / 10", border: `2px solid ${neon}`, boxShadow: `0 0 40px color-mix(in srgb, ${neon} 45%, transparent), inset 0 0 40px color-mix(in srgb, ${neon} 15%, transparent)`, display: "grid", placeItems: "center", background: "var(--surface-card-alt)", overflow: "hidden" }}>
          {item.src
            ? <video src={item.src} autoPlay loop muted playsInline controls style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
            : <GHeading size="md" color={item.color} style={{ fontSize: "clamp(2.5rem, 8vw, 5rem)" }}>{item.word}</GHeading>}
        </div>
        <p style={{ marginTop: "1.25rem", color: "var(--text-secondary)", fontSize: "1rem" }}>{item.caption}</p>
        <button onClick={onClose} style={{ marginTop: "1rem", background: "none", border: "1px solid var(--border-hairline)", color: "var(--text-secondary)", padding: "0.5rem 1.25rem", borderRadius: 9999, cursor: "pointer", fontFamily: "var(--font-body)", fontSize: "0.85rem", textTransform: "uppercase", letterSpacing: "0.1em" }}>Zatvori ✕</button>
      </div>
    </div>
  );
}

function GalleryPage() {
  window.useFotoNeonAnimations();
  const [cat, setCat] = React.useState("sve");
  const [active, setActive] = React.useState(null);
  const span = (s) => s === "big" ? { gridColumn: "span 2", gridRow: "span 2" } : s === "wide" ? { gridColumn: "span 2" } : {};
  const shown = WORKS.filter((w) => cat === "sve" || w.cat === cat);
  return (
    <div>
      <section style={{ position: "relative", padding: "9rem 1.5rem 2.5rem", textAlign: "center" }}>
        <div style={{ maxWidth: "48rem", margin: "0 auto" }}>
          <GLabel color="pink" align="center" data-hero="eyebrow">Portfolio</GLabel>
          <GHeading color="cyan" size="lg" align="center" animate="flicker" data-hero="title" style={{ margin: "1rem 0 1.25rem" }}>Galerija</GHeading>
          <p data-hero="lead" style={{ color: "var(--text-secondary)", fontSize: "1.15rem", lineHeight: 1.55, margin: 0 }}>
            Izbor svetlećih znakova koje smo ručno izradili za barove, restorane i radnje širom Niša.
          </p>
        </div>
      </section>

      <section style={{ position: "relative", padding: "0 1.5rem 6rem" }}>
        <div style={{ maxWidth: "80rem", margin: "0 auto" }}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "0.75rem", justifyContent: "center", marginBottom: "3rem" }}>
            {GCATS.map((c) => <GChip key={c.id} active={cat === c.id} onClick={() => setCat(c.id)}>{c.label}</GChip>)}
          </div>
          <div className="fn-bento" data-parallax="3" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gridAutoRows: "150px", gap: "1rem" }}>
            {shown.map((w, i) => (
              <div key={w.src + i} onClick={() => setActive(w)} style={{ ...span(w.span), cursor: "zoom-in" }}>
                <GTile src={w.src} color={w.color} ratio="auto" alt={w.caption} style={{ height: "100%" }} />
              </div>
            ))}
          </div>
          <p style={{ textAlign: "center", color: "var(--text-muted)", fontSize: "0.85rem", marginTop: "2.5rem" }}>
            Naši radovi — pređite mišem preko snimka da zaigra. Još radova na <a href={window.FN_BRAND.instagramHref} target="_blank" rel="noopener noreferrer" style={{ color: "var(--neon-cyan)" }}>Instagramu</a>.
          </p>
        </div>
      </section>

      <Lightbox item={active} onClose={() => setActive(null)} />
      <style>{`@media (max-width: 640px){ .fn-bento{ grid-template-columns: repeat(2, 1fr) !important; } }`}</style>
    </div>
  );
}

window.GalleryPage = GalleryPage;