// Sectors, case study, numbers, leadership

function Sectors() {
  const [active, setActive] = useState('Government');
  const sectors = {
    'Government': {
      blurb: 'Civic identity, taxation, courts, and public health — operated as a single coherent layer with full sovereignty controls.',
      stats: [{k: '6', v: 'national agencies'}, {k: '38m', v: 'citizen records'}, {k: 'ISO 27001', v: 'certified'}],
      modules: ['CivicLayer', 'TaxBridge', 'CourtFile', 'HealthBase']
    },
    'Financial services': {
      blurb: 'Settlement, KYC, and treasury that work across borders, currencies, and the older cores you cannot afford to migrate.',
      stats: [{k: '£14.2B', v: 'cleared / yr'}, {k: '11', v: 'banks live'}, {k: 'PCI-DSS', v: 'level 1'}],
      modules: ['LedgerWorks', 'PaymentsHub', 'IdentityOne', 'ComplianceOS']
    },
    'Telecommunications': {
      blurb: 'BSS / OSS unification for multi-national operators — billing, identity, and roaming on a single observability plane.',
      stats: [{k: '4.2M', v: 'subscribers'}, {k: '3', v: 'operators live'}, {k: '99.99%', v: 'sla'}],
      modules: ['SurgeProtect', 'AssureCloud', 'DataFoundry', 'IdentityOne']
    },
    'Real estate & logistics': {
      blurb: 'Portfolio operations, leasing, fleet, and cross-border supply chain on one runtime.',
      stats: [{k: '12,400', v: 'units managed'}, {k: '2,100', v: 'fleet vehicles'}, {k: '4 ports', v: 'integrated'}],
      modules: ['Advantage', 'VehPort', 'FleetCore', 'CrossRail']
    },
    'Education': {
      blurb: 'Borderless examinations, accreditation, and student records — verifiable, tamper-evident, and portable.',
      stats: [{k: '180k', v: 'candidates / yr'}, {k: '24', v: 'institutions'}, {k: 'W3C VC', v: 'compliant'}],
      modules: ['ProctorEdge', 'TalentMesh', 'TrustSign', 'IdentityOne']
    }
  };
  const cur = sectors[active];

  return (
    <section id="sectors">
      <div className="container">
        <div className="reveal-up" style={{ marginBottom: 56 }}>
          <div style={{ marginBottom: 20 }}>
            <span className="section-badge">006 — Sectors</span>
          </div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 4.6vw, 64px)', margin: 0, maxWidth: 820 }}>
            Built for the institutions<br /> that cannot afford <em>downtime.</em>
          </h2>
        </div>

        <div className="sectors-layout" style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 48, alignItems: 'start' }}>
          <div style={{ display: 'flex', flexDirection: 'column' }}>
            {Object.keys(sectors).map((s, i) => (
              <button key={s} onClick={() => setActive(s)} style={{
                background: active === s ? 'oklch(97% 0.01 250)' : 'none',
                border: 'none',
                padding: '18px 12px',
                marginLeft: -12,
                borderBottom: '1px solid var(--rule)',
                textAlign: 'left',
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                color: active === s ? 'var(--ink)' : 'var(--ink-mute)',
                transition: 'all 200ms ease',
                fontSize: 20,
                fontFamily: 'var(--serif)',
                letterSpacing: '-0.01em',
                borderRadius: 8,
                cursor: 'pointer'
              }}>
                <span style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
                  <span style={{
                    fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase',
                    color: active === s ? 'var(--blue-600)' : 'var(--ink-mute)'
                  }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  {s}
                </span>
                <span style={{
                  fontSize: 14, color: 'var(--blue-600)',
                  opacity: active === s ? 1 : 0, transition: 'opacity 200ms'
                }}>→</span>
              </button>
            ))}
          </div>

          <div style={{
            border: '1px solid var(--rule)',
            borderRadius: 20,
            padding: 40,
            background: 'var(--paper-warm)',
            minHeight: 400
          }}>
            <div className="label" style={{ marginBottom: 16, color: 'var(--blue-600)' }}>Sector profile</div>
            <h3 style={{
              fontFamily: 'var(--serif)', fontSize: 44, margin: 0, marginBottom: 20,
              fontWeight: 400, letterSpacing: '-0.02em'
            }}>{active}</h3>
            <p style={{ fontSize: 17, color: 'var(--ink-soft)', maxWidth: 560, margin: 0, marginBottom: 32, lineHeight: 1.55 }}>
              {cur.blurb}
            </p>

            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
              padding: '24px 0', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)',
              marginBottom: 28
            }}>
              {cur.stats.map(s => (
                <div key={s.k}>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 30, lineHeight: 1 }}>{s.k}</div>
                  <div className="label" style={{ marginTop: 6 }}>{s.v}</div>
                </div>
              ))}
            </div>

            <div className="label" style={{ marginBottom: 14 }}>Hubs deployed</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
              {cur.modules.map(m => (
                <span key={m} style={{
                  border: '1px solid var(--rule)',
                  padding: '8px 14px',
                  borderRadius: 999,
                  fontSize: 13,
                  background: 'var(--paper)'
                }}>{m}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CaseStudy() {
  return (
    <section style={{ background: 'var(--ink)', color: 'var(--paper)', position: 'relative', overflow: 'hidden' }}>
      {/* Background decoration */}
      <div style={{
        position: 'absolute', top: -200, right: -200,
        width: 600, height: 600, borderRadius: '50%',
        background: 'radial-gradient(circle, oklch(40% 0.1 255 / 0.2) 0%, transparent 70%)',
        pointerEvents: 'none'
      }} aria-hidden="true" />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="cs-layout" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)', gap: 64, alignItems: 'center' }}>
          <div className="reveal-up">
            <div style={{ marginBottom: 24 }}>
              <span className="section-badge" style={{ background: 'oklch(30% 0.06 255)', border: '1px solid oklch(40% 0.06 255)', color: 'oklch(72% 0.13 252)' }}>
                008 — Case study
              </span>
            </div>
            <div className="label" style={{ color: 'oklch(72% 0.13 252)', marginBottom: 18 }}>
              National revenue authority · West Africa
            </div>
            <h2 className="display" style={{
              fontSize: 'clamp(34px, 4.4vw, 60px)',
              margin: 0, marginBottom: 24
            }}>
              We unified seven legacy<br />
              tax systems in 142 days —<br />
              <em>without taking one offline.</em>
            </h2>
            <p style={{ color: 'oklch(78% 0.02 250)', fontSize: 17, maxWidth: 520, margin: 0, marginBottom: 40, lineHeight: 1.6 }}>
              A 38-year-old mainframe, two ERPs, and four bespoke tools were running tax assessment for 18 million filers.
              We deployed the 24 Hubs adapter layer, then the unified ledger. Migration risk: zero. Dispute resolution time: down 64%.
            </p>
            <a href="#" className="btn" style={{ background: 'var(--paper)', color: 'var(--ink)' }}>
              Read the full case study <span className="arrow">→</span>
            </a>
          </div>

          <div style={{
            border: '1px solid oklch(35% 0.04 255)',
            borderRadius: 20,
            padding: 36,
            background: 'oklch(22% 0.025 255)'
          }}>
            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
              paddingBottom: 28, marginBottom: 28,
              borderBottom: '1px solid oklch(35% 0.04 255)'
            }}>
              <div>
                <div className="label" style={{ color: 'oklch(72% 0.13 252)' }}>Filers served</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 56, lineHeight: 1, marginTop: 8 }}>18.4M</div>
              </div>
              <div>
                <div className="label" style={{ color: 'oklch(72% 0.13 252)' }}>Days to live</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 56, lineHeight: 1, marginTop: 8 }}>142</div>
              </div>
              <div>
                <div className="label" style={{ color: 'oklch(72% 0.13 252)' }}>Legacy systems</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 56, lineHeight: 1, marginTop: 8 }}>7 → 1</div>
              </div>
              <div>
                <div className="label" style={{ color: 'oklch(72% 0.13 252)' }}>Disputes resolved faster</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 56, lineHeight: 1, marginTop: 8 }}>−64%</div>
              </div>
            </div>

            {/* quote */}
            <blockquote style={{ margin: 0 }}>
              <p style={{
                fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.4,
                margin: 0, marginBottom: 20,
                color: 'oklch(92% 0.01 250)'
              }}>
                “They did not ask us to change anything. They asked us to keep running. The hub did the connecting.”
              </p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: 'linear-gradient(135deg, oklch(72% 0.13 252), oklch(55% 0.18 255))',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'var(--serif)', fontSize: 18
                }}>AO</div>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>Adesua Okonkwo</div>
                  <div className="label" style={{ color: 'oklch(72% 0.05 250)' }}>Director, digital revenue</div>
                </div>
              </div>
            </blockquote>
          </div>
        </div>
      </div>
    </section>
  );
}

