// Recommendations: numbered list + dark summary band.
function Recommendations({ data }) {
  return (
    <div className="sec">
      <Eyebrow text={data.eyebrow} icon={data.eyebrowIcon}/>
      <p className="sec-title">{data.title}</p>
      <div style={{marginTop:6}}>
        {data.recs.map((r, i) => (
          <div className="rec" key={i}>
            <span className="rn num">{i + 1}</span>
            <p dangerouslySetInnerHTML={{__html: r}} />
          </div>
        ))}
      </div>
      <div className="band">
        <p className="bt">{data.band.title}</p>
        <p className="bb">{data.band.body}</p>
      </div>
    </div>
  );
}
window.Recommendations = Recommendations;