// Work — filterable portfolio grid.
function Work() {
  const { Container, Eyebrow, ReelThumb } = window;
  const { Tag } = window.ZentroDesignSystem_967cea;

  // ─── Portfolio reels ───────────────────────────────────────────────────────
  // Add your YouTube URLs here. Accepts full URLs or bare video IDs.
  // Leave `youtubeUrl` empty ("") to show the dark placeholder card.
  const all = [
    { title: "Speedramp",       cat: "Short-form",  duration: "0:14", tone: "a", youtubeUrl: "https://youtu.be/YC2tPvhiIYU?si=hcV15Dnxegm_9QPb" },
    { title: "Talking Head",    cat: "Short-form", duration: "0:21", tone: "b", youtubeUrl: "https://youtu.be/5HCDAqq1okw?si=_ChJTem8UQD3Vw44" },
    { title: "Repurposed",     cat: "Podcast",     duration: "0:15", tone: "c", youtubeUrl: "https://youtu.be/YQR7ViYVrOU?si=-Z3rzd1Kx6MpT2ZD" },
    { title: "Product Ad",  cat: "Product Ad",  duration: "0:57", tone: "d", youtubeUrl: "https://youtu.be/pwXyFkADHBU?si=jcsNwlJ_NxJBYLxu" },
    { title: "Talking Head",      cat: "Motion", duration: "0:28", tone: "b", youtubeUrl: "https://youtu.be/5912Y5W7AII?si=jjh5qS7k-ayrzEbS" },
    { title: "Modern House Tour",      cat: "Motion",     duration: "0:21", tone: "a", youtubeUrl: "https://youtu.be/SylYlMdkepc?si=23yMJKqnWkx7yVnf" },
    { title: "UGC",      cat: "Short-Form",     duration: "0:24", tone: "a", youtubeUrl: "https://www.youtube.com/shorts/1nqlg4KL2cA" },
    { title: "Hook Focused",      cat: "Short-Form",     duration: "0:10", tone: "a", youtubeUrl: "https://youtube.com/shorts/WYsPUiPHYlM?feature=share" },
  ];

  const cats = ["All", "Short-form", "Long-form", "Motion", "Podcast"];
  const [active, setActive] = React.useState("All");
  const shown = active === "All" ? all : all.filter((w) => w.cat === active);

  return (
    <section id="work" style={{ padding: "100px 0", borderTop: "1px solid var(--border-subtle)" }}>
      <Container>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, rowGap: 32, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 560 }}>
            <Eyebrow>Selected work</Eyebrow>
            <h2 style={{ marginTop: 20, fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(2.25rem, 4.5vw, 3.5rem)", lineHeight: 1.02, letterSpacing: "-0.03em", color: "var(--text-primary)" }}>
              Editors Vault
            </h2>
            <p style={{ marginTop: 14, fontFamily: "var(--font-sans)", fontSize: 17, lineHeight: 1.6, color: "var(--text-secondary)" }}>
              Selected works from our editors.
            </p>
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {cats.map((c) => (
              <Tag key={c} active={active === c} onClick={() => setActive(c)}>{c}</Tag>
            ))}
          </div>
        </div>
        <div style={{ marginTop: 44, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }} className="z-work-grid">
          {shown.map((w) => (
            <ReelThumb key={w.title} title={w.title} tag={w.cat} duration={w.duration} tone={w.tone} youtubeUrl={w.youtubeUrl} ratio="4/5" />
          ))}
        </div>
      </Container>
    </section>
  );
}
window.Work = Work;