/* global React, Lockup, SLMark, Foot, Counter, ImpressionsBar, Stat */
const { useState } = React;

// ─── 11. Pricing transition / engagement ────────────
function S11() {
  return (
    <section data-screen-label="11 Engagement intro" className="slide">
      <div className="eyebrow">Act 4 · The engagement</div>
      <div style={{ flex: 1, display:'flex', flexDirection:'column', justifyContent:'center', maxWidth: 1500 }}>
        <div className="display" style={{ marginBottom: 28 }}>
          A retainer at <span className="kicker blue">£250</span><br/>
          per day. Three tiers.<br/>
          <span style={{ color:'var(--ink-2)' }}>One recommendation.</span>
        </div>
        <div className="body lg" style={{ marginTop: 12, maxWidth: 1200 }}>
          The day-rate model means SWC pays for output, not management layers. Engagement flexes around campaign cycles, content launches, and what the data shows is working, agreed quarterly.
        </div>
      </div>
      <div style={{ display:'flex', gap: 64, paddingTop: 40, borderTop:'1px solid var(--rule)' }}>
        <Stat value="£1,250" label="Foundation · 5 days/mo" accent="var(--ink-2)" />
        <Stat value="£2,500" label="Growth · 10 days/mo · recommended" accent="var(--swc-green)" />
        <Stat value="£3,750" label="Authority · 15 days/mo" accent="var(--sl-purple)" />
      </div>
      <Foot idx={11} total={17} label="ACT 4 · THE ENGAGEMENT" />
    </section>
  );
}

