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

// ─── 05. Why this is happening, 7 issues ──────────
function S05() {
  const issues = [
    { n:'01', t:'Snippets aren\'t earning the click', d:'Approach: 256 impressions, 1 click. Whoever sees the title chooses the competitor with a sharper promise.' },
    { n:'02', t:'No topic authority strategy', d:'Google has no clear signal about what SWC is "about." Pages compete in isolation rather than reinforcing each other.' },
    { n:'03', t:'Case studies miss brand-adjacent queries', d:'"Estée Lauder Man Utd campaign" and "Eurowings agency" should find SWC instantly. They don\'t. <1% CTR on global brand assets.' },
    { n:'04', t:'Blog disconnected from revenue', d:'Twitch is the top-ranking post, but Twitch isn\'t a service, an industry, or a target. Wrong page winning.' },
    { n:'05', t:'No persona landing pages indexed', d:'Emma searching "transcreation agency UK" finds nothing. Sarah searching "B2B SaaS marketing" finds nothing. David, the same.' },
    { n:'06', t:'AttAIn has zero search visibility', d:'For a positioning built on AI authority, being invisible to AI-powered search is an existential strategic problem.' },
    { n:'07', t:'Link profile under-represents the work', d:'Boutique B2B agencies build authority through industry mentions, partnership links, PR. Without outreach, even excellent work stays quiet.' },
  ];
  return (
    <section data-screen-label="05 Seven issues" className="slide">
      <div className="eyebrow">Diagnosis · Seven specific issues</div>
      <h2 className="title" style={{ marginTop: 16, marginBottom: 28 }}>
        Each is solvable. Together they explain<br/>
        the <span className="kicker blue">entire gap.</span>
      </h2>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 16, gridAutoRows:'1fr', flex: 1 }}>
        {issues.map((it, i) => (
          <div key={it.n} className="card" style={{
            padding: 26,
            background: i === 0 ? 'var(--swc-mint)' : 'var(--paper-2)',
            borderColor: i === 0 ? 'rgba(0,165,139,0.18)' : 'var(--rule)',
            display:'flex', flexDirection:'column', gap: 12,
            gridColumn: i === 6 ? 'span 2' : 'auto'
          }}>
            <div className="mono" style={{ fontSize: 14, color:'var(--sl-blue)', letterSpacing:'2px' }}>ISSUE {it.n}</div>
            <div style={{ fontSize: 22, fontWeight: 600, lineHeight: 1.2, color:'var(--ink)' }}>{it.t}</div>
            <div style={{ fontSize: 16, color:'var(--ink-2)', lineHeight: 1.45 }}>{it.d}</div>
            {i === 0 && <div className="mono" style={{ fontSize: 12, color:'var(--swc-green)', marginTop:'auto', textTransform:'uppercase', letterSpacing:'2px' }}>FASTEST FIX · BIGGEST RETURN</div>}
          </div>
        ))}
      </div>

      <Foot idx={5} total={17} label="ACT 1 · THE DIAGNOSIS" />
    </section>
  );
}

