/* global React, IconArrowRight, IconDownload, IconCheck, IconX, DataFlowDiagram */

function ArchitectureGap({ navigate }) {
  const openGap = () => window.openGatedDownload && window.openGatedDownload("architecture-gap");
  const sections = [
    { id: "gap-defined", label: "The Gap Defined" },
    { id: "proof",       label: "The Proof" },
    { id: "mistakes",    label: "What Vendors Get Wrong" },
    { id: "answer",      label: "How Doblier Closes It" },
  ];

  return (
    <main data-screen-label="The Architecture Gap">
      {/* ===== 1. Hero ===== */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Why Doblier · The Architecture Gap™</div>
          <h1>The Architecture Gap.</h1>
          <p className="lead">
            The industry has more AI capability than it can deploy. Not because the technology isn't ready. Because the architecture isn't there to hold it.
          </p>
          <div style={{ display: "flex", gap: 12, marginTop: 40, flexWrap: "wrap" }}>
            <button className="btn btn-primary" onClick={openGap}>
              Download the whitepaper <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 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>42 pages</div><div>·</div><div>Format: PDF</div><div>·</div><div>Audience: CTO · CIO · Architect</div><div>·</div><div>Updated Q2 2026</div>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="two-col">
            <div>
              <div className="toc">
                <h5>// CONTENTS</h5>
                {sections.map((s, i) => (
                  <a key={s.id} href={`#${s.id}`}>{String(i + 1).padStart(2, "0")} · {s.label}</a>
                ))}
              </div>
            </div>
            <div>
              {/* ===== 2. The gap defined ===== */}
              <article id="gap-defined">
                <div className="eyebrow">01 · The gap defined</div>
                <h2 style={{ marginTop: 16 }}>AI capability is accelerating. Enterprise architecture isn't keeping up.</h2>
                <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, marginTop: 24 }}>
                  Every quarter, frontier models get more powerful. New frameworks launch. New capabilities emerge. Enterprises hear the promise. They start POCs. They build demos. They show the board a slide deck.
                </p>
                <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, marginTop: 24 }}>
                  Then nothing ships.
                </p>
                <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, marginTop: 24 }}>
                  The POC can't connect to the ERP. Compliance won't sign off on external API calls. The operations team doesn't know how to monitor it. The model needs retraining and nobody planned for that. The demo dies in a staging environment, and the team moves on to the next shiny object.
                </p>
                <div className="wp-pull">
                  This isn't a technology failure. It's an architecture failure.
                </div>
                <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7 }}>
                  The gap between what AI can do and what enterprises can actually deploy in production — that's The Architecture Gap.
                </p>
              </article>

              {/* ===== 3. The proof — third-party stats ===== */}
              <article id="proof" style={{ marginTop: 96 }}>
                <div className="eyebrow">02 · The proof</div>
                <h2 style={{ marginTop: 16 }}>The numbers tell the story.</h2>
                <p style={{ color: "var(--text-dim)", fontSize: 15, fontFamily: "var(--font-mono)", marginTop: 16, letterSpacing: "0.02em" }}>
                  // Third-party data. Sourced from VentureBeat and NTT DATA — not from Doblier.
                </p>

                <div className="ag-proof" style={{ marginTop: 48 }}>
                  {[
                    { n: "5%",  src: "VentureBeat", t: "GPU utilization across enterprise AI", b: "Enterprises spent $401B on AI infrastructure. 95% of that capacity sits idle. They bought the hardware but not the architecture to use it." },
                    { n: "95%", src: "NTT DATA",    t: "Say private AI is important",          b: "Almost every enterprise knows they need private AI. But knowing isn't building." },
                    { n: "29%", src: "NTT DATA",    t: "Are actually prioritizing it",         b: "Less than a third are doing something about it. The gap between intention and execution is architecture." },
                    { n: "60%", src: "Industry",    t: "Cite cross-border data restrictions",  b: "Data can't leave. But most AI tools require it to. The restriction isn't going away. The architecture must adapt." },
                  ].map((s, i) => (
                    <div key={i} className="ag-proof-row">
                      <div className="ag-proof-num">{s.n}</div>
                      <div className="ag-proof-text">
                        <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
                          <h4 style={{ fontSize: 22, letterSpacing: "-0.01em" }}>{s.t}</h4>
                          <span style={{ fontFamily: "var(--font-mono)", fontSize: 10, letterSpacing: "0.08em", color: "var(--text-mute)", textTransform: "uppercase" }}>// {s.src}</span>
                        </div>
                        <p style={{ color: "var(--text-dim)", marginTop: 10, lineHeight: 1.6 }}>{s.b}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </article>

              {/* ===== 4. What most vendors get wrong ===== */}
              <article id="mistakes" style={{ marginTop: 96 }}>
                <div className="eyebrow">03 · What most vendors get wrong</div>
                <h2 style={{ marginTop: 16 }}>The three mistakes that create The Architecture Gap.</h2>

                <div className="grid-1" style={{ marginTop: 40, display: "grid", gap: 16 }}>
                  {[
                    {
                      n: "M/01",
                      t: "They sell tools, not architecture.",
                      b: "An LLM is a component. An agent is a component. A RAG pipeline is a component. Without architecture to hold them together, they're science projects. Components don't become systems by accident. They become systems by design.",
                    },
                    {
                      n: "M/02",
                      t: "They assume data can leave.",
                      b: "Most AI tools require sending data to external APIs. For banks, governments, and regulated enterprises, this is a non-starter. Not a preference — a hard constraint. Any vendor that doesn't design for data sovereignty is designing for a customer that doesn't exist.",
                    },
                    {
                      n: "M/03",
                      t: "They build for today's model, not tomorrow's.",
                      b: "Companies deploying open-source models on-premises think they've solved the problem. They're running 2024 intelligence in 2026. Frontier models keep advancing. No open-source model matches them. The architecture must evolve with the frontier, not lock into a snapshot.",
                    },
                  ].map((m, i) => (
                    <div key={i} className="card" style={{ padding: 32, display: "grid", gridTemplateColumns: "120px 1fr", gap: 32, alignItems: "start" }}>
                      <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--teal)", letterSpacing: "0.06em" }}>{m.n}</div>
                      <div>
                        <h4 style={{ fontSize: 24, letterSpacing: "-0.015em" }}>{m.t}</h4>
                        <p style={{ color: "var(--text-dim)", marginTop: 16, lineHeight: 1.7 }}>{m.b}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </article>

              {/* ===== 5. How Doblier closes the gap ===== */}
              <article id="answer" style={{ marginTop: 96 }}>
                <div className="eyebrow">04 · How Doblier closes the gap</div>
                <h2 style={{ marginTop: 16 }}>Architecture that absorbs change.</h2>
                <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, marginTop: 24 }}>
                  AORBIT™ was built by a team that has deployed AI in production inside 20+ banks. Not POCs. Not demos. Production systems that run today, at scale, across Saudi Arabia, Europe, and Asia-Pacific.
                </p>
                <p style={{ color: "var(--text-dim)", fontSize: 17, lineHeight: 1.7, marginTop: 24 }}>
                  Every lesson from those deployments is encoded in the architecture. Data sovereignty by design. Layers that evolve independently. Compliance at every level. Components that plug in without breaking what's already running.
                </p>
                <div className="wp-pull">
                  That's what closing The Architecture Gap looks like.
                </div>

                <div style={{ marginTop: 48, display: "flex", gap: 12, flexWrap: "wrap" }}>
                  <button className="btn btn-primary" onClick={openGap}>Download the whitepaper <IconDownload size={14} /></button>
                  <button className="btn btn-ghost" onClick={() => navigate("/aorbit")}>Explore AORBIT <IconArrowRight size={14} className="arrow" /></button>
                  <button className="btn btn-ghost" onClick={() => navigate("/talk-to-an-architect")}>Talk to an architect <IconArrowRight size={14} className="arrow" /></button>
                </div>
              </article>
            </div>
          </div>
        </div>
      </section>

      {/* ===== 6. Closing CTA ===== */}
      <section className="section" style={{ background: "#070707" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <div className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>Close the gap</div>
          <h2 style={{ marginTop: 16, fontSize: "clamp(40px, 5vw, 64px)", maxWidth: "20ch", margin: "16px auto 0" }}>Close The Architecture Gap.</h2>
          <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <button className="btn btn-primary" onClick={openGap}>Download the whitepaper <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>
    </main>
  );
}

window.ArchitectureGap = ArchitectureGap;
