// Sections: logo cloud, problem, how-it-works, hubs grid

function LogoCloud() {
  const logos = [
    { name: 'Barclays',     sector: 'Finance' },
    { name: 'Stanbic',      sector: 'Banking' },
    { name: 'MTN',          sector: 'Telecom' },
    { name: 'Vodafone',     sector: 'Telecom' },
    { name: 'Dangote',      sector: 'Industry' },
    { name: 'Africell',     sector: 'Telecom' },
    { name: 'NHS Digital',  sector: 'Health' },
    { name: 'Ecobank',      sector: 'Finance' },
    { name: 'Shell',        sector: 'Energy' },
    { name: 'GTBank',       sector: 'Finance' },
    { name: 'Airtel',       sector: 'Telecom' },
    { name: 'Jumia',        sector: 'Commerce' },
  ];
  const row = [...logos, ...logos];
  return (
    <section style={{
      paddingTop: 44, paddingBottom: 44,
      borderTop: '1px solid var(--rule)',
      borderBottom: '1px solid var(--rule)',
      background: 'var(--paper)'
    }}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', gap: 40 }}>
        <div style={{ flexShrink: 0 }}>
          <div className="label" style={{ fontSize: 10, lineHeight: 1.6, maxWidth: 140 }}>
            Trusted by leading<br />enterprises across<br />UK & West Africa
          </div>
        </div>
        <div style={{
          flex: 1, overflow: 'hidden',
          maskImage: 'linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%)',
          WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, black 10%, black 90%, transparent 100%)'
        }}>
          <div style={{
            display: 'flex', gap: 12, alignItems: 'center',
            animation: 'marquee 55s linear infinite',
            width: 'max-content'
          }}>
            {row.map((l, i) => (
              <div key={i} className="logo-pill">
                <span className="logo-dot" />
                {l.name}
                <span style={{
                  fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.1em',
                  textTransform: 'uppercase', color: 'var(--ink-mute)', marginLeft: 2
                }}>{l.sector}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Problem() {
  const bottlenecks = [
    { n: '01', t: 'Disconnected software', d: 'Eleven to fourteen tools running in parallel; the integration tax compounds every quarter.' },
    { n: '02', t: 'Disjointed payments', d: 'Multi-currency collection routed through a patchwork of gateways nobody fully owns.' },
    { n: '03', t: 'Isolated communications', d: 'Customer engagement scattered across SMS, voice, and chat tools that do not share a record.' },
    { n: '04', t: 'Unverifiable data', d: 'Reports rebuilt by hand each cycle. The CFO cannot trust the dashboard the COO is reading.' }
  ];

  const pillars = [
    { tag: 'SaaS', t: 'Enterprise Operating Systems', d: 'Powering complex internal and external workflows — from patient intake to logistics tracking to legal due diligence.' },
    { tag: 'PaaS', t: 'Cloud Infrastructure', d: 'Frictionless hosting, deployment, and server management. Zero-DevOps by default.' },
    { tag: 'Tx',   t: 'Borderless Transactions', d: 'Seamless, multi-currency financial collection, settlement, and treasury.' },
    { tag: 'CPaaS', t: 'Global Communication', d: 'Automated, scalable messaging and customer engagement on a single observability plane.' },
  ];

  return (
    <section id="problem" style={{ background: 'var(--paper-warm)', position: 'relative', overflow: 'hidden' }}>
      {/* Subtle grid pattern */}
      <div className="grid-pattern" style={{
        position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.5, zIndex: 0
      }} aria-hidden="true" />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        {/* Top: bottleneck framing */}
        <div className="problem-layout" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.4fr)', gap: 64, alignItems: 'start', marginBottom: 96 }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <div className="section-eyebrow reveal-up" style={{ marginBottom: 28 }}>
              <span className="section-badge">002 — The enterprise growth bottleneck</span>
            </div>
            <h2 className="display reveal-up delay-1" style={{
              fontSize: 'clamp(36px, 4.6vw, 64px)',
              margin: 0,
              marginBottom: 24
            }}>
              Ambition doesn't<br />
              break businesses.<br />
              <em>Fragmented infrastructure does.</em>
            </h2>
            <p className="reveal-up delay-2" style={{ color: 'var(--ink-soft)', fontSize: 16, maxWidth: 460, margin: 0, lineHeight: 1.65 }}>
              Modern enterprises are constrained by a patchwork of disconnected software, disjointed payment gateways, and isolated communication channels. The cost is not the licence. It is the friction between layers.
            </p>
          </div>

          <div style={{ display: 'grid', gap: 1, background: 'var(--rule)', borderRadius: 4, overflow: 'hidden' }}>
            {bottlenecks.map((p, idx) => (
              <div key={p.n} className={`reveal-up delay-${idx + 1}`} style={{
                background: 'var(--paper-warm)',
                padding: '28px 8px 28px 0',
                display: 'grid',
                gridTemplateColumns: '60px 1fr',
                gap: 24,
                transition: 'background 200ms ease'
              }}
                onMouseEnter={e => e.currentTarget.style.background = 'var(--paper)'}
                onMouseLeave={e => e.currentTarget.style.background = 'var(--paper-warm)'}
              >
                <div style={{
                  fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.12em',
                  color: 'var(--blue-600)', paddingTop: 5, textTransform: 'uppercase'
                }}>{p.n}</div>
                <div>
                  <h3 style={{
                    fontFamily: 'var(--serif)', fontSize: 26, margin: 0, marginBottom: 8,
                    fontWeight: 400, letterSpacing: '-0.01em'
                  }}>{p.t}</h3>
                  <p style={{ margin: 0, color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.65 }}>{p.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Bottom: four pillars / unified stack */}
        <div style={{ paddingTop: 56, borderTop: '1px solid var(--rule)' }}>
          <div className="reveal-up" style={{ marginBottom: 40, maxWidth: 820 }}>
            <div className="section-badge" style={{ marginBottom: 20 }}>The philosophy</div>
            <h3 className="display" style={{
              fontSize: 'clamp(32px, 4vw, 52px)', margin: 0, marginBottom: 16
            }}>
              One unified stack.<br /><em>Infinite global scale.</em>
            </h3>
            <p style={{ color: 'var(--ink-soft)', fontSize: 16, maxWidth: 640, margin: 0, lineHeight: 1.65 }}>
              We don't just sell software. We provide the foundational digital infrastructure required to unify your operations. Headquartered in the UK, we architect systems that natively combine four critical pillars.
            </p>
          </div>

          <div className="pillars-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16 }}>
            {pillars.map((p, i) => (
              <div key={p.t} className={`card-hover reveal-scale delay-${i + 1}`} style={{
                background: 'var(--paper)',
                border: '1px solid var(--rule)',
                borderRadius: 16,
                padding: 24,
                minHeight: 220,
                display: 'flex', flexDirection: 'column',
                cursor: 'default'
              }}>
                <div style={{
                  display: 'inline-flex', alignSelf: 'flex-start',
                  fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.1em',
                  textTransform: 'uppercase',
                  padding: '6px 12px', borderRadius: 999,
                  background: i % 2 === 0 ? 'var(--mist)' : 'var(--sand)',
                  color: 'var(--blue-700)',
                  marginBottom: 20,
                  border: '1px solid ' + (i % 2 === 0 ? 'oklch(90% 0.03 240)' : 'oklch(89% 0.04 85)')
                }}>{p.tag}</div>
                <h4 style={{
                  fontFamily: 'var(--serif)', fontSize: 22, margin: 0, marginBottom: 10,
                  fontWeight: 400, letterSpacing: '-0.01em', lineHeight: 1.15
                }}>{p.t}</h4>
                <p style={{ color: 'var(--ink-soft)', fontSize: 13.5, margin: 0, lineHeight: 1.58 }}>{p.d}</p>
                <div className="label" style={{ marginTop: 'auto', paddingTop: 16, fontSize: 10, color: 'var(--blue-600)' }}>
                  Pillar 0{i + 1} / 04 →
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const [step, setStep] = useState(0);
  const steps = [
    {
      title: 'Discover',
      n: 'Step 01',
      desc: 'A 14-day infrastructure audit maps every legacy system, transaction layer, and data dependency in your stack — without touching production.',
      detail: ['Stack telemetry', 'Compliance posture', 'Legacy system map']
    },
    {
      title: 'Connect',
      n: 'Step 02',
      desc: 'Our adapters sit alongside your existing software. SAP, Oracle, mainframe, custom — the 24 Hubs runtime speaks to all of them in their native protocol.',
      detail: ['68 native connectors', 'Read-only by default', 'Zero core changes']
    },
    {
      title: 'Operate',
      n: 'Step 03',
      desc: 'A single operating layer for finance, identity, logistics, and compliance — visible to your teams, governed by your policies.',
      detail: ['Unified ledger view', 'Role-based access', 'Policy-as-code']
    },
    {
      title: 'Extend',
      n: 'Step 04',
      desc: 'New products and markets ship on top of the hub, not around it. Each launch inherits compliance, identity, and observability.',
      detail: ['Reusable primitives', 'Multi-region deploy', 'White-label ready']
    }
  ];

  return (
    <section id="platform">
      <div className="container">
        <div className="reveal-up" style={{ marginBottom: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 32, flexWrap: 'wrap' }}>
          <div>
            <div style={{ marginBottom: 20 }}>
              <span className="section-badge">003 — How it works</span>
            </div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.6vw, 64px)', margin: 0, maxWidth: 760 }}>
              We integrate with the systems<br />you have. We do not replace them.
            </h2>
          </div>
          <p style={{ maxWidth: 320, color: 'var(--ink-soft)', margin: 0 }}>
            A four-stage rollout. The first stage is non-invasive. The last delivers the central operating system you should have had all along.
          </p>
        </div>

        {/* tabs */}
        <div className="hiw-tabs" style={{ display: 'flex', borderBottom: '1px solid var(--rule)', marginBottom: 0, overflowX: 'auto' }}>
          {steps.map((s, i) => (
            <button key={i} onClick={() => setStep(i)} style={{
              flex: 1, minWidth: 140,
              background: i === step ? 'oklch(98% 0.005 85)' : 'none',
              border: 'none',
              padding: '22px 20px',
              textAlign: 'left',
              color: i === step ? 'var(--ink)' : 'var(--ink-mute)',
              borderBottom: i === step ? '2px solid var(--ink)' : '2px solid transparent',
              marginBottom: -1,
              transition: 'all 220ms ease',
              cursor: 'pointer',
              borderRadius: '8px 8px 0 0',
              position: 'relative'
            }}>
              <div style={{
                fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em',
                textTransform: 'uppercase', marginBottom: 8,
                color: i === step ? 'var(--blue-600)' : 'var(--ink-mute)'
              }}>{s.n}</div>
              <div style={{ fontFamily: 'var(--serif)', fontSize: 26, letterSpacing: '-0.01em', lineHeight: 1.1 }}>
                {s.title}
              </div>
            </button>
          ))}
        </div>

        <div className="hiw-content" style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)',
          gap: 64,
          padding: '56px 0',
          minHeight: 380
        }}>
          <div>
            <p style={{
              fontFamily: 'var(--serif)',
              fontSize: 26,
              lineHeight: 1.35,
              color: 'var(--ink)',
              margin: 0,
              marginBottom: 28
            }}>{steps[step].desc}</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {steps[step].detail.map(d => (
                <span key={d} style={{
                  border: '1px solid var(--rule)',
                  padding: '8px 14px',
                  borderRadius: 999,
                  fontSize: 12,
                  fontFamily: 'var(--mono)',
                  color: 'var(--ink-soft)',
                  background: 'var(--paper-warm)'
                }}>{d}</span>
              ))}
            </div>
          </div>

          {/* diagram */}
          <DiagramFlow step={step} />
        </div>
      </div>
    </section>
  );
}

function DiagramFlow({ step }) {
  // 4 horizontal lanes — Legacy, Adapters, 24 Hubs core, Apps. Highlight the active stage.
  return (
    <div style={{
      border: '1px solid var(--rule)',
      borderRadius: 16,
      padding: 28,
      background: 'var(--paper-warm)',
      position: 'relative',
      minHeight: 360
    }}>
      <div className="label" style={{ marginBottom: 20 }}>System diagram · stage 0{step + 1}</div>

      {/* lanes */}
      {[
        { name: 'Legacy systems', items: ['SAP', 'Oracle', 'Mainframe', 'Workday'], active: step >= 0 },
        { name: 'Adapter layer', items: ['Read', 'Sync', 'Translate', 'Audit'], active: step >= 1 },
        { name: '24 Hubs core', items: ['Identity', 'Ledger', 'Policy', 'Telemetry'], active: step >= 2 },
        { name: 'Surface apps', items: ['Olivedeck', 'Advantage', 'VehPort', 'ProctorEdge'], active: step >= 3 },
      ].map((lane, li) => (
        <div key={li} style={{
          display: 'grid',
          gridTemplateColumns: '110px 1fr',
          gap: 12,
          alignItems: 'center',
          marginBottom: 12,
          opacity: lane.active ? 1 : 0.35,
          transition: 'opacity 400ms'
        }}>
          <div className="label" style={{ fontSize: 10 }}>{lane.name}</div>
          <div style={{ display: 'flex', gap: 6 }}>
            {lane.items.map((it, i) => (
              <div key={i} style={{
                flex: 1,
                padding: '12px 10px',
                background: lane.active && li === step ? 'var(--ink)' : 'var(--paper)',
                color: lane.active && li === step ? 'var(--paper)' : 'var(--ink-soft)',
                border: '1px solid var(--rule)',
                borderRadius: 8,
                fontSize: 11,
                fontFamily: 'var(--mono)',
                textAlign: 'center',
                letterSpacing: '0.04em',
                transition: 'all 300ms'
              }}>{it}</div>
            ))}
          </div>
        </div>
      ))}

      {/* connector flow indicator */}
      <div style={{
        marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--rule)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center'
      }}>
        <div className="label">Data direction</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <span className="label">read</span>
          <span style={{
            width: 60, height: 1, background: 'var(--ink-soft)', position: 'relative'
          }}>
            <span style={{
              position: 'absolute', right: -1, top: -3,
              borderLeft: '5px solid var(--ink-soft)',
              borderTop: '3px solid transparent',
              borderBottom: '3px solid transparent'
            }} />
          </span>
          <span className="label">unify</span>
          <span style={{
            width: 60, height: 1, background: 'var(--ink-soft)', position: 'relative'
          }}>
            <span style={{
              position: 'absolute', right: -1, top: -3,
              borderLeft: '5px solid var(--ink-soft)',
              borderTop: '3px solid transparent',
              borderBottom: '3px solid transparent'
            }} />
          </span>
          <span className="label">extend</span>
        </div>
      </div>
    </div>
  );
}

function HubsGrid() {
  const featured = [
    {
      name: 'Olivedeck',
      cat: 'Developer platforms',
      desc: 'Ready-to-go cloud infrastructure (PaaS) for frictionless hosting and zero-DevOps deployments.',
      glyph: 'OD',
      tone: 'mist'
    },
    {
      name: 'Advantage',
      cat: 'PropTech',
      desc: 'The operating and African distribution system for modern real estate portfolios.',
      glyph: 'AD',
      tone: 'sand'
    },
    {
      name: 'VehPort',
      cat: 'Global supply chain',
      desc: 'Infrastructure built for cross-border vehicle acquisition and complex logistics tracking.',
      glyph: 'VP',
      tone: 'mist'
    },
    {
      name: 'ProctorEdge',
      cat: 'EdTech',
      desc: 'Borderless education and highly secure, verifiable remote assessment infrastructure.',
      glyph: 'PE',
      tone: 'sand'
    },
  ];

  const otherHubs = [
    'SurgeProtect', 'LedgerWorks', 'IdentityOne', 'CrossRail',
    'ComplianceOS', 'DataFoundry', 'PaymentsHub', 'AssureCloud',
    'TerraGrid', 'CivicLayer', 'TalentMesh', 'TrustSign',
    'OpsRoom', 'FleetCore', 'HealthBase', 'TaxBridge',
    'AgriSync', 'EnergyPath', 'CourtFile', 'BorderPass'
  ];

  return (
    <section id="hubs" style={{ background: 'var(--paper-warm)' }}>
      <div className="container">
        <div className="reveal-up" style={{ marginBottom: 56, display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 32, flexWrap: 'wrap' }}>
          <div>
            <div style={{ marginBottom: 20 }}>
              <span className="section-badge">005 — The 24 hubs</span>
            </div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.6vw, 64px)', margin: 0, maxWidth: 700 }}>
              Twenty-four operating layers.<br />
              <em>One platform.</em>
            </h2>
          </div>
          <a href="#" className="btn btn-ghost">View full directory <span className="arrow">→</span></a>
        </div>

        {/* featured 4 */}
        <div className="hubs-featured" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 16 }}>
          {featured.map((h, idx) => (
            <article key={h.name} className={`card-hover reveal-scale delay-${idx + 1}`} style={{
              background: 'var(--paper)',
              border: '1px solid var(--rule)',
              borderRadius: 16,
              padding: 28,
              display: 'flex',
              flexDirection: 'column',
              minHeight: 320,
              cursor: 'pointer',
              position: 'relative',
              overflow: 'hidden'
            }}>
              {/* subtle tone overlay */}
              <div style={{
                position: 'absolute', top: 0, right: 0, width: 80, height: 80,
                background: h.tone === 'mist' ? 'var(--mist)' : 'var(--sand)',
                borderRadius: '0 16px 0 80px', opacity: 0.7, pointerEvents: 'none'
              }} />
              <div style={{
                width: 52, height: 52, borderRadius: 12,
                background: h.tone === 'mist' ? 'var(--mist)' : 'var(--sand)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                marginBottom: 24,
                fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 500,
                color: 'var(--blue-700)',
                border: '1px solid ' + (h.tone === 'mist' ? 'oklch(90% 0.03 240)' : 'oklch(89% 0.04 85)')
              }}>{h.glyph}</div>
              <div className="label" style={{ marginBottom: 8 }}>{h.cat}</div>
              <h3 style={{
                fontFamily: 'var(--serif)', fontSize: 28, margin: 0, marginBottom: 12,
                fontWeight: 400, letterSpacing: '-0.01em'
              }}>{h.name}</h3>
              <p style={{ color: 'var(--ink-soft)', fontSize: 13.5, margin: 0, marginBottom: 24, lineHeight: 1.58 }}>
                {h.desc}
              </p>
              <div style={{ marginTop: 'auto', fontSize: 13, color: 'var(--blue-600)', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6 }}>
                Open hub <span style={{ transition: 'transform 180ms ease' }} className="arrow">→</span>
              </div>
            </article>
          ))}
        </div>

        {/* + remaining 20 as a tight grid */}
        <div style={{
          background: 'var(--paper)',
          border: '1px solid var(--rule)',
          borderRadius: 16,
          padding: 28
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20 }}>
            <div className="label">Twenty more, indexed</div>
            <div className="label">Updated 04 / 2026</div>
          </div>
          <div className="hubs-index" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 1, background: 'var(--rule)' }}>
            {otherHubs.map((h, i) => (
              <div key={h} style={{
                background: 'var(--paper)',
                padding: '18px 16px',
                fontSize: 14,
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                cursor: 'pointer',
                transition: 'background 160ms'
              }}
                onMouseEnter={e => e.currentTarget.style.background = 'var(--paper-warm)'}
                onMouseLeave={e => e.currentTarget.style.background = 'var(--paper)'}
              >
                <span>{h}</span>
                <span className="label" style={{ fontSize: 10 }}>{String(i + 5).padStart(2, '0')}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { LogoCloud, Problem, HowItWorks, HubsGrid });