// Top posts: 3 ranked cards (media placeholder + hook + metrics) then a callout.
function TopPosts({ data }) {
  return (
    <div className="sec">
      <Eyebrow text={data.eyebrow} li={data.eyebrowLI}/>
      <p className="sec-title">{data.title}</p>
      <p className="sec-sub">{data.sub}</p>
      <div className="tp">
        {data.posts.map((p, i) => (
          <div className="pc" key={i}>
            <div className="thumb" style={{background: p.bg, color:'#fff'}}>
              <span className="rank num">{p.rank}</span>
              <TI name={p.icon} size={30} style={{opacity:.92}}/>
              <span className="tbadge"><TI name={p.badgeIcon} size={12}/>{p.badge}</span>
            </div>
            <div className="m">
              <p className="hook">{p.hook}</p>
              <div className="mrow">
                <span><TI name="ti-eye" size={13}/>{p.views}</span>
                <span><TI name="ti-thumb-up" size={13}/>{p.likes}</span>
                <span><TI name="ti-message-circle" size={13}/>{p.comments}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
      {data.callout && <Callout {...data.callout} style={{marginTop:14}}/>}
    </div>
  );
}
window.TopPosts = TopPosts;