// Members.jsx — founding members grid
function Members() {
  const members = [
    {
      eb: "FOUNDING · MAINTAINER",
      seat: "01",
      name: "Roger Hahn",
      bench: "PatentBench",
      benchMeta: "v2026.1 · live in production",
      body: "Patent prosecution benchmark. 604 cases drawn from 98 real applications across 9 USPTO Technology Centers. Four evaluation layers, five difficulty tiers.",
      tier: "Tier 1 · Permanent",
      status: "live",
    },
    {
      eb: "FOUNDING · MAINTAINER",
      seat: "02",
      name: "CBlindspot",
      bench: "DraftBench · ValueBench",
      benchMeta: "announced · accreditation Q3 2026",
      body: "Pre-filing drafting benchmark and patent valuation benchmark. Both designed for dual-track scoring with hard floors on cited-reference fabrication under Therasense.",
      tier: "Tier 1 · Permanent",
      status: "announced",
    },
    {
      eb: "FOUNDING · TBA",
      seat: "03",
      name: "Open seat",
      bench: "third Founding Member",
      benchMeta: "Open Question 4 · companion document",
      body: "Held open at announcement. Candidate categories: academic institution (Stanford CodeX, NYU IP, Berkeley CTSP), existing standards body sponsor (AIPLA, INTA, IPO), or a respected practitioner with an open-source benchmark project.",
      tier: "Tier 1 · Recruiting",
      tba: true,
    },
  ];

  const statusLabel = {
    live: "Live",
    announced: "Announced",
  };

  return (
    <div className="container section">
      <div className="members-grid">
        {members.map((m, i) => (
          <article key={i} className={"member" + (m.tba ? " member-tba" : "")}>
            <header className="member-head">
              <span className="member-seat">SEAT {m.seat}</span>
              <span className="member-eyebrow">{m.eb}</span>
            </header>

            <div className="member-name">{m.name}</div>

            <div className="member-bench-row">
              <span className="member-bench">{m.bench}</span>
              {!m.tba && (
                <span className={"member-pill member-pill-" + m.status}>
                  <span className="member-pill-dot" aria-hidden="true"></span>
                  {statusLabel[m.status]}
                </span>
              )}
            </div>
            <div className="member-bench-meta">{m.benchMeta}</div>

            <p className="member-body">{m.body}</p>

            <footer className="member-foot">
              <span className="member-tier">{m.tier}</span>
              {m.tba
                ? <a className="member-link member-link-tba" href="#">Express interest →</a>
                : <a className="member-link" href="#">View profile →</a>}
            </footer>
          </article>
        ))}
      </div>
    </div>
  );
}
window.Members = Members;