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

// ─── 14. ROI / Without vs With SEO ─────────────────
function S14() {
  return (
    <section data-screen-label="14 ROI comparison" className="slide">
      <div className="eyebrow">The business case · Year-one</div>
      <h2 className="title" style={{ marginTop: 16, marginBottom: 32 }}>
        Same site. Same launch. <span className="kicker">two trajectories.</span>
      </h2>

      <div style={{ flex: 1, display:'flex', gap: 22 }}>
        <div className="card" style={{ flex: 1, padding: 44, display:'flex', flexDirection:'column' }}>
          <div className="mono" style={{ fontSize: 13, color:'var(--ink-3)', letterSpacing:'3px', marginBottom: 16 }}>SCENARIO A · WITHOUT SEO</div>
          <div style={{ fontSize: 36, fontWeight: 700, marginBottom: 24, lineHeight: 1.1, color:'var(--ink-2)' }}>Hold the line. Nothing changes.</div>
          <div style={{ height: 1, background:'var(--rule)', marginBottom: 20 }} />
          {[
            ['Monthly clicks', '~120', 'flat'],
            ['Annual organic clicks', '~1,440', 'flat'],
            ['New clients (year-one)', '4–8', 'flat'],
            ['Pipeline contribution', '£140K–£280K', 'flat'],
          ].map(([k,v]) => (
            <div key={k} style={{ display:'flex', justifyContent:'space-between', padding:'14px 0', borderBottom:'1px solid var(--rule-soft)' }}>
              <span style={{ fontSize: 18, color:'var(--ink-2)' }}>{k}</span>
              <span className="mono" style={{ fontSize: 22, fontWeight: 600, color:'var(--ink-2)' }}>{v}</span>
            </div>
          ))}
          <div style={{ marginTop:'auto', paddingTop: 24 }}>
            <div className="mono" style={{ fontSize: 12, color:'var(--ink-3)', letterSpacing:'2px', marginBottom: 6 }}>STATUS</div>
            <div style={{ fontSize: 22, color:'var(--warn)', fontWeight: 600 }}>Investment under-performs.</div>
          </div>
        </div>

        <div className="card deep" style={{ flex: 1.2, padding: 44, display:'flex', flexDirection:'column', position:'relative', overflow:'hidden' }}>
          <div style={{ position:'absolute', top:-100, right:-100, width: 400, height: 400, background:'radial-gradient(circle, rgba(84,192,211,0.18), transparent 70%)' }} />
          <div className="mono" style={{ fontSize: 13, color:'var(--swc-teal)', letterSpacing:'3px', marginBottom: 16 }}>SCENARIO B · WITH SEO · GROWTH TIER</div>
          <div style={{ fontSize: 36, fontWeight: 700, marginBottom: 24, lineHeight: 1.1, color:'#fff' }}>Compound the launch into a pipeline asset.</div>
          <div style={{ height: 1, background:'rgba(255,255,255,0.10)', marginBottom: 20 }} />
          {[
            ['Monthly clicks', '~1,200', '10×'],
            ['Annual organic clicks', '~14,400', '10×'],
            ['New clients (year-one)', '20–40', '5×'],
            ['Pipeline contribution', '£700K–£1.4M', '5×'],
          ].map(([k,v,d]) => (
            <div key={k} style={{ display:'flex', justifyContent:'space-between', alignItems:'center', padding:'14px 0', borderBottom:'1px solid rgba(255,255,255,0.06)' }}>
              <span style={{ fontSize: 18, color:'rgba(255,255,255,0.7)' }}>{k}</span>
              <div style={{ display:'flex', alignItems:'center', gap: 14 }}>
                <span className="mono" style={{ fontSize: 12, color:'var(--swc-teal)', background:'rgba(84,192,211,0.12)', padding:'3px 8px', borderRadius: 4, letterSpacing:'1px' }}>{d}</span>
                <span className="mono" style={{ fontSize: 22, fontWeight: 600, color:'#fff' }}>{v}</span>
              </div>
            </div>
          ))}
          <div style={{ marginTop:'auto', paddingTop: 24 }}>
            <div className="mono" style={{ fontSize: 12, color:'rgba(255,255,255,0.5)', letterSpacing:'2px', marginBottom: 6 }}>YEAR-ONE ROI ON £30K INVESTMENT</div>
            <div style={{ fontSize: 88, fontWeight: 700, color:'var(--swc-teal)', lineHeight: 1, letterSpacing:'-0.02em' }}>23–47×</div>
          </div>
        </div>
      </div>

      <div style={{ marginTop: 24, fontSize: 16, color:'var(--ink-3)', maxWidth: 1400 }} className="mono">
        SEO IS ONE OF THE FEW MARKETING INVESTMENTS WHERE YEAR-TWO RETURN IS LARGER THAN YEAR-ONE · RANKINGS, LINKS, AND AUTHORITY KEEP COMPOUNDING.
      </div>
      <Foot idx={14} total={17} label="ACT 4 · THE BUSINESS CASE" />
    </section>
  );
}