function Numbers() {
  const stats = [
    { k: '24', v: 'Operating hubs', d: 'Across infrastructure, identity, finance, and sector layers', accent: true },
    { k: '4.2M', v: 'Enterprise endpoints', d: 'Managed daily across UK & West Africa deployments', accent: false },
    { k: '£14.2B', v: 'Cleared / yr', d: 'In regulated settlement and treasury volume', accent: false },
    { k: '99.98%', v: 'Platform availability', d: 'Measured across all sovereign deployments, 2025', accent: false },
    { k: '142', v: 'Avg days to integrate', d: 'From audit kickoff to first hub in production', accent: false },
    { k: '0', v: 'Forced migrations', d: 'We have never required a customer to rip-and-replace', accent: true },
  ];
  return (
    <section style={{ paddingTop: 96, paddingBottom: 96, position: 'relative', overflow: 'hidden' }}>
      <div className="dot-pattern" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.3
      }} aria-hidden="true" />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="reveal-up" style={{ marginBottom: 56 }}>
          <div style={{ marginBottom: 20 }}>
            <span className="section-badge">009 — By the numbers</span>
          </div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 4.6vw, 64px)', margin: 0, maxWidth: 760 }}>
            The platform, in <em>plain numbers.</em>
          </h2>
        </div>
        <div className="numbers-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 1, background: 'var(--rule)',
          border: '1px solid var(--rule)',
          borderRadius: 20, overflow: 'hidden'
        }}>
          {stats.map((s, i) => (
            <div key={i} className={`reveal-scale delay-${(i % 3) + 1}`} style={{
              background: s.accent ? 'var(--paper-warm)' : 'var(--paper)',
              padding: '44px 36px',
              minHeight: 220,
              position: 'relative',
              transition: 'background 200ms ease'
            }}
              onMouseEnter={e => e.currentTarget.style.background = 'var(--paper-warm)'}
              onMouseLeave={e => e.currentTarget.style.background = s.accent ? 'var(--paper-warm)' : 'var(--paper)'}
            >
              {s.accent && (
                <div style={{
                  position: 'absolute', top: 16, right: 16,
                  width: 8, height: 8, borderRadius: '50%',
                  background: 'var(--blue-500)',
                  boxShadow: '0 0 0 4px oklch(55% 0.18 255 / 0.15)'
                }} />
              )}
              <div style={{
                fontFamily: 'var(--serif)', fontSize: 'clamp(52px, 6.5vw, 88px)',
                lineHeight: 1, letterSpacing: '-0.035em', marginBottom: 16,
                color: s.accent ? 'var(--blue-700)' : 'var(--ink)'
              }}>{s.k}</div>
              <div style={{ fontSize: 14, fontWeight: 600, marginBottom: 8, letterSpacing: '-0.005em' }}>{s.v}</div>
              <div style={{ fontSize: 13, color: 'var(--ink-mute)', maxWidth: 280, lineHeight: 1.55 }}>{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Leadership() {
  return (
    <section id="company" style={{ background: 'var(--paper-warm)' }}>
      <div className="container">
        <div className="leadership-layout" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)', gap: 80, alignItems: 'start' }}>
          <div>
            <div style={{ marginBottom: 20 }}>
              <span className="section-badge">010 — Where we operate</span>
            </div>
            <h2 className="display" style={{ fontSize: 'clamp(34px, 4.4vw, 56px)', margin: 0, marginBottom: 24 }}>
              Headquartered in the UK.<br />
              <em>Operating from West Africa.</em>
            </h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: 16, margin: 0, marginBottom: 32, maxWidth: 460, lineHeight: 1.6 }}>
              Our company sits at the seam of two markets: the regulatory rigour of London,
              and the scale and pace of Lagos, Accra, and Abidjan. The combination is the product.
            </p>

            {/* offices */}
            <div style={{ display: 'grid', gap: 16 }}>
              {[
                { city: 'London', country: 'United Kingdom', label: 'Headquarters', meta: '24 St James\'s, SW1' },
                { city: 'Lagos', country: 'Nigeria', label: 'Operations', meta: 'Victoria Island' },
                { city: 'Accra', country: 'Ghana', label: 'Engineering', meta: 'Airport City' },
                { city: 'Abidjan', country: 'Côte d\'Ivoire', label: 'Field ops', meta: 'Plateau' },
              ].map(o => (
                <div key={o.city} style={{
                  display: 'grid',
                  gridTemplateColumns: '1fr auto auto',
                  gap: 16,
                  alignItems: 'center',
                  padding: '16px 0',
                  borderTop: '1px solid var(--rule)'
                }}>
                  <div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 22 }}>{o.city}</div>
                    <div className="label" style={{ marginTop: 4 }}>{o.country}</div>
                  </div>
                  <div className="label" style={{ color: 'var(--blue-600)' }}>{o.label}</div>
                  <div className="label">{o.meta}</div>
                </div>
              ))}
            </div>
          </div>

          {/* abstract map */}
          <UkWaMap />
        </div>
      </div>
    </section>
  );
}

