// SLIDE 08 — INDUSTRY BENCHMARKS (table)
function IndustryBenchmarksSlide() {
  const rows = [
    { n:"01", name:"LinkedIn CPM",  ck:"$5.11",  ind:"$32.10", vs:"84%",  vsSub:"more efficient", alt:false },
    { n:"02", name:"LinkedIn CTR",  ck:"0.47%",  ind:"0.45%",  vs:"4.4%", vsSub:"Higher",          alt:true,  note:"*3.37% when you only calculate Traffic & Engagement Objectives" },
    { n:"03", name:"YouTube CPM",   ck:"$5.23",  ind:"$8.10",  vs:"35%",  vsSub:"more efficient", alt:false },
  ];

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

      {/* Legend sits above the table, right-aligned — same pattern as slide 04. */}
      <div style={{position:'absolute', top: 286, right: 56, display:'flex', gap: 28, fontSize:11.5, color:'#333'}}>
        <span style={{display:'inline-flex', alignItems:'center', gap:8}}><GreenCheck size={16}/> = Metric in good standing</span>
        <span style={{display:'inline-flex', alignItems:'center', gap:8}}>
          <svg viewBox="0 0 40 40" width="16" height="16"><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>

      {/* Table */}
      <div style={{position:'absolute', top: 320, left: 56, right: 56, color: R.ink}}>
        {/* Header row — padded to match the data rows so columns align. */}
        <div style={{display:'grid', gridTemplateColumns:'80px 240px 1fr 1fr 1fr', padding:'0 22px 14px', fontSize:11, fontWeight:700, color:'#888', letterSpacing:'.14em', textTransform:'uppercase', fontFamily:'var(--font-sans)'}}>
          <div></div><div></div>
          <div>Chatterkick</div>
          <div>Industry</div>
          <div>% vs. Benchmark</div>
        </div>

        {/* Rounded border around rows */}
        <div style={{border:`1.5px solid ${R.ink}`, borderRadius: 20, overflow:'hidden'}}>          {rows.map((r, i) => (
            <div key={i} style={{
              display:'grid',
              gridTemplateColumns:'80px 240px 1fr 1fr 1fr',
              alignItems:'center',
              background: r.alt ? R.cream : '#fff',
              borderBottom: i < rows.length - 1 ? `1px solid #e6dfca` : 'none',
              padding: '20px 22px',
              minHeight: 76,
            }}>
              {/* Row number, metric name, and all numerics in Montserrat per design feedback */}
              <div style={{fontSize: 32, fontWeight: 600, fontFamily:'var(--font-sans)', lineHeight:1, color:'#888', letterSpacing:'-.01em'}}>{r.n}</div>
              <div style={{fontSize: 15, fontWeight: 600, lineHeight:1.3, fontFamily:'var(--font-sans)'}}><PlatformLabel text={r.name} size={15} gap={8} style={{lineHeight:1.3}}/></div>
              {/* Chatterkick value: number + check on one centered row, footnote sits below so
                  it never pushes the check off-center from the numeral. */}
              <div>
                <div style={{display:'flex', alignItems:'center', gap: 10}}>
                  <div style={{fontFamily:'var(--font-sans)', fontSize: 32, fontWeight: 700, lineHeight:1, letterSpacing:'-.02em'}}>{r.ck}</div>
                  <GreenCheck size={20}/>
                </div>
                {r.note && <div style={{fontSize:9.5, fontStyle:'italic', color:'#555', marginTop: 6, maxWidth:170, lineHeight:1.4}}>{r.note}</div>}
              </div>
              <div style={{fontFamily:'var(--font-sans)', fontSize: 32, fontWeight: 600, letterSpacing:'-.01em'}}>{r.ind}</div>
              <div>
                <div style={{fontFamily:'var(--font-sans)', fontSize: 32, fontWeight: 700, lineHeight:1, letterSpacing:'-.01em'}}>{r.vs}</div>
                <div style={{fontFamily:'var(--font-sans)', fontSize: 12, fontWeight: 500, color:'#555', marginTop: 4, letterSpacing:'.01em'}}>{r.vsSub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Slide>
  );
}

window.IndustryBenchmarksSlide = IndustryBenchmarksSlide;