// ─── 15. How we track ──────────────────────────────
function S15() {
  const tools = [
    { tool:'Google Search Console', what:'Impressions, clicks, CTR, queries', cadence:'Real-time dashboard · monthly review', color:'var(--sl-blue)' },
    { tool:'Ahrefs / Semrush', what:'Keyword rankings, competitor delta, backlinks', cadence:'Weekly tracking · monthly report', color:'var(--swc-green)' },
    { tool:'GA4 + CRM', what:'Pipeline attribution, conversion paths', cadence:'Monthly attribution review', color:'var(--sl-purple)' },
    { tool:'Splitlight Insights', what:'Core Web Vitals, technical SEO health, AI-powered recommendations', cadence:'Continuous monitoring · weekly digest', color:'var(--swc-teal)' },
  ];
  return (
    <section data-screen-label="15 Tracking" className="slide">
      <div className="eyebrow teal">Accountability · How targets are tracked</div>
      <h2 className="title" style={{ marginTop: 16, marginBottom: 32 }}>
        Every number in this proposal is <span className="kicker green">independently verifiable.</span>
      </h2>

      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 18, flex: 1 }}>
        {tools.map(t => (
          <div key={t.tool} className="card" style={{ padding: 32, display:'flex', flexDirection:'column', gap: 12 }}>
            <div style={{ display:'flex', alignItems:'center', gap: 14 }}>
              <span style={{ width: 14, height: 14, background: t.color, borderRadius: 3, boxShadow: `0 0 16px ${t.color}` }} />
              <div style={{ fontSize: 26, fontWeight: 700, color:'var(--ink)' }}>{t.tool}</div>
            </div>
            <div style={{ fontSize: 18, color:'var(--ink-2)', lineHeight: 1.45 }}>{t.what}</div>
            <div className="mono" style={{ fontSize: 13, color: t.color, letterSpacing:'2px', marginTop:'auto', textTransform:'uppercase' }}>{t.cadence}</div>
          </div>
        ))}
      </div>

      <div className="card tinted" style={{ marginTop: 24, padding: 28, display:'flex', alignItems:'center', gap: 24 }}>
        <div style={{ width: 4, alignSelf:'stretch', background:'var(--swc-green)', borderRadius: 2 }} />
        <div>
          <div style={{ fontSize: 22, fontWeight: 600, color:'var(--ink)', marginBottom: 6 }}>Quarterly review commitment</div>
          <div style={{ fontSize: 17, color:'var(--ink-2)', maxWidth: 1500 }}>If targets aren't being hit, the strategy is reassessed, the engagement recalibrated, and clear corrective action agreed. The day-rate model means SWC scales the engagement based on what the data shows is working.</div>
        </div>
      </div>
      <Foot idx={15} total={17} label="ACT 4 · ACCOUNTABILITY" />
    </section>
  );
}