function UkWaMap() {
  const [pulse, setPulse] = useState(0);
  useEffect(() => {
    let raf;
    const tick = () => { setPulse(performance.now() / 1000); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  const flowOffset = (pulse * 24) % 12;

  return (
    <div style={{
      border: '1px solid var(--rule)',
      borderRadius: 20,
      background: 'var(--paper)',
      padding: 28,
      position: 'relative',
      minHeight: 540
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
        <div className="label">North–south corridor</div>
        <div className="label" style={{ color: 'var(--blue-600)' }}>● live</div>
      </div>

      <svg viewBox="0 0 500 540" width="100%" height="auto" style={{ display: 'block' }}>
        {/* graticule */}
        {Array.from({ length: 7 }, (_, i) => (
          <line key={`h${i}`} x1="20" x2="480" y1={60 + i * 70} y2={60 + i * 70}
            stroke="var(--rule)" strokeDasharray="2 4" />
        ))}
        {Array.from({ length: 7 }, (_, i) => (
          <line key={`v${i}`} y1="40" y2="500" x1={50 + i * 70} x2={50 + i * 70}
            stroke="var(--rule)" strokeDasharray="2 4" />
        ))}

        {/* abstract UK shape */}
        <path d="M 200 60 Q 240 50 270 80 Q 285 120 260 145 Q 280 165 255 195 Q 220 210 200 180 Q 180 150 195 120 Q 180 90 200 60 Z"
          fill="oklch(94% 0.008 250)" stroke="var(--ink-soft)" strokeWidth="1" />
        <circle cx="240" cy="130" r="5" fill="oklch(55% 0.18 255)" />
        <text x="252" y="134" fontFamily="var(--mono)" fontSize="10" fill="var(--ink-soft)"
          letterSpacing="0.1em">LONDON</text>

        {/* abstract WA shape */}
        <path d="M 130 350 Q 200 330 290 350 Q 360 380 350 440 Q 320 480 240 480 Q 160 470 120 440 Q 100 400 130 350 Z"
          fill="oklch(94% 0.008 250)" stroke="var(--ink-soft)" strokeWidth="1" />
        <circle cx="280" cy="420" r="5" fill="oklch(55% 0.18 255)" />
        <text x="292" y="424" fontFamily="var(--mono)" fontSize="10" fill="var(--ink-soft)"
          letterSpacing="0.1em">LAGOS</text>
        <circle cx="220" cy="410" r="4" fill="oklch(72% 0.13 252)" />
        <text x="160" y="402" fontFamily="var(--mono)" fontSize="10" fill="var(--ink-soft)"
          letterSpacing="0.1em">ACCRA</text>
        <circle cx="170" cy="400" r="4" fill="oklch(72% 0.13 252)" />
        <text x="100" y="395" fontFamily="var(--mono)" fontSize="10" fill="var(--ink-soft)"
          letterSpacing="0.1em">ABIDJAN</text>

        {/* flow corridor */}
        <path d="M 240 135 Q 200 250 280 415" fill="none"
          stroke="oklch(55% 0.18 255)" strokeWidth="1.4"
          strokeDasharray="4 8" strokeDashoffset={-flowOffset} />
        <path d="M 240 135 Q 200 250 280 415" fill="none"
          stroke="oklch(55% 0.18 255)" strokeWidth="0.6" opacity="0.4" />
      </svg>

      <div style={{
        position: 'absolute', bottom: 24, left: 28, right: 28,
        display: 'flex', justifyContent: 'space-between',
        paddingTop: 16, borderTop: '1px solid var(--rule)'
      }}>
        <div>
          <div className="label">Latency</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4 }}>78 ms</div>
        </div>
        <div>
          <div className="label">Sovereign zones</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4 }}>4</div>
        </div>
        <div>
          <div className="label">Ops staff</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4 }}>312</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Sectors, CaseStudy, Numbers, Leadership });