// Roadmap.jsx
function Roadmap() {
  const rows = [
    {
      phase: "Formation",
      window: "May 2026",
      anchor: "INTA",
      milestones: [
        "Council formation announcement",
        "Founding Members named",
        "Charter v1.0 published",
        "First public meeting scheduled",
      ],
      state: "next",
    },
    {
      phase: "Initial accreditation",
      window: "Jun–Sep 2026",
      anchor: "Q3",
      milestones: [
        "Accreditation criteria finalized",
        "First accreditations of PatentBench and DraftBench",
        "Stakeholder Working Groups stood up",
        "First members enrolled across Tiers 2–4",
      ],
      state: "future",
    },
    {
      phase: "First annual cycle",
      window: "Oct–Dec 2026",
      anchor: "Q4",
      milestones: [
        "First annual Council report",
        "Joint cross-benchmark publication",
        "Insurance & Risk WG engages first carrier (target: Aon Affinity)",
      ],
      state: "future",
    },
    {
      phase: "Expansion",
      window: "2027",
      anchor: "Y2",
      milestones: [
        "Federation expanded to 4–5 accredited benchmarks",
        "Procurement integration with Mitratech or Onit",
        "First academic partnership (ClaimConstructionBench / InvalidityBench)",
      ],
      state: "future",
    },
    {
      phase: "Institutionalization",
      window: "2028",
      anchor: "Y3",
      milestones: [
        "Move to non-profit incorporation or sponsorship (AIPLA, Linux Foundation, INTA)",
        "Academic publication of methodology framework",
      ],
      state: "future",
    },
  ];

  return (
    <div className="container section">
      <ol className="roadmap">
        {rows.map((r, i) => (
          <li key={i} className={"roadmap-row roadmap-" + r.state}>
            <div className="roadmap-rail">
              <div className="roadmap-anchor">{r.anchor}</div>
              <div className="roadmap-line" aria-hidden="true"></div>
              <div className="roadmap-node" aria-hidden="true"></div>
            </div>
            <div className="roadmap-content">
              <div className="roadmap-head">
                <div className="roadmap-phase">
                  <span className="roadmap-num">{String(i + 1).padStart(2, "0")}</span>
                  <h4 className="roadmap-title">{r.phase}</h4>
                </div>
                <div className="roadmap-window">{r.window}</div>
              </div>
              <ul className="roadmap-milestones">
                {r.milestones.map((m, j) => <li key={j}>{m}</li>)}
              </ul>
            </div>
          </li>
        ))}
      </ol>
    </div>
  );
}
window.Roadmap = Roadmap;