// SLIDE 10 — TOP PERFORMING CONTENT · MESSAGING INSIGHTS
// Split layout: white 2/3 + black 1/3 on right with "Our Test For April"
function MessagingInsightsSlide() {
  return (
    <Slide eyebrow="Q1 2026" logo={null} bg="#fff" style={{label:"10 Messaging Insights", color: R.ink}}>
      {/* Black strip on right ~1/3 */}
      <div style={{position:'absolute', top:0, right:0, bottom:0, width: '32%', background: R.black}}/>

      {/* Chatterkick logo on the black strip */}
      <div style={{position:'absolute', top:56, right:56, zIndex: 2}}>
        <img src="../assets/logo-horizontal-whitepink.png" alt="Client logo placeholder" style={{height: 30}}/>
      </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" sub="Messaging Insights" topPad={80} width={720} accentColor="#111" row1Weight={800}/>

      {/* What We Learned */}
      <div style={{position:'absolute', top: 318, left: 56, right: '36%', display:'grid', gridTemplateColumns:'168px 1fr', gap:26, alignItems:'start'}}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <GreenCheck size={32}/>
          <div style={{fontWeight:700, fontSize:22, color: R.ink, letterSpacing:'-.005em'}}>What We Learned</div>
        </div>
        <ul style={{margin:0, paddingLeft:16, fontSize:18, lineHeight:1.55, color:'#222'}}>
          <li>Top posts delivered actionable insights or educated the audience on trends like AI and search behavior. Weaker pieces lacked a clear "why it matters," and softer video without a strong hook reduced engagement intent.</li>
        </ul>
      </div>

      {/* Hairline divider */}
      <div style={{position:'absolute', left: 56, right: '36%', top: 486, height:1, background:'#e5e5e5'}}/>

      {/* Going Forward */}
      <div style={{position:'absolute', top: 518, left: 56, right: '36%', display:'grid', gridTemplateColumns:'168px 1fr', gap:26, alignItems:'start'}}>
        <div style={{display:'flex', alignItems:'center', gap:12}}>
          <Lightbulb size={32}/>
          <div style={{fontWeight:700, fontSize:22, color: R.ink, letterSpacing:'-.005em'}}>Going Forward</div>
        </div>
        <ul style={{margin:0, paddingLeft:16, fontSize:18, lineHeight:1.55, color:'#222'}}>
          <li>Keep investing in culture-driven content, but anchor it in external value. Shift toward proof-driven storytelling with real outcomes and client impact, and lead with a hook tied to a problem rather than recognition alone.</li>
        </ul>
      </div>

      {/* Right black strip content */}
      <div style={{position:'absolute', top: 340, right: 48, width: 250, color:'#fff'}}>
        <div style={{display:'flex', alignItems:'center', gap: 12, marginBottom: 14}}>
          <CheckDot size={20}/>
          <div style={{fontWeight:700, fontSize:20, lineHeight:1.2, letterSpacing:'-.005em'}}>Our Test For April:</div>
        </div>
        <div style={{fontSize:18, lineHeight:1.5, color:'#e5e5e5'}}>Moving our video &amp; engagement focused ads into the traffic objective to increase site visits</div>
      </div>
    </Slide>
  );
}

window.MessagingInsightsSlide = MessagingInsightsSlide;