// SLIDE 05 — SOCIAL'S IMPACT ON DISCOVERABILITY
// 4 platform cards with colored platform name, then number + up/down delta
function DiscoverabilitySlide() {
  const cards = [
    { platform:"Meta", color:"#DEE22A", label:"Page Views",     num:"549",  delta:"Down 38%", down:true },
    { platform:"LinkedIn", color:"#22c55e", label:"Profile Views", num:"544",  delta:"Down 4%",  down:true },
    { platform:"YouTube", color:"#22d3ee", label:"Video Views",    num:"149K", delta:"Up 150%",  down:false },
    { platform:"Google",  color:"#a78bfa", label:"Organic Visitors",num:"808", delta:"Up 2%",    down:false },
  ];

  return (
    <Slide eyebrow="Q1 2026" logo="white" style={{label:"05 Discoverability"}}>
      <TitleBlock row1="Social's Impact on" row2="Discoverability" topPad={76} width={1100} row1Weight={800}/>

      {/* 4 platform cards — positioned below title */}
      <div style={{position:'absolute', top: 314, left: 56, right: 56, display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap: 20}}>
        {cards.map((c,i) => (
          <div key={i} style={{display:'flex', flexDirection:'column', alignItems:'center', gap:12}}>
            <div style={{fontFamily:'var(--font-sans)', fontWeight:700, fontSize:22, color: c.color, letterSpacing:'-.005em', display:'flex', alignItems:'center', gap:9}}><PlatformIcon name={c.platform} size={22} color={c.color}/>{c.platform}</div>
            <WhiteCard style={{width:'100%', borderRadius: 20, padding:'20px 14px 18px', textAlign:'center'}}>
              <div style={{fontSize:12, color: R.ink, fontWeight:600, lineHeight:1.4}}>{c.label}</div>
              <div style={{fontSize:46, fontWeight:800, lineHeight:1.05, marginTop:10, letterSpacing:'-.02em', color: R.ink}}>{c.num}</div>
              <div style={{fontSize:13, fontWeight:600, marginTop:10, color: c.down ? R.red : R.green}}>{c.delta}</div>
            </WhiteCard>
          </div>
        ))}
      </div>

      {/* Bottom narrative card */}
      <div style={{position:'absolute', bottom: 60, left: 100, right: 100}}>
        <WhiteCard style={{borderRadius: 24, padding:'18px 28px 22px', textAlign:'center', color: R.ink}}>
          <div style={{fontSize:13.5, lineHeight:1.55}}>We're seeing a clear expansion in top-of-funnel visibility, driven primarily by significant growth in YouTube video consumption, while Meta and LinkedIn profile interactions softened. At the same time, steady growth in organic search suggests that awareness efforts are compounding beyond paid channels, with more users actively seeking out the brand rather than discovering it passively.</div>
          <div style={{fontSize: 10.5, fontStyle:'italic', color:'#666', marginTop: 12, lineHeight: 1.5}}>
            *YouTube does not show what we consider to be accurate "profile views" metrics – only video views, so we are unable to determine how many users visited your profiles on those platforms.
          </div>
        </WhiteCard>
      </div>
    </Slide>
  );
}

window.DiscoverabilitySlide = DiscoverabilitySlide;