// ─── 12. Three tiers comparison (interactive toggle) ─
function S12() {
  const [active, setActive] = useState('growth');
  const tiers = {
    foundation: { name:'Foundation', days:5, mo:'£1,250', yr:'£15,000', tagline:'Validate the model with controlled investment.', accent:'var(--ink-2)',
      delivery: ['Technical SEO maintenance + monthly health check','2 priority pages optimised','1 SEO-led blog or refresh','Monthly performance report','Quarterly strategy review'],
      targets: { imp:'~12K/mo', clk:'~360/mo', ctr:'3.0%', t10:'15–25', t3:'6–12', new:'12 pieces', links:'10–18' },
      pipeline: { clicks:'~2,800', deals:'6–12', pipe:'£210K–£420K', roi:'14–28×' }
    },
    growth: { name:'Growth', days:10, mo:'£2,500', yr:'£30,000', tagline:'The right balance of investment and return.', accent:'var(--swc-green)', recommended: true,
      delivery: ['Everything in Foundation','4–5 priority pages optimised','2–3 SEO-led articles','1 persona landing page / month','Link building outreach (3–5 prospects)','CRO across priority pages','Bi-weekly strategy calls'],
      targets: { imp:'~30K/mo', clk:'~1,200/mo', ctr:'4.0%', t10:'50–70', t3:'20–30', new:'36 pieces', links:'30–50' },
      pipeline: { clicks:'~10,800', deals:'20–40', pipe:'£700K–£1.4M', roi:'23–47×' }
    },
    authority: { name:'Authority', days:15, mo:'£3,750', yr:'£45,000', tagline:'Commit to category leadership in search.', accent:'var(--sl-purple)',
      delivery: ['Everything in Growth','6–8 priority pages optimised','3–4 articles, including pillar content','2 persona landing pages / month','Original research per quarter','PR-driven link acquisition (5–8 prospects)','Advanced technical SEO + hreflang','Dedicated weekly strategist'],
      targets: { imp:'~80K/mo', clk:'~3,500/mo', ctr:'4.5%', t10:'120–180', t3:'40–60', new:'48 pieces', links:'60–100' },
      pipeline: { clicks:'~30,000', deals:'50–100', pipe:'£1.75M–£3.5M', roi:'39–78×' }
    },
  };

  return (
    <section data-screen-label="12 Tier comparison" className="slide">
      <div className="eyebrow">Compare tiers · Interactive</div>
      <h2 className="title" style={{ marginTop: 16, marginBottom: 28 }}>
        Click a tier. <span className="kicker">growth is recommended.</span>
      </h2>

      {/* Tabs */}
      <div style={{ display:'flex', gap: 12, marginBottom: 28 }}>
        {Object.entries(tiers).map(([k, t]) => {
          const isActive = active === k;
          return (
            <button key={k} onClick={() => setActive(k)} style={{
              flex: 1, padding:'24px 28px',
              background: isActive ? 'var(--ink)' : 'var(--paper-2)',
              color: isActive ? '#fff' : 'var(--ink)',
              border: '1px solid', borderColor: isActive ? 'var(--ink)' : 'var(--rule)',
              borderRadius: 12, textAlign:'left', cursor:'pointer',
              fontFamily:'var(--sans)', position:'relative',
              transition:'all 240ms cubic-bezier(.22,1,.36,1)'
            }}>
              {t.recommended && (
                <span style={{ position:'absolute', top: -10, right: 16, background:'var(--swc-green)', color:'#fff', fontSize: 11, padding:'4px 10px', borderRadius: 4, fontFamily:'var(--mono)', letterSpacing:'2px' }}>RECOMMENDED</span>
              )}
              <div className="mono" style={{ fontSize: 13, opacity: 0.6, letterSpacing:'2px', marginBottom: 6 }}>TIER · {t.days} DAYS / MO</div>
              <div style={{ fontSize: 30, fontWeight: 700, marginBottom: 4 }}>{t.name}</div>
              <div style={{ fontSize: 20, color: isActive ? '#fff' : 'var(--ink-2)' }}>{t.mo} <span style={{ opacity: 0.6, fontSize: 16 }}>/ mo</span></div>
            </button>
          );
        })}
      </div>

      {/* Active tier panel */}
      <div style={{ flex: 1, display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap: 18 }}>
        <div className="card" style={{ padding: 32 }}>
          <div className="mono" style={{ fontSize: 12, color: tiers[active].accent, letterSpacing:'2px', marginBottom: 8 }}>MONTHLY DELIVERY</div>
          <div style={{ fontSize: 22, fontWeight: 600, marginBottom: 18 }}>{tiers[active].tagline}</div>
          <ul style={{ listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 10 }}>
            {tiers[active].delivery.map((d, i) => (
              <li key={i} style={{ display:'flex', gap: 10, fontSize: 16, color:'var(--ink-2)' }}>
                <span style={{ color: tiers[active].accent }}>,</span>{d}
              </li>
            ))}
          </ul>
        </div>

        <div className="card" style={{ padding: 32 }}>
          <div className="mono" style={{ fontSize: 12, color: tiers[active].accent, letterSpacing:'2px', marginBottom: 16 }}>YEAR-ONE TARGETS</div>
          {[
            ['Monthly impressions', tiers[active].targets.imp],
            ['Monthly clicks', tiers[active].targets.clk],
            ['Blended CTR', tiers[active].targets.ctr],
            ['Top-10 keywords', tiers[active].targets.t10],
            ['Top-3 keywords', tiers[active].targets.t3],
            ['New content', tiers[active].targets.new],
            ['Quality backlinks', tiers[active].targets.links],
          ].map(([k,v]) => (
            <div key={k} style={{ display:'flex', justifyContent:'space-between', padding:'10px 0', borderBottom:'1px solid var(--rule-soft)', fontSize: 15 }}>
              <span style={{ color:'var(--ink-2)' }}>{k}</span>
              <span className="mono" style={{ color:'var(--ink)', fontWeight: 600 }}>{v}</span>
            </div>
          ))}
        </div>

        <div className="card deep" style={{ padding: 32, background: tiers[active].accent === 'var(--swc-green)' ? 'var(--ink)' : 'var(--ink)' }}>
          <div className="mono" style={{ fontSize: 12, color: tiers[active].accent, letterSpacing:'2px', marginBottom: 16 }}>YEAR-ONE PIPELINE IMPACT</div>
          <div style={{ fontSize: 13, color:'rgba(255,255,255,0.5)', marginTop: 12 }}>Additional clicks above baseline</div>
          <div style={{ fontSize: 36, fontWeight: 700, color:'#fff', marginBottom: 16, lineHeight: 1 }}>{tiers[active].pipeline.clicks}</div>
          <div style={{ fontSize: 13, color:'rgba(255,255,255,0.5)' }}>New client opportunities</div>
          <div style={{ fontSize: 36, fontWeight: 700, color:'#fff', marginBottom: 16, lineHeight: 1 }}>{tiers[active].pipeline.deals}</div>
          <div style={{ fontSize: 13, color:'rgba(255,255,255,0.5)' }}>Projected pipeline</div>
          <div style={{ fontSize: 32, fontWeight: 700, color: tiers[active].accent, marginBottom: 24, lineHeight: 1, fontFamily:'var(--mono)' }}>{tiers[active].pipeline.pipe}</div>
          <div style={{ height: 1, background:'rgba(255,255,255,0.10)', marginBottom: 16 }} />
          <div className="mono" style={{ fontSize: 12, color:'rgba(255,255,255,0.5)', letterSpacing:'2px' }}>YEAR-ONE ROI</div>
          <div style={{ fontSize: 64, fontWeight: 700, color: tiers[active].accent, lineHeight: 1, letterSpacing:'-0.02em' }}>{tiers[active].pipeline.roi}</div>
        </div>
      </div>

      <Foot idx={12} total={17} label="ACT 4 · THE ENGAGEMENT" />
    </section>
  );
}

