/* global React, ArchitectureStack, IsometricLayerStack, DataFlowDiagram, IconArrowRight, IconDownload, IconChip, IconLayers, IconAtom, IconLock, IconBox, IconShield, IconCheck, IconFlow, IconTerminal, IconGraph, IconBank, IconGov, IconExchange, IconCloud, IconUsers */

/* =============================================================================
   AORBIT — Overview
   ============================================================================= */

function AorbitOverview({ navigate }) {
  const openBrief = () => window.openGatedDownload && window.openGatedDownload("architecture-brief");
  return (
    <main data-screen-label="AORBIT Overview">
      {/* 1. Product hero */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">AORBIT™</div>
          <h1>The Autonomous Enterprise Intelligence Suite.</h1>
          <p className="lead">
            An architecture that absorbs change. Three layers. One platform. Zero data exfiltration.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect?interest=aorbit")}>
              See how AORBIT maps to your stack <IconArrowRight size={14} className="arrow" />
            </button>
            <button className="btn btn-ghost" onClick={openBrief}>
              Get the architecture brief <IconDownload size={14} />
            </button>
          </div>
        </div>
      </section>

      {/* 2. Why AORBIT exists — narrative */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">A/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Why AORBIT exists</div>
            </div>
            <h2 style={{ maxWidth: "20ch" }}>The problem with enterprise AI isn&rsquo;t AI.</h2>
          </div>
          <div style={{ maxWidth: 880, display: "grid", gap: 20 }}>
            <p className="lead" style={{ marginTop: 0 }}>
              Every week brings a new model, a new framework, a new capability. Enterprises that bolt these onto fragile systems create compounding technical debt. One integration breaks another. Compliance can&rsquo;t keep up. The operations team drowns in alerts they can&rsquo;t correlate.
            </p>
            <p className="lead" style={{ marginTop: 0 }}>
              AORBIT doesn&rsquo;t add another tool to the stack. It&rsquo;s the architecture that holds the tools together. Each layer builds on the one below it. New capabilities plug in without breaking existing layers. The system evolves with the technology, not against it.
            </p>
            <p className="lead" style={{ marginTop: 0, color: "var(--text)" }}>
              This isn&rsquo;t a menu of services. It&rsquo;s a system that was designed to last.
            </p>
          </div>
        </div>
      </section>

      {/* 3. The three layers — EXPANDED by default */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">A/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>The three layers</div>
            </div>
            <h2>One platform. Three layers. Built to compose.</h2>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 48, alignItems: "start" }} className="aorbit-grid">
            <div style={{ position: "sticky", top: 96 }}>
              <IsometricLayerStack active="foundation" onSelect={() => {}} />
            </div>
            <div style={{ display: "grid", gap: 24 }}>
              <ExpandedLayer
                num="01"
                title="Foundation"
                sub="Private AI Infrastructure"
                body="On-premise LLMs running on NVIDIA GPUs, inside your network, behind your firewall. Multi-LLM orchestration, secure API gateways, AI inference frameworks. No API calls to external providers. Full data sovereignty."
                onMore={() => navigate("/aorbit/foundation")}
              />
              <ExpandedLayer
                num="02"
                title="Intelligence"
                sub="AIOps &amp; Autonomous Operations"
                body="Your operations team manages a thousand alerts daily across Splunk, ServiceNow, AppDynamics. The platform correlates them into incidents, finds the root cause, recommends the fix, and — with your approval — executes remediation. All inside your infrastructure."
                onMore={() => navigate("/aorbit/intelligence")}
              />
              <ExpandedLayer
                num="03"
                title="Frontier"
                sub="Digital Assets &amp; Agentic Finance"
                body="Because private AI already runs inside the bank, digital asset operations become agentic. AI agents for smart contract auditing, autonomous compliance engines for PVARA and FATF, fraud detection on blockchain transactions, DeFi risk analysis — all private, all compliant."
                onMore={() => navigate("/aorbit/frontier")}
              />
            </div>
          </div>
        </div>
      </section>

      {/* 4. Architecture table */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">A/03</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Reference architecture</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>Designed to evolve &mdash; not break &mdash; as AI capabilities change.</h2>
          </div>
          <ArchitectureTable />
          <p style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em", color: "var(--text-mute)", textTransform: "uppercase", marginTop: 32 }}>
            // Read top-to-bottom = outside-in. Build bottom-to-top = infrastructure first.
          </p>
        </div>
      </section>

      {/* 5. Technology ecosystem */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">A/04</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Technology ecosystem</div>
            </div>
            <h2>Built on production-grade infrastructure.</h2>
          </div>
          <LogoRow items={["NVIDIA", "Kubernetes", "Splunk", "ServiceNow", "AppDynamics"]} />
        </div>
      </section>

      {/* 6. Closing CTA */}
      <section className="section">
        <div className="container">
          <div className="section-head center">
            <h2 style={{ maxWidth: "22ch" }}>See how AORBIT fits your infrastructure.</h2>
          </div>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect?interest=aorbit")}>
              Talk to an architect <IconArrowRight size={14} className="arrow" />
            </button>
            <button className="btn btn-ghost" onClick={openBrief}>
              Get the architecture brief <IconDownload size={14} />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

function ExpandedLayer({ num, title, sub, body, onMore }) {
  return (
    <div className="card" style={{ padding: 32 }}>
      <div style={{ display: "flex", alignItems: "baseline", gap: 16 }}>
        <span style={{ fontFamily: "var(--font-mono)", color: "var(--teal)", fontSize: 14, letterSpacing: "0.04em" }}>{num}</span>
        <div>
          <h3 style={{ fontSize: 28, letterSpacing: "-0.02em" }}>{title} &mdash; <span dangerouslySetInnerHTML={{ __html: sub }} /></h3>
        </div>
      </div>
      <p style={{ color: "var(--text-dim)", marginTop: 20, lineHeight: 1.7, fontSize: 16 }}>{body}</p>
      <button className="btn btn-text" style={{ marginTop: 24 }} onClick={onMore}>
        Learn more about {title} <IconArrowRight size={14} />
      </button>
    </div>
  );
}

/* =============================================================================
   Architecture table — reused on Overview + Architecture pages
   ============================================================================= */

function ArchitectureTable({ highlight }) {
  const rows = [
    { layer: "Governance",      components: "Policy review · Compliance engines · Audit trails · Regulatory reporting" },
    { layer: "Application",     components: "AI agents · Coding tools · RPA · Digital asset operations · Agentic payments" },
    { layer: "Operations",      components: "AIOps · Observability · Auto-remediation · Runbook automation · Human-in-the-loop" },
    { layer: "Intelligence",    components: "LLM inference · Multi-model orchestration · RAG pipelines · Fine-tuning · Prompt management" },
    { layer: "Infrastructure",  components: "GPU compute (NVIDIA) · Containers (Kubernetes) · Secure networking · API gateway" },
  ];
  return (
    <div className="arch-table">
      <div className="arch-table-head">
        <div>// LAYER</div>
        <div>// COMPONENTS</div>
      </div>
      {rows.map((r) => (
        <div key={r.layer} className={`arch-table-row ${highlight === r.layer ? "is-highlight" : ""}`}>
          <div className="arch-table-cell layer">{r.layer}</div>
          <div className="arch-table-cell components">{r.components}</div>
        </div>
      ))}
    </div>
  );
}

function LogoRow({ items }) {
  return (
    <div className="logo-row">
      {items.map((x) => (
        <div key={x} className="logo-row-item">{x}</div>
      ))}
    </div>
  );
}

/* =============================================================================
   AORBIT™ — 01 Foundation
   ============================================================================= */

function FoundationPage({ navigate }) {
  return (
    <main data-screen-label="AORBIT 01 Foundation">
      {/* 1. Layer hero */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow"><span className="layer-badge">01</span> &nbsp; // FOUNDATION</div>
          <h1>Private AI Infrastructure.</h1>
          <p className="lead">
            On-premise LLMs running on NVIDIA GPUs, inside your network, behind your firewall. No API calls to external providers. Full data sovereignty.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect?interest=aorbit")}>
              Talk to an infrastructure architect <IconArrowRight size={14} className="arrow" />
            </button>
            <a href="#data-flow" className="btn btn-ghost">See the data flow <IconArrowRight size={14} className="arrow" /></a>
          </div>
        </div>
      </section>

      {/* 2. The problem */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">F/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>The problem</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>Every AI tool asks you to send data outside.</h2>
          </div>
          <div style={{ maxWidth: 880, display: "grid", gap: 20 }}>
            <p className="lead" style={{ marginTop: 0 }}>
              Your board wants AI. Your regulators want data localization. Your CISO wants zero exfiltration. Most AI vendors make you choose &mdash; capability or compliance. AORBIT™ Foundation eliminates the trade-off.
            </p>
            <p className="lead" style={{ marginTop: 0, color: "var(--text)" }}>
              Frontier-quality AI. Inside your perimeter. Running on your hardware. Under your control.
            </p>
          </div>
        </div>
      </section>

      {/* 3. Core capabilities */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">F/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Core capabilities</div>
            </div>
            <h2>Four capabilities. One private substrate.</h2>
          </div>
          <div className="grid-2">
            <CapabilityCard tag="F/02·01" Icon={IconLayers} title="Multi-LLM orchestration"
              body="Run multiple models simultaneously. Route queries to the right model based on task complexity, latency requirements, and cost. Switch models without changing application code." />
            <CapabilityCard tag="F/02·02" Icon={IconShield} title="Secure API gateway"
              body="All AI endpoints are internal. No traffic crosses your network perimeter. Authentication, rate limiting, audit logging, and access controls — built into the gateway, not bolted on." />
            <CapabilityCard tag="F/02·03" Icon={IconChip} title="AI inference frameworks"
              body="Optimized for banking-scale throughput. Low-latency inference on NVIDIA GPUs. Batch processing for document analysis. Real-time inference for operational decisions." />
            <CapabilityCard tag="F/02·04" Icon={IconLock} title="Zero data exfiltration"
              body="Not a policy. An architecture. No external API calls means no data can leave. Network isolation, encrypted storage, full audit trails. Compliance is a byproduct of the architecture, not an afterthought." />
          </div>
        </div>
      </section>

      {/* 4. Data flow visual */}
      <section className="section" id="data-flow">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">F/03</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Data flow</div>
            </div>
            <h2>Same workload. Two perimeters. Pick the one your auditor will sign.</h2>
          </div>
          <div className="flow-stage"><DataFlowDiagram metaphor="perimeter" /></div>
        </div>
      </section>

      {/* 5. Deployment models */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">F/04</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Deployment models</div>
            </div>
            <h2>Deploy where your data lives.</h2>
          </div>
          <DeploymentTable />
        </div>
      </section>

      {/* 6. Regulatory mapping */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">F/05</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Regulatory mapping</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>Compliance is architecture, not paperwork.</h2>
          </div>
          <ComplianceMatrix rows={[
            { fw: "SAMA",  desc: "Data localization requirements — satisfied by on-premise deployment." },
            { fw: "GDPR",  desc: "Data residency — satisfied by regional private cloud deployment." },
            { fw: "PCI DSS", desc: "Data protection — satisfied by network isolation and encryption." },
            { fw: "National cybersecurity frameworks", desc: "Satisfied by air-gapped deployment options." },
          ]} />
        </div>
      </section>

      {/* 7. Closing CTA */}
      <section className="section">
        <div className="container">
          <div className="section-head center">
            <h2 style={{ maxWidth: "22ch" }}>Deploy private AI in your infrastructure.</h2>
          </div>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect?interest=aorbit")}>
              Talk to an infrastructure architect <IconArrowRight size={14} className="arrow" />
            </button>
            <a href="#data-flow" className="btn btn-text">See the data flow <IconArrowRight size={14} /></a>
          </div>
        </div>
      </section>
    </main>
  );
}

/* =============================================================================
   AORBIT — 02 Intelligence
   ============================================================================= */

function IntelligencePage({ navigate }) {
  return (
    <main data-screen-label="AORBIT 02 Intelligence">
      {/* 1. Layer hero */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow"><span className="layer-badge">02</span> &nbsp; // INTELLIGENCE</div>
          <h1>1,000 alerts. One root cause.</h1>
          <p className="lead">
            Your operations team is drowning. Not because they lack tools. Because every tool generates alerts that nobody can correlate. AORBIT™ Intelligence turns noise into action.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/contact/demo?layer=intelligence")}>
              See a demo <IconArrowRight size={14} className="arrow" />
            </button>
            <button className="btn btn-ghost" onClick={() => navigate("/talk-to-an-architect?interest=aiops")}>
              Talk to an operations architect <IconArrowRight size={14} className="arrow" />
            </button>
          </div>
        </div>
      </section>

      {/* 2. The problem */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">I/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>The problem</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>ITOPS was never designed for this volume.</h2>
          </div>
          <div style={{ maxWidth: 880, display: "grid", gap: 20 }}>
            <p className="lead" style={{ marginTop: 0 }}>
              A thousand alerts a day across Splunk, ServiceNow, AppDynamics, PagerDuty, Grafana. Your team triages manually. They correlate by instinct. They escalate by email. Runbooks are PDFs nobody reads. Mean time to resolution stretches from minutes to hours.
            </p>
            <p className="lead" style={{ marginTop: 0, color: "var(--text)" }}>
              This is what happens when operations tooling scales but operations intelligence doesn&rsquo;t.
            </p>
          </div>
        </div>
      </section>

      {/* 3. Core capabilities */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">I/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Core capabilities</div>
            </div>
            <h2>Four capabilities. From noise to closed incident.</h2>
          </div>
          <div className="grid-2">
            <CapabilityCard tag="I/02·01" Icon={IconFlow} title="Intelligent alert correlation"
              body="Ingest alerts from every observability tool in your stack. Correlate across systems, services, and time windows. Collapse hundreds of related alerts into a single incident. Your team sees the incident, not the noise." />
            <CapabilityCard tag="I/02·02" Icon={IconGraph} title="AI root cause analysis"
              body="For every correlated incident, the platform traces the dependency chain to the root cause. Not a guess — a traced analysis across your infrastructure topology. The root cause is identified in seconds, not hours." />
            <CapabilityCard tag="I/02·03" Icon={IconTerminal} title="Automated runbook execution"
              body="Your runbooks are codified. When the platform identifies an incident and its root cause, it matches the remediation runbook. The fix is ready. It waits for your approval. You approve. It executes. Done." />
            <CapabilityCard tag="I/02·04" Icon={IconShield} title="Human-in-the-loop control" trust
              body="AORBIT recommends. You decide. No autonomous actions without human oversight. Configurable approval thresholds — auto-approve low-risk remediations, require sign-off for critical systems. You set the boundaries." />
          </div>
        </div>
      </section>

      {/* 4. How it works — 6-step flow */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">I/03</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>How it works</div>
            </div>
            <h2>Six steps. Alert ingest to closed incident.</h2>
          </div>
          <StepFlow steps={[
            { n: "01", title: "Ingest",        body: "Alerts ingested from Splunk, ServiceNow, AppDynamics, PagerDuty, Grafana." },
            { n: "02", title: "Correlate",     body: "AI correlation engine groups related alerts into a single incident." },
            { n: "03", title: "Trace",         body: "Root cause analysis traces the dependency chain." },
            { n: "04", title: "Match",         body: "Remediation runbook matched and prepared." },
            { n: "05", title: "Approve",       body: "Human approval requested (or auto-approved per your thresholds)." },
            { n: "06", title: "Resolve",       body: "Remediation executed. Incident resolved. Audit trail recorded." },
          ]} />
        </div>
      </section>

      {/* 5. Integrations */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">I/04</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Integrations</div>
            </div>
            <h2>Plugs into the observability stack you already have.</h2>
          </div>
          <LogoRow items={["Splunk", "ServiceNow", "AppDynamics", "PagerDuty", "Grafana", "Datadog", "New Relic", "Custom via API"]} />
        </div>
      </section>

      {/* 6. Closing CTA */}
      <section className="section">
        <div className="container">
          <div className="section-head center">
            <h2 style={{ maxWidth: "22ch" }}>Stop drowning in alerts.</h2>
          </div>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/contact/demo?layer=intelligence")}>
              See a demo <IconArrowRight size={14} className="arrow" />
            </button>
            <button className="btn btn-ghost" onClick={() => navigate("/talk-to-an-architect?interest=aiops")}>
              Talk to an operations architect <IconArrowRight size={14} className="arrow" />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

/* =============================================================================
   AORBIT — 03 Frontier
   ============================================================================= */

function FrontierPage({ navigate }) {
  return (
    <main data-screen-label="AORBIT 03 Frontier">
      {/* 1. Layer hero */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow"><span className="layer-badge">03</span> &nbsp; // FRONTIER</div>
          <h1>Agentic finance. Private infrastructure.</h1>
          <p className="lead">
            The agentic economy is here. AI agents making payments, auditing smart contracts, monitoring compliance in real-time. The question for regulated institutions isn&rsquo;t whether to participate. It&rsquo;s how to participate without exposing critical data.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/contact/demo?layer=frontier")}>
              Schedule an assessment <IconArrowRight size={14} className="arrow" />
            </button>
            <button className="btn btn-ghost" onClick={() => navigate("/aorbit/foundation")}>
              Explore AORBIT™ Foundation <IconArrowRight size={14} className="arrow" />
            </button>
          </div>
        </div>
      </section>

      {/* 2. The market shift */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">X/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>The market shift</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>The infrastructure race for agentic finance has started.</h2>
          </div>
          <div style={{ maxWidth: 880, display: "grid", gap: 20 }}>
            <p className="lead" style={{ marginTop: 0 }}>
              World Liberty Financial shipped AgentPay &mdash; an SDK for AI agents to hold, transfer, and manage stablecoins with policy enforcement. Stripe is building agentic payment rails. Circle and Coinbase are racing to build the infrastructure for AI commerce.
            </p>
            <p className="lead" style={{ marginTop: 0 }}>
              In front, you see the agentic payment. In the back, there&rsquo;s a system architecture that makes it compliant, private, and production-grade. Public companies are building the front. Doblier builds the back.
            </p>
            <p className="lead" style={{ marginTop: 0, color: "var(--text)" }}>
              Because private AI already runs inside the bank (Foundation), digital asset operations become agentic. The Frontier layer doesn&rsquo;t exist without the Foundation underneath it. That&rsquo;s the architecture advantage.
            </p>
          </div>
        </div>
      </section>

      {/* 3. Core capabilities — 5 */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">X/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Core capabilities</div>
            </div>
            <h2>Five capabilities. All private, all compliant.</h2>
          </div>
          <div className="grid-2">
            <CapabilityCard tag="X/02·01" Icon={IconShield} title="Agentic compliance engines"
              body="AI agents that monitor compliance in real-time. Not periodic audits — continuous monitoring. PVARA, FATF Travel Rule, SAMA digital asset regulations, MiCA (EU). The agents adapt as regulations change." />
            <CapabilityCard tag="X/02·02" Icon={IconLock} title="Smart contract auditing"
              body="AI-powered analysis of smart contract code before deployment. Vulnerability scanning, logic verification, compliance checking. Catch the issue before it&rsquo;s on-chain and immutable." />
            <CapabilityCard tag="X/02·03" Icon={IconGraph} title="AI fraud detection"
              body="Real-time analysis of blockchain transactions. Pattern recognition across chains. Anomaly detection. Sanctions screening. All running on private infrastructure — your transaction data never leaves your environment." />
            <CapabilityCard tag="X/02·04" Icon={IconFlow} title="DeFi risk analysis"
              body="Assess liquidity risk, protocol risk, and counterparty exposure across DeFi positions. AI models trained on your risk parameters, running inside your infrastructure." />
            <CapabilityCard tag="X/02·05" Icon={IconExchange} title="RWA tokenization support"
              body="Private AI infrastructure for real-world asset tokenization workflows. Compliance verification, ownership tracking, and reporting — all within your regulated environment." />
          </div>
        </div>
      </section>

      {/* 4. Why private infrastructure matters here */}
      <section className="section">
        <div className="container">
          <div className="grid-2" style={{ alignItems: "start", gap: 64 }}>
            <div>
              <div className="eyebrow">X/03 — WHY PRIVATE</div>
              <h2 style={{ marginTop: 16, maxWidth: "16ch" }}>Public AI + regulated finance = compliance violation.</h2>
            </div>
            <div style={{ display: "grid", gap: 20 }}>
              <p className="lead" style={{ marginTop: 0 }}>
                Every agentic operation involves data: transaction details, counterparty information, compliance records, risk assessments. Sending this to external AI APIs is a regulatory event at best and a breach at worst.
              </p>
              <p className="lead" style={{ marginTop: 0, color: "var(--text)" }}>
                AORBIT Frontier runs on Foundation. Private AI. Private data. Private decisions. The agents are intelligent because the infrastructure is private.
              </p>
              <button className="btn btn-text" style={{ marginTop: 8, justifySelf: "start" }} onClick={() => navigate("/aorbit/foundation")}>
                See the Foundation layer <IconArrowRight size={14} />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* 5. Regulatory frameworks */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">X/04</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Regulatory frameworks</div>
            </div>
            <h2>How AORBIT maps to the frameworks you answer to.</h2>
          </div>
          <ComplianceMatrix rows={[
            { fw: "PVARA",                       desc: "Agentic compliance monitoring for virtual asset regulations. Continuous assessment, automated reporting." },
            { fw: "FATF Travel Rule",            desc: "AI-powered counterparty identification and information sharing. Compliant data transfer between regulated entities." },
            { fw: "SAMA Digital Asset Framework",desc: "Full alignment with Saudi Arabian monetary authority requirements for digital asset operations." },
            { fw: "MiCA (EU)",                   desc: "Markets in Crypto-Assets regulation compliance. Reporting, reserves verification, consumer protection." },
            { fw: "AML / KYC",                   desc: "Automated anti-money laundering monitoring and know-your-customer verification via private AI agents." },
          ]} />
        </div>
      </section>

      {/* 6. Closing CTA */}
      <section className="section">
        <div className="container">
          <div className="section-head center">
            <h2 style={{ maxWidth: "22ch" }}>Bring compliant AI to agentic finance.</h2>
          </div>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/contact/demo?layer=frontier")}>
              Schedule an assessment <IconArrowRight size={14} className="arrow" />
            </button>
            <button className="btn btn-text" onClick={() => navigate("/aorbit/foundation")}>
              Explore AORBIT Foundation <IconArrowRight size={14} />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

/* =============================================================================
   AORBIT — Architecture deep-dive
   ============================================================================= */

function AorbitArchitecturePage({ navigate }) {
  const openBrief = () => window.openGatedDownload && window.openGatedDownload("architecture-brief");
  const [active, setActive] = React.useState("Infrastructure");
  const layerData = {
    Governance:     { num: "05", desc: "Policy review engine (automated policy compliance checking). Compliance engines (SAMA, GDPR, PCI DSS, PVARA, FATF mapping). Audit trails (every AI decision logged, traceable, reportable). Regulatory reporting (automated generation of compliance reports for auditors and regulators)." },
    Application:    { num: "04", desc: "AI agents (task-specific autonomous agents). Coding tools (private code generation and review). RPA integration (robotic process automation enhanced by AI). Digital asset operations (smart contract auditing, compliance, fraud detection). Agentic payments infrastructure (private AI for regulated financial transactions)." },
    Operations:     { num: "03", desc: "AIOps engine (alert correlation, root cause analysis). Observability integration (Splunk, ServiceNow, AppDynamics, Grafana). Auto-remediation (codified runbooks, automated execution). Human-in-the-loop workflows (approval thresholds, escalation paths, audit trails)." },
    Intelligence:   { num: "02", desc: "LLM inference engine (optimized for latency and throughput). Multi-model orchestration (route to the right model per task). RAG pipelines (retrieval-augmented generation from your private data). Fine-tuning infrastructure (customize models on your data, in your environment). Prompt management (version control, A/B testing, guardrails)." },
    Infrastructure: { num: "01", desc: "GPU compute (NVIDIA A100/H100 clusters). Container orchestration (Kubernetes). Secure networking (private VPC, network isolation, encrypted inter-node communication). API gateway (internal endpoints, authentication, rate limiting, audit logging)." },
  };
  const order = ["Governance", "Application", "Operations", "Intelligence", "Infrastructure"];

  return (
    <main data-screen-label="AORBIT Architecture">
      {/* 1. Architecture hero */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">AORBIT™ · ARCHITECTURE</div>
          <h1>The art of architecture.</h1>
          <p className="lead">
            Bloomberg Terminal didn&rsquo;t win because of superior technology. It won because of the architecture &mdash; how data flows, how systems connect, how workflows integrate. The same principle applies to enterprise AI. The winner isn&rsquo;t who has the best model. It&rsquo;s who has the best architecture underneath.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={openBrief}>
              Get the architecture brief <IconDownload size={14} />
            </button>
            <button className="btn btn-ghost" onClick={() => navigate("/talk-to-an-architect?interest=aorbit")}>
              Talk to an architect <IconArrowRight size={14} className="arrow" />
            </button>
          </div>
        </div>
      </section>

      {/* 2. The 5-layer architecture — interactive */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">A/REF</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>5 layers</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>Designed to evolve &mdash; not break &mdash; as AI capabilities change.</h2>
          </div>

          <div className="arch-interactive">
            <div className="arch-interactive-stack">
              {order.map((name) => (
                <button
                  key={name}
                  className={`arch-layer ${active === name ? "is-active" : ""}`}
                  onClick={() => setActive(name)}
                  type="button"
                >
                  <span className="arch-layer-num">{layerData[name].num}</span>
                  <span className="arch-layer-name">{name}</span>
                  <span className="arch-layer-hint">{active === name ? "Selected" : "Tap"}</span>
                </button>
              ))}
            </div>
            <div className="arch-interactive-detail">
              <div className="eyebrow">{layerData[active].num} · {active}</div>
              <p style={{ color: "var(--text-dim)", marginTop: 20, lineHeight: 1.7, fontSize: 16 }}>
                {layerData[active].desc}
              </p>
            </div>
          </div>

          <p style={{ fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.06em", color: "var(--text-mute)", textTransform: "uppercase", marginTop: 48 }}>
            // Read top-to-bottom = outside-in (governance wraps everything). Build bottom-to-top = infrastructure first.
          </p>

          <div style={{ marginTop: 48 }}>
            <ArchitectureTable highlight={active} />
          </div>
        </div>
      </section>

      {/* 3. Design principles */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">A/PRIN</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Design principles</div>
            </div>
            <h2>Why this architecture survives what others don&rsquo;t.</h2>
          </div>
          <div className="grid-2">
            <PrincipleCard num="P/01" title="Modular by design."
              body="Each layer operates independently. Update the Intelligence layer without touching Infrastructure. Add new Application capabilities without rewriting Operations. The layers communicate through defined interfaces, not tangled dependencies." />
            <PrincipleCard num="P/02" title="Compliance at every level."
              body="Governance isn&rsquo;t a layer you bolt on at the end. It wraps the entire architecture. Every layer has built-in audit logging, access controls, and policy enforcement. Compliance is the architecture, not a checklist." />
            <PrincipleCard num="P/03" title="New capabilities plug in. Nothing breaks."
              body="A new LLM releases tomorrow. It plugs into the Intelligence layer. A new compliance framework activates next quarter. It plugs into Governance. Your team adopts a new observability tool. It plugs into Operations. The architecture absorbs change because it was designed to." />
            <PrincipleCard num="P/04" title="Your existing systems stay."
              body="AORBIT connects to your ERPs, CRMs, databases, observability stacks, identity providers, and data lakes. It doesn&rsquo;t replace them. It makes them intelligent. Your investment in existing infrastructure is preserved and enhanced." />
          </div>
        </div>
      </section>

      {/* 4. Integration architecture */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">A/INT</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Integration architecture</div>
            </div>
            <h2>Connects to what you already run.</h2>
          </div>
          <IntegrationHub />
        </div>
      </section>

      {/* 5. Closing CTA */}
      <section className="section">
        <div className="container">
          <div className="section-head center">
            <h2 style={{ maxWidth: "22ch" }}>See how AORBIT maps to your stack.</h2>
          </div>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={openBrief}>
              Get the architecture brief <IconDownload size={14} />
            </button>
            <button className="btn btn-ghost" onClick={() => navigate("/talk-to-an-architect?interest=aorbit")}>
              Talk to an architect <IconArrowRight size={14} className="arrow" />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

/* =============================================================================
   Shared building blocks
   ============================================================================= */

function CapabilityCard({ tag, Icon, title, body, trust }) {
  return (
    <div className={`card cap-card ${trust ? "is-trust" : ""}`}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div className="eyebrow">{tag}</div>
        {trust && <span className="trust-badge">// HUMAN-IN-THE-LOOP</span>}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 16, marginTop: 24 }}>
        {Icon && <Icon size={28} color="var(--teal)" />}
        <h3 style={{ fontSize: 24, letterSpacing: "-0.01em" }}>{title}</h3>
      </div>
      <p style={{ color: "var(--text-dim)", marginTop: 16, lineHeight: 1.7 }} dangerouslySetInnerHTML={{ __html: body }} />
    </div>
  );
}

function StepFlow({ steps }) {
  return (
    <div className="step-flow">
      {steps.map((s, i) => (
        <React.Fragment key={s.n}>
          <div className="step-flow-item">
            <div className="step-flow-num">{s.n}</div>
            <div className="step-flow-title">{s.title}</div>
            <div className="step-flow-body">{s.body}</div>
          </div>
          {i < steps.length - 1 && <div className="step-flow-arrow" aria-hidden>→</div>}
        </React.Fragment>
      ))}
    </div>
  );
}

function DeploymentTable() {
  const rows = [
    { model: "On-premise",    desc: "Full deployment on your hardware, in your data center. Air-gapped option available.",                              best: "Banks, government, defense. Maximum control." },
    { model: "Private cloud", desc: "Deployed in your private cloud tenant. Your network, your encryption keys, your region.",                          best: "Enterprises with established private cloud. Scalable." },
    { model: "Hybrid",        desc: "On-premise core with private cloud burst capacity. Zero external egress. All traffic stays internal.",            best: "Variable workloads. Need elasticity without data risk." },
  ];
  return (
    <div className="deploy-table">
      <div className="deploy-table-head">
        <div>// MODEL</div>
        <div>// DESCRIPTION</div>
        <div>// BEST FOR</div>
      </div>
      {rows.map((r) => (
        <div key={r.model} className="deploy-table-row">
          <div className="deploy-cell model">{r.model}</div>
          <div className="deploy-cell">{r.desc}</div>
          <div className="deploy-cell best">{r.best}</div>
        </div>
      ))}
    </div>
  );
}

function ComplianceMatrix({ rows }) {
  return (
    <div className="compliance-matrix">
      <div className="compliance-head">
        <div>// FRAMEWORK</div>
        <div>// HOW AORBIT™ ADDRESSES IT</div>
      </div>
      {rows.map((r) => (
        <div key={r.fw} className="compliance-row">
          <div className="compliance-cell fw">
            <IconCheck size={14} color="var(--teal)" />
            <span>{r.fw}</span>
          </div>
          <div className="compliance-cell desc">{r.desc}</div>
        </div>
      ))}
    </div>
  );
}

function PrincipleCard({ num, title, body }) {
  return (
    <div className="principle-card">
      <div className="eyebrow">{num}</div>
      <h3 style={{ marginTop: 20, fontSize: 28, letterSpacing: "-0.02em" }} dangerouslySetInnerHTML={{ __html: title }} />
      <p style={{ color: "var(--text-dim)", marginTop: 16, lineHeight: 1.7 }} dangerouslySetInnerHTML={{ __html: body }} />
    </div>
  );
}

function IntegrationHub() {
  const nodes = [
    { label: "ERP",                Icon: IconBox },
    { label: "CRM",                Icon: IconUsers },
    { label: "Databases",          Icon: IconLayers },
    { label: "Observability",      Icon: IconGraph },
    { label: "Identity (AD/Okta)", Icon: IconLock },
    { label: "Data lakes",         Icon: IconCloud },
    { label: "CI / CD",            Icon: IconTerminal },
    { label: "Ticketing",          Icon: IconFlow },
  ];
  return (
    <div className="integration-hub">
      <div className="integration-center">
        <div className="eyebrow">AORBIT™</div>
        <div className="integration-center-title">Hub</div>
      </div>
      <div className="integration-ring">
        {nodes.map((n) => (
          <div key={n.label} className="integration-node">
            <n.Icon size={18} color="var(--teal)" />
            <span>{n.label}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* =============================================================================
   Layer-page router shim — preserves the old AorbitLayerPage(layer=…) API
   that app.jsx is wired to call.
   ============================================================================= */

function AorbitLayerPage({ layer, navigate }) {
  if (layer === "foundation")   return <FoundationPage navigate={navigate} />;
  if (layer === "intelligence") return <IntelligencePage navigate={navigate} />;
  if (layer === "frontier")     return <FrontierPage navigate={navigate} />;
  return null;
}

const AorbitPages = { AorbitOverview, AorbitLayerPage, AorbitArchitecturePage, FoundationPage, IntelligencePage, FrontierPage };
Object.assign(window, AorbitPages);

// Shared building blocks — exposed for use in Chunk-4 pages (page-stubs.jsx, etc.).
Object.assign(window, {
  CapabilityCard, StepFlow, ComplianceMatrix, PrincipleCard,
  IntegrationHub, ArchitectureTable, DeploymentTable, LogoRow,
});