// WorkScreen — portfolio grid with filter tags (prior art)

function WorkScreen({ go }) {
  const { Eyebrow, Tag } = window.NewAgeAnimationDesignSystem_178027;
  const { VideoThumb, Section } = window;
  const filters = ["All work", "Explainers", "Social cutdowns", "Launch films", "Motion", "Retainers"];
  const [active, setActive] = React.useState("All work");
  const projects = [
    { label: "Northwind — Launch Film", tc: "00:01:48:00", tone: "b", rush: true, cat: "Launch films" },
    { label: "Cadence — Q4 Social", tc: "00:00:15:00", tone: "a", cat: "Social cutdowns" },
    { label: "Lumen — Product Explainer", tc: "00:02:12:00", tone: "c", cat: "Explainers" },
    { label: "Halcyon — Brand Motion", tc: "00:00:32:00", tone: "a", rush: true, cat: "Motion" },
    { label: "Field Notes — Weekly", tc: "00:11:04:00", tone: "b", cat: "Retainers" },
    { label: "Rivet — Sizzle Reel", tc: "00:00:58:00", tone: "c", cat: "Social cutdowns" },
  ];
  const shown = active === "All work" ? projects : projects.filter(p => p.cat === active);
  return (
    <Section id="work" style={{ paddingTop: 56 }}>
      <Eyebrow>Portfolio</Eyebrow>
      <h1 style={{ margin: "16px 0 28px", fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "var(--fs-display-m)", letterSpacing: "-0.02em", color: "var(--paper-100)" }}>Selected work</h1>
      <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 32 }}>
        {filters.map(f => <Tag key={f} active={active === f} onClick={() => setActive(f)}>{f}</Tag>)}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
        {shown.map(p => <VideoThumb key={p.label} {...p} />)}
      </div>
    </Section>
  );
}
window.WorkScreen = WorkScreen;