// Horizontal bar chart section. Bars can be flagged (yellow inset outline).
function BarChart({ data }) {
  return (
    <div className="sec">
      <Eyebrow text={data.eyebrow} li={data.eyebrowLI} icon={data.eyebrowIcon}/>
      <p className="sec-title">{data.title}</p>
      <p className="sec-sub">{data.sub}</p>
      <div className="card" style={{padding:'16px 18px 8px'}}>
        {data.bars.map((b, i) => (
          <div className="bar-row" key={i}>
            <span className="bl">{b.l}</span>
            <div className="track">
              <div className="fill" style={{width: b.w + '%', background: b.color, boxShadow: b.flagged ? 'inset 0 0 0 1px #c2c621' : undefined}} />
            </div>
            <span className="bv">{b.v}</span>
          </div>
        ))}
      </div>
      {data.callout && <Callout {...data.callout} style={{marginTop:14}}/>}
    </div>
  );
}
window.BarChart = BarChart;