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

// ─── 08. Transcreation page intro ──────────────────
function S08() {
  return (
    <section data-screen-label="08 Transcreation tease" className="slide" style={{ background:'var(--ink)', color:'#fff' }}>
      <div style={{ position:'absolute', inset: 0, background:
        'radial-gradient(800px 600px at 80% 30%, rgba(84,192,211,0.18), transparent 60%),' +
        'radial-gradient(700px 500px at 20% 90%, rgba(47,77,216,0.15), transparent 60%)' }} />
      <div style={{ position:'relative', display:'flex', flexDirection:'column', height:'100%', justifyContent:'space-between' }}>
        <div className="eyebrow teal" style={{ color:'var(--swc-teal)' }}>Act 3 · The proof</div>
        <div>
          <div className="mono" style={{ fontSize: 18, color:'var(--swc-teal)', letterSpacing:'4px', marginBottom: 24 }}>WE'VE ALREADY BUILT THE FIRST DELIVERABLE.</div>
          <div className="display" style={{ color:'#fff', marginBottom: 32, fontSize: 132 }}>
            Meet <span className="kicker green" style={{ color:'var(--swc-teal)' }}>emma.</span>
          </div>
          <div className="body lg" style={{ color:'rgba(255,255,255,0.75)', maxWidth: 1300 }}>
            International expansion lead at a manufacturing brand. She just searched <span className="mono" style={{ color:'#fff', background:'rgba(255,255,255,0.08)', padding:'4px 12px', borderRadius: 6 }}>"transcreation agency UK"</span> on Google.
          </div>
          <div className="body lg" style={{ color:'rgba(255,255,255,0.75)', maxWidth: 1300, marginTop: 24 }}>
            Today she finds nothing. <span style={{ color:'#fff', fontWeight: 600 }}>By month one, she finds this.</span>
          </div>
        </div>

        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-end' }}>
          <div className="mono" style={{ fontSize: 14, color:'rgba(255,255,255,0.45)', letterSpacing:'0.06em' }}>
            LIVE PROTOTYPE · BUILT BEFORE THE PITCH · transcreation.vercel.app
          </div>
          <div className="tag teal" style={{ background:'rgba(84,192,211,0.15)', color:'var(--swc-teal)', borderColor:'rgba(84,192,211,0.4)' }}>
            <span className="dot" />Goes live in 30 days
          </div>
        </div>
        <Foot idx={8} total={17} label="ACT 3 · THE PROOF" />
      </div>
    </section>
  );
}

// ─── 09. Transcreation page embedded preview ───────
function S09() {
  return (
    <section data-screen-label="09 Transcreation page" className="slide" style={{ padding: 56 }}>
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom: 20, padding:'0 40px' }}>
        <div>
          <div className="eyebrow">Live prototype · Persona landing page #01 of 12</div>
          <h2 className="title" style={{ marginTop: 12, fontSize: 44 }}>
            <span className="mono" style={{ fontSize: 28, color:'var(--ink-3)' }}>swcpartnership.com</span>/transcreation
          </h2>
        </div>
        <div style={{ display:'flex', gap: 12, alignItems:'center' }}>
          <span className="tag teal"><span className="dot" />BUILT</span>
          <span className="tag">SEO-optimised</span>
          <span className="tag">Schema-marked</span>
        </div>
      </div>

      <div style={{ flex: 1, position:'relative', borderRadius: 14, overflow:'hidden', boxShadow:'0 30px 80px rgba(14,17,22,0.18), 0 0 0 1px var(--rule)', background:'#fff', margin:'0 40px' }}>
        {/* browser chrome */}
        <div style={{ height: 44, background:'#EFEDE7', display:'flex', alignItems:'center', padding:'0 16px', gap: 8, borderBottom:'1px solid var(--rule)' }}>
          <div style={{ display:'flex', gap: 6 }}>
            <span style={{ width: 12, height: 12, borderRadius: 99, background:'#FF6057' }} />
            <span style={{ width: 12, height: 12, borderRadius: 99, background:'#FFBD2E' }} />
            <span style={{ width: 12, height: 12, borderRadius: 99, background:'#28CA42' }} />
          </div>
          <div className="mono" style={{ flex: 1, textAlign:'center', fontSize: 14, color:'var(--ink-3)', background:'#fff', padding:'6px 12px', borderRadius: 6, border:'1px solid var(--rule)', maxWidth: 600, margin:'0 auto' }}>
            🔒 transcreation.vercel.app
          </div>
        </div>
        <iframe src="https://transcreation.vercel.app/" style={{ width:'100%', height:'calc(100% - 44px)', border: 'none', background:'#fff' }} />
      </div>

      <div style={{ marginTop: 18, padding:'0 40px', display:'flex', justifyContent:'space-between', alignItems:'center' }}>
        <div className="mono" style={{ fontSize: 14, color:'var(--ink-3)', letterSpacing:'0.06em' }}>
          PERSONA · EMMA RODRIGUEZ · INTERNATIONAL EXPANSION LEAD<br/>
          TARGET QUERIES · "transcreation agency UK", "international marketing transcreation", "localisation services manufacturing"
        </div>
        <div className="mono" style={{ fontSize: 14, color:'var(--swc-green)', letterSpacing:'0.06em' }}>
          ↗ READY TO DEPLOY · 11 MORE FOLLOW
        </div>
      </div>
      <Foot idx={9} total={17} label="ACT 3 · THE PROOF" />
    </section>
  );
}

