// ─── Works listing page ──────────────────────────────────────────

function Works({ go }) {
  const [filter, setFilter] = React.useState("all");
  const industries = ["all", ...new Set(WORKS.map(w => w.industry))];
  const filtered = filter === "all" ? WORKS : WORKS.filter(w => w.industry === filter);

  return (
    <div className="page">
      <PageHeader
        eyebrow="WORKS"
        num="01"
        title={<>数字で語れる、<br /><span style={{ color: "var(--accent-strong)" }}>320件以上</span>の実績。</>}
        lead="業種・規模・技術領域を問わず、事業の課題からWebで解決するプロジェクトを手がけてきました。一部を抜粋してご紹介します。"
      />

      <section className="section" style={{ paddingTop: 48 }}>
        <div className="wrap">
          <div className="works-filter-bar">
            <div className="works-filters">
              {industries.map(ind => (
                <button
                  key={ind}
                  onClick={() => setFilter(ind)}
                  className={`works-filter-btn ${filter === ind ? "works-filter-btn--active" : "works-filter-btn--inactive"}`}
                >
                  {ind === "all" ? "すべて" : ind}
                </button>
              ))}
            </div>
            <div className="en works-count">
              {filtered.length} / {WORKS.length} PROJECTS SHOWN
            </div>
          </div>

          <div className="works-grid">
            {filtered.map((w, i) => <WorksFullCard key={w.id} work={w} index={i} />)}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-alt)" }}>
        <div className="wrap works-more">
          <Eyebrow num="→">AND MORE</Eyebrow>
          <h2 className="h2 works-more__title">
            守秘義務のため、<br />公開できない案件も多数。
          </h2>
          <p className="lead works-more__lead">
            エンタープライズ案件・金融・医療・公共系など、NDA下のプロジェクトは個別にお話しします。
          </p>
          <button onClick={() => go("contact", { tab: "form" })} className="btn btn-primary works-more__cta">
            詳しい実績を聞く <Arrow />
          </button>
        </div>
      </section>

      <BigCTA go={go} />
    </div>
  );
}

function WorksFullCard({ work, index }) {
  return (
    <article className="works-card">
      <div className="works-card__visual">
        <CaseGlyph hue={work.hue} pattern={index} />
        <div className="works-card__badge">
          CASE {String(index + 1).padStart(2, "0")}
        </div>
      </div>
      <div className="works-card__body">
        <div className="works-card__top-row">
          <span className="en works-card__meta">
            {work.year} · {work.industry}
          </span>
          <span className="works-card__metric">{work.metric}</span>
        </div>
        <h3 className="serif works-card__title">{work.title}</h3>
        <div className="works-card__tags">
          {work.scope.map(s => (
            <span key={s} className="works-card__tag">{s}</span>
          ))}
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { Works });