// Integration Promise + Global Authority sections

function IntegrationPromise() {
  const [active, setActive] = useState(0);
  const ledgers = [
    { name: 'Sage',   note: 'Direct journal sync · UK & EU' },
    { name: 'Zoho',   note: 'Books, Inventory, Invoice' },
    { name: 'Oracle', note: 'NetSuite & Fusion ERP' },
    { name: 'SAP',    note: 'S/4HANA, Business One' },
    { name: 'QuickBooks', note: 'Online & Enterprise' },
    { name: 'Xero',   note: 'Multi-entity supported' },
  ];

  const flowItems = [
    { side: 'left',  label: 'Patient intake',  hub: 'Medyra' },
    { side: 'left',  label: 'Logistics & fleet', hub: 'VehPort' },
    { side: 'left',  label: 'Property leasing', hub: 'Advantage' },
    { side: 'left',  label: 'Legal due diligence', hub: 'Inncase.ai' },
  ];

  return (
    <section id="integrations">
      <div className="container">
        <div className="reveal-up" style={{ marginBottom: 56, maxWidth: 820 }}>
          <div style={{ marginBottom: 20 }}>
            <span className="section-badge">004 — The integration promise</span>
          </div>
          <h2 className="display" style={{ fontSize: 'clamp(36px, 4.6vw, 64px)', margin: 0, marginBottom: 24 }}>
            Modern operations.<br /><em>Trusted foundations.</em>
          </h2>
          <p style={{ color: 'var(--ink-soft)', fontSize: 17, margin: 0, maxWidth: 680, lineHeight: 1.58 }}>
            True enterprise infrastructure doesn't force a rip-and-replace of your business. 24 Hubs is the modern operational wrapper that makes the systems you already trust perform better.
          </p>
        </div>

        {/* two-pane: principles + animated ledger sync diagram */}
        <div className="ip-layout" style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)',
          gap: 48,
          alignItems: 'stretch'
        }}>
          {/* Principles */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              {
                tag: 'Principle 01',
                t: 'Own the operation. Sync the ledger.',
                d: 'We power your daily workflows — patient intake, global logistics, leasing, due diligence — and use our API gateway to push clean, reconciled data into Sage, Zoho, Oracle, SAP, and the ledgers your CFO already trusts.'
              },
              {
                tag: 'Principle 02',
                t: 'Zero-friction adoption.',
                d: 'Upgrade your frontline capabilities immediately — without disrupting the CFO\'s office, the auditor\'s schedule, or month-end close.'
              },
              {
                tag: 'Principle 03',
                t: 'Read-only by default.',
                d: 'The adapter layer never writes to a system of record without your team\'s explicit policy approval. Reversible at the connector level.'
              },
            ].map((p, i) => (
              <button key={i} onClick={() => setActive(i)} style={{
                background: active === i ? 'var(--paper-warm)' : 'var(--paper)',
                border: '1px solid ' + (active === i ? 'var(--ink)' : 'var(--rule)'),
                borderRadius: 14,
                padding: 24,
                textAlign: 'left',
                cursor: 'pointer',
                transition: 'all 200ms'
              }}>
                <div className="label" style={{ color: 'var(--blue-600)', marginBottom: 12 }}>{p.tag}</div>
                <div style={{
                  fontFamily: 'var(--serif)', fontSize: 22, lineHeight: 1.2,
                  marginBottom: 10, letterSpacing: '-0.01em'
                }}>{p.t}</div>
                <div style={{ fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{p.d}</div>
              </button>
            ))}
          </div>

          {/* Animated sync diagram */}
          <div style={{
            border: '1px solid var(--rule)',
            borderRadius: 20,
            background: 'var(--paper-warm)',
            padding: 28,
            position: 'relative',
            display: 'flex', flexDirection: 'column'
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 24 }}>
              <div className="label">Operation → ledger sync</div>
              <div className="label" style={{ color: 'var(--blue-600)' }}>● reconciled, live</div>
            </div>

            <div style={{
              display: 'grid',
              gridTemplateColumns: '1fr auto 1fr',
              gap: 20,
              alignItems: 'center',
              flex: 1
            }}>
              {/* operations side */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {flowItems.map((it, i) => (
                  <div key={i} style={{
                    background: 'var(--paper)',
                    border: '1px solid var(--rule)',
                    borderRadius: 10,
                    padding: '12px 14px',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    fontSize: 13
                  }}>
                    <span>{it.label}</span>
                    <span className="label" style={{ fontSize: 10 }}>{it.hub}</span>
                  </div>
                ))}
              </div>

              {/* gateway pillar */}
              <div style={{
                width: 88,
                background: 'var(--ink)',
                color: 'var(--paper)',
                borderRadius: 12,
                padding: '24px 8px',
                textAlign: 'center',
                position: 'relative',
                minHeight: 240,
                display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 12
              }}>
                <div className="label" style={{ color: 'oklch(72% 0.13 252)', fontSize: 9 }}>API</div>
                <div style={{
                  fontFamily: 'var(--serif)',
                  fontSize: 18, lineHeight: 1, writingMode: 'horizontal-tb',
                  letterSpacing: '-0.01em'
                }}>Gateway</div>
                {/* moving dot */}
                <SyncDot />
              </div>

              {/* ledgers side */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {ledgers.slice(0, 4).map((l, i) => (
                  <div key={i} style={{
                    background: 'var(--paper)',
                    border: '1px solid var(--rule)',
                    borderRadius: 10,
                    padding: '12px 14px',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    fontSize: 13
                  }}>
                    <span style={{ fontFamily: 'var(--serif)', fontSize: 16 }}>{l.name}</span>
                    <span className="label" style={{ fontSize: 9 }}>{l.note}</span>
                  </div>
                ))}
              </div>
            </div>

            <div style={{
              marginTop: 20, paddingTop: 16,
              borderTop: '1px solid var(--rule)',
              display: 'flex', justifyContent: 'space-between'
            }}>
              <div>
                <div className="label">Connectors</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4 }}>68 native</div>
              </div>
              <div>
                <div className="label">Reconciliation</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4 }}>Daily, automated</div>
              </div>
              <div>
                <div className="label">Write-back</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginTop: 4 }}>Policy-gated</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SyncDot() {
  const [t, setT] = useState(0);
  useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = () => { setT(((performance.now() - start) / 1800) % 1); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, []);
  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', borderRadius: 12 }}>
      <div style={{
        position: 'absolute',
        left: '50%',
        top: `${10 + t * 80}%`,
        transform: 'translate(-50%, -50%)',
        width: 8, height: 8, borderRadius: '50%',
        background: 'oklch(72% 0.13 252)',
        boxShadow: '0 0 0 4px oklch(72% 0.13 252 / 0.25)'
      }} />
    </div>
  );
}

