// Work — filterable portfolio grid

const { useState: useStateW, useMemo: useMemoW } = React;

const Work = ({ go, initialFilter = "all" }) => {
  const [filter, setFilter] = useStateW(initialFilter || "all");
  const filtered = useMemoW(() => filter === "all" ? PROJECTS : PROJECTS.filter(p => p.category === filter), [filter]);

  // Layout pattern — make the grid feel composed, not a uniform tile sheet
  const sizes = ["feat", "m", "m", "m", "feat", "m", "m", "m", "feat", "m", "m", "m"];

  return (
    <div className="page" data-screen-label="02 Work">
      <section className="bg-ink" style={{ paddingTop: "clamp(64px, 8vw, 120px)", paddingBottom: 48 }}>
        <div className="container">
          <div className="kicker" style={{ color: "rgba(246,245,239,0.65)" }}>
            <span className="dot"></span> Index 02 / Work · {PROJECTS.length} projects
          </div>
          <h1 className="t-h1" style={{ marginTop: 16, color: "var(--paper)" }}>
            Two decades of <span style={{ color: "var(--accent)" }}>real events</span> across the GCC.
          </h1>
          <p className="t-lead" style={{ marginTop: 18, maxWidth: 760, color: "rgba(246,245,239,0.7)" }}>
            Sports, festivals, brand activations, conferences, ceremonies — sorted by
            category. Each card opens a structured case study with measurable outcomes.
          </p>
        </div>
      </section>

      <Section tone="paper">
        <div className="work-filter">
          {CATEGORIES.map(c => {
            const count = c.id === "all" ? PROJECTS.length : PROJECTS.filter(p => p.category === c.id).length;
            return (
              <button key={c.id} className={filter === c.id ? "is-active" : ""} onClick={() => setFilter(c.id)}>
                {c.label} <span style={{ opacity: 0.5, marginLeft: 6 }}>{count}</span>
              </button>
            );
          })}
          <span className="work-filter__count">Showing {filtered.length} / {PROJECTS.length}</span>
        </div>

        <div className="work-grid">
          {filtered.map((p, i) => {
            const cls = p.feature ? "feat" : (sizes[i % sizes.length] || "m");
            return (
              <Reveal key={p.slug} className={`work-card work-card--${cls}`} delay={(i % 6) * 60}>
                <button onClick={() => go({ page: "case", slug: p.slug })} style={{ display: "contents", textAlign: "left" }}>
                  <div className="work-card__media">
                    <img src={p.image} alt="" loading="lazy" />
                    <div className="work-card__overlay">
                      <div className="work-card__overlay-top">
                        <span className="chip"><PinDot/>{CATEGORIES.find(c => c.id === p.category)?.label}</span>
                        {p.credibility && <span className="chip chip--accent">{p.credibility}</span>}
                      </div>
                      <div className="work-card__overlay-bot">
                        <div className="work-card__rights"><span className="rights-dot"></span> Rights: clearance pending</div>
                        <div className="arrow"><ArrowUpRight /></div>
                      </div>
                    </div>
                  </div>
                  <div>
                    <div style={{ display: "flex", justifyContent: "space-between", gap: 16, alignItems: "baseline" }}>
                      <div className="work-card__title">{p.title}</div>
                      <span className="t-mono" style={{ color: "var(--muted)" }}>{p.year}</span>
                    </div>
                    <div className="work-card__meta" style={{ marginTop: 8 }}>
                      <span>{p.client}</span><span className="sep"></span>
                      <span>{p.location}</span>
                    </div>
                  </div>
                </button>
              </Reveal>
            );
          })}
        </div>

        {filtered.length === 0 && (
          <div style={{ padding: "60px 0", textAlign: "center", color: "var(--muted)" }}>
            No projects in this category yet.
          </div>
        )}
      </Section>

      <section className="bg-bone">
        <div className="container" style={{ padding: "80px var(--pad)", display: "grid", gridTemplateColumns: "1fr auto", gap: 32, alignItems: "center", flexWrap: "wrap" }}>
          <div>
            <h2 className="t-h2">Don't see your category?</h2>
            <p className="t-lead" style={{ color: "var(--muted)", maxWidth: 560, marginTop: 16 }}>
              Crowd management, motorsport, hospitality, royal protocol — we'll route the right lead into your brief.
            </p>
          </div>
          <BriefBtn variant="ink" size="xl" />
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { Work });