// SLIDE 03 — SUMMARY HIGHLIGHTS & OBSERVATIONS
// Three columns: What Worked (green check), Trends & Insights (lightbulb), Things to Test (purple triangle)
function SummaryHighlightsSlide() {
  const cols = [
    {
      icon: <GreenCheck/>, title: "What Worked", bullets: [
        "CPMs well below benchmark, letting us scale awareness without cost pressure",
        "71.4K engagements, showing clear resonance with educational themes",
        "YouTube expanded reach and video consumption",
      ],
    },
    {
      icon: <Lightbulb/>, title: "Trends & Insights", bullets: [
        "Awareness is compounding beyond paid, with organic search signaling active intent",
        "AI visibility is emerging as a discovery layer, but not yet a traffic driver",
        "Alignment is strengthening with mid-market; enterprise positioning needs depth",
      ],
    },
    {
      icon: <WarningTri/>, title: "Things to Test", bullets: [
        "Proof-driven, outcome-focused content to bridge engagement and conversion",
        "Stronger hooks and POV-led creative to increase intent, not just interaction",
      ],
    },
  ];

  return (
    <Slide eyebrow="Q1 2026" logo="white" bg="#fff" style={{label:"03 Summary Highlights", color:R.ink}}>
      {/* Override: This slide is WHITE (airy) — override eyebrow color to ink */}
      <style>{`
        [data-screen-label="03 Summary Highlights"] > div:nth-child(1) { color: ${R.ink} !important; }
      `}</style>

      {/* Custom ink-colored logo */}
      <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="Summary Highlights &" row2="Observations" topPad={80} width={1100} accentColor="#111"/>

      {/* Three columns */}
      <div style={{position:'absolute', top: 324, left: 56, right: 56, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 48, color: R.ink}}>
        {cols.map((c, i) => (
          <div key={i} style={{borderLeft: i > 0 ? `1px solid ${R.lightGray}` : 'none', paddingLeft: i > 0 ? 36 : 0}}>
            <div style={{display:'flex', alignItems:'center', gap:14, marginBottom: 26}}>
              {c.icon}
              <div style={{fontWeight:700, fontSize:24, letterSpacing:'-.01em', lineHeight:1.15}}>{c.title}</div>
            </div>
            <ul style={{listStyle:'none', margin:0, padding:0, display:'flex', flexDirection:'column', gap:18}}>
              {c.bullets.map((b, j) => (
                <li key={j} style={{display:'flex', gap:12, fontSize:18, lineHeight:1.45, color:'#333'}}>
                  <CheckDot size={18}/>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </Slide>
  );
}

window.SummaryHighlightsSlide = SummaryHighlightsSlide;