function Authority() {
  const certs = [
    { k: 'ISO', v: '27001', d: 'Information security' },
    { k: 'SOC', v: '2 Type II', d: 'Audited annually' },
    { k: 'PCI', v: 'DSS L1', d: 'Payment infrastructure' },
    { k: 'GDPR', v: 'UK & EU', d: 'Data sovereignty' },
    { k: 'NDPR', v: 'NG', d: 'West Africa compliance' },
    { k: 'WCAG', v: '2.2 AA', d: 'Accessibility' },
  ];
  return (
    <section style={{ background: 'var(--ink)', color: 'var(--paper)', position: 'relative', overflow: 'hidden' }}>
      {/* Background glow */}
      <div style={{
        position: 'absolute', bottom: -100, left: -100,
        width: 500, height: 500, borderRadius: '50%',
        background: 'radial-gradient(circle, oklch(38% 0.1 255 / 0.25) 0%, transparent 70%)',
        pointerEvents: 'none'
      }} aria-hidden="true" />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="auth-layout" style={{
          display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.1fr)',
          gap: 80, alignItems: 'start'
        }}>
          <div className="reveal-up">
            <div style={{ marginBottom: 24 }}>
              <span className="section-badge" style={{
                background: 'oklch(28% 0.06 255)', border: '1px solid oklch(38% 0.06 255)',
                color: 'oklch(72% 0.13 252)'
              }}>007 — Global authority & security</span>
            </div>
            <h2 className="display" style={{
              fontSize: 'clamp(36px, 4.6vw, 64px)', margin: 0, marginBottom: 24
            }}>
              Architected for the global market.<br />
              <em>Secured for the enterprise.</em>
            </h2>
            <p style={{
              fontSize: 17, color: 'oklch(78% 0.02 250)', maxWidth: 540, margin: 0, marginBottom: 32, lineHeight: 1.6
            }}>
              Operating internationally requires more than good code. Headquartered in the United Kingdom, 24 Hubs is built on zero-trust security, immutable audit trails, and strict data-sovereignty compliance. Whether you're processing global legal data in <strong style={{ fontWeight: 500, color: 'var(--paper)' }}>Inncase.ai</strong> or securing financial ledgers in <strong style={{ fontWeight: 500, color: 'var(--paper)' }}>Corentua</strong>, your infrastructure is fortified against global threats.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
                { t: 'Zero-trust by design', d: 'Every workload, every request, every region — verified continuously.' },
                { t: 'Immutable audit trail', d: 'Every state change is signed, hashed, and replicated across sovereign zones.' },
                { t: 'Sovereign by default', d: 'Data stays in the jurisdiction it was created in unless your policy allows otherwise.' },
              ].map((it, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: '32px 1fr', gap: 16, alignItems: 'start',
                  padding: '14px 0', borderTop: '1px solid oklch(35% 0.04 255)'
                }}>
                  <div className="label" style={{ color: 'oklch(72% 0.13 252)', paddingTop: 2 }}>0{i + 1}</div>
                  <div>
                    <div style={{ fontFamily: 'var(--serif)', fontSize: 22, marginBottom: 4 }}>{it.t}</div>
                    <div style={{ fontSize: 14, color: 'oklch(75% 0.02 250)' }}>{it.d}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* certs grid */}
          <div style={{
            border: '1px solid oklch(35% 0.04 255)',
            borderRadius: 20,
            background: 'oklch(22% 0.025 255)',
            padding: 32
          }}>
            <div className="label" style={{ color: 'oklch(72% 0.13 252)', marginBottom: 20 }}>
              Certifications & posture
            </div>
            <div style={{
              display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
              gap: 1, background: 'oklch(35% 0.04 255)',
              border: '1px solid oklch(35% 0.04 255)',
              borderRadius: 12, overflow: 'hidden'
            }}>
              {certs.map(c => (
                <div key={c.k} style={{
                  background: 'oklch(22% 0.025 255)',
                  padding: '24px 20px'
                }}>
                  <div className="label" style={{ color: 'oklch(72% 0.13 252)', fontSize: 10, marginBottom: 8 }}>
                    {c.k}
                  </div>
                  <div style={{ fontFamily: 'var(--serif)', fontSize: 32, lineHeight: 1, marginBottom: 8 }}>
                    {c.v}
                  </div>
                  <div style={{ fontSize: 12, color: 'oklch(75% 0.02 250)' }}>{c.d}</div>
                </div>
              ))}
            </div>
            <div style={{
              marginTop: 20, paddingTop: 20,
              borderTop: '1px solid oklch(35% 0.04 255)',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center'
            }}>
              <div>
                <div className="label" style={{ color: 'oklch(72% 0.13 252)' }}>Sovereign zones</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 26, marginTop: 4 }}>UK · NG · GH · CI</div>
              </div>
              <a href="#" className="btn" style={{
                background: 'transparent', color: 'var(--paper)',
                border: '1px solid oklch(45% 0.04 255)', padding: '10px 16px', fontSize: 13
              }}>Trust report ↗</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IntegrationPromise, Authority });