// Governance process — how a proposal is chosen (a process, not a fixed answer).
function Governance({ data }) {
  const { Eyebrow } = window.IAIGADesignSystem_db07e0;
  const { Icon } = window;
  const g = data.governance;
  if (!g) return null;
  const icons = [Icon.Inbox, Icon.Ballot, Icon.Landmark];
  return (
    <section className="gov section" id="process">
      <div className="wrap">
        <div className="gov__head">
          <Eyebrow>{g.eyebrow}</Eyebrow>
          <h2 className="gov__heading">{g.heading}</h2>
          <p className="gov__lead">{g.lead}</p>
        </div>
        <ol className="gov__steps">
          {g.points.map((p, i) => {
            const I = icons[i % icons.length];
            return (
              <li key={p.k} className="gov__step">
                <div className="gov__step-icon"><I width={20} height={20} /></div>
                <div className="gov__step-k">{p.k}</div>
                <div className="gov__step-t">{p.t}</div>
                <p className="gov__step-d">{p.d}</p>
                {i < g.points.length - 1 ? <span className="gov__step-arrow" aria-hidden="true">→</span> : null}
              </li>
            );
          })}
        </ol>
        {g.note ? <p className="gov__note">{g.note}</p> : null}
      </div>
    </section>
  );
}
window.Governance = Governance;