// The proposal — what we're asking for, and the path to get there.
function TheAsk({ data }) {
  const { Eyebrow, Card } = window.IAIGADesignSystem_db07e0;
  const { Icon } = window;
  const icons = [Icon.Users, Icon.Ballot, Icon.Scale];
  return (
    <section className="ask section" id="need">
      <div className="wrap">
        <div className="ask__head">
          <Eyebrow onDark>Our proposal</Eyebrow>
          <h2 className="ask__heading">{data.need}</h2>
        </div>
        {data.needFunctions ? (
          <div className="ask__functions-wrap">
            <p className="ask__functions-lead">{data.needFunctions.lead}</p>
            <ol className="ask__functions">
              {data.needFunctions.items.map((t, i) => (
                <li key={i} className="ask__fn">
                  <span className="ask__fn-num">{String(i + 1).padStart(2, "0")}</span>
                  <p className="ask__fn-text">{t}</p>
                </li>
              ))}
            </ol>
          </div>
        ) : null}
        <p className="ask__path-label">How we get there</p>
        <ol className="ask__steps">
          {data.needSteps.map((s, i) => {
            const I = icons[i];
            return (
              <li key={s.k} className="ask__step">
                <div className="ask__step-icon"><I width={20} height={20}/></div>
                <div className="ask__step-k">{s.k}</div>
                <div className="ask__step-t">{s.t}</div>
                <p className="ask__step-d">{s.d}</p>
                {i < data.needSteps.length - 1 ? <span className="ask__step-arrow" aria-hidden="true">→</span> : null}
              </li>
            );
          })}
        </ol>
      </div>
    </section>
  );
}
window.TheAsk = TheAsk;