// Audience: two ICP columns of named reactors, then stacked callouts.
function Audience({ data }) {
  return (
    <div className="sec">
      <Eyebrow text={data.eyebrow} icon={data.eyebrowIcon}/>
      <p className="sec-title">{data.title}</p>
      <p className="sec-sub">{data.sub}</p>
      <div className="cols">
        {data.columns.map((c, i) => (
          <div className="card" style={{padding:'15px 16px'}} key={i}>
            <p className="colh">{c.head}<span className="k">{c.k}</span></p>
            {c.rows.map((r, j) => (
              <p className="liq" style={j === c.rows.length - 1 ? {marginBottom:0} : undefined} key={j} dangerouslySetInnerHTML={{__html: r}} />
            ))}
          </div>
        ))}
      </div>
      {data.callouts.map((co, i) => (
        <Callout {...co} key={i} style={i === 0 ? {marginTop:14} : undefined}/>
      ))}
    </div>
  );
}
window.Audience = Audience;