// ─── 13. Growth tier targets, bar chart progression ─
function S13() {
  // Target: month 0 → month 6 → month 12, growth tier
  const months = [
    { m:'Now', imp: 6000, clk: 120 },
    { m:'M3', imp: 11000, clk: 280 },
    { m:'M6', imp: 18000, clk: 600 },
    { m:'M9', imp: 24000, clk: 900 },
    { m:'M12', imp: 30000, clk: 1200 },
  ];
  const maxImp = 30000, maxClk = 1200;
  return (
    <section data-screen-label="13 Growth trajectory" className="slide">
      <div className="eyebrow teal">Growth tier · Trajectory</div>
      <h2 className="title" style={{ marginTop: 16, marginBottom: 32 }}>
        From 120 monthly clicks to <span className="kicker green">1,200.</span>
      </h2>

      {/* Combo chart */}
      <div style={{ flex: 1, display:'flex', gap: 56, alignItems:'stretch' }}>
        <div style={{ flex: 2, display:'flex', flexDirection:'column' }}>
          <div className="mono" style={{ fontSize: 13, color:'var(--ink-3)', letterSpacing:'2px', marginBottom: 12 }}>IMPRESSIONS / MO ──── CLICKS / MO</div>
          <div style={{ flex: 1, display:'flex', alignItems:'flex-end', gap: 28, padding:'0 12px', borderBottom:'1px solid var(--rule)', position:'relative' }}>
            {months.map((mo, i) => (
              <div key={mo.m} style={{ flex: 1, display:'flex', flexDirection:'column', alignItems:'center', gap: 8, position:'relative', height:'100%', justifyContent:'flex-end' }}>
                <div style={{ position:'relative', width:'100%', height:'88%', display:'flex', alignItems:'flex-end', justifyContent:'center', gap: 8 }}>
                  <div style={{
                    width: 60, height: `${(mo.imp/maxImp)*100}%`,
                    background:'linear-gradient(180deg, rgba(47,77,216,0.20), rgba(47,77,216,0.55))',
                    borderRadius:'6px 6px 0 0', position:'relative'
                  }}>
                    <div className="mono" style={{ position:'absolute', top: -28, left:'50%', transform:'translateX(-50%)', fontSize: 13, color:'var(--sl-blue)', whiteSpace:'nowrap', fontWeight: 600 }}>{mo.imp.toLocaleString('en-GB')}</div>
                  </div>
                  <div style={{
                    width: 60, height: `${(mo.clk/maxClk)*100}%`,
                    background:'var(--swc-green)',
                    borderRadius:'6px 6px 0 0', position:'relative'
                  }}>
                    <div className="mono" style={{ position:'absolute', top: -28, left:'50%', transform:'translateX(-50%)', fontSize: 13, color:'var(--swc-green)', whiteSpace:'nowrap', fontWeight: 600 }}>{mo.clk.toLocaleString('en-GB')}</div>
                  </div>
                </div>
                <div className="mono" style={{ fontSize: 14, color:'var(--ink-2)', marginTop: 8, letterSpacing:'2px' }}>{mo.m}</div>
              </div>
            ))}
          </div>
          <div style={{ display:'flex', gap: 28, marginTop: 18 }}>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}><span style={{ width: 14, height: 14, background:'rgba(47,77,216,0.55)', borderRadius: 3 }} /><span style={{ fontSize: 14, color:'var(--ink-2)' }}>Monthly impressions</span></div>
            <div style={{ display:'flex', alignItems:'center', gap: 10 }}><span style={{ width: 14, height: 14, background:'var(--swc-green)', borderRadius: 3 }} /><span style={{ fontSize: 14, color:'var(--ink-2)' }}>Monthly clicks</span></div>
          </div>
        </div>

        <div style={{ flex: 1, display:'flex', flexDirection:'column', gap: 18, justifyContent:'center' }}>
          <div className="card tinted" style={{ padding: 28 }}>
            <div className="mono" style={{ fontSize: 12, color:'var(--swc-green)', letterSpacing:'2px', marginBottom: 8 }}>5× IMPRESSIONS</div>
            <div style={{ fontSize: 36, fontWeight: 700, lineHeight: 1.1 }}>~6,000 → ~30,000<br/><span style={{ color:'var(--ink-2)', fontWeight: 500 }}>per month</span></div>
          </div>
          <div className="card tinted" style={{ padding: 28 }}>
            <div className="mono" style={{ fontSize: 12, color:'var(--swc-green)', letterSpacing:'2px', marginBottom: 8 }}>10× CLICKS</div>
            <div style={{ fontSize: 36, fontWeight: 700, lineHeight: 1.1 }}>120 → 1,200<br/><span style={{ color:'var(--ink-2)', fontWeight: 500 }}>per month</span></div>
          </div>
          <div className="card tinted" style={{ padding: 28 }}>
            <div className="mono" style={{ fontSize: 12, color:'var(--swc-green)', letterSpacing:'2px', marginBottom: 8 }}>2× CTR</div>
            <div style={{ fontSize: 36, fontWeight: 700, lineHeight: 1.1 }}>2.0% → 4.0%<br/><span style={{ color:'var(--ink-2)', fontWeight: 500 }}>blended</span></div>
          </div>
        </div>
      </div>
      <Foot idx={13} total={17} label="ACT 4 · THE ENGAGEMENT" />
    </section>
  );
}

window.S11 = S11; window.S12 = S12; window.S13 = S13;