/* global React, Lockup, SLMark, Foot, Counter, ImpressionsBar, Stat */

const TOTAL = 17;

// ─── 01. Cover ─────────────────────────────────────
function S01() {
  return (
    <section data-screen-label="01 Cover" className="slide" style={{ background: 'var(--paper)' }}>
      <div style={{ position:'absolute', inset: 0, background:
        'radial-gradient(800px 600px at 18% 30%, rgba(47,77,216,0.06), transparent 60%),' +
        'radial-gradient(700px 500px at 82% 80%, rgba(0,165,139,0.07), transparent 60%)' }} />
      <div style={{ position:'relative', display:'flex', flexDirection:'column', justifyContent:'space-between', height:'100%' }}>
        <Lockup size="lg" />
        <div>
          <div className="eyebrow" style={{ marginBottom: 28 }}>SEO retainer · Performance intelligence</div>
          <div className="display" style={{ marginBottom: 28 }}>
            Capturing the<br/>
            search <span className="kicker green">opportunity.</span>
          </div>
          <div className="body lg" style={{ maxWidth: 1100 }}>
            5,977 prospects find SWC in search every month.<br/>
            <span style={{ color:'var(--ink)', fontWeight: 600 }}>118 click. The other 5,859 choose someone else.</span>
          </div>
          <div style={{ display:'flex', gap: 18, marginTop: 56 }}>
            <span className="tag teal"><span className="dot" />Prepared for SWC Partnership</span>
            <span className="tag">April 2026 · v1.0</span>
          </div>
        </div>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end' }}>
          <div className="mono" style={{ fontSize: 14, color:'var(--ink-3)', letterSpacing: '0.06em' }}>
            PREPARED BY SPLITLIGHT · TIM HOWE<br/>
            FOR ROB PIETRE-CAMBACEDES · SWC PARTNERSHIP
          </div>
          <div className="div-rule" />
        </div>
      </div>
    </section>
  );
}

// ─── 02. The reality (animated 5,859) ──────────────
function S02() {
  return (
    <section data-screen-label="02 The reality" className="slide">
      <div style={{ display:'flex', flexDirection:'column', height:'100%' }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start' }}>
          <div>
            <div className="eyebrow">The reality · Google Search Console</div>
            <h2 className="title" style={{ marginTop: 16, maxWidth: 1400 }}>
              Every month, this many prospects see SWC in search<br/>
              and <span className="kicker warn">choose a competitor.</span>
            </h2>
          </div>
          <Lockup size="sm" />
        </div>

        <div style={{ flex: 1, display:'flex', alignItems:'center', justifyContent:'center', flexDirection:'column' }}>
          <div style={{ fontSize: 320, fontWeight: 700, lineHeight: 0.92, letterSpacing: '-0.04em', color: 'var(--ink)' }}>
            <Counter to={5859} duration={2600} />
          </div>
          <div style={{ fontSize: 36, color:'var(--ink-2)', marginTop: 12, maxWidth: 1100, textAlign:'center' }}>
            impressions per month with <span style={{ color:'var(--warn)', fontWeight: 600 }}>zero clicks</span>, pages that prospects find, evaluate, and reject.
          </div>
        </div>

        <div style={{ display:'flex', gap: 64, paddingTop: 24, borderTop: '1px solid var(--rule)' }}>
          <Stat value="5,977" label="Total impressions / mo" accent="var(--ink-2)" />
          <Stat value="118" label="Total clicks / mo" accent="var(--swc-green)" />
          <Stat value="1.97%" label="Blended CTR" accent="var(--ink-2)" />
          <Stat value="2%" label="Industry floor, SWC is at floor" accent="var(--warn)" />
        </div>

        <Foot idx={2} total={TOTAL} label="ACT 1 · THE GAP" />
      </div>
    </section>
  );
}

// ─── 03. Page-by-page table ────────────────────────
function S03() {
  const rows = [
    { p:'Homepage', i:3206, c:96, ctr:'3.00%', note:'Branded search, not SEO' },
    { p:'Twitch brand strategy', i:787, c:6, ctr:'0.76%', note:'Wrong page ranking' },
    { p:'Approach', i:256, c:1, ctr:'0.39%', note:'256 saw it. 1 clicked.', flag: true },
    { p:'Case Studies hub', i:248, c:1, ctr:'0.40%', note:'Best assets, invisible', flag: true },
    { p:'Solutions', i:244, c:3, ctr:'1.23%', note:'Persona pathway, no traction' },
    { p:'Estée Lauder × Man Utd', i:270, c:2, ctr:'0.74%', note:'Brand-adjacent searches lost', flag: true },
    { p:'Eurowings expansion', i:175, c:1, ctr:'0.57%', note:'175 looked. 1 clicked.', flag: true },
    { p:'Contact', i:254, c:4, ctr:'1.57%', note:'High intent. Low capture.' },
  ];
  return (
    <section data-screen-label="03 Page table" className="slide">
      <div className="eyebrow">The reality · Page by page</div>
      <h2 className="title" style={{ marginTop: 16, marginBottom: 36 }}>
        These aren't underperforming pages.<br/>
        They're pages prospects are <span className="kicker warn">actively rejecting.</span>
      </h2>

      <div className="card" style={{ padding: 0, overflow:'hidden' }}>
        <div className="mono" style={{ display:'grid', gridTemplateColumns:'2fr 0.7fr 0.6fr 0.6fr 1.6fr', padding:'18px 28px', fontSize: 13, color:'var(--ink-3)', textTransform:'uppercase', letterSpacing:'2px', borderBottom:'1px solid var(--rule)' }}>
          <div>Page</div><div style={{textAlign:'right'}}>Impressions</div><div style={{textAlign:'right'}}>Clicks</div><div style={{textAlign:'right'}}>CTR</div><div style={{paddingLeft: 32}}>Diagnosis</div>
        </div>
        {rows.map((r,i) => (
          <div key={i} style={{
            display:'grid', gridTemplateColumns:'2fr 0.7fr 0.6fr 0.6fr 1.6fr',
            padding:'18px 28px', alignItems:'center',
            background: r.flag ? 'rgba(192,57,43,0.04)' : 'transparent',
            borderBottom: i < rows.length-1 ? '1px solid var(--rule-soft)' : 'none',
            fontSize: 20
          }}>
            <div style={{ fontWeight: 500 }}>{r.p}</div>
            <div className="mono" style={{ textAlign:'right', color:'var(--ink-2)' }}>{r.i.toLocaleString('en-GB')}</div>
            <div className="mono" style={{ textAlign:'right', color:'var(--ink-2)' }}>{r.c}</div>
            <div className="mono" style={{ textAlign:'right', color: r.flag ? 'var(--warn)' : 'var(--ink-2)', fontWeight: r.flag ? 600 : 400 }}>{r.ctr}</div>
            <div style={{ paddingLeft: 32, fontSize: 18, color: r.flag ? 'var(--warn)' : 'var(--ink-3)', fontStyle: r.flag ? 'normal' : 'italic' }}>{r.note}</div>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 24, fontSize: 18, color:'var(--ink-3)' }} className="mono">
        SOURCE · GOOGLE SEARCH CONSOLE · LAST 28 DAYS · APRIL 2026
      </div>

      <Foot idx={3} total={TOTAL} label="ACT 1 · THE GAP" />
    </section>
  );
}

// ─── 04. Hero chart: impressions vs clicks per page ─
function S04() {
  return (
    <section data-screen-label="04 Hero chart" className="slide">
      <div className="eyebrow">The hidden cost · Visualised</div>
      <h2 className="title" style={{ marginTop: 16, marginBottom: 24 }}>
        Each grey bar is a month of missed pipeline.<br/>
        The teal sliver is what we capture today.
      </h2>

      <div style={{ flex: 1, display:'flex', flexDirection:'column', justifyContent:'center', gap: 18, padding: '24px 0' }}>
        <ImpressionsBar label="Approach" impressions={256} clicks={1} ctr="0.39" highlight />
        <ImpressionsBar label="Case Studies hub" impressions={248} clicks={1} ctr="0.40" highlight />
        <ImpressionsBar label="Estée Lauder × Man Utd" impressions={270} clicks={2} ctr="0.74" highlight />
        <ImpressionsBar label="Eurowings expansion" impressions={175} clicks={1} ctr="0.57" highlight />
        <ImpressionsBar label="Solutions" impressions={244} clicks={3} ctr="1.23" />
        <ImpressionsBar label="Twitch blog (off-strategy)" impressions={787} clicks={6} ctr="0.76" />
        <ImpressionsBar label="Homepage (branded)" impressions={3206} clicks={96} ctr="3.00" accent="var(--swc-green)" />
      </div>

      <div style={{ display:'flex', gap: 40, paddingTop: 24, borderTop:'1px solid var(--rule)', alignItems:'center' }}>
        <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
          <span style={{ width: 16, height: 16, background:'var(--paper-3)', borderRadius: 3 }} />
          <span style={{ fontSize: 16, color:'var(--ink-2)' }}>Impressions (prospects who saw SWC)</span>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
          <span style={{ width: 16, height: 16, background:'var(--swc-teal)', borderRadius: 3 }} />
          <span style={{ fontSize: 16, color:'var(--ink-2)' }}>Clicks (prospects we captured)</span>
        </div>
        <div style={{ display:'flex', alignItems:'center', gap: 10 }}>
          <span style={{ width: 16, height: 16, background:'rgba(192,57,43,0.20)', borderRadius: 3 }} />
          <span style={{ fontSize: 16, color:'var(--ink-2)' }}>Pages where impressions exist but clicks don't</span>
        </div>
      </div>
      <Foot idx={4} total={TOTAL} label="ACT 1 · THE GAP" />
    </section>
  );
}

window.S01 = S01; window.S02 = S02; window.S03 = S03; window.S04 = S04;