// Problem / precedent — governance has been solved before.
function Precedent({ data }) {
  const { Eyebrow } = window.IAIGADesignSystem_db07e0;
  return (
    <section className="precedent section" id="problem">
      <div className="precedent__media" aria-hidden="true">
        <div className="precedent__photo"></div>
      </div>
      <div className="wrap precedent__inner">
        <div className="precedent__copy">
          <Eyebrow>The problem</Eyebrow>
          <h2 className="precedent__heading">{data.problem}</h2>
          <p className="precedent__note">{data.precedentNote}</p>
        </div>
        <ol className="precedent__list">
          {data.precedents.map((p, i) => (
            <li key={p.name} className="precedent__item">
              <span className="precedent__num">{String(i + 1).padStart(2, "0")}</span>
              {p.url
                ? <a className="precedent__name precedent__name--link" href={p.url} target="_blank" rel="noopener noreferrer">{p.name}</a>
                : <span className="precedent__name">{p.name}</span>}
              <span className="precedent__year">{p.year}</span>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}
window.Precedent = Precedent;