// SLIDE 04 — EXECUTIVE SUMMARY (6-column metrics card)
function ExecutiveSummarySlide() {
  const metrics = [
    { label:"Total\nImpressions", num:"457K", check:true, subList:["Meta 11.4K","YouTube 149K","LinkedIn 295.5K","TikTok 1.5K"],
      caption:"We generated 457K impressions efficiently, keeping visibility strong across channels. This gives us a stable base to shift from awareness to action." },
    { label:"Engagement", num:"71.4K", check:true, subList:[],
      caption:"71.4K engagements show the content is hitting — especially educational posts. The takeaway is simple: relevance is working. Now it's time to turn that attention into conversion." },
    { label:"Site Traffic", num:"4.5K", check:true, subList:["393 (9%) from direct marketing efforts (social, video, email)"],
      caption:"A portion of traffic came without direct paid attribution, pointing to awareness doing its job. Paid is supporting demand, but not the only driver." },
    { label:"Website\nConversions", num:"182", check:true, subList:["103 Blog Views","74 Contact Us","3 Social Status"],
      caption:"Conversions happened without traffic-focused optimization. That signals interest is there — we just haven't fully captured it yet." },
    { label:"Efficiency", num:"$5.01", sub:"Overall CPM", check:true, subList:[],
      caption:"$5.01 CPM keeps us well below benchmark, giving us room to pivot objectives without increasing costs." },
    { label:"Messages\nReceived", num:"104", check:true, subList:["48% Positive","11% Mentions","16% Spam"],
      caption:"Messaging volume was largely driven by webinar participation with steady responses on X/Twitter. Positive engagement came from helpful tips and employee-related content." },
  ];

  return (
    <Slide eyebrow="Q1 2026" logo={null} bg="#fff" style={{label:"04 Executive Summary", 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="Executive" row2="Summary" topPad={80} width={720} accentColor="#111" row1Weight={800}/>

      {/* "Key Metrics" label — right-aligned, clear of the TAN "Summary" swash (rule 1: no overlap). */}
      <div style={{position:'absolute', right: 56, top: 248, fontSize: 16, fontWeight: 600, color:'#111', letterSpacing:'.01em'}}>Key Metrics Overview</div>

      {/* Legend top-right under logo */}
      <div style={{position:'absolute', top: 166, right: 56, display:'flex', gap: 28, fontSize:12, color:'#333'}}>
        <span style={{display:'inline-flex', alignItems:'center', gap:8}}><GreenCheck size={18}/> = metric in good standing</span>
        <span style={{display:'inline-flex', alignItems:'center', gap:8}}>
          <svg viewBox="0 0 40 40" width="18" height="18"><path d="M20 4 L38 34 L2 34 Z" fill="#eab308"/><rect x="18.6" y="13" width="2.8" height="13" rx="1.4" fill="#fff"/><circle cx="20" cy="30" r="1.8" fill="#fff"/></svg>
          = review recommended
        </span>
      </div>

      {/* Six-column white card */}
      <div style={{position:'absolute', top: 290, left: 56, right: 56, background:'#fff', borderRadius:20, border:`1.5px solid ${R.ink}`, padding:'32px 24px', display:'grid', gridTemplateColumns:'repeat(6,1fr)', gap: 20, color: R.ink}}>
        {metrics.map((m,i) => (
          <div key={i} style={{borderRight: i < 5 ? `1px solid ${R.lightGray}` : 'none', paddingRight: 18, display:'flex', flexDirection:'column'}}>
            <div style={{fontWeight:700, fontSize:14, textTransform:'none', color:R.ink, whiteSpace:'pre-line', marginBottom: 16, minHeight: 44, lineHeight:1.35}}>{m.label}</div>
            <div style={{borderTop:`2px solid ${R.ink}`, paddingTop: 14}}>
              {/* Green check centered vertically to the number, not on the baseline */}
              <div style={{display:'flex', alignItems:'center', gap:8}}>
                <div style={{fontWeight:800, fontSize:36, lineHeight:1, letterSpacing:'-.02em'}}>{m.num}</div>
                {m.check && <GreenCheck size={18}/>}
              </div>
              {m.sub && <div style={{fontSize:11, color:'#666', marginTop:4}}>{m.sub}</div>}
              {m.subList.length > 0 && (
                <div style={{marginTop:8, fontSize:11, color:'#333', lineHeight:1.55}}>
                  {m.subList.map((s,j) => <div key={j}><PlatformLabel text={s} size={13} gap={6}/></div>)}
                </div>
              )}
            </div>
            <div style={{marginTop: 20, fontSize: 11, color:'#444', lineHeight:1.55}}>{m.caption}</div>
          </div>
        ))}
      </div>

      {/* (Removed "Why it matters" handwritten callout — script font + cyan are reserved
          for callouts the user explicitly requests.) */}
    </Slide>
  );
}

window.ExecutiveSummarySlide = ExecutiveSummarySlide;