// ─── 06. Why now, 3 reasons ───────────────────────
function S06() {
  const reasons = [
    { n:'01', t:'The site just launched.', d:'SEO compounds over 6–12 months. Sites that invest immediately after launch build moats. Wait six months and you\'re climbing a steeper hill against competitors already ranking.', tag:'COMPOUND WINDOW' },
    { n:'02', t:'AI search is reshaping discovery.', d:'ChatGPT, Perplexity, Google AI Overviews, Claude, these are now the starting point for B2B research. They prioritise sites with topical authority. Sites without it don\'t rank lower; they get filtered out entirely.', tag:'EXISTENTIAL · ATTAIN', highlight:true },
    { n:'03', t:'The investment already made needs to pay off.', d:'The new website represents significant investment in design, development, copy, positioning. SEO is the multiplier. Without it, that investment generates limited return.', tag:'MAKE IT COMPOUND' },
  ];
  return (
    <section data-screen-label="06 Why now" className="slide">
      <div className="eyebrow teal">Why now · Three reasons</div>
      <h2 className="title" style={{ marginTop: 16, marginBottom: 36 }}>
        The next 90 days are <span className="kicker">disproportionately valuable.</span>
      </h2>

      <div style={{ display:'flex', gap: 22, flex: 1 }}>
        {reasons.map(r => (
          <div key={r.n} className={r.highlight ? 'card deep' : 'card'} style={{ flex: 1, display:'flex', flexDirection:'column', gap: 18, padding: 40 }}>
            <div className="mono" style={{ fontSize: 56, fontWeight: 600, color: r.highlight ? 'rgba(255,255,255,0.20)' : 'var(--rule)', lineHeight: 1, letterSpacing:'-0.02em' }}>{r.n}</div>
            <div style={{ fontSize: 30, fontWeight: 700, lineHeight: 1.15, color: r.highlight ? '#fff' : 'var(--ink)' }}>{r.t}</div>
            <div className="body" style={{ fontSize: 18, color: r.highlight ? 'rgba(255,255,255,0.78)' : 'var(--ink-2)' }}>{r.d}</div>
            <div className="mono" style={{
              marginTop:'auto', fontSize: 12, letterSpacing:'2px',
              color: r.highlight ? 'var(--swc-teal)' : 'var(--sl-blue)',
              padding:'8px 12px',
              border:'1px solid', borderColor: r.highlight ? 'rgba(84,192,211,0.4)' : 'rgba(47,77,216,0.2)',
              borderRadius: 6, alignSelf:'flex-start'
            }}>{r.tag}</div>
          </div>
        ))}
      </div>

      <Foot idx={6} total={17} label="ACT 2 · THE WINDOW" />
    </section>
  );
}

// ─── 07. Three phases ──────────────────────────────
function S07() {
  const phases = [
    { n:'PHASE 01', t:'Quick wins', m:'Months 1–2', g:'Double clicks within 60 days', actions:['Rewrite titles + meta across priority pages','Schema markup on flagship case studies','Technical SEO audit + fix','Internal linking architecture from blog → Solutions'], color:'var(--sl-blue)' },
    { n:'PHASE 02', t:'Topic authority', m:'Months 2–6', g:'5–10× monthly impressions', actions:['Persona landing pages, Transcreation, B2B SaaS, Manufacturing, PE Portfolio, AI Marketing','Pillar + cluster content library','AttAIn search authority hub','Long-tail capture across each persona pathway'], color:'var(--swc-green)' },
    { n:'PHASE 03', t:'Authority building', m:'Months 6–12', g:'Top 3 for core commercial terms', actions:['Strategic link acquisition · industry features','Original research from AttAIn data','UP THERE EVERYWHERE network cross-linking','CRO across the highest-traffic pages'], color:'var(--sl-purple)' },
  ];
  return (
    <section data-screen-label="07 Three phases" className="slide">
      <div className="eyebrow teal">The plan · Three phases over 12 months</div>
      <h2 className="title" style={{ marginTop: 16, marginBottom: 36 }}>
        Quick wins now. Authority by year-end.
      </h2>

      <div style={{ display:'flex', gap: 20, flex: 1 }}>
        {phases.map(p => (
          <div key={p.n} className="card" style={{ flex: 1, display:'flex', flexDirection:'column', padding: 36 }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 14 }}>
              <div className="mono" style={{ fontSize: 13, color: p.color, letterSpacing:'3px' }}>{p.n}</div>
              <div className="mono" style={{ fontSize: 13, color:'var(--ink-3)', letterSpacing:'2px' }}>{p.m}</div>
            </div>
            <div style={{ fontSize: 38, fontWeight: 700, color:'var(--ink)', marginBottom: 6, letterSpacing:'-0.015em' }}>{p.t}</div>
            <div style={{ fontSize: 20, color: p.color, fontWeight: 500, marginBottom: 24 }}>→ {p.g}</div>
            <div style={{ height: 1, background:'var(--rule)', marginBottom: 20 }} />
            <ul style={{ listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 12 }}>
              {p.actions.map((a, i) => (
                <li key={i} style={{ display:'flex', gap: 10, fontSize: 17, color:'var(--ink-2)', lineHeight: 1.4 }}>
                  <span style={{ color: p.color, flexShrink: 0 }}>,</span>{a}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <Foot idx={7} total={17} label="ACT 2 · THE PLAN" />
    </section>
  );
}

window.S05 = S05; window.S06 = S06; window.S07 = S07;