// SLIDE 09 — TOP PERFORMING CONTENT (5 posts row)
// White background, black pill headers, phone-shaped thumbnails
function TopContentSlide() {
  const posts = [
    { pill:"Impressions",     thumb:"../assets/photos/yellow-outfit-laptop.jpg",  badge:"▶", num:"459",  platform:"LinkedIn", type:"Organic Video",
      caption:"If you're a CEO relying on the \"Official Brand Account\" to do your heavy lifting, you're fighting for a 1.6% slice of the..." },
    { pill:"Full Video Plays",thumb:"../assets/photos/yellow-outfit-laptop.jpg",  badge:"▶", num:"183",  platform:"LinkedIn", type:"Organic Video",
      caption:"If you're a CEO relying on the \"Official Brand Account\" to do your heavy lifting, you're fighting for a 1.6% slice of the..." },
    { pill:"Reactions",       thumb:"../assets/photos/yellow-outfit-laptop.jpg",  badge:"▶", num:"36",   platform:"LinkedIn", type:"Organic Video",
      caption:"If you're a CEO relying on the \"Official Brand Account\" to do your heavy lifting, you're fighting for a 1.6% slice of the..." },
    { pill:"Comments",        thumb:null, num:"4", platform:"LinkedIn", type:"Organic", subtype:"(Webinar Post - Image)",
      caption:"Meta's rolling out Andromeda, and it's rewriting the paid social playbook. Those hyper-granular ad structures are getting phased out. Attribution the way you used to know it isn't reliable. The game has changed, and most brands aren't ready for it." },
    { pill:"Clicks",          thumb:"red-flag", num:"75", platform:"LinkedIn", type:"Organic PDF",
      caption:"Marketing red flags rarely show up as failures. They show up as misalignment. ..." },
  ];

  return (
    <Slide eyebrow="Q1 2026" logo={null} bg="#fff" style={{label:"09 Top Performing Content", color: R.ink}}>
      <div style={{position:'absolute', top:42, right:56}}>
        <img src="../assets/logo-horizontal-blackpink.png" alt="Client logo placeholder" style={{height:22}}/>
      </div>
      <div style={{position:'absolute', top:46, left:56, fontSize:13, fontWeight:700, color:'#666', letterSpacing:'.02em'}}>Q1 2026</div>

      <TitleBlock row1="Top Performing" row2="Content" topPad={80} width={900} accentColor="#111" row1Weight={800}/>

      {/* 5 columns — pulled up so there's clear white space at the bottom of the slide.
          (Title stays put; only the content grid moves.) */}
      <div style={{position:'absolute', top: 300, left: 56, right: 56, display:'grid', gridTemplateColumns:'repeat(5, 1fr)', gap: 20, color: R.ink}}>
        {posts.map((p, i) => (
          <div key={i} style={{display:'flex', flexDirection:'column', alignItems:'center'}}>
            <div style={{background: R.black, color:'#fff', borderRadius:999, padding:'7px 16px', fontSize:11, fontWeight:700, letterSpacing:'.02em', marginBottom:10}}>{p.pill}</div>
            <div style={{width:'70%', height:1, background:'#ccc', marginBottom:10}}/>
            <div style={{fontSize:9, color:'#444', lineHeight:1.45, width:'100%', textAlign:'left', minHeight: 48, marginBottom: 8}}>{p.caption}</div>
            {/* Thumbnail — fixed height to guarantee the slide fits. */}
            {p.thumb === "red-flag" ? (
              <div style={{width:'72%', height: 142, background:'#fff', border:'1px solid #ddd', borderRadius:6, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'space-between', padding:'6px 6px', position:'relative'}}>
                <div style={{fontSize:7, fontWeight:800, color:'#c0392b', letterSpacing:'.04em', textAlign:'center', width:'100%', background:'#fde68a', padding:'2px 4px'}}>RED FLAGS</div>
                <svg viewBox="0 0 60 80" width="50%" style={{flex:1}}>
                  <line x1="20" y1="12" x2="20" y2="70" stroke="#111" strokeWidth="2.5" strokeLinecap="round"/>
                  <path d="M20 12 L48 17 L40 27 L48 37 L20 32 Z" fill="#c0392b"/>
                </svg>
                <div style={{position:'absolute', bottom:4, left:4, width:16, height:16, background:'rgba(0,0,0,.6)', borderRadius:3, display:'flex', alignItems:'center', justifyContent:'center', fontSize:9, color:'#fff'}}>📄</div>
              </div>
            ) : p.thumb ? (
              <div style={{width:'72%', height: 142, position:'relative', borderRadius:6, overflow:'hidden', border:'1px solid #ddd'}}>
                <img src={p.thumb} style={{width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
                {p.badge && <div style={{position:'absolute', bottom:4, left:4, width:16, height:16, background:'rgba(0,0,0,.6)', borderRadius:3, display:'flex', alignItems:'center', justifyContent:'center', fontSize:8, color:'#fff'}}>{p.badge}</div>}
              </div>
            ) : (
              <div style={{width:'72%', height: 142, background:'#fafafa', border:'1px solid #ddd', borderRadius:6, padding:'8px 7px', fontSize:7, color:'#444', lineHeight:1.35, position:'relative', overflow:'hidden'}}>
                {p.caption}
                <div style={{position:'absolute', bottom:4, left:4, width:16, height:16, background:'#111', borderRadius:3, display:'flex', alignItems:'center', justifyContent:'center', fontSize:8, color:'#fff', fontWeight:800}}>A</div>
              </div>
            )}

            <div style={{marginTop:12, fontSize:32, fontWeight:800, lineHeight:1, letterSpacing:'-.02em'}}>{p.num}</div>
            <div style={{marginTop:6, fontSize:10.5, color:'#111', textAlign:'center', lineHeight:1.4, display:'flex', flexDirection:'column', alignItems:'center', gap:2}}>
              <PlatformLabel text={p.platform} size={13} gap={6} style={{fontStyle:'normal', fontWeight:600}}/>
              <span style={{fontStyle:'italic'}}>{p.type}</span>
              {p.subtype && <span style={{fontStyle:'italic'}}>{p.subtype}</span>}
            </div>
          </div>
        ))}
      </div>
    </Slide>
  );
}

window.TopContentSlide = TopContentSlide;