const { Card, Tabs, Readout } = window.JabberwockeeDesignSystem_646027;
function Projects({ onOpen }) {
  const D = window.JW_DATA;
  const [tab, setTab] = React.useState("all");
  const list = D.projects.filter((p) => tab === "all" || p.kind === tab);
  const count = (k) => D.projects.filter((p) => k === "all" || p.kind === k).length;
  return (
    <section id="projects" className="jw-section">
      <div className="jw-container">
        <div className="jw-section-head">
          <div>
            <h2 style={{ font: "var(--type-display-lg)" }}>Projects</h2>
            <p style={{ font: "var(--type-lead)", color: "var(--text-body)", marginTop: 18, maxWidth: "var(--measure-narrow)" }}>{D.projectsIntro}</p>
          </div>
          <Tabs items={[{ value: "all", label: "All", count: count("all") }, { value: "feature", label: "Features", count: count("feature") }, { value: "short", label: "Shorts", count: count("short") }]} value={tab} onChange={setTab} />
        </div>
        <div className="jw-projects-grid">
          {list.map((p, i) => {
            const idx = D.projects.indexOf(p);
            return <Card key={p.id} image={p.image} imageAlt={p.alt} badge={p.badge} mark={p.mark} markAlt={p.mark ? "Netflix" : ""} title={p.title} index={String(idx + 1).padStart(2, "0")} meta={p.meta} onClick={() => onOpen(idx)} aspect={p.kind === "feature" ? "16 / 9" : "4 / 3"} style={{ gridColumn: p.kind === "feature" ? "span 3" : "span 2" }}>{p.logline}</Card>;
          })}
        </div>
      </div>
    </section>
  );
}
window.Projects = Projects;