import type { Metadata } from "next";
import Link from "next/link";
import { CtaBand } from "@/components/cta-band";
import { DashboardMock } from "@/components/dashboard-mock";
import { Eyebrow, Section } from "@/components/section";
import { features } from "@/lib/content";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: "Platform",
  description:
    "The Agentic Cloud platform — agentic runtime, data fabric, ambient mesh, quantum plane, and bio-sync continuity as a single operating surface.",
};

const layers = [
  {
    name: "Agentic runtime",
    body: "Multi-agent collaboration with RLHF, causal inference, prompt chaining, self-consistency, beam search, and Monte Carlo tree search. Constitutional, responsible, and explainable by construction. Vibe-coding is the supported interface. PPoE attests the outcome.",
  },
  {
    name: "Intelligence substrate",
    body: "Generative and discriminative models in one registry: diffusion, flow-matching, consistency models, VQ-VAE through VAE-diffusion, the BERT family through XLNet, and the attention-free runtime — H3 based on Hyena, with Mamba-2 and Griffin, for RWKV-7, with Mamba-2.5.",
  },
  {
    name: "Data fabric",
    body: "Lakes, including dark-matter. Semantic layer, graph RAG, vector database, feature store, metric store, model registry, federated learning, multimodal search, semantic cache, token optimization, and context windowing.",
  },
  {
    name: "Cloud-native mesh",
    body: "Serverless and cloud-native. Sidecar or ambient. Cilium-powered networking, eBPF deep inspection and service map, observability stack, distributed tracing. Declarative, immutable, zero-touch, chaos-engineered. IoT and RTOS where the floor still boots in real time.",
  },
  {
    name: "Spacetime plane",
    body: "Quantum computing, entanglement-ready APIs, post-quantum TLS, spatial computing, metaverse-ready surfaces. Gravitational-wave detection and neutrino-based signaling subscribe like any other SLO. PINN / SPINN / SEPINN / APINN, neural ODE/PDE/SDE, Fourier neural operators.",
  },
  {
    name: "Trust & continuity",
    body: "Zero trust, crypto-agility, ZK proofs for all APIs, FHE, confidential computing enclaves, TEE attestation. Neuralink, DNA-sequencing pipeline, bio-sync, retinal scan, haptics, consciousness-upload. Carbon-aware placement and the ESG dashboard on the same plane.",
  },
];

export default function PlatformPage() {
  return (
    <>
      <Section className="relative overflow-hidden pb-12 pt-16 md:pt-24">
        <div className="ambient pointer-events-none absolute inset-0 opacity-80" />
        <div className="relative">
          <Eyebrow>Platform</Eyebrow>
          <h1 className="mt-4 max-w-3xl font-heading text-4xl leading-tight md:text-6xl">
            An operating surface, not a sidebar.
          </h1>
          <p className="mt-5 max-w-2xl text-base leading-relaxed text-muted-foreground md:text-lg">
            The Agentic Cloud is the layer where intent, constraint, agents,
            and infrastructure stay in the same conversation. You do not
            install a model. You instantiate a fabric.
          </p>
          <div className="mt-8 flex flex-col gap-3 sm:flex-row">
            <Link
              href="/request-access"
              className={cn(buttonVariants(), "h-11 px-5")}
            >
              Request access
            </Link>
            <Link
              href="/fabric"
              className={cn(
                buttonVariants({ variant: "outline" }),
                "h-11 px-5"
              )}
            >
              Full capability fabric
            </Link>
          </div>
        </div>
      </Section>

      <Section className="pt-0">
        <DashboardMock />
      </Section>

      <Section className="border-t border-white/10" id="governance">
        <Eyebrow>Architecture</Eyebrow>
        <h2 className="mt-3 max-w-2xl font-heading text-3xl md:text-5xl">
          Six planes. One sovereignty boundary.
        </h2>
        <div className="mt-12 divide-y divide-white/10 border-y border-white/10">
          {layers.map((layer, i) => (
            <div
              key={layer.name}
              className="grid gap-4 py-8 md:grid-cols-[200px_1fr] md:gap-10"
            >
              <p className="font-mono text-xs text-primary">
                0{i + 1} / {layer.name}
              </p>
              <p className="text-sm leading-relaxed text-muted-foreground md:text-[15px]">
                {layer.body}
              </p>
            </div>
          ))}
        </div>
      </Section>

      <Section>
        <Eyebrow>Capabilities in production language</Eyebrow>
        <h2 className="mt-3 font-heading text-3xl md:text-4xl">
          What the architecture review will actually read.
        </h2>
        <div className="mt-10 grid gap-6 md:grid-cols-2">
          {features.map((f) => (
            <div key={f.title}>
              <h3 className="font-heading text-2xl">{f.title}</h3>
              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
                {f.body}
              </p>
            </div>
          ))}
        </div>
      </Section>

      <CtaBand />
    </>
  );
}