// ─── 10. The 12-page roadmap ───────────────────────
function S10() {
  const pages = [
    { n:'01', t:'Transcreation Services UK', persona:'Emma Rodriguez', status:'BUILT', when:'Month 1' },
    { n:'02', t:'B2B Marketing for SaaS', persona:'Sarah Chen', status:'NEXT', when:'Month 2' },
    { n:'03', t:'Manufacturing Marketing Agency', persona:'David Mitchell', status:'NEXT', when:'Month 3' },
    { n:'04', t:'Marketing for PE Portfolio Cos', persona:'James Thompson', status:'PLANNED', when:'Month 4' },
    { n:'05', t:'AI Marketing Platform, AttAIn', persona:'AttAIn authority', status:'PLANNED', when:'Month 5' },
    { n:'06', t:'International Expansion Marketing', persona:'Cross-persona', status:'PLANNED', when:'Month 6' },
    { n:'07', t:'B2B Brand Strategy Agency', persona:'Cross-persona', status:'PLANNED', when:'Month 7' },
    { n:'08', t:'Aviation & Travel Marketing', persona:'Vertical', status:'PLANNED', when:'Month 8' },
    { n:'09', t:'Beauty & Luxury Marketing', persona:'Vertical', status:'PLANNED', when:'Month 9' },
    { n:'10', t:'Pharma & Healthcare Marketing', persona:'Vertical', status:'PLANNED', when:'Month 10' },
    { n:'11', t:'Financial Services Marketing', persona:'Vertical', status:'PLANNED', when:'Month 11' },
    { n:'12', t:'AI-First Creative Production', persona:'AttAIn extension', status:'PLANNED', when:'Month 12' },
  ];
  return (
    <section data-screen-label="10 12-page roadmap" className="slide">
      <div className="eyebrow">The roadmap · 12 persona pages over 12 months</div>
      <h2 className="title" style={{ marginTop: 16, marginBottom: 28 }}>
        One built. <span className="kicker green">eleven to follow.</span>
      </h2>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 14, flex: 1 }}>
        {pages.map(p => {
          const built = p.status === 'BUILT';
          const next  = p.status === 'NEXT';
          return (
            <div key={p.n} className="card" style={{
              padding: 22,
              background: built ? 'var(--swc-mint)' : 'var(--paper-2)',
              borderColor: built ? 'rgba(0,165,139,0.3)' : 'var(--rule)',
              display:'flex', flexDirection:'column', gap: 8,
              position:'relative'
            }}>
              <div style={{ display:'flex', justifyContent:'space-between', alignItems:'center' }}>
                <div className="mono" style={{ fontSize: 12, color: built ? 'var(--swc-green)' : next ? 'var(--sl-blue)' : 'var(--ink-3)', letterSpacing:'2px' }}>{p.n} · {p.when}</div>
                <span className="mono" style={{
                  fontSize: 10, padding:'3px 8px', borderRadius: 4, letterSpacing:'2px',
                  background: built ? 'var(--swc-green)' : next ? 'rgba(47,77,216,0.1)' : 'var(--paper-3)',
                  color: built ? '#fff' : next ? 'var(--sl-blue)' : 'var(--ink-3)'
                }}>{p.status}</span>
              </div>
              <div style={{ fontSize: 18, fontWeight: 600, color:'var(--ink)', lineHeight: 1.25 }}>{p.t}</div>
              <div className="mono" style={{ fontSize: 12, color:'var(--ink-3)', letterSpacing:'1px', textTransform:'uppercase' }}>{p.persona}</div>
            </div>
          );
        })}
      </div>
      <Foot idx={10} total={17} label="ACT 3 · THE PROOF" />
    </section>
  );
}

window.S08 = S08; window.S09 = S09; window.S10 = S10;