/* global React, IconArrowRight, IconDownload, IconBank, IconExchange, IconGov, IconShield, IconLock, IconUsers, IconBook, IconFlask, IconAtom, IconCheck, IconChip, IconFlow, IconGraph, IconLayers, IconBox, IconCloud, IconTerminal, IconExternal,
   DataFlowDiagram, CapabilityCard, ComplianceMatrix, StepFlow, LogoRow, PrincipleCard,
   useRouteQuery */

/* Imperative shortcut used by every gated CTA on the site. */
const openGated = (id, source) => window.openGatedDownload && window.openGatedDownload(id, { source });

/* Map of ?interest= values to the architect form's interest area labels. */
const INTEREST_MAP = {
  aorbit: "AORBIT™ (Private AI)",
  aiops: "AIOps",
  "digital-assets": "Digital Assets",
  augmentation: "Resource Augmentation",
  training: "Training",
  research: "Research",
  security: "Security",
};
/* Map of ?layer= values to the demo form's layer dropdown labels. */
const LAYER_MAP = {
  foundation: "01 Foundation — Private AI",
  intelligence: "02 Intelligence — AIOps",
  frontier: "03 Frontier — Digital Assets",
  all: "All of them",
};

/* Cal.com booking URL (set per the Pre-Launch Decision Memo, Item 5).
   Empty string = launch state — thank-you page shows the 1-business-day
   message. When sales ops sets up the calendar, paste the URL here and
   the "Book a time now" button appears with no other code changes. */
const CAL_BOOKING_URL = /*EDITMODE-BEGIN-CAL*/""/*EDITMODE-END-CAL*/;

/* Load the progressive-profile lead row, if any. */
function loadLeadProfile() {
  try { return JSON.parse(localStorage.getItem("doblier:lead") || "{}"); }
  catch { return {}; }
}

/* =============================================================================
   Reusable layout primitives
   ============================================================================= */

function PageStub({ eyebrow, title, lead, sections, ctaPrimary, ctaSecondary, navigate, label, meta }) {
  return (
    <main data-screen-label={label}>
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">{eyebrow}</div>
          <h1>{title}</h1>
          <p className="lead">{lead}</p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            {ctaPrimary && (
              <button className="btn btn-primary" onClick={() => navigate(ctaPrimary.route || "/talk-to-an-architect")}>
                {ctaPrimary.label} {ctaPrimary.download ? <IconDownload size={14} /> : <IconArrowRight size={14} className="arrow" />}
              </button>
            )}
            {ctaSecondary && (
              <button className="btn btn-ghost" onClick={() => ctaSecondary.route && navigate(ctaSecondary.route)}>
                {ctaSecondary.label} <IconArrowRight size={14} className="arrow" />
              </button>
            )}
          </div>
          {meta && (
            <div style={{ display: "flex", gap: 32, marginTop: 64, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-mute)", flexWrap: "wrap" }}>
              {meta.map((m, i) => (
                <React.Fragment key={i}>
                  {i > 0 && <div>·</div>}
                  <div>{m}</div>
                </React.Fragment>
              ))}
            </div>
          )}
        </div>
      </section>

      {sections.map((s, i) => (
        <section key={i} className={`section ${s.bg === "light" ? "light" : ""}`} style={s.bg === "elev" ? { background: "#070707" } : {}}>
          <div className="container">
            {(s.num || s.eyebrow || s.h2) && (
              <div className="section-head">
                <div>
                  {s.num && <div className="section-num">{s.num}</div>}
                  {s.eyebrow && <div className="eyebrow" style={{ marginTop: 8 }}>{s.eyebrow}</div>}
                </div>
                {s.h2 && <h2 style={{ textWrap: "balance" }}>{s.h2}</h2>}
              </div>
            )}
            {s.body && <p className="lead" style={{ marginBottom: 48 }}>{s.body}</p>}
            {s.render && s.render()}
            {s.pull && <div className="wp-pull">{s.pull}</div>}
            {s.cta && (
              <div style={{ marginTop: 48, textAlign: s.cta.align || "left", display: "flex", gap: 12, flexWrap: "wrap", justifyContent: s.cta.align === "center" ? "center" : "flex-start" }}>
                <button className="btn btn-primary" onClick={() => navigate(s.cta.route)}>
                  {s.cta.label} <IconArrowRight size={14} className="arrow" />
                </button>
              </div>
            )}
          </div>
        </section>
      ))}
    </main>
  );
}

/* ---- Generic closing CTA block ---- */
function StubCTA({ eyebrow, headline, primary, secondary, navigate, primaryDownload }) {
  const handle = (cta) => {
    if (!cta) return;
    if (cta.assetId) openGated(cta.assetId, cta.source);
    else if (cta.route) navigate(cta.route);
  };
  const isPrimaryDl = primaryDownload || (primary && primary.assetId);
  const isSecondaryDl = secondary && secondary.assetId;
  return (
    <section className="section" style={{ background: "#070707" }}>
      <div className="container" style={{ textAlign: "center" }}>
        <div className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>{eyebrow}</div>
        <h2 style={{ marginTop: 16, fontSize: "clamp(40px, 5vw, 64px)", maxWidth: "22ch", margin: "16px auto 0" }}>{headline}</h2>
        <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
          <button className="btn btn-primary" onClick={() => handle(primary)}>
            {primary.label} {isPrimaryDl ? <IconDownload size={14} /> : <IconArrowRight size={14} className="arrow" />}
          </button>
          {secondary && (
            <button className="btn btn-ghost" onClick={() => handle(secondary)}>
              {secondary.label} {isSecondaryDl ? <IconDownload size={14} /> : <IconArrowRight size={14} className="arrow" />}
            </button>
          )}
        </div>
      </div>
    </section>
  );
}

/* =============================================================================
   WHY DOBLIER™ · Data Sovereignty
   ============================================================================= */

const DataSovereignty = ({ navigate }) => (
  <main data-screen-label="Data Sovereignty">
    {/* Hero */}
    <section className="page-hero">
      <div className="container">
        <div className="eyebrow">Why Doblier · Data Sovereignty</div>
        <h1>Your data never leaves your infrastructure. Period.</h1>
        <p className="lead">
          Not a policy. Not a promise. An architecture. No external API calls means no data can leave. Compliance is a byproduct of the design, not a feature you enable.
        </p>
        <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
          <button className="btn btn-primary" onClick={() => openGated("data-sovereignty-brief")}>Get the data sovereignty brief <IconDownload size={14} /></button>
          <button className="btn btn-ghost" onClick={() => navigate("/talk-to-an-architect")}>Talk to an architect <IconArrowRight size={14} className="arrow" /></button>
        </div>
      </div>
    </section>

    {/* The problem with AI APIs */}
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">DS/01</div>
            <div className="eyebrow" style={{ marginTop: 8 }}>The problem</div>
          </div>
          <h2 style={{ maxWidth: "22ch" }}>Every AI API call is a compliance event.</h2>
        </div>
        <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, maxWidth: 820 }}>
          When your team uses an external AI service, your data travels. It leaves your network, crosses jurisdictions, sits on someone else's infrastructure, gets processed by someone else's models. For a technology company, that's a calculated risk. For a bank, it's a regulatory violation. For a government, it's a national security concern.
        </p>
        <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, marginTop: 24, maxWidth: 820 }}>
          The industry pretends this is a solvable problem with better contracts or data processing agreements. It isn't. The only solution is architectural: the AI runs where the data lives.
        </p>
      </div>
    </section>

    {/* Data flow visual */}
    <section className="section" style={{ background: "#070707" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">DS/02</div>
            <div className="eyebrow" style={{ marginTop: 8 }}>Two architectures</div>
          </div>
          <h2 style={{ maxWidth: "26ch" }}>Same workload. Two perimeters. Pick the one your auditor will sign.</h2>
        </div>
        <div className="flow-stage"><DataFlowDiagram metaphor="perimeter" /></div>
      </div>
    </section>

    {/* How AORBIT™ solves it */}
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">DS/03</div>
            <div className="eyebrow" style={{ marginTop: 8 }}>How AORBIT solves it</div>
          </div>
          <h2 style={{ maxWidth: "22ch" }}>Zero exfiltration by architecture.</h2>
        </div>
        <div className="track-record">
          {[
            { t: "On-premise LLMs on NVIDIA GPUs", b: "Models run on your hardware, in your data center." },
            { t: "Secure internal API gateway",   b: "All AI endpoints are internal. No external traffic." },
            { t: "Network isolation",             b: "The AI infrastructure has no outbound connectivity to the public internet." },
            { t: "Encrypted storage",             b: "All data at rest encrypted with your keys." },
            { t: "Full audit trails",             b: "Every AI interaction logged, traceable, reportable to regulators." },
          ].map((x, i) => (
            <div key={i} className="track-record-item">
              <span className="check"><IconCheck size={18} /></span>
              <div>
                <p style={{ fontWeight: 500 }}>{x.t}</p>
                <p style={{ color: "var(--text-dim)", fontSize: 15, marginTop: 4 }}>{x.b}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Compliance matrix */}
    <section className="section" style={{ background: "#070707" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">DS/04</div>
            <div className="eyebrow" style={{ marginTop: 8 }}>Regulatory mapping</div>
          </div>
          <h2 style={{ maxWidth: "22ch" }}>How AORBIT maps to the frameworks you answer to.</h2>
        </div>
        <ComplianceMatrix rows={[
          { fw: "SAMA (Saudi Arabia)",          desc: "Data localization requirements fully satisfied by on-premise deployment within Saudi data centers. AI processing stays within SAMA's jurisdictional boundaries." },
          { fw: "GDPR (EU)",                    desc: "Data residency requirements met by regional deployment. No cross-border data transfer for AI processing. Data subject rights supported by audit trails." },
          { fw: "PCI DSS",                      desc: "Cardholder data never exposed to external AI services. Network segmentation and encryption meet PCI DSS requirements natively." },
          { fw: "PDPL (Saudi Arabia)",          desc: "Personal Data Protection Law compliance through on-premise processing. No third-party data sharing for AI operations." },
          { fw: "National cybersecurity",       desc: "Air-gapped deployment options for sovereign requirements. No dependency on foreign cloud providers." },
        ]} />
      </div>
    </section>

    <StubCTA
      eyebrow="See the data flow"
      headline="See the data flow for yourself."
      primary={{ label: "Get the data sovereignty brief", assetId: "data-sovereignty-brief" }}
      secondary={{ label: "Talk to an architect", route: "/talk-to-an-architect" }}
      navigate={navigate}
    />
  </main>
);

/* =============================================================================
   WHY DOBLIER™ · Security & Trust
   ============================================================================= */

const Security = ({ navigate }) => {
  const domains = [
    {
      n: "SEC/01", Icon: IconShield, title: "Infrastructure security",
      body: "Network isolation between AI workloads and general infrastructure. Encrypted data at rest (AES-256) and in transit (TLS 1.3). Private networking with no public internet exposure. Physical security controls for on-premise GPU deployments.",
    },
    {
      n: "SEC/02", Icon: IconLock, title: "Application security",
      body: "Secure internal API gateway with authentication, authorization, and rate limiting. Role-based access controls (RBAC) for all AI operations. Multi-factor authentication. Input validation and prompt injection prevention. Output filtering and content safety controls.",
    },
    {
      n: "SEC/03", Icon: IconTerminal, title: "Operational security",
      body: "Full audit trails for every AI interaction — who queried, what was queried, what was returned. Continuous monitoring of AI system health and performance. Incident response procedures specific to AI operations. Automated alerting for anomalous AI behavior.",
    },
    {
      n: "SEC/04", Icon: IconChip, title: "AI-specific security",
      body: "Model access controls — restrict which teams can use which models. Prompt injection prevention at the gateway level. Output filtering for sensitive data leakage. Model versioning and rollback capabilities. No model training on customer data without explicit authorization.",
    },
  ];

  const frameworks = ["SOC 2 Type II", "ISO 27001", "GDPR", "PCI DSS", "SAMA Cybersecurity Framework", "PDPL"];

  return (
    <main data-screen-label="Security & Trust">
      {/* Hero */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Why Doblier · Security & Trust</div>
          <h1>Security is architecture, not a feature.</h1>
          <p className="lead">
            You can't bolt security onto an AI system after the fact. It has to be designed into every layer, every interface, every data flow. That's how AORBIT™ was built.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect?interest=security")}>Contact our security team <IconArrowRight size={14} className="arrow" /></button>
            <button className="btn btn-ghost" onClick={() => openGated("data-sovereignty-brief")}>Download the data sovereignty brief <IconDownload size={14} /></button>
          </div>
        </div>
      </section>

      {/* Four domains */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">SEC/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Four security domains</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Security designed into the architecture, not bolted on.</h2>
          </div>

          <div className="grid-2">
            {domains.map((d, i) => (
              <div key={i} className="domain-card">
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div className="icon-wrap"><d.Icon size={22} /></div>
                  <div className="eyebrow">{d.n}</div>
                </div>
                <h3>{d.title}</h3>
                <p>{d.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Compliance certifications */}
      <section className="section" style={{ background: "#070707" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">SEC/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Compliance frameworks</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Designed to support compliance with the frameworks our customers answer to.</h2>
          </div>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, maxWidth: 720 }}>
            Specific certifications held by Doblier are documented in our trust center and available on signed request.
          </p>
          <div className="framework-row">
            {frameworks.map((f, i) => (
              <span key={i} className="framework-pill">
                <span className="dot"></span>
                {f}
              </span>
            ))}
          </div>
        </div>
      </section>

      {/* Trust center */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">SEC/03</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Trust center</div>
            </div>
            <h2 style={{ maxWidth: "26ch" }}>Detailed security documentation, compliance reports, and DPAs.</h2>
          </div>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, maxWidth: 720 }}>
            For procurement and security due diligence teams: every document your security review will ask for is available under NDA from the trust center.
          </p>
          <div style={{ marginTop: 32 }}>
            <button className="btn btn-ghost" onClick={() => navigate("/why-doblier/security")}>View our security practices <IconArrowRight size={14} className="arrow" /></button>
          </div>
        </div>
      </section>

      <StubCTA
        eyebrow="Security documentation"
        headline="Request our security documentation."
        primary={{ label: "Contact our security team", route: "/talk-to-an-architect?interest=security" }}
        secondary={{ label: "Download the data sovereignty brief", assetId: "data-sovereignty-brief" }}
        navigate={navigate}
      />
    </main>
  );
};

/* =============================================================================
   INDUSTRIES · Banking & Finance
   ============================================================================= */

const Banking = ({ navigate }) => {
  const trackRecord = [
    "Architected comprehensive Agentic AI platform including private LLMs for a major Saudi bank.",
    "Delivered production private LLM platform on NVIDIA GPU infrastructure for banking-scale operations.",
    "Engineered fully automated CI/CD pipelines for core banking deployments across Saudi Arabia, Europe, and Asia-Pacific.",
    "Cloud automation, Kubernetes modernization, and secure platform deployments for 10+ banking clients.",
    "Automated digital banking pipelines with European regulatory compliance.",
    "Conceptualized production-grade intelligent observability and auto-remediation framework (AIOps).",
  ];

  return (
    <main data-screen-label="Banking & Finance">
      {/* Hero */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Industries · Banking & Finance</div>
          <h1>AI infrastructure built for banking-scale operations.</h1>
          <p className="lead">
            Private. Compliant. In production. Doblier has deployed AI inside 20+ banks across four continents. Not demos. Not POCs. Production systems running today.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => openGated("banking-architecture-brief")}>Get a banking architecture brief <IconDownload size={14} /></button>
            <button className="btn btn-ghost" onClick={() => navigate("/talk-to-an-architect?source=banking")}>Talk to an architect <IconArrowRight size={14} className="arrow" /></button>
          </div>
          <div style={{ display: "flex", gap: 32, marginTop: 64, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-mute)", flexWrap: "wrap" }}>
            <div>20+ banking engagements</div><div>·</div><div>4 continents</div><div>·</div><div>0 exfiltration events</div>
          </div>
        </div>
      </section>

      {/* The challenge */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">BNK/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>The banking AI challenge</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>Your board wants AI. Your regulators want control.</h2>
          </div>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, maxWidth: 820 }}>
            Banking sits at the intersection of maximum AI opportunity and maximum regulatory constraint. You see the potential: intelligent operations, automated compliance, fraud detection, customer intelligence. But every AI vendor asks you to send data outside your infrastructure. SAMA says no. GDPR says no. PCI DSS says no. Your CISO says no.
          </p>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, marginTop: 24, maxWidth: 820 }}>
            The challenge was never whether to use AI. It was how to build AI infrastructure that satisfies every stakeholder — the board that wants innovation, the regulator that wants control, and the CISO that wants zero risk.
          </p>
        </div>
      </section>

      {/* How AORBIT™ solves it — links into all three layers */}
      <section className="section" style={{ background: "#070707" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">BNK/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>How AORBIT solves it</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Three layers. One architecture. All three already in or near production at banks.</h2>
          </div>

          <div className="grid-3" style={{ marginTop: 16 }}>
            <CapabilityCard
              tag={<><span className="layer-badge">01</span> // FOUNDATION</>}
              Icon={IconLayers}
              title="Private LLMs at banking scale."
              body="On-premise deployment on NVIDIA GPUs inside your data center. Multi-LLM orchestration for different banking workflows. Secure API gateway with banking-grade access controls. Zero external API calls. Full SAMA and GDPR compliance by architecture."
            />
            <CapabilityCard
              tag={<><span className="layer-badge">02</span> // INTELLIGENCE</>}
              Icon={IconFlow}
              title="From 1,000 daily alerts to automated resolution."
              body="Correlate alerts across Splunk, ServiceNow, AppDynamics. AI root cause analysis traces issues across your core banking infrastructure. Automated remediation with human approval for critical systems. Your operations team focuses on strategy, not triage."
            />
            <CapabilityCard
              tag={<><span className="layer-badge">03</span> // FRONTIER</>}
              Icon={IconExchange}
              title="Compliant digital asset operations."
              body="Agentic compliance for PVARA and FATF. Smart contract auditing before deployment. Real-time fraud detection on blockchain transactions. RWA tokenization support. All running on private AI — because Foundation is already inside the bank."
            />
          </div>

          <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <button className="btn btn-ghost" onClick={() => navigate("/aorbit/foundation")}>Explore Foundation <IconArrowRight size={14} className="arrow" /></button>
            <button className="btn btn-ghost" onClick={() => navigate("/aorbit/intelligence")}>Explore Intelligence <IconArrowRight size={14} className="arrow" /></button>
            <button className="btn btn-ghost" onClick={() => navigate("/aorbit/frontier")}>Explore Frontier <IconArrowRight size={14} className="arrow" /></button>
          </div>
        </div>
      </section>

      {/* Track record — 6 anchor bullets */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">BNK/03</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Track record</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>Proven at banking scale.</h2>
          </div>
          <div className="track-record">
            {trackRecord.map((t, i) => (
              <div key={i} className="track-record-item">
                <span className="check"><IconCheck size={18} /></span>
                <p>{t}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 32 }}>
            <button className="btn btn-ghost" onClick={() => navigate("/why-doblier/case-studies")}>See the case studies <IconArrowRight size={14} className="arrow" /></button>
          </div>
        </div>
      </section>

      <StubCTA
        eyebrow="Banking proof"
        headline="See how we've done it for 20+ banks."
        primary={{ label: "Get a banking architecture brief", assetId: "banking-architecture-brief" }}
        secondary={{ label: "Talk to an architect", route: "/talk-to-an-architect?source=banking" }}
        navigate={navigate}
      />
    </main>
  );
};

/* =============================================================================
   INDUSTRIES · Digital Assets & Agentic Finance
   ============================================================================= */

const DigitalAssets = ({ navigate }) => {
  const useCases = [
    { tag: "DA/01", Icon: IconShield,  title: "Autonomous compliance monitoring.",         body: "AI agents that monitor transactions against PVARA, FATF, SAMA, and MiCA in real-time. Not periodic batch reviews — continuous, intelligent monitoring that adapts as regulations evolve." },
    { tag: "DA/02", Icon: IconLock,    title: "AI-powered smart contract auditing.",       body: "Analyze smart contract code before deployment. Identify vulnerabilities, logic errors, and compliance gaps. Catch issues before they're immutable on-chain." },
    { tag: "DA/03", Icon: IconGraph,   title: "Real-time blockchain fraud detection.",     body: "Pattern recognition across multiple chains. Anomaly detection. Sanctions screening. Transaction risk scoring. All processing stays inside your infrastructure." },
    { tag: "DA/04", Icon: IconExchange, title: "Agentic treasury management.",             body: "AI agents managing liquidity, executing treasury operations, and optimizing asset allocation — with human approval at every critical decision point. Private AI means your treasury data never leaves your environment." },
  ];

  return (
    <main data-screen-label="Digital Assets">
      {/* Hero */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Industries · Digital Assets & Agentic Finance</div>
          <h1>What the market builds in public, you run in private.</h1>
          <p className="lead">
            World Liberty Financial ships AgentPay. Stripe builds agentic payment rails. Circle expands USDC infrastructure. The agentic economy is here. For regulated institutions, the question isn't whether to participate — it'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/frontier")}>Explore AORBIT™ Frontier <IconArrowRight size={14} className="arrow" /></button>
          </div>
        </div>
      </section>

      {/* Market context */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">DA/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Market context</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>The infrastructure race for agentic finance.</h2>
          </div>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, maxWidth: 820 }}>
            The stablecoin market is approaching $320 billion, with projections reaching $3 trillion by 2030. AI agents are beginning to hold, transfer, and manage digital assets autonomously. Payment processors are racing to build the rails.
          </p>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, marginTop: 24, maxWidth: 820 }}>
            But for every public innovation, there's a regulated institution that needs the same capability running privately. Inside their firewall. Under their compliance framework. With full audit trails.
          </p>
          <div className="wp-pull">That's the gap. Doblier fills it.</div>

          <div className="stat-row" style={{ marginTop: 32 }}>
            <div><div className="num">$320B</div><div className="l">Stablecoin market today</div></div>
            <div><div className="num">$3T</div><div className="l">Projected by 2030</div></div>
            <div><div className="num">PVARA</div><div className="l">FATF · SAMA · MiCA</div></div>
            <div><div className="num">0</div><div className="l">External API calls required</div></div>
          </div>
        </div>
      </section>

      {/* Use cases */}
      <section className="section" style={{ background: "#070707" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">DA/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Use cases</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Four agentic workloads. All running privately.</h2>
          </div>
          <div className="grid-2">
            {useCases.map((u, i) => (
              <CapabilityCard key={i} tag={u.tag} Icon={u.Icon} title={u.title} body={u.body} />
            ))}
          </div>
        </div>
      </section>

      {/* Why private */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">DA/03</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Why private infrastructure</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Agentic finance on public infrastructure isn't a preference issue. It's a regulatory violation.</h2>
          </div>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, maxWidth: 820 }}>
            Every agentic financial operation involves sensitive data: counterparty details, transaction amounts, compliance records, risk assessments. Running these operations on public AI infrastructure isn't just a preference issue — it's a regulatory violation for most financial institutions.
          </p>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, marginTop: 24, maxWidth: 820 }}>
            AORBIT Frontier runs on Foundation. Private AI infrastructure already deployed inside the bank. The agents are intelligent because the architecture is private.
          </p>
          <div style={{ marginTop: 32 }}>
            <button className="btn btn-ghost" onClick={() => navigate("/aorbit/frontier")}>Explore AORBIT Frontier <IconArrowRight size={14} className="arrow" /></button>
          </div>
        </div>
      </section>

      <StubCTA
        eyebrow="Agentic finance"
        headline="Bring compliant AI to your digital asset operations."
        primary={{ label: "Schedule an assessment", route: "/contact/demo?layer=frontier" }}
        secondary={{ label: "Explore AORBIT Frontier", route: "/aorbit/frontier" }}
        navigate={navigate}
      />
    </main>
  );
};

/* =============================================================================
   INDUSTRIES · Government & Public Sector
   ============================================================================= */

const Government = ({ navigate }) => {
  const caps = [
    { tag: "G/01", Icon: IconLock,   title: "Air-gapped deployment.",       body: "Fully disconnected from the internet. No inbound or outbound connectivity. Ideal for classified operations and national security applications. All AI models and data remain in a completely isolated environment." },
    { tag: "G/02", Icon: IconCloud,  title: "Sovereign cloud integration.", body: "Deploy in national data centers or sovereign cloud environments. Compatible with government-mandated cloud providers. No dependency on commercial hyperscalers." },
    { tag: "G/03", Icon: IconBook,   title: "Bilingual AI operations.",     body: "Full support for English and Arabic language operations. AI models that process Arabic text natively. Interface and reporting available in both languages. Aligned with the operational reality of MENA government agencies." },
    { tag: "G/04", Icon: IconShield, title: "National framework alignment.", body: "Designed to align with national cybersecurity frameworks, national AI strategies, and government data classification requirements. Configurable compliance engines adapt to jurisdiction-specific regulations." },
  ];

  return (
    <main data-screen-label="Government">
      {/* Hero */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Industries · Government & Public Sector</div>
          <h1>Sovereign AI. Your infrastructure. Your rules.</h1>
          <p className="lead">
            Government agencies need AI that operates within national boundaries, under national control, with zero dependency on foreign cloud providers. AORBIT™ deploys sovereign AI infrastructure that meets the most stringent requirements.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect?source=government")}>Contact government sales <IconArrowRight size={14} className="arrow" /></button>
            <button className="btn btn-ghost" onClick={() => openGated("data-sovereignty-brief", "government")}>Request a sovereign AI brief <IconDownload size={14} /></button>
          </div>
        </div>
      </section>

      {/* Why sovereign AI */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">G/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Why sovereign AI</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>National data requires national infrastructure.</h2>
          </div>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, maxWidth: 820 }}>
            Citizen data. National security intelligence. Government operations. Critical infrastructure monitoring. None of this belongs on foreign servers or in foreign AI models. Sovereign AI means the models, the data, and the decisions all stay within your national infrastructure.
          </p>
        </div>
      </section>

      {/* Capabilities */}
      <section className="section" style={{ background: "#070707" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">G/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Capabilities for government</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Four capabilities, configurable to each jurisdiction.</h2>
          </div>
          <div className="grid-2">
            {caps.map((c, i) => (
              <CapabilityCard key={i} tag={c.tag} Icon={c.Icon} title={c.title} body={c.body} />
            ))}
          </div>
        </div>
      </section>

      {/* Vision 2030 alignment with bilingual lockup */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">G/03</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Vision 2030 alignment</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Accelerating national digital transformation.</h2>
          </div>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, maxWidth: 820 }}>
            Saudi Vision 2030 calls for technology-driven government services, a diversified economy, and world-class digital infrastructure. AORBIT provides the private AI architecture that supports these goals — built locally, operating locally, advancing national capability.
          </p>

          <div className="bilingual-lockup" role="img" aria-label="Doblier bilingual lockup">
            <div className="english">Doblier</div>
            <div className="divider"></div>
            <div className="arabic" lang="ar">دوبلير</div>
            <div className="meta">// EN · AR<br/>// Vision 2030</div>
          </div>

          <div style={{ marginTop: 32 }}>
            <button className="btn btn-ghost" onClick={() => navigate("/aorbit/foundation")}>See AORBIT Foundation <IconArrowRight size={14} className="arrow" /></button>
          </div>
        </div>
      </section>

      <StubCTA
        eyebrow="Sovereign deployment"
        headline="Deploy sovereign AI for your agency."
        primary={{ label: "Contact government sales", route: "/talk-to-an-architect?source=government" }}
        secondary={{ label: "Request a sovereign AI brief", assetId: "data-sovereignty-brief", source: "government" }}
        navigate={navigate}
      />
    </main>
  );
};

/* =============================================================================
   SERVICES · Resource Augmentation
   ============================================================================= */

const Augmentation = ({ navigate }) => {
  const providers = [
    { tag: "RA/01", Icon: IconChip,     title: "AI / ML engineers",            body: "LLM deployment and fine-tuning. RAG pipeline engineering. AI inference optimization. Model evaluation and selection. Production ML operations. Practitioners who build the systems described in AORBIT™'s architecture." },
    { tag: "RA/02", Icon: IconCloud,    title: "Cloud architects",             body: "AWS, Azure, GCP, and private cloud. Kubernetes engineering. Infrastructure-as-code. Network architecture for private AI deployments. Multi-cloud and hybrid strategies." },
    { tag: "RA/03", Icon: IconTerminal, title: "DevOps / SRE specialists",     body: "CI/CD pipeline engineering. GitOps workflows. Observability stack implementation. Incident management and SRE practices. Production reliability engineering for AI workloads." },
    { tag: "RA/04", Icon: IconShield,   title: "Compliance-aware developers",  body: "Engineers who build with compliance in mind from the first line of code. Audit-trail-ready. Regulatory-framework-aware. The kind of developers who understand that \u201cit works\u201d means nothing if it doesn't also mean \u201cit's compliant.\u201d" },
  ];

  const models = [
    { name: "Team augmentation", how: "Embed Doblier specialists directly into your existing teams. They work within your processes, tools, and culture.", best: "Scaling specific expertise. Filling gaps. Time-sensitive projects." },
    { name: "Dedicated squads",   how: "Full project ownership. A Doblier team takes responsibility for a defined scope, from architecture through deployment.", best: "New initiatives. Complex builds. Teams that need full ownership." },
    { name: "Advisory",           how: "Architect-level guidance. Architecture reviews, technology selection, deployment strategy, compliance readiness.",       best: "Strategic decisions. Architecture validation. Regulatory preparation." },
  ];

  return (
    <main data-screen-label="Resource Augmentation">
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Services · Resource Augmentation</div>
          <h1>Specialists who ship.</h1>
          <p className="lead">
            Access AI, Cloud, and DevOps professionals who've delivered at banking scale. Not recruiters sending resumes. Practitioners who understand regulated environments, enterprise architecture, and production deployment.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect?interest=augmentation")}>Discuss your needs <IconArrowRight size={14} className="arrow" /></button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">RA/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>What we provide</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Four practitioner profiles. All with regulated-industry depth.</h2>
          </div>
          <div className="grid-2">
            {providers.map((p, i) => (
              <CapabilityCard key={i} tag={p.tag} Icon={p.Icon} title={p.title} body={p.body} />
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "#070707" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">RA/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Engagement models</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Three engagement models. One operating principle: ship.</h2>
          </div>
          <div className="engagement-table">
            <div className="engagement-head">
              <div className="engagement-cell">// Model</div>
              <div className="engagement-cell">// How it works</div>
              <div className="engagement-cell">// Best for</div>
            </div>
            {models.map((m, i) => (
              <div key={i} className="engagement-row">
                <div className="engagement-cell model">{m.name}</div>
                <div className="engagement-cell">{m.how}</div>
                <div className="engagement-cell">{m.best}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <StubCTA
        eyebrow="Build the team"
        headline="Build your AI team."
        primary={{ label: "Discuss your needs", route: "/talk-to-an-architect?interest=augmentation" }}
        navigate={navigate}
      />
    </main>
  );
};

/* =============================================================================
   SERVICES · Corporate Training
   ============================================================================= */

const Training = ({ navigate }) => {
  const tracks = [
    { tag: "TR/01", Icon: IconAtom,     title: "AI & machine learning",   body: "Large language models: architecture, deployment, fine-tuning. RAG pipeline design and implementation. AI inference optimization for latency and throughput. Multi-model orchestration. Prompt engineering and evaluation. Private AI deployment on NVIDIA GPUs." },
    { tag: "TR/02", Icon: IconBox,      title: "Cloud-native engineering", body: "Kubernetes from fundamentals to production operations. Microservices architecture and service mesh. Container security and image management. Infrastructure-as-code with Terraform and Pulumi. Multi-cloud and private cloud strategies." },
    { tag: "TR/03", Icon: IconTerminal, title: "DevOps & SRE",            body: "CI/CD pipeline engineering for regulated environments. GitOps workflows. Observability stack design (Splunk, Grafana, Prometheus). Incident management and SRE practices. AIOps: transitioning from manual operations to AI-assisted operations." },
  ];

  const formats = [
    { name: "On-site workshops",       desc: "Instructor-led at your facility. Hands-on labs with production-grade environments. 2–5 day programs." },
    { name: "Virtual instructor-led",  desc: "Live online sessions with real-time interaction. Same curriculum as on-site. Flexible scheduling across time zones." },
    { name: "Custom curriculum",       desc: "Programs designed for your specific technology stack, use cases, and team maturity level. We build the curriculum around your architecture." },
    { name: "Hands-on labs",           desc: "Every program includes lab environments that mirror production conditions. Not toy examples — real infrastructure, real data patterns, real deployment scenarios." },
  ];

  return (
    <main data-screen-label="Corporate Training">
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Services · Corporate Training</div>
          <h1>Not bootcamp. Production-grade.</h1>
          <p className="lead">
            Training programs designed by practitioners who build enterprise AI systems. Your team learns from engineers who have deployed private LLMs, automated banking operations, and modernized infrastructure across four continents.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect?interest=training")}>Request curriculum <IconArrowRight size={14} className="arrow" /></button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">TR/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Training tracks</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Three tracks. Designed by people who ship.</h2>
          </div>
          <div className="grid-3">
            {tracks.map((t, i) => (
              <CapabilityCard key={i} tag={t.tag} Icon={t.Icon} title={t.title} body={t.body} />
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "#070707" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">TR/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Delivery formats</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Four formats. One standard: production-grade lab environments.</h2>
          </div>
          <div className="engagement-table" style={{ gridTemplateColumns: "1fr" }}>
            <div className="engagement-head" style={{ gridTemplateColumns: "260px 1fr" }}>
              <div className="engagement-cell">// Format</div>
              <div className="engagement-cell">// Description</div>
            </div>
            {formats.map((f, i) => (
              <div key={i} className="engagement-row" style={{ gridTemplateColumns: "260px 1fr" }}>
                <div className="engagement-cell model">{f.name}</div>
                <div className="engagement-cell">{f.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <StubCTA
        eyebrow="Train the team"
        headline="Train your team on production AI."
        primary={{ label: "Request curriculum", route: "/talk-to-an-architect?interest=training" }}
        navigate={navigate}
      />
    </main>
  );
};

/* =============================================================================
   SERVICES · Applied Research
   ============================================================================= */

const Research = ({ navigate }) => {
  const areas = [
    { tag: "RS/01", Icon: IconLayers, title: "Private LLM deployment.",      body: "How to run frontier-quality AI inside enterprise infrastructure. Model selection, quantization, serving optimization, and multi-model routing. The research that powers AORBIT™'s Foundation layer." },
    { tag: "RS/02", Icon: IconChip,   title: "AI inference optimization.",   body: "Reducing latency. Increasing throughput. Lowering cost per inference. GPU utilization optimization. Batch processing strategies. The difference between a demo that runs and a system that scales." },
    { tag: "RS/03", Icon: IconShield, title: "Compliance-ready financial AI.", body: "Building AI systems that are auditable, explainable, and compliant from the first inference. Regulatory framework mapping. Audit trail design. The intersection of AI capability and regulatory reality." },
    { tag: "RS/04", Icon: IconFlow,   title: "Agentic AI frameworks.",       body: "Multi-agent architectures for enterprise workflows. Agent communication protocols. Task decomposition and delegation. Human-in-the-loop design patterns. The research behind AORBIT's Application layer." },
  ];

  const outputs = [
    "Production-ready frameworks",
    "Optimization benchmarks",
    "Compliance validation reports",
    "Architecture recommendations",
    "Published whitepapers",
  ];

  return (
    <main data-screen-label="Applied Research">
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Services · Applied Research</div>
          <h1>Research that ships.</h1>
          <p className="lead">
            Applied R&D bridging the gap between academic AI and production deployment. Every research initiative at Doblier maps to a production deployment path. Results are measured in system performance, not citations.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect?interest=research")}>Start a research engagement <IconArrowRight size={14} className="arrow" /></button>
            <button className="btn btn-ghost" onClick={() => navigate("/resources/whitepapers")}>Read recent whitepapers <IconArrowRight size={14} className="arrow" /></button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">RS/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Research areas</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Four research areas. All mapped to production.</h2>
          </div>
          <div className="grid-2">
            {areas.map((a, i) => (
              <CapabilityCard key={i} tag={a.tag} Icon={a.Icon} title={a.title} body={a.body} />
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "#070707" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">RS/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Our approach</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Problem-driven. Not paper-driven.</h2>
          </div>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, maxWidth: 820 }}>
            Every research project starts with a production problem. A bank that can't get inference latency below 200ms. A compliance team that needs real-time transaction monitoring. An operations team drowning in uncorrelated alerts.
          </p>
          <div className="wp-pull">The research solves the problem. The solution ships to production. The learning is encoded in AORBIT's architecture. That's the cycle.</div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">RS/03</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Outputs</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>What you get out the other side.</h2>
          </div>
          <div className="framework-row">
            {outputs.map((o, i) => (
              <span key={i} className="framework-pill">
                <span className="dot"></span>
                {o}
              </span>
            ))}
          </div>
        </div>
      </section>

      <StubCTA
        eyebrow="Hard problems"
        headline="Solve a hard problem together."
        primary={{ label: "Start a research engagement", route: "/talk-to-an-architect?interest=research" }}
        navigate={navigate}
      />
    </main>
  );
};

/* =============================================================================
   RESOURCES · Blog (untouched by Chunk 4)
   ============================================================================= */

const Blog = ({ navigate }) => {
  /* Pre-launch state — content team publishes first posts within 2 weeks.
     Once posts arrive, swap this component back to the grid version (saved in git history). */

  const [email, setEmail] = React.useState("");
  const [subscribed, setSubscribed] = React.useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email) return;
    setSubscribed(true);
  };

  const incoming = [
    { tag: "The Architecture Gap™", t: "Introducing The Architecture Gap", d: "Why enterprise AI fails in production." },
    { tag: "Private AI",            t: "Your on-prem LLM is already two generations behind", d: "Why architecture beats model selection." },
    { tag: "Private AI",            t: "Data sovereignty is an architecture problem",        d: "Not a contract problem. Not a policy problem." },
    { tag: "AIOps",                 t: "From ITOPS to AIOPS",                                  d: "The operations intelligence shift." },
    { tag: "Agentic Finance",       t: "Agentic payments need architecture, not just SDKs",   d: "What World Liberty, Stripe, and Circle leave to you." },
    { tag: "The Architecture Gap", t: "5% GPU utilization: the $401B problem",               d: "The symptom that points to the real issue." },
  ];

  return (
    <main data-screen-label="Blog">
      {/* HERO */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Resources · Insights</div>
          <h1>Doblier Insights — coming soon.</h1>
          <p className="lead">
            Architecture, private AI, and enterprise intelligence. From the team that builds production systems for banks. First posts publish within two weeks of launch — subscribe and we'll send each one as it goes live.
          </p>
          <div style={{ display: "flex", gap: 32, marginTop: 48, fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-mute)", flexWrap: "wrap" }}>
            <div>8 launch posts planned</div><div>·</div><div>First publish · Q2 2026</div><div>·</div><div>Cadence · monthly</div>
          </div>
        </div>
      </section>

      {/* NEWSLETTER SIGNUP */}
      <section className="section" style={{ background: "#070707" }}>
        <div className="container blog-coming" style={{ maxWidth: 880, margin: "0 auto", textAlign: "center" }}>
          <div className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>Subscribe</div>
          <h2 style={{ marginTop: 16, fontSize: "clamp(36px, 4vw, 56px)", maxWidth: "22ch", margin: "16px auto 0" }}>
            Architecture-grade writing. When we publish, you'll know.
          </h2>
          <p style={{ color: "var(--text-dim)", marginTop: 24, maxWidth: 560, marginLeft: "auto", marginRight: "auto", lineHeight: 1.6 }}>
            One email per post. No filler, no recycled marketing. Quarterly architecture briefs and field notes from production deployments.
          </p>

          {subscribed ? (
            <div className="newsletter-confirm" style={{ marginTop: 40 }}>
              <span className="dot" /> Check your inbox — click the verification link to confirm. (Double opt-in required for GDPR.)
            </div>
          ) : (
            <>
              <form className="bl-form" onSubmit={submit}>
                <input
                  type="email"
                  required
                  placeholder="you@enterprise.com"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  data-hj-suppress
                  data-clarity-mask
                />
                <button type="submit" className="btn btn-primary">
                  Subscribe <IconArrowRight size={14} className="arrow" />
                </button>
              </form>
              <p className="bl-note">
                We'll send a verification email — you're not on the list until you click the link. Unsubscribe in one click, any time. By subscribing you agree to our{" "}
                <a href="#/privacy" onClick={(e) => { e.preventDefault(); navigate("/privacy"); }}>Privacy Policy</a>.
              </p>
            </>
          )}
        </div>
      </section>

      {/* WHAT'S COMING */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">BL/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>In the pipeline</div>
            </div>
            <h2 style={{ maxWidth: "26ch" }}>What we're writing next.</h2>
          </div>
          <p style={{ color: "var(--text-dim)", fontSize: 16, lineHeight: 1.7, maxWidth: 720, marginBottom: 40 }}>
            A rolling list of the first launch posts. Subjects, not yet published. Subscribe above to get each one in your inbox as it goes live.
          </p>

          <div className="grid-3">
            {incoming.map((p, i) => (
              <article
                key={i}
                className="card"
                style={{ padding: 28, display: "flex", flexDirection: "column", gap: 14, position: "relative" }}
              >
                <span className="framework-pill" style={{ alignSelf: "flex-start" }}>
                  <span className="dot"></span>{p.tag}
                </span>
                <h3 style={{ fontSize: 18, letterSpacing: "-0.01em", margin: 0, lineHeight: 1.3 }}>{p.t}</h3>
                <p style={{ color: "var(--text-dim)", fontSize: 14, lineHeight: 1.55, margin: 0 }}>{p.d}</p>
                <div style={{
                  marginTop: "auto",
                  paddingTop: 14,
                  borderTop: "1px solid var(--border)",
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  fontFamily: "var(--font-mono)",
                  fontSize: 10,
                  letterSpacing: "0.08em",
                  textTransform: "uppercase",
                  color: "var(--text-mute)",
                }}>
                  <span>Coming soon</span>
                  <span style={{ color: "var(--teal)" }}>—</span>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      <StubCTA
        eyebrow="In the meantime"
        headline="Read the published research."
        primary={{ label: "Read the whitepapers", route: "/resources/whitepapers" }}
        secondary={{ label: "Talk to an architect", route: "/talk-to-an-architect" }}
        navigate={navigate}
      />

      <style>{`
        .bl-form {
          display: flex;
          gap: 8px;
          max-width: 460px;
          margin: 32px auto 0;
        }
        .bl-form input {
          flex: 1;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid var(--border-bright);
          padding: 12px 14px;
          color: var(--text);
          font-family: var(--font-sans);
          font-size: 14px;
          border-radius: 2px;
          outline: none;
          transition: border-color .15s, background .15s;
        }
        .bl-form input:focus {
          border-color: var(--teal);
          background: rgba(0, 212, 170, 0.04);
        }
        .bl-form input::placeholder { color: var(--text-mute); }
        .bl-note {
          margin: 16px auto 0;
          max-width: 56ch;
          font-size: 12px;
          color: var(--text-mute);
          line-height: 1.55;
        }
        .bl-note a {
          color: var(--text-dim);
          text-decoration: none;
          border-bottom: 1px solid transparent;
          transition: color 0.15s, border-color 0.15s;
        }
        .bl-note a:hover { color: var(--teal); border-color: var(--teal); }
        .newsletter-confirm {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          color: var(--teal);
          font-family: var(--font-mono);
          font-size: 12px;
          letter-spacing: 0.02em;
        }
        .newsletter-confirm .dot {
          width: 6px; height: 6px;
          background: var(--teal);
          border-radius: 50%;
          display: inline-block;
        }
        @media (max-width: 560px) {
          .bl-form { flex-direction: column; }
        }
      `}</style>
    </main>
  );
};

/* =============================================================================
   RESOURCES · Whitepapers (untouched by Chunk 4)
   ============================================================================= */

const Whitepapers = ({ navigate }) => {
  const papers = [
    {
      tag: "FLAGSHIP",
      title: "The Architecture Gap™: Why Enterprise AI Fails in Production",
      pages: "12–15 pages",
      abstract:
        "The flagship research report. Covers the gap between AI capability and enterprise architecture, market data, the three mistakes vendors make, the AORBIT™ approach, and a framework for closing the gap.",
      cta: "Download the whitepaper",
      fields: "Name · Work email · Company · Role",
      route: "/why-doblier/architecture-gap",
      assetId: "architecture-gap",
    },
    {
      tag: "BRIEF",
      title: "Data Sovereignty: Building AI Where Your Data Lives",
      pages: "2 pages · Executive-ready",
      abstract:
        "The \"share with my CISO\" asset. Covers the zero-exfiltration architecture, data flow diagram, regulatory mapping (SAMA, GDPR, PCI DSS), and deployment models.",
      cta: "Get the brief",
      fields: "Name · Work email · Company",
      route: "/why-doblier/data-sovereignty",
      assetId: "data-sovereignty-brief",
    },
    {
      tag: "CASE STUDY",
      title: "Private AI for Banking: From Assessment to Production",
      pages: "4 pages · Anonymized",
      abstract:
        "Anonymized case study of a major Saudi bank. The full story: challenge, AORBIT deployment, production outcome. Includes architecture overview and compliance mapping.",
      cta: "Get the case study",
      fields: "Name · Work email · Company · Role",
      route: "/why-doblier/case-studies",
      assetId: "banking-case-study",
    },
  ];

  /* Subtle striped cover placeholder — no stock imagery */
  const Cover = ({ tag }) => (
    <div style={{
      aspectRatio: "4 / 3",
      background: "linear-gradient(135deg, #0E0E0E 0%, #161616 100%)",
      borderBottom: "1px solid var(--border)",
      position: "relative",
      overflow: "hidden",
    }}>
      <svg width="100%" height="100%" viewBox="0 0 400 300" preserveAspectRatio="none" style={{ position: "absolute", inset: 0 }}>
        <defs>
          <pattern id={`wp-stripes-${tag.replace(/\W/g, "")}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(0,212,170,0.06)" strokeWidth="1" />
          </pattern>
        </defs>
        <rect width="400" height="300" fill={`url(#wp-stripes-${tag.replace(/\W/g, "")})`} />
        {/* Document outline */}
        <rect x="120" y="60" width="160" height="200" fill="#0A0A0A" stroke="rgba(0,212,170,0.4)" strokeWidth="1" />
        <line x1="140" y1="100" x2="260" y2="100" stroke="rgba(255,255,255,0.1)" strokeWidth="1" />
        <line x1="140" y1="115" x2="240" y2="115" stroke="rgba(255,255,255,0.06)" strokeWidth="1" />
        <line x1="140" y1="125" x2="250" y2="125" stroke="rgba(255,255,255,0.06)" strokeWidth="1" />
        <line x1="140" y1="135" x2="230" y2="135" stroke="rgba(255,255,255,0.06)" strokeWidth="1" />
        <line x1="140" y1="155" x2="260" y2="155" stroke="rgba(255,255,255,0.06)" strokeWidth="1" />
        <line x1="140" y1="165" x2="245" y2="165" stroke="rgba(255,255,255,0.06)" strokeWidth="1" />
        <line x1="140" y1="175" x2="235" y2="175" stroke="rgba(255,255,255,0.06)" strokeWidth="1" />
      </svg>
      <div style={{
        position: "absolute", top: 12, left: 16,
        fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.1em",
        textTransform: "uppercase", color: "var(--teal)",
      }}>
        // {tag}
      </div>
    </div>
  );

  return (
    <main data-screen-label="Whitepapers">
      {/* HERO */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Resources · Whitepapers & research</div>
          <h1>Whitepapers & research.</h1>
          <p className="lead">
            In-depth analysis on enterprise AI architecture, private deployment, and the challenges that matter in production.
          </p>
        </div>
      </section>

      {/* GRID */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">WP/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Launch papers</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>Three papers. Architecture-grade. Gated by intent.</h2>
          </div>

          <div className="grid-2">
            {papers.map((p, i) => (
              <article
                key={i}
                style={{
                  background: "var(--bg-card)",
                  border: "1px solid var(--border)",
                  borderRadius: 4,
                  overflow: "hidden",
                  display: "flex",
                  flexDirection: "column",
                  transition: "border-color 0.18s ease",
                }}
                onMouseEnter={(e) => (e.currentTarget.style.borderColor = "var(--border-bright)")}
                onMouseLeave={(e) => (e.currentTarget.style.borderColor = "var(--border)")}
              >
                <Cover tag={p.tag} />
                <div style={{ padding: 32, display: "flex", flexDirection: "column", gap: 18, flex: 1 }}>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
                    <span className="framework-pill"><span className="dot"></span>{p.tag}</span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", color: "var(--text-mute)", textTransform: "uppercase" }}>
                      {p.pages}
                    </span>
                  </div>
                  <h3 style={{ fontSize: 24, letterSpacing: "-0.01em", margin: 0, lineHeight: 1.2 }}>{p.title}</h3>
                  <p style={{ color: "var(--text-dim)", fontSize: 15, lineHeight: 1.6, margin: 0 }}>{p.abstract}</p>

                  <div style={{ marginTop: "auto", paddingTop: 20, borderTop: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 16 }}>
                    <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", color: "var(--text-mute)", textTransform: "uppercase" }}>
                      // Gating · {p.fields}
                    </div>
                    <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                      <button className="btn btn-primary" onClick={() => openGated(p.assetId)}>{p.cta} <IconDownload size={14} /></button>
                      {p.route && (
                        <button className="btn btn-ghost" onClick={() => navigate(p.route)}>
                          Read context <IconArrowRight size={14} className="arrow" />
                        </button>
                      )}
                    </div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* GATING FLOW NOTE */}
      <section className="section" style={{ background: "#070707" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">WP/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>How the download works</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Tell us who you are. Get the PDF. We'll only follow up if you ask us to.</h2>
          </div>
          <div className="grid-3" style={{ marginTop: 16 }}>
            {[
              { n: "01", t: "Request",  b: "Fill a short form. Returning visitors only see new fields — we pre-fill what we already know." },
              { n: "02", t: "Receive",  b: "Immediate PDF download. No email verification gate. The asset is in your hands inside ten seconds." },
              { n: "03", t: "Conversation", b: "Optional. We don't auto-drip. If you want to talk to an architect, the next step is one click." },
            ].map((s, i) => (
              <div key={i} className="domain-card">
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div className="eyebrow"><span className="layer-badge">{s.n}</span></div>
                </div>
                <h3>{s.t}</h3>
                <p>{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <StubCTA
        eyebrow="Architect conversation"
        headline="Need a paper that isn't here yet? Tell us."
        primary={{ label: "Talk to an architect", route: "/talk-to-an-architect" }}
        secondary={{ label: "Read the blog", route: "/resources/blog" }}
        navigate={navigate}
      />
    </main>
  );
};

/* =============================================================================
   COMPANY · About (untouched by Chunk 4)
   ============================================================================= */

const About = ({ navigate }) => {
  const facts = [
    { k: "Founded",     v: "January 2019" },
    { k: "Headquarters", v: "California, USA" },
    { k: "Operations",  v: "Global — Saudi Arabia, Europe, Asia-Pacific" },
    { k: "Core product", v: "AORBIT™ — Autonomous Enterprise Intelligence Suite" },
    { k: "Services",    v: "Resource augmentation, corporate training, applied research" },
    { k: "Track record", v: "20+ major banking engagements internationally" },
    { k: "Focus",       v: "Private AI infrastructure for regulated enterprises" },
  ];

  const values = [
    { n: "01", t: "Architecture over tools.",     b: "Tools are components. Architecture is what makes them useful. We always start with the system design, not the feature list." },
    { n: "02", t: "Privacy by default.",          b: "Data sovereignty isn't a feature you enable. It's the foundation you build on. Every system we design assumes data can't leave." },
    { n: "03", t: "Production over prototypes.",  b: "A demo that doesn't ship is a waste of everyone's time. We measure success by what runs in production, not what runs in staging." },
    { n: "04", t: "Evolution over replacement.",  b: "Technology enhances. It doesn't replace. We build on what you have. Your existing infrastructure is preserved and made intelligent." },
  ];

  const regions = [
    { tag: "HQ",   loc: "California, USA",    body: "Headquarters. Architecture, research, and global operations.",                      bilingual: false },
    { tag: "MENA", loc: "Saudi Arabia",       body: "Major banking engagements. MENA operations. Vision 2030 alignment.",                bilingual: true  },
    { tag: "EU",   loc: "Europe",             body: "Regulatory compliance deployments. Banking automation under GDPR.",                  bilingual: false },
    { tag: "APAC", loc: "Asia-Pacific",       body: "Cloud modernization. Kubernetes deployments. Hybrid private AI deployments.",       bilingual: false },
  ];

  return (
    <main data-screen-label="About">
      {/* HERO */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Company · About Doblier</div>
          <h1>We build the AI infrastructure enterprises trust.</h1>
          <p className="lead">
            Founded in 2019. Headquartered in California. Operating globally. Doblier started by placing specialists inside banks and training their teams. We saw the same problem everywhere: enterprises had AI ambition but no architecture to support it. So we built one.
          </p>
        </div>
      </section>

      {/* THE STORY */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">AB/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>The story</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>From augmentation to architecture.</h2>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)", gap: 48 }} className="ab-story">
            <div style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7 }}>
              <p>
                Doblier Inc. was founded in January 2019 as a technology company focused on AI product development, resource augmentation, corporate training, and applied research.
              </p>
              <p style={{ marginTop: 24 }}>
                The early work was hands-on: placing AI, Cloud, and DevOps specialists inside enterprise clients. Training engineering teams on production-grade practices. Conducting R&D on private LLM deployment and AI inference optimization.
              </p>
            </div>
            <div style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7 }}>
              <p>
                Across 20+ banking engagements on four continents, we saw the same pattern. Enterprises could find AI talent. They could access AI tools. What they couldn't find was AI architecture — the system design that makes components work together, keeps data private, and evolves as the technology changes.
              </p>
              <div className="wp-pull" style={{ marginTop: 24 }}>AORBIT was born from that gap.</div>
              <p>
                It encodes every lesson from every production deployment into a layered architecture designed for enterprise reality. Not what AI could do in theory. What AI must do in production, under compliance, at scale.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* KEY FACTS */}
      <section className="section" style={{ background: "#070707" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">AB/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Key facts</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>The shape of the company.</h2>
          </div>
          <div className="engagement-table" style={{ gridTemplateColumns: "1fr" }}>
            <div className="engagement-head" style={{ gridTemplateColumns: "260px 1fr" }}>
              <div className="engagement-cell">// Fact</div>
              <div className="engagement-cell">// Detail</div>
            </div>
            {facts.map((f, i) => (
              <div key={i} className="engagement-row" style={{ gridTemplateColumns: "260px 1fr" }}>
                <div className="engagement-cell model">{f.k}</div>
                <div className="engagement-cell">{f.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* VALUES */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">AB/03</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Values</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>Four operating principles.</h2>
          </div>
          <div className="grid-2">
            {values.map((v, i) => (
              <PrincipleCard key={i} num={v.n} title={v.t} body={v.b} />
            ))}
          </div>
        </div>
      </section>

      {/* GLOBAL PRESENCE */}
      <section className="section" style={{ background: "#070707" }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">AB/04</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Global presence</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Four regions. One operating standard.</h2>
          </div>

          <div className="grid-2">
            {regions.map((r, i) => (
              <div key={i} className="domain-card">
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                  <div className="eyebrow"><span className="layer-badge">{r.tag}</span></div>
                  {r.bilingual && (
                    <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
                      <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", color: "var(--text-mute)", textTransform: "uppercase" }}>EN · AR</span>
                      <span lang="ar" style={{ fontSize: 22, color: "var(--text)", letterSpacing: 0 }}>دوبلير</span>
                    </div>
                  )}
                </div>
                <h3>{r.loc}</h3>
                <p>{r.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <StubCTA
        eyebrow="Talk to the team"
        headline="Build the next deployment with us."
        primary={{ label: "Talk to an architect", route: "/talk-to-an-architect" }}
        secondary={{ label: "Explore AORBIT", route: "/aorbit" }}
        navigate={navigate}
      />

      <style>{`
        @media (max-width: 880px) {
          .ab-story { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </main>
  );
};

/* =============================================================================
   COMPANY · Careers (untouched by Chunk 4)
   ============================================================================= */

const Careers = ({ navigate }) => {
  const reasons = [
    { n: "01", t: "Production AI at banking scale.",       b: "Not toy projects. Not POCs. You'll work on AI systems that process real transactions, handle real compliance, and run in real production environments. The code you write goes to production inside banks." },
    { n: "02", t: "Global distributed team.",              b: "Work across time zones, cultures, and regulatory environments. Deployments span Saudi Arabia, Europe, and Asia-Pacific. Your work has impact across continents." },
    { n: "03", t: "Architecture-first engineering culture.", b: "We design before we build. We think in systems, not features. If you care about how things fit together — not just whether they work in isolation — you'll fit in here." },
    { n: "04", t: "Foundational stage, enterprise impact.", b: "Doblier is building the category of enterprise AI infrastructure. Early team members shape the architecture, the product, and the culture. The decisions you make now become the foundation others build on." },
  ];

  const allRoles = [
    { tag: "ENG/01",  title: "Principal Architect · AORBIT™",        dept: "Engineering", loc: "Remote",          type: "Full-time", body: "Lead architecture on Tier-1 banking engagements. Production discipline required. Travel as needed." },
    { tag: "ENG/02",  title: "ML Platform Engineer",                dept: "Engineering", loc: "California, USA", type: "Full-time", body: "GPU substrate, Kubernetes, multi-LLM routing. Production AI at bank scale." },
    { tag: "ENG/03",  title: "Security Architect",                  dept: "Engineering", loc: "Saudi Arabia",    type: "Full-time", body: "Air-gapped deployments, hardware-backed crypto, audit-grade observability." },
    { tag: "ENG/04",  title: "DevOps / SRE Specialist",             dept: "Engineering", loc: "Europe",          type: "Full-time", body: "CI/CD for regulated environments. GitOps, observability, incident response for AI workloads." },
    { tag: "PROD/01", title: "Product Manager · AORBIT Foundation", dept: "Product",     loc: "California, USA", type: "Full-time", body: "Own the Foundation layer roadmap. Work directly with banking customers on the private AI substrate." },
    { tag: "SALE/01", title: "Solutions Architect · Banking",       dept: "Sales",       loc: "Saudi Arabia",    type: "Full-time", body: "Pre-sales architecture for Tier-1 and regional banks. Translate business need into AORBIT deployment plan." },
    { tag: "OPS/01",  title: "Customer Success Engineer",           dept: "Operations",  loc: "Remote",          type: "Full-time", body: "Embed inside customer teams during deployment. Ensure production rollout, training, and handover." },
  ];

  const depts     = ["All", "Engineering", "Product", "Sales", "Operations"];
  const locations = ["All", "California, USA", "Saudi Arabia", "Europe", "Remote"];

  const [dept, setDept] = React.useState("All");
  const [loc, setLoc]   = React.useState("All");

  const visible = allRoles.filter(
    (r) => (dept === "All" || r.dept === dept) && (loc === "All" || r.loc === loc)
  );

  return (
    <main data-screen-label="Careers">
      {/* HERO */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Company · Careers</div>
          <h1>Build the AI infrastructure the world trusts.</h1>
          <p className="lead">
            Doblier isn't building demos. We're building production AI systems that run inside the world's banks. If you want to work on real architecture at real scale, this is the place.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={() => {
              const el = document.getElementById("positions");
              if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
            }}>
              See open roles <IconArrowRight size={14} className="arrow" />
            </button>
            <button className="btn btn-ghost" onClick={() => navigate("/company/about")}>
              About Doblier <IconArrowRight size={14} className="arrow" />
            </button>
          </div>
        </div>
      </section>

      {/* WHY WORK HERE */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">CR/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Why Doblier</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>Four reasons senior people stay.</h2>
          </div>
          <div className="grid-2">
            {reasons.map((r, i) => (
              <PrincipleCard key={i} num={r.n} title={r.t} body={r.b} />
            ))}
          </div>
        </div>
      </section>

      {/* OPEN POSITIONS */}
      <section id="positions" className="section" style={{ background: "#070707", scrollMarginTop: 80 }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">CR/02</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Open positions</div>
            </div>
            <h2 style={{ maxWidth: "22ch" }}>Currently hiring.</h2>
          </div>

          {/* Filters */}
          <div style={{ display: "flex", flexDirection: "column", gap: 20, marginBottom: 32 }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Department</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {depts.map((d, i) => {
                  const active = d === dept;
                  return (
                    <button
                      key={i}
                      onClick={() => setDept(d)}
                      style={{
                        background: active ? "rgba(0,212,170,0.08)" : "transparent",
                        border: `1px solid ${active ? "var(--teal)" : "var(--border)"}`,
                        color: active ? "var(--teal)" : "var(--text-dim)",
                        padding: "6px 12px", borderRadius: 999,
                        fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em",
                        textTransform: "uppercase", cursor: "pointer", transition: "all 0.18s ease",
                      }}
                    >
                      {d}
                    </button>
                  );
                })}
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Location</div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {locations.map((l, i) => {
                  const active = l === loc;
                  return (
                    <button
                      key={i}
                      onClick={() => setLoc(l)}
                      style={{
                        background: active ? "rgba(0,212,170,0.08)" : "transparent",
                        border: `1px solid ${active ? "var(--teal)" : "var(--border)"}`,
                        color: active ? "var(--teal)" : "var(--text-dim)",
                        padding: "6px 12px", borderRadius: 999,
                        fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em",
                        textTransform: "uppercase", cursor: "pointer", transition: "all 0.18s ease",
                      }}
                    >
                      {l}
                    </button>
                  );
                })}
              </div>
            </div>
          </div>

          {/* Roles list */}
          {visible.length > 0 ? (
            <div>
              {visible.map((r, i) => (
                <div key={i} className="cs-row" style={{ gridTemplateColumns: "100px minmax(0, 1.6fr) 140px 180px 80px 60px" }}>
                  <div className="cs-num">{r.tag}</div>
                  <div>
                    <div className="cs-name">{r.title}</div>
                    <div className="cs-sub">{r.body}</div>
                  </div>
                  <div className="cs-meta">{r.dept}</div>
                  <div className="cs-meta">{r.loc}</div>
                  <div className="cs-meta">{r.type}</div>
                  <div className="cs-arrow"><IconArrowRight size={20} /></div>
                </div>
              ))}
            </div>
          ) : (
            <div className="card" style={{ padding: 40, textAlign: "left" }}>
              <div className="eyebrow">Empty state</div>
              <h3 style={{ marginTop: 16, fontSize: 24, letterSpacing: "-0.01em" }}>
                No roles match that filter — but we're always reading.
              </h3>
              <p style={{ color: "var(--text-dim)", marginTop: 16, fontSize: 16, lineHeight: 1.6 }}>
                We're always looking for exceptional architects, engineers, and operators. Send your resume to{" "}
                <a href="mailto:careers@doblier.com" style={{ color: "var(--teal)" }}>careers@doblier.com</a>{" "}
                and tell us what you'd build.
              </p>
            </div>
          )}
        </div>
      </section>

      {/* APPLICATION CTA */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">CR/03</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Apply</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>See a role? Apply. Don't see one? Reach out anyway.</h2>
          </div>
          <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, maxWidth: 720 }}>
            We hire deliberately. We respond to every application from a senior practitioner — even when we don't have an open requisition that matches today. If the work resonates, tell us what you'd build.
          </p>
          <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="mailto:careers@doblier.com" className="btn btn-primary" style={{ textDecoration: "none" }}>
              careers@doblier.com <IconArrowRight size={14} className="arrow" />
            </a>
            <button className="btn btn-ghost" onClick={() => navigate("/company/about")}>
              About the company <IconArrowRight size={14} className="arrow" />
            </button>
          </div>
        </div>
      </section>
    </main>
  );
};

/* =============================================================================
   Talk to an architect (untouched by Chunk 4)
   ============================================================================= */

const TalkToArchitect = ({ navigate }) => {
  const query = (typeof window !== "undefined" && window.useRouteQuery) ? window.useRouteQuery() : {};
  const lead = React.useMemo(loadLeadProfile, []);
  const initialInterest = INTEREST_MAP[query.interest] || null;
  const [checkedInterests, setCheckedInterests] = React.useState(() => initialInterest ? { [initialInterest]: true } : {});
  const [submitted, setSubmitted] = React.useState(false);
  const source = query.source || null;

  React.useEffect(() => {
    // Re-apply if user navigates between params on same page.
    if (initialInterest) setCheckedInterests((s) => ({ ...s, [initialInterest]: true }));
  }, [initialInterest]);

  /* Shared input style */
  const inputBase = {
    background: "var(--bg)",
    border: "1px solid var(--border-bright)",
    borderRadius: 2,
    padding: "12px 14px",
    color: "var(--text)",
    fontFamily: "var(--font-sans)",
    fontSize: 14,
    outline: "none",
    width: "100%",
  };
  const labelMono = {
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    color: "var(--text-mute)",
  };

  const interestAreas = [
    "AORBIT™ (Private AI)",
    "AIOps",
    "Digital Assets",
    "Resource Augmentation",
    "Training",
    "Research",
    "Security",
  ];

  const expectations = [
    "Your current infrastructure and AI goals",
    "How AORBIT maps to your environment",
    "Deployment options and timeline",
    "Compliance and data sovereignty requirements",
  ];

  return (
    <main data-screen-label="Talk to an architect">
      {/* HERO + FORM (60/40 split) */}
      <section className="page-hero" style={{ borderBottom: "none", paddingBottom: 48 }}>
        <div className="container">
          <div className="eyebrow">Contact · Talk to an architect</div>
          <h1 style={{ fontSize: "clamp(40px, 5vw, 64px)", maxWidth: "16ch" }}>Talk to an architect.</h1>
          <p className="lead" style={{ marginTop: 24, maxWidth: "60ch" }}>
            Not a sales pitch. A conversation with someone who has deployed private AI inside banks. Tell us what you're working on. We'll tell you how we'd approach it.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 24 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.5fr) minmax(0, 1fr)", gap: 64, alignItems: "start" }} className="ta-grid">
            {/* LEFT · FORM */}
            <div className="card" style={{ padding: 40 }}>
              {submitted ? (
                <div>
                  <div className="gd-check" style={{ width: 48, height: 48 }}><IconCheck size={22} /></div>
                  <div className="eyebrow" style={{ fontSize: 10 }}>Sent</div>
                  <h3 style={{ marginTop: 12, fontSize: 28, letterSpacing: "-0.01em" }}>The conversation is queued.</h3>
                  <p style={{ color: "var(--text-dim)", marginTop: 16, fontSize: 15, lineHeight: 1.6 }}>
                    Typical response within 1 business day. You'll hear from an architect, not a sales rep. Check your inbox — we'll reply from <strong style={{ color: "var(--text)" }}>hello@doblier.io</strong>.
                  </p>
                  <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                    <button className="btn btn-primary" onClick={() => navigate("/aorbit")}>
                      Explore AORBIT while you wait <IconArrowRight size={14} className="arrow" />
                    </button>
                    <button className="btn btn-ghost" onClick={() => navigate("/why-doblier/case-studies")}>
                      Read the case studies <IconArrowRight size={14} className="arrow" />
                    </button>
                  </div>
                  <p style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-mute)", marginTop: 32 }}>
                    // Reference · request received
                  </p>
                </div>
              ) : (
              <>
              <div className="eyebrow">REQUEST</div>
              <h3 style={{ marginTop: 16, fontSize: 28, letterSpacing: "-0.01em" }}>Start the conversation.</h3>
              <p style={{ color: "var(--text-dim)", marginTop: 12, fontSize: 15, lineHeight: 1.6 }}>
                Typical response within 1 business day. You'll hear from an architect, not a sales rep.
              </p>

              <form
                style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 20 }}
                onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
              >
                {(initialInterest || source) && (
                  <div className="form-prefill-note" role="status">
                    <span className="pf-tag">// PRE-FILLED</span>
                    {initialInterest && <span> Interest: <strong>{initialInterest}</strong>.</span>}
                    {source && <span> Routed for the <strong>{source.replace("-", " ")}</strong> team.</span>}
                  </div>
                )}
                {/* Hidden source for CRM routing — not shown to the visitor. */}
                {source && <input type="hidden" name="source" value={source} readOnly />}

                {/* Two-column row: Name + Email */}
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="ta-row">
                  <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                    <span style={labelMono}>Full name *</span>
                    <input type="text" required defaultValue={lead.name || ""} placeholder="—" data-hj-suppress data-clarity-mask style={inputBase} />
                  </label>
                  <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                    <span style={labelMono}>Work email *</span>
                    <input type="email" required defaultValue={lead.email || ""} placeholder="you@enterprise.com" data-hj-suppress data-clarity-mask style={inputBase} />
                  </label>
                </div>

                {/* Two-column row: Company + Job title */}
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="ta-row">
                  <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                    <span style={labelMono}>Company *</span>
                    <input type="text" required defaultValue={lead.company || ""} placeholder="—" data-hj-suppress data-clarity-mask style={inputBase} />
                  </label>
                  <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                    <span style={labelMono}>Job title *</span>
                    <input type="text" required defaultValue={lead.role || ""} placeholder="CTO · CISO · VP Eng" data-hj-suppress data-clarity-mask style={inputBase} />
                  </label>
                </div>

                {/* Two-column row: Company size + Industry */}
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="ta-row">
                  <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                    <span style={labelMono}>Company size *</span>
                    <select required style={inputBase} defaultValue="">
                      <option value="" disabled>Select size</option>
                      <option>1–100</option>
                      <option>101–500</option>
                      <option>501–1,000</option>
                      <option>1,001–5,000</option>
                      <option>5,000–10,000</option>
                      <option>10,000+</option>
                    </select>
                  </label>
                  <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                    <span style={labelMono}>Industry *</span>
                    <select required style={inputBase} defaultValue="">
                      <option value="" disabled>Select industry</option>
                      <option>Banking & Finance</option>
                      <option>Digital Assets</option>
                      <option>Government</option>
                      <option>Insurance</option>
                      <option>Healthcare</option>
                      <option>Technology</option>
                      <option>Other</option>
                    </select>
                  </label>
                </div>

                {/* Interest area · multi-select checkboxes */}
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  <span style={labelMono}>Interest area *</span>
                  <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 4 }}>
                    {interestAreas.map((a, i) => (
                      <label key={i} style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 14, color: "var(--text-dim)", cursor: "pointer" }}>
                        <input
                          type="checkbox"
                          checked={!!checkedInterests[a]}
                          onChange={(e) => setCheckedInterests((s) => ({ ...s, [a]: e.target.checked }))}
                          style={{ accentColor: "var(--teal)", width: 16, height: 16 }}
                        />
                        {a}
                      </label>
                    ))}
                  </div>
                </div>

                {/* Project textarea */}
                <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span style={labelMono}>Tell us about your project</span>
                  <textarea
                    rows="4"
                    placeholder="What are you trying to build? What's blocking you?"
                    data-hj-suppress
                    data-clarity-mask
                    style={{ ...inputBase, resize: "vertical" }}
                  ></textarea>
                </label>

                {/* Preferred contact · radio */}
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  <span style={labelMono}>Preferred contact method</span>
                  <div style={{ display: "flex", gap: 24, flexWrap: "wrap", marginTop: 4 }}>
                    {["Email", "Phone", "Video call"].map((c, i) => (
                      <label key={i} style={{ display: "flex", gap: 8, alignItems: "center", fontSize: 14, color: "var(--text-dim)", cursor: "pointer" }}>
                        <input type="radio" name="contact" defaultChecked={i === 0} style={{ accentColor: "var(--teal)" }} />
                        {c}
                      </label>
                    ))}
                  </div>
                </div>

                {/* Marketing consent · GDPR: UNCHECKED by default */}
                <label className="consent-row">
                  <input type="checkbox" name="marketing_consent" />
                  <span>
                    I agree to receive occasional architecture briefs and product updates from Doblier. You can unsubscribe in one click, any time.
                  </span>
                </label>

                <button type="submit" className="btn btn-primary" style={{ marginTop: 8, justifyContent: "center" }}>
                  Start the conversation <IconArrowRight size={14} className="arrow" />
                </button>

                {/* Privacy notice — required directly below submit */}
                <p className="form-privacy-note">
                  By submitting this form, you agree to our{" "}
                  <a href="#/privacy" onClick={(e) => { e.preventDefault(); navigate("/privacy"); }}>Privacy Policy</a>
                  {" "}and{" "}
                  <a href="#/terms" onClick={(e) => { e.preventDefault(); navigate("/terms"); }}>Terms of Use</a>.
                </p>
              </form>
              </>
              )}
            </div>

            {/* RIGHT · TRUST SIGNALS */}
            <aside style={{ display: "flex", flexDirection: "column", gap: 48, position: "sticky", top: 100 }} className="ta-aside">
              <div>
                <div className="eyebrow">Track record</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 24, marginTop: 20, borderTop: "1px solid var(--border)", paddingTop: 24 }}>
                  {[
                    { n: "20+", l: "Banking engagements" },
                    { n: "4",   l: "Continents" },
                    { n: "0",   l: "Data exfiltration events" },
                  ].map((s, i) => (
                    <div key={i} style={{ display: "flex", alignItems: "baseline", gap: 16, borderBottom: "1px solid var(--border)", paddingBottom: 24 }}>
                      <div style={{ color: "var(--teal)", fontSize: 40, fontWeight: 500, letterSpacing: "-0.02em", minWidth: 80 }}>{s.n}</div>
                      <div style={{ color: "var(--text-dim)", fontSize: 15 }}>{s.l}</div>
                    </div>
                  ))}
                </div>
                <p style={{ color: "var(--text-dim)", fontSize: 14, lineHeight: 1.6, marginTop: 20 }}>
                  Production private AI deployments across Saudi Arabia, Europe, and Asia-Pacific.
                </p>
              </div>

              <div>
                <div className="eyebrow">What to expect</div>
                <p style={{ color: "var(--text-dim)", fontSize: 14, lineHeight: 1.6, marginTop: 16 }}>
                  Typical response within 1 business day. The conversation usually covers:
                </p>
                <ul style={{ listStyle: "none", padding: 0, marginTop: 16, display: "flex", flexDirection: "column", gap: 10 }}>
                  {expectations.map((x, i) => (
                    <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", color: "var(--text-dim)", fontSize: 14, lineHeight: 1.5 }}>
                      <span style={{ color: "var(--teal)", fontFamily: "var(--font-mono)", fontSize: 11, marginTop: 4 }}>→</span> {x}
                    </li>
                  ))}
                </ul>
              </div>

              <div style={{ background: "var(--bg-card)", border: "1px solid var(--border)", padding: 24, borderRadius: 4 }}>
                <div className="eyebrow" style={{ color: "var(--teal)" }}>Response promise</div>
                <p style={{ color: "var(--text)", fontSize: 15, lineHeight: 1.6, marginTop: 12 }}>
                  You'll hear from an architect, not a sales rep. Typical response within 1 business day.
                </p>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* Tiny responsive helper for the form */}
      <style>{`
        @media (max-width: 960px) {
          .ta-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .ta-aside { position: static !important; }
        }
        @media (max-width: 640px) {
          .ta-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </main>
  );
};

/* =============================================================================
   Contact · See AORBIT in action  (Chunk 5)
   ============================================================================= */

const Demo = ({ navigate }) => {
  const query = (typeof window !== "undefined" && window.useRouteQuery) ? window.useRouteQuery() : {};
  const lead = React.useMemo(loadLeadProfile, []);
  const initialLayer = LAYER_MAP[query.layer] || "";
  const [submitted, setSubmitted] = React.useState(false);

  const inputBase = {
    background: "var(--bg)",
    border: "1px solid var(--border-bright)",
    borderRadius: 2,
    padding: "12px 14px",
    color: "var(--text)",
    fontFamily: "var(--font-sans)",
    fontSize: 14,
    outline: "none",
    width: "100%",
  };
  const labelMono = {
    fontFamily: "var(--font-mono)",
    fontSize: 11,
    letterSpacing: "0.08em",
    textTransform: "uppercase",
    color: "var(--text-mute)",
  };

  const agenda = [
    "Live AORBIT™ walkthrough (not slides — the actual platform)",
    "Architecture mapping to your current stack",
    "Data sovereignty and compliance discussion",
    "Deployment options: on-premise, private cloud, hybrid",
    "Q&A with an architect (not a sales rep)",
  ];

  return (
    <main data-screen-label="See AORBIT in action">
      {/* HERO */}
      <section className="page-hero" style={{ borderBottom: "none", paddingBottom: 48 }}>
        <div className="container">
          <div className="eyebrow">Contact · See AORBIT in action</div>
          <h1 style={{ fontSize: "clamp(40px, 5vw, 64px)", maxWidth: "18ch" }}>See AORBIT in action.</h1>
          <p className="lead" style={{ marginTop: 24, maxWidth: "60ch" }}>
            A live walkthrough with an architect. Not a recorded webinar. Not a generic slide deck. We'll map AORBIT to your infrastructure and show you what production private AI looks like.
          </p>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 24 }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.5fr) minmax(0, 1fr)", gap: 64, alignItems: "start" }} className="demo-grid">
            {/* LEFT · FORM */}
            <div className="card" style={{ padding: 40 }}>
              {submitted ? (
                <div>
                  <div className="gd-check" style={{ width: 48, height: 48 }}><IconCheck size={22} /></div>
                  <div className="eyebrow" style={{ fontSize: 10 }}>Sent</div>
                  <h3 style={{ marginTop: 12, fontSize: 28, letterSpacing: "-0.01em" }}>You're in the calendar queue.</h3>
                  {CAL_BOOKING_URL ? (
                    <>
                      <p style={{ color: "var(--text-dim)", marginTop: 16, fontSize: 15, lineHeight: 1.6 }}>
                        Pick a time that works for you. The walkthrough runs 45 minutes with an architect, not a sales rep.
                      </p>
                      <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                        <a className="btn btn-primary" href={CAL_BOOKING_URL} target="_blank" rel="noopener noreferrer">
                          Book a time now <IconArrowRight size={14} className="arrow" />
                        </a>
                        <button className="btn btn-ghost" onClick={() => setSubmitted(false)}>
                          Submit another request <IconArrowRight size={14} className="arrow" />
                        </button>
                      </div>
                    </>
                  ) : (
                    <>
                      <p style={{ color: "var(--text-dim)", marginTop: 16, fontSize: 15, lineHeight: 1.6 }}>
                        We'll be in touch within 1 business day to schedule the walkthrough. You'll hear from an architect, not a sales rep.
                      </p>
                      <div style={{ display: "flex", gap: 12, marginTop: 28, flexWrap: "wrap" }}>
                        <button className="btn btn-ghost" onClick={() => navigate("/aorbit")}>
                          Explore AORBIT in the meantime <IconArrowRight size={14} className="arrow" />
                        </button>
                      </div>
                    </>
                  )}
                  <p style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-mute)", marginTop: 32 }}>
                    // Reference · demo request received
                  </p>
                </div>
              ) : (
              <>
              <div className="eyebrow">REQUEST</div>
              <h3 style={{ marginTop: 16, fontSize: 28, letterSpacing: "-0.01em" }}>Book a walkthrough.</h3>
              <p style={{ color: "var(--text-dim)", marginTop: 12, fontSize: 15, lineHeight: 1.6 }}>
                Six fields. We'll route you straight to an architect's calendar after submission.
              </p>

              <form
                style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 20 }}
                onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}
              >
                {initialLayer && (
                  <div className="form-prefill-note" role="status">
                    <span className="pf-tag">// PRE-FILLED</span>
                    <span> Layer: <strong>{initialLayer}</strong>.</span>
                  </div>
                )}

                {/* Name + Email */}
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="demo-row">
                  <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                    <span style={labelMono}>Full name *</span>
                    <input type="text" required defaultValue={lead.name || ""} placeholder="—" data-hj-suppress data-clarity-mask style={inputBase} />
                  </label>
                  <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                    <span style={labelMono}>Work email *</span>
                    <input type="email" required defaultValue={lead.email || ""} placeholder="you@enterprise.com" data-hj-suppress data-clarity-mask style={inputBase} />
                  </label>
                </div>

                {/* Company */}
                <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span style={labelMono}>Company *</span>
                  <input type="text" required defaultValue={lead.company || ""} placeholder="—" data-hj-suppress data-clarity-mask style={inputBase} />
                </label>

                {/* Role dropdown */}
                <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span style={labelMono}>Role *</span>
                  <select required style={inputBase} defaultValue={lead.role || ""}>
                    <option value="" disabled>Select role</option>
                    <option>CTO</option>
                    <option>VP Engineering</option>
                    <option>CISO</option>
                    <option>Solution Architect</option>
                    <option>DevOps Lead</option>
                    <option>Data Scientist</option>
                    <option>Other</option>
                  </select>
                </label>

                {/* AORBIT layer single select */}
                <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span style={labelMono}>Which AORBIT layer interests you most? *</span>
                  <select required style={inputBase} defaultValue={initialLayer || ""}>
                    <option value="" disabled>Select layer</option>
                    <option>01 Foundation — Private AI</option>
                    <option>02 Intelligence — AIOps</option>
                    <option>03 Frontier — Digital Assets</option>
                    <option>All of them</option>
                  </select>
                </label>

                {/* Current infra single select */}
                <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span style={labelMono}>Current infrastructure *</span>
                  <select required style={inputBase} defaultValue="">
                    <option value="" disabled>Select environment</option>
                    <option>On-premise</option>
                    <option>Cloud (AWS / Azure / GCP)</option>
                    <option>Hybrid</option>
                    <option>Not sure yet</option>
                  </select>
                </label>

                {/* Marketing consent · GDPR: UNCHECKED by default */}
                <label className="consent-row">
                  <input type="checkbox" name="marketing_consent" />
                  <span>
                    I agree to receive occasional architecture briefs and product updates from Doblier. You can unsubscribe in one click, any time.
                  </span>
                </label>

                <button type="submit" className="btn btn-primary" style={{ marginTop: 8, justifyContent: "center" }}>
                  Book a walkthrough <IconArrowRight size={14} className="arrow" />
                </button>

                <p className="form-privacy-note">
                  By submitting this form, you agree to our{" "}
                  <a href="#/privacy" onClick={(e) => { e.preventDefault(); navigate("/privacy"); }}>Privacy Policy</a>
                  {" "}and{" "}
                  <a href="#/terms" onClick={(e) => { e.preventDefault(); navigate("/terms"); }}>Terms of Use</a>.
                </p>

                <p style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-mute)", margin: 0 }}>
                  // After submission → architect calendar (Cal.com)
                </p>
              </form>
              </>
              )}
            </div>

            {/* RIGHT · DEMO AGENDA */}
            <aside style={{ display: "flex", flexDirection: "column", gap: 48, position: "sticky", top: 100 }} className="demo-aside">
              <div>
                <div className="eyebrow">Demo agenda</div>
                <ul style={{ listStyle: "none", padding: 0, marginTop: 20, display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid var(--border)" }}>
                  {agenda.map((x, i) => (
                    <li key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start", color: "var(--text-dim)", fontSize: 15, lineHeight: 1.5, padding: "18px 0", borderBottom: "1px solid var(--border)" }}>
                      <span style={{ color: "var(--teal)", fontFamily: "var(--font-mono)", fontSize: 11, marginTop: 4, minWidth: 24 }}>{String(i + 1).padStart(2, "0")}</span>
                      <span>{x}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div style={{ background: "var(--bg-card)", border: "1px solid var(--border)", padding: 24, borderRadius: 4 }}>
                <div className="eyebrow" style={{ color: "var(--teal)" }}>Duration</div>
                <h3 style={{ marginTop: 12, fontSize: 28, letterSpacing: "-0.01em" }}>45 minutes.</h3>
                <p style={{ color: "var(--text-dim)", fontSize: 14, lineHeight: 1.6, marginTop: 12 }}>
                  Bring your technical team. The session is a conversation, not a pitch — come with the questions your stack actually needs answered.
                </p>
              </div>

              <div>
                <div className="eyebrow">Not ready for a demo?</div>
                <p style={{ color: "var(--text-dim)", fontSize: 14, lineHeight: 1.6, marginTop: 12 }}>
                  Have an architecture conversation first.
                </p>
                <button className="btn btn-ghost" style={{ marginTop: 16 }} onClick={() => navigate("/talk-to-an-architect")}>
                  Talk to an architect <IconArrowRight size={14} className="arrow" />
                </button>
              </div>
            </aside>
          </div>
        </div>
      </section>

      <style>{`
        @media (max-width: 960px) {
          .demo-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
          .demo-aside { position: static !important; }
        }
        @media (max-width: 640px) {
          .demo-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </main>
  );
};

Object.assign(window, {
  Augmentation, Training, Research,
  Banking, DigitalAssets, Government,
  DataSovereignty, Security,
  Blog, Whitepapers,
  About, Careers,
  TalkToArchitect, Demo, PageStub, StubCTA,
});