// ─── 16. Next steps · 3-week onramp ─────────────────
function S16() {
  return (
    <section data-screen-label="16 Next steps" className="slide">
      <div className="eyebrow">Next steps · Two-week start</div>
      <h2 className="title" style={{ marginTop: 16, marginBottom: 36 }}>
        Active engagement <span className="kicker blue">within two weeks.</span>
      </h2>

      <div style={{ flex: 1, display:'flex', gap: 18 }}>
        {[
          { w:'WEEK 01', t:'Discovery', d:'Splitlight runs a full audit of GSC, GA4, the live site, and a competitive analysis of UP THERE EVERYWHERE network agencies and core competitors.', out:'Detailed strategy document. 90-day quick-wins plan. Keyword targets per persona.' },
          { w:'WEEK 02', t:'Strategy', d:'Strategy presentation to the SWC team. Walk through the data-driven business case. Agree the engagement tier and starting day allocation. Sign the retainer.', out:'Engagement signed. Tier locked. Onboarding scheduled.' },
          { w:'WEEK 03', t:'Engagement begins', d:'Phase 1 quick wins start immediately. Transcreation page goes live at swcpartnership.com/transcreation within 30 days.', out:'First measurable results in GSC within 30–45 days.', highlight: true },
        ].map((s, i) => (
          <div key={s.w} className={s.highlight ? 'card deep' : 'card'} style={{ flex: 1, padding: 36, display:'flex', flexDirection:'column' }}>
            <div className="mono" style={{ fontSize: 13, color: s.highlight ? 'var(--swc-teal)' : 'var(--sl-blue)', letterSpacing:'3px', marginBottom: 12 }}>{s.w}</div>
            <div style={{ fontSize: 36, fontWeight: 700, lineHeight: 1.1, marginBottom: 18, color: s.highlight ? '#fff' : 'var(--ink)' }}>{s.t}</div>
            <div style={{ fontSize: 17, color: s.highlight ? 'rgba(255,255,255,0.75)' : 'var(--ink-2)', lineHeight: 1.5, marginBottom: 24 }}>{s.d}</div>
            <div style={{ marginTop:'auto', paddingTop: 18, borderTop:'1px solid', borderColor: s.highlight ? 'rgba(255,255,255,0.10)' : 'var(--rule-soft)' }}>
              <div className="mono" style={{ fontSize: 12, color: s.highlight ? 'var(--swc-teal)' : 'var(--sl-blue)', letterSpacing:'2px', marginBottom: 6 }}>OUTPUT</div>
              <div style={{ fontSize: 16, color: s.highlight ? '#fff' : 'var(--ink)', fontWeight: 500 }}>{s.out}</div>
            </div>
          </div>
        ))}
      </div>
      <Foot idx={16} total={17} label="ACT 5 · NEXT STEPS" />
    </section>
  );
}

// ─── 17. Closing ───────────────────────────────────
function S17() {
  return (
    <section data-screen-label="17 Closing" className="slide" style={{ background:'var(--ink)', color:'#fff' }}>
      <div style={{ position:'absolute', inset: 0, background:
        'radial-gradient(900px 700px at 80% 20%, rgba(84,192,211,0.22), transparent 60%),' +
        'radial-gradient(800px 600px at 20% 80%, rgba(47,77,216,0.20), transparent 60%)' }} />
      <div style={{ position:'relative', display:'flex', flexDirection:'column', height:'100%', justifyContent:'space-between' }}>
        <div className="eyebrow teal" style={{ color:'var(--swc-teal)' }}>Closing</div>

        <div>
          <div className="display" style={{ color:'#fff', fontSize: 132, marginBottom: 32 }}>
            The website is built.<br/>
            The structure is right.<br/>
            <span className="kicker green" style={{ color:'var(--swc-teal)' }}>this is the moment.</span>
          </div>
          <div className="body lg" style={{ color:'rgba(255,255,255,0.78)', maxWidth: 1300 }}>
            Every month without SEO investment, <Counter to={5859} duration={2400} /> prospects see SWC in search and choose someone else. That number isn't theoretical, it's measurable in Google Search Console right now.
          </div>
          <div className="body lg" style={{ color:'#fff', maxWidth: 1300, marginTop: 20, fontWeight: 600 }}>
            Splitlight is ready to begin.
          </div>
        </div>

        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end' }}>
          <div>
            <Lockup size="lg" light={true} />
            <div className="mono" style={{ fontSize: 14, color:'rgba(255,255,255,0.5)', marginTop: 28, letterSpacing:'0.06em' }}>
              TIM HOWE · SPLITLIGHT<br/>
              tim@splitlight.co.uk · splitlight.co.uk
            </div>
          </div>
          <div style={{ textAlign:'right' }}>
            <div className="tag teal" style={{ background:'rgba(84,192,211,0.15)', color:'var(--swc-teal)', borderColor:'rgba(84,192,211,0.4)', fontSize: 14 }}>
              <span className="dot" />Proposal valid 30 days
            </div>
            <div style={{ marginTop: 16, fontSize: 56, fontWeight: 700, color:'#fff', letterSpacing:'-0.02em' }}>£250 / day</div>
            <div className="mono" style={{ color:'var(--swc-teal)', letterSpacing:'2px', fontSize: 14 }}>GROWTH TIER · 10 DAYS / MO · RECOMMENDED</div>
          </div>
        </div>
      </div>
    </section>
  );
}

window.S14 = S14; window.S15 = S15; window.S16 = S16; window.S17 = S17;