/* global React, IconArrowRight, IconBank, IconExchange, IconGov, IconShield, IconChip, IconLock, IconDownload, IconGraph, IconCloud */

function CaseStudies({ navigate }) {
  const cases = [
    {
      n: "01",
      Icon: IconBank,
      title: "Private LLM for a major Saudi bank",
      sub: "Agentic AI platform — Saudi Arabia",
      meta: ["Banking & Financial Services", "Saudi Arabia"],
      challenge: "A major Saudi bank needed to deploy AI across operations without sending data outside their infrastructure. Regulatory requirements (SAMA) prohibited external API usage for sensitive operations. The bank had evaluated multiple AI vendors — all required cloud-based processing.",
      built: "Comprehensive Agentic AI platform including private LLMs deployed on NVIDIA GPU infrastructure inside the bank's data center. Multi-model orchestration. Secure internal API gateway. Full compliance with SAMA data localization requirements.",
      outcome: "Production private AI running at banking scale. Zero data exfiltration. AI-powered operations across multiple departments. Architecture designed to absorb new models as they become available.",
    },
    {
      n: "02",
      Icon: IconChip,
      title: "Automated CI/CD for European banking",
      sub: "Digital banking automation — Europe",
      meta: ["Banking & Financial Services", "Europe"],
      challenge: "A European banking group needed fully automated deployment pipelines for digital banking platforms. Regulatory compliance required auditable, repeatable deployments with zero manual intervention in production.",
      built: "Fully automated CI/CD pipelines for core banking deployments. Infrastructure-as-code with compliance gates at every stage. Automated testing, security scanning, and regulatory validation before any deployment reaches production.",
      outcome: "European regulatory compliance maintained across all deployments. Deployment frequency increased from monthly to daily. Zero compliance incidents in production.",
    },
    {
      n: "03",
      Icon: IconCloud,
      title: "Cloud modernization across Asia-Pacific",
      sub: "Kubernetes modernization — Asia-Pacific",
      meta: ["Banking & Financial Services", "Asia-Pacific"],
      challenge: "Multiple banking clients across Asia-Pacific needed to modernize legacy infrastructure to cloud-native architectures. Each had different regulatory requirements, existing technology stacks, and operational maturity levels.",
      built: "Cloud automation and Kubernetes modernization across 10+ banking clients. Secure platform deployments customized to each client's regulatory environment. Container orchestration with enterprise-grade security controls.",
      outcome: "10+ banks modernized. Production Kubernetes environments running core banking workloads. Operational efficiency improvements across all engagements.",
    },
    {
      n: "04",
      Icon: IconGraph,
      title: "AIOps framework",
      sub: "Intelligent observability — Global",
      meta: ["Banking & Financial Services", "Global"],
      challenge: "Operations teams across banking engagements were drowning in alerts. Thousands of daily notifications across multiple observability tools. Manual correlation. Slow incident resolution. Alert fatigue degrading operational quality.",
      built: "Production-grade intelligent observability and auto-remediation framework. AI-powered alert correlation, root cause analysis, and automated runbook execution with human-in-the-loop approval.",
      outcome: "Concept validated and framework productionized. This framework became the foundation for AORBIT™'s Intelligence layer (02 Intelligence).",
    },
  ];

  return (
    <main data-screen-label="Case Studies">
      {/* ===== Hero ===== */}
      <section className="page-hero">
        <div className="container">
          <div className="eyebrow">Why Doblier · Case Studies</div>
          <h1>We don't do POCs. We deploy production systems.</h1>
          <p className="lead">
            20+ banking engagements. Four continents. Every deployment in production. Here's what that looks like.
          </p>
          <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+ engagements</div><div>·</div><div>4 continents</div><div>·</div><div>0 exfiltration events</div><div>·</div><div>Anonymized under NDA</div>
          </div>
        </div>
      </section>

      {/* ===== Case study cards ===== */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="section-num">CS/01</div>
              <div className="eyebrow" style={{ marginTop: 8 }}>Engagements</div>
            </div>
            <h2 style={{ maxWidth: "24ch" }}>Four anonymized engagements. Production-grade. Full briefs gated.</h2>
          </div>

          <div style={{ display: "grid", gap: 24 }}>
            {cases.map((c, i) => (
              <article key={i} className="case-card">
                <div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--teal)", letterSpacing: "0.06em" }}>CS/{c.n}</div>
                  <div className="case-icon" style={{ marginTop: 16 }}>
                    <c.Icon size={28} />
                  </div>
                </div>
                <div>
                  <div className="eyebrow">{c.sub}</div>
                  <h3 style={{ marginTop: 12 }}>{c.title}</h3>
                  <div className="case-meta">
                    {c.meta.map((m, j) => <span key={j}>{j > 0 ? "· " : ""}{m}</span>)}
                  </div>

                  <h4>// Challenge</h4>
                  <p>{c.challenge}</p>

                  <h4>// What Doblier built</h4>
                  <p>{c.built}</p>

                  <h4>// Outcome</h4>
                  <p>{c.outcome}</p>

                  <button className="case-cta" onClick={() => window.openGatedDownload && window.openGatedDownload("banking-case-study", { source: `case-${c.n}` })}>
                    Get the full case study <IconArrowRight size={14} className="arrow" />
                  </button>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* ===== Closing CTA ===== */}
      <section className="section" style={{ background: "#070707" }}>
        <div className="container" style={{ textAlign: "center" }}>
          <div className="eyebrow" style={{ justifyContent: "center", display: "inline-flex" }}>Skip the POC</div>
          <h2 style={{ marginTop: 16, fontSize: "clamp(40px, 5vw, 64px)", maxWidth: "22ch", margin: "16px auto 0" }}>Skip the POC. See what production looks like.</h2>
          <div style={{ marginTop: 40, display: "flex", gap: 12, flexWrap: "wrap", justifyContent: "center" }}>
            <button className="btn btn-primary" onClick={() => navigate("/talk-to-an-architect")}>Talk to an architect <IconArrowRight size={14} className="arrow" /></button>
            <button className="btn btn-ghost" onClick={() => navigate("/aorbit")}>See AORBIT in action <IconArrowRight size={14} className="arrow" /></button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.CaseStudies = CaseStudies;