// FireTail portfolio — Work grid with genre filter
const { GameCard, Tag } = window.FireTailDesignSystem_df7a18;

function ProjectGrid({ onOpen }) {
  const projects = window.FT_PROJECTS;
  const allGenres = ["All", ...Array.from(new Set(projects.flatMap((p) => p.genres)))];
  const [filter, setFilter] = React.useState("All");
  const shown = filter === "All" ? projects : projects.filter((p) => p.genres.includes(filter));

  return (
    <section id="work" style={{ padding: "clamp(56px,8vw,104px) clamp(20px,5vw,48px)" }}>
      <div style={{ maxWidth: "var(--container)", margin: "0 auto" }}>
        <div data-reveal style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, flexWrap: "wrap", marginBottom: 36 }}>
          <div>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--accent)" }}>01 / The work</span>
            <h2 style={{ margin: "12px 0 0", fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "clamp(30px,4.5vw,52px)", letterSpacing: "-0.02em", color: "var(--text-strong)", lineHeight: 1.05 }}>
              <span style={{ color: "var(--accent)" }}>Sparks</span> I've shipped &amp; built.
            </h2>
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
            {allGenres.map((g) => (
              <Tag key={g} active={filter === g} onClick={() => setFilter(g)}>{g}</Tag>
            ))}
          </div>
        </div>
        <div data-reveal style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))", gap: 24 }}>
          {shown.map((p) => (
            <GameCard key={p.id} title={p.title} year={p.year} engine={p.engine}
              status={p.status} genres={p.genres} platforms={p.platforms}
              accent={p.accent} onClick={() => onOpen(p)} />
          ))}
        </div>
      </div>
    </section>
  );
}

window.ProjectGrid = ProjectGrid;