"use client";

import {
  type CSSProperties,
  type FormEvent,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";

type TenantKey = "support" | "operations" | "research";

type DemoResponse = {
  text: string;
  receipt: {
    receipt_id: string;
    tenant_id: string;
    status: string;
    backend: string;
    model: string;
    card_stack: string[];
    stack_digest_sha256: string;
    latency_ms: number;
    queue_ms: number;
    batch_size: number;
    events: Array<Record<string, unknown>>;
    limitation_notes: string[];
  };
};

const tenants: Record<
  TenantKey,
  {
    name: string;
    brief: string;
    prompt: string;
    cards: Array<{ name: string; lane: string; tone: string }>;
  }
> = {
  support: {
    name: "Northstar Support",
    brief: "Private policy + approved support memory",
    prompt: "What is the refund window for a damaged shipment?",
    cards: [
      { name: "Support boundary", lane: "VERIFY / OUTPUT", tone: "cyan" },
      { name: "Support memory", lane: "MEMORY / RESIDUAL", tone: "violet" },
    ],
  },
  operations: {
    name: "Meridian Operations",
    brief: "Signed telemetry + operator confirmation",
    prompt: "Report line 7 temperature and interlock state.",
    cards: [
      { name: "Operations boundary", lane: "WORLD / VERIFY", tone: "amber" },
      { name: "Line telemetry", lane: "WORLD / RESIDUAL", tone: "cyan" },
      { name: "Exact compute", lane: "CONTROL / RESIDUAL", tone: "violet" },
    ],
  },
  research: {
    name: "Atlas Research",
    brief: "Evidence language + deterministic tools",
    prompt: "Calculate 19 * 37 and preserve the evidence boundary.",
    cards: [
      { name: "Evidence boundary", lane: "EVENT / VERIFY", tone: "cyan" },
      { name: "Research vocabulary", lane: "OUTPUT", tone: "violet" },
      { name: "Exact compute", lane: "CONTROL / RESIDUAL", tone: "amber" },
    ],
  },
};

const milestones = [
  {
    n: "01",
    label: "Tenant isolation",
    state: "SHIPPED",
    detail: "Hashed keys, namespaced state, scoped stacks and receipts.",
  },
  {
    n: "02",
    label: "Batch + KV metrics",
    state: "PARTIAL",
    detail: "Compatible microbatches and KV-cached HF generation; scale tests remain.",
  },
  {
    n: "03",
    label: "vLLM path",
    state: "PARTIAL",
    detail: "Governed HTTP + per-request LoRA. Residual worker plugin is next.",
  },
  {
    n: "04",
    label: "Signed cards",
    state: "SHIPPED",
    detail: "Ed25519 packages, strict contents, trusted publisher sets.",
  },
  {
    n: "05",
    label: "Larger workloads",
    state: "PARTIAL",
    detail: "Cross-model receipts retained; 7B/14B production run remains.",
  },
  {
    n: "06",
    label: "Direct comparison",
    state: "PARTIAL",
    detail: "Control-plane benchmark ships; matched RAG/LoRA study remains.",
  },
  {
    n: "07",
    label: "Design partner",
    state: "PILOT READY",
    detail: "Three-tenant pilot is deployable; external criterion remains.",
  },
];

const proof = [
  ["0.0", "null-card max logit delta", "Qwen3-1.7B research receipt"],
  ["20/20 + 20/20", "conflicting skills retained", "merged control forgot 19/20 → 0/20"],
  ["18/18", "control decisions replayed", "same program across Qwen + Ministral"],
  ["23/24", "wire-fed reasoning probes", "external value never appeared in prompt"],
  ["1/20", "end-to-end latent link", "negative result retained"],
  ["19/20", "directly supervised link", "same channel, honest training boundary"],
];

function AmbientSignal() {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const context = canvas.getContext("2d");
    if (!context) return;
    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let width = 1;
    let height = 1;
    let frame = 0;
    let active = true;
    const points = Array.from({ length: 42 }, (_, index) => ({
      x: ((index * 67) % 101) / 101,
      y: ((index * 43) % 97) / 97,
      drift: 0.000025 + (index % 5) * 0.000008,
    }));

    const resize = () => {
      const ratio = Math.min(window.devicePixelRatio || 1, 2);
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = Math.max(1, Math.round(width * ratio));
      canvas.height = Math.max(1, Math.round(height * ratio));
      canvas.style.width = `${width}px`;
      canvas.style.height = `${height}px`;
      context.setTransform(ratio, 0, 0, ratio, 0, 0);
    };

    const draw = (time = 0) => {
      if (!active) return;
      context.clearRect(0, 0, width, height);
      for (let lane = 0; lane < 7; lane += 1) {
        const y = height * (0.16 + lane * 0.11);
        context.beginPath();
        context.moveTo(0, y);
        context.lineTo(width, y);
        context.strokeStyle =
          lane === 3 ? "rgba(80, 247, 229, .08)" : "rgba(126, 187, 207, .035)";
        context.stroke();
      }
      points.forEach((point, index) => {
        if (!reduced) point.x = (point.x + point.drift) % 1;
        const x = point.x * width;
        const y =
          point.y * height +
          Math.sin(point.x * 14 + time * 0.00022 + index) * 10;
        context.beginPath();
        context.arc(x, y, 0.7 + (index % 3) * 0.35, 0, Math.PI * 2);
        context.fillStyle =
          index % 7 === 0
            ? "rgba(255, 202, 93, .30)"
            : "rgba(71, 246, 230, .20)";
        context.fill();
      });
      if (!reduced) frame = window.requestAnimationFrame(draw);
    };

    const onVisibility = () => {
      active = !document.hidden;
      if (active && !reduced) frame = window.requestAnimationFrame(draw);
      else window.cancelAnimationFrame(frame);
    };
    resize();
    draw();
    window.addEventListener("resize", resize, { passive: true });
    document.addEventListener("visibilitychange", onVisibility);
    return () => {
      active = false;
      window.cancelAnimationFrame(frame);
      window.removeEventListener("resize", resize);
      document.removeEventListener("visibilitychange", onVisibility);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      className="ambient-signal"
      aria-label="Animated model bus lanes"
      role="img"
    />
  );
}

function BusVisual({ activeTenant }: { activeTenant: TenantKey }) {
  const activeCards = tenants[activeTenant].cards.length;
  return (
    <div className="bus-visual" aria-label="Backplane card stack and model layers">
      <div className="bus-heading">
        <span>HOST / FROZEN</span>
        <span className="live-dot">RUNTIME LIVE</span>
      </div>
      <div className="layer-rack">
        {Array.from({ length: 28 }, (_, index) => {
          const active = [4, 9, 15, 21].slice(0, activeCards + 1).includes(index);
          return (
            <span
              key={index}
              className={active ? "layer-slot active" : "layer-slot"}
              style={{ "--slot": index } as CSSProperties}
              title={`Decoder slot ${index}`}
            >
              {String(index).padStart(2, "0")}
            </span>
          );
        })}
      </div>
      <div className="bus-lanes">
        {["RESIDUAL", "MEMORY", "CONTROL", "WORLD", "VERIFY"].map(
          (lane, index) => (
            <div className="bus-lane" key={lane}>
              <span>{lane}</span>
              <i style={{ "--lane": index } as CSSProperties} />
            </div>
          ),
        )}
      </div>
      <div className="mounted-stack">
        {tenants[activeTenant].cards.map((card, index) => (
          <div className={`mounted-card ${card.tone}`} key={card.name}>
            <span className="card-port">{String(index + 1).padStart(2, "0")}</span>
            <span>
              <strong>{card.name}</strong>
              <small>{card.lane}</small>
            </span>
            <i aria-hidden="true" />
          </div>
        ))}
      </div>
      <div className="bus-readout">
        <span>BASE WEIGHTS</span>
        <strong>UNCHANGED</strong>
        <span>STACK DIGEST</span>
        <strong>{activeTenant.toUpperCase()}-A17C</strong>
      </div>
    </div>
  );
}

function DemoSandbox() {
  const [tenant, setTenant] = useState<TenantKey>("support");
  const [prompt, setPrompt] = useState(tenants.support.prompt);
  const [result, setResult] = useState<DemoResponse | null>(null);
  const [running, setRunning] = useState(false);
  const [error, setError] = useState("");
  const requestVersion = useRef(0);
  const requestController = useRef<AbortController | null>(null);
  const [history, setHistory] = useState<Array<{tenant:TenantKey;prompt:string;result:DemoResponse}>>([]);
  useEffect(() => () => { requestVersion.current++; requestController.current?.abort(); }, []);
  function downloadReceipt() {
    if(!result)return;
    const url=URL.createObjectURL(new Blob([JSON.stringify(result,null,2)],{type:"application/json"}));
    const a=document.createElement("a");a.href=url;a.download=`backplane-${result.receipt.receipt_id}.json`;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);
  }


  const active = useMemo(() => tenants[tenant], [tenant]);

  const chooseTenant = (next: TenantKey) => {
    requestVersion.current++; requestController.current?.abort(); setRunning(false);
    setTenant(next);
    setPrompt(tenants[next].prompt);
    setResult(null);
    setError("");
  };

  const submit = async (event: FormEvent) => {
    event.preventDefault();
    if(running)return;
    const version=++requestVersion.current;
    const controller=new AbortController();requestController.current=controller;
    const timeout=setTimeout(()=>controller.abort(),20000);
    setRunning(true);
    setResult(null);
    setError("");
    try {
      const response = await fetch("/api/demo/run", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ tenant, prompt }),
        signal:controller.signal,
      });
      const body = await response.json();
      if (!response.ok) throw new Error(body.error || "Runtime request failed.");
      if(version!==requestVersion.current)return;
      if(body.receipt?.tenant_id!==tenant)throw new Error("Runtime returned a different tenant identity.");
      setResult(body);
      setHistory(previous=>[{tenant,prompt,result:body},...previous].slice(0,5));
    } catch (caught) {
      if(version===requestVersion.current)setError(controller.signal.aborted?"Request timed out. You can retry.":caught instanceof Error ? caught.message : "Runtime request failed.");
    } finally {
      clearTimeout(timeout);
      if(version===requestVersion.current)setRunning(false);
    }
  };

  return (
    <div className="sandbox-shell">
      <div className="sandbox-controls">
        <div className="sandbox-label">
          <span className="status-light" />
          LIVE CONTROL-PLANE SANDBOX
        </div>
        <div className="tenant-tabs" role="tablist" aria-label="Pilot tenant">
          {(Object.keys(tenants) as TenantKey[]).map((key) => (
            <button
              type="button"
              role="tab"
              aria-selected={tenant === key}
              className={tenant === key ? "active" : ""}
              key={key}
              onClick={() => chooseTenant(key)}
            >
              {key}
            </button>
          ))}
        </div>
        <div className="tenant-identity">
          <span>ACTIVE TENANT</span>
          <strong>{active.name}</strong>
          <p>{active.brief}</p>
        </div>
        <div className="mini-stack">
          {active.cards.map((card) => (
            <div key={card.name}>
              <i className={card.tone} />
              <span>{card.name}</span>
              <small>{card.lane}</small>
            </div>
          ))}
        </div>
        <form onSubmit={submit}>
          <label htmlFor="pilot-prompt">REQUEST</label>
          <textarea
            id="pilot-prompt"
            value={prompt}
            maxLength={2000}
            onChange={(event) => setPrompt(event.target.value)}
          />
          <button className="run-button" disabled={running || !prompt.trim()}>
            <span>{running ? "Routing request…" : "Run governed request"}</span>
            <span aria-hidden="true">→</span>
          </button>
        </form>
        <p className="sandbox-scope">
          This public endpoint runs the real isolation, policy, scheduling, and
          receipt path against a deterministic evidence backend—not a hidden GPU
          model.
        </p>
      </div>
      <div className="sandbox-output" aria-live="polite">
        {history.length>0?<details className="run-history"><summary>Recent runs in this tab ({history.length})</summary>{history.map((run,index)=><button key={run.result.receipt.receipt_id+index} onClick={()=>{chooseTenant(run.tenant);setPrompt(run.prompt);setResult(run.result);}}>{run.tenant} · {run.result.receipt.status} · {run.prompt.slice(0,45)}</button>)}</details>:null}
        <div className="output-toolbar">
          <span>EXECUTION RECEIPT</span>
          <span>{result?.receipt.status.toUpperCase() || "READY"}</span>
        </div>
        {error ? <div className="output-error">{error}</div> : null}
        {!result && !error ? (
          <div className="output-placeholder">
            <div className="receipt-pulse" />
            <strong>Mount a tenant stack and run one request.</strong>
            <p>
              The response arrives with its ordered cards, stack digest, events,
              timing, and backend limitation notes.
            </p>
          </div>
        ) : null}
        {result ? (
          <div className="receipt">
            <button type="button" className="receipt-download" onClick={downloadReceipt}>Download complete receipt ↓</button>
            <details className="receipt-limits"><summary>Execution boundary</summary>{result.receipt.limitation_notes.map((note,index)=><p key={index}>{note}</p>)}</details>
            <div className="response-copy">
              <span>RESPONSE</span>
              <p>{result.text}</p>
            </div>
            <dl>
              <div>
                <dt>tenant</dt>
                <dd>{result.receipt.tenant_id}</dd>
              </div>
              <div>
                <dt>backend</dt>
                <dd>{result.receipt.model}</dd>
              </div>
              <div>
                <dt>cards</dt>
                <dd>{result.receipt.card_stack.length}</dd>
              </div>
              <div>
                <dt>batch</dt>
                <dd>{result.receipt.batch_size}</dd>
              </div>
              <div>
                <dt>queue</dt>
                <dd>{result.receipt.queue_ms.toFixed(2)} ms</dd>
              </div>
              <div>
                <dt>total</dt>
                <dd>{result.receipt.latency_ms.toFixed(2)} ms</dd>
              </div>
            </dl>
            <div className="digest">
              <span>STACK SHA-256</span>
              <code>{result.receipt.stack_digest_sha256}</code>
            </div>
            <div className="event-trace">
              {result.receipt.events.map((event, index) => (
                <div key={`${String(event.card)}-${index}`}>
                  <span>{String(index + 1).padStart(2, "0")}</span>
                  <strong>{String(event.card)}</strong>
                  <small>{String(event.action)}</small>
                </div>
              ))}
            </div>
          </div>
        ) : null}
      </div>
    </div>
  );
}

export function BackplaneExperience() {
  const [activeTenant, setActiveTenant] = useState<TenantKey>("support");
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const timer = window.setInterval(() => {
      setActiveTenant((current) => {
        const keys: TenantKey[] = ["support", "operations", "research"];
        return keys[(keys.indexOf(current) + 1) % keys.length];
      });
    }, 4200);
    return () => window.clearInterval(timer);
  }, []);

  return (
    <>
      <AmbientSignal />
      <a className="skip-link" href="#main">
        Skip to content
      </a>
      <header className="site-header">
        <a className="brand" href="#top" aria-label="Backplane home">
          <span className="brand-glyph" aria-hidden="true">
            <i />
            <i />
            <i />
          </span>
          <span>
            <strong>Backplane</strong>
            <small>Cyberelf Labs // model runtime</small>
          </span>
        </a>
        <button
          className="menu-toggle"
          type="button"
          aria-label="Toggle navigation"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen((value) => !value)}
        >
          <span />
          <span />
        </button>
        <nav className={menuOpen ? "site-nav open" : "site-nav"}>
          <a href="#runtime" onClick={() => setMenuOpen(false)}>
            Runtime
          </a>
          <a href="#sandbox" onClick={() => setMenuOpen(false)}>
            Live sandbox
          </a>
          <a href="#evidence" onClick={() => setMenuOpen(false)}>
            Evidence
          </a>
          <a href="#roadmap" onClick={() => setMenuOpen(false)}>
            Status
          </a>
        </nav>
        <a
          className="header-source"
          href="https://cyberelf.link/downloads/backplane-source.zip"
          rel="noreferrer"
        >
          Source <span>↗</span>
        </a>
      </header>

      <main id="main">
        <section className="hero section-shell" id="top">
          <div className="hero-copy">
            <p className="eyebrow">
              <span>OPEN-WEIGHT INFRASTRUCTURE</span>
              <span className="release-chip">RUNTIME 0.1</span>
            </p>
            <h1>
              The model stays frozen.
              <em>The system keeps growing.</em>
            </h1>
            <p className="hero-lede">
              Backplane mounts tenant policy, memory, tools, adapters, sensors,
              and bounded activation cards onto one open-weight model—with
              signatures, isolation, batching, telemetry, and rollback.
            </p>
            <div className="hero-actions">
              <a className="primary-button" href="#sandbox">
                Run the control plane <span>↓</span>
              </a>
              <a
                className="ghost-button"
                href="https://cyberelf.link/downloads/backplane-source.zip"
              >
                Inspect the runtime <span>↗</span>
              </a>
            </div>
            <div className="hero-contract">
              <div>
                <span>HOST</span>
                <strong>FROZEN</strong>
              </div>
              <div>
                <span>CARDS</span>
                <strong>VERSIONED</strong>
              </div>
              <div>
                <span>STATE</span>
                <strong>TENANT-SCOPED</strong>
              </div>
              <div>
                <span>FAILURE</span>
                <strong>REVERSIBLE</strong>
              </div>
            </div>
          </div>
          <BusVisual activeTenant={activeTenant} />
          <div className="hero-footnote">
            <span>ONE BASE MODEL</span>
            <i />
            <span>MANY GOVERNED SYSTEMS</span>
          </div>
        </section>

        <section className="problem section-shell" aria-labelledby="problem-title">
          <p className="section-number">01 / THE MISSING LAYER</p>
          <div className="section-intro split">
            <h2 id="problem-title">
              Models are shipped like files.
              <em>Products need systems.</em>
            </h2>
            <p>
              Today, capability usually means another prompt, another retrieval
              path, another fine-tune, or another model copy. Those pieces work.
              What is missing is one enforceable runtime contract for composing
              them after deployment.
            </p>
          </div>
          <div className="contrast-grid">
            <article>
              <span className="contrast-tag dim">TOKEN MIDDLEWARE</span>
              <h3>Everything through the front door</h3>
              <p>
                Policy, memory, sensor state, and tool results become prompt
                content. Every request pays the context cost.
              </p>
              <div className="token-stream">
                <i />
                <i />
                <i />
                <i />
                <i />
                <i />
              </div>
            </article>
            <article>
              <span className="contrast-tag dim">MONOLITHIC ADAPTATION</span>
              <h3>Every update touches shared behavior</h3>
              <p>
                Sequential tuning entangles tenants and skills. Rollback becomes
                checkpoint management.
              </p>
              <div className="weight-blocks">
                <i />
                <i />
                <i />
                <i className="fault" />
                <i />
              </div>
            </article>
            <article className="highlight">
              <span className="contrast-tag">BACKPLANE</span>
              <h3>Mount capability as governed state</h3>
              <p>
                Route an ordered card stack per tenant. Enforce what it may read,
                write, retain, and spend.
              </p>
              <div className="card-flow">
                <i />
                <i />
                <i />
                <strong>HOST</strong>
              </div>
            </article>
          </div>
        </section>

        <section className="runtime section-shell" id="runtime">
          <p className="section-number">02 / THE PRODUCT</p>
          <div className="section-intro">
            <h2>
              A control plane inside
              <em>the model lifecycle.</em>
            </h2>
            <p>
              Backplane does not claim to invent hooks, LoRA, memory, or
              guardrails. It gives them one governed execution and evidence
              boundary.
            </p>
          </div>
          <div className="runtime-stack">
            <article className="runtime-card runtime-core">
              <span>01</span>
              <h3>Runtime</h3>
              <p>
                Resolve the tenant, verify its stack, batch only compatible
                requests, execute against the declared backend, emit a receipt.
              </p>
              <ul>
                <li>OpenAI-compatible API</li>
                <li>HF + KV cache path</li>
                <li>vLLM / LoRA routing</li>
                <li>Scoped state + receipts</li>
              </ul>
            </article>
            <article className="runtime-card">
              <span>02</span>
              <h3>Card SDK</h3>
              <p>
                Package capability as a signed manifest and bounded JSON
                configuration—not executable code hiding behind a permission
                label.
              </p>
              <div className="code-fragment">
                <code>&quot;writes&quot;: [&quot;VERIFY&quot;, &quot;OUTPUT&quot;]</code>
                <code>&quot;max_latency_ms&quot;: 50</code>
                <code>&quot;signature&quot;: &quot;Ed25519&quot;</code>
              </div>
            </article>
            <article className="runtime-card">
              <span>03</span>
              <h3>Workbench</h3>
              <p>
                Inspect stacks, model slots, events, limits, digests, and causal
                interventions before a capability reaches production.
              </p>
              <div className="meter-array">
                {[0.22, 0.48, 0.71, 0.34, 0.86, 0.59, 0.92, 0.42].map(
                  (value, index) => (
                    <i
                      key={index}
                      style={{ "--meter": value } as CSSProperties}
                    />
                  ),
                )}
              </div>
            </article>
            <article className="runtime-card">
              <span>04</span>
              <h3>Fleet control</h3>
              <p>
                Roll out one card version, watch its effects, compare receipts,
                then detach or roll back without replacing the base model.
              </p>
              <div className="fleet">
                <i className="online" />
                <i className="online" />
                <i className="canary" />
                <i />
                <i />
              </div>
            </article>
          </div>
        </section>

        <section className="sandbox section-shell" id="sandbox">
          <p className="section-number">03 / RUN IT</p>
          <div className="section-intro split">
            <h2>
              One runtime.
              <em>Three incompatible tenants.</em>
            </h2>
            <p>
              Switch tenants and watch the ordered card stack, response, event
              trace, and stack digest change. These are fictional pilot
              scenarios, not customer claims.
            </p>
          </div>
          <DemoSandbox />
        </section>

        <section className="evidence section-shell" id="evidence">
          <p className="section-number">04 / EVIDENCE, NOT VIBES</p>
          <div className="section-intro split">
            <h2>
              Keep the gain.
              <em>Keep the negative result.</em>
            </h2>
            <p>
              These are indexed receipts from the separate research workspace.
              They motivate the product; they are not presented as fresh
              production benchmarks.
            </p>
          </div>
          <div className="proof-grid">
            {proof.map(([value, label, note], index) => (
              <article className={index === 4 ? "negative" : ""} key={label}>
                <span>{String(index + 1).padStart(2, "0")}</span>
                <strong>{value}</strong>
                <h3>{label}</h3>
                <p>{note}</p>
              </article>
            ))}
          </div>
          <div className="evidence-boundary">
            <span>PROVENANCE BOUNDARY</span>
            <p>
              Current repository tests validate isolation, packaging, scheduling,
              API behavior, and the public sandbox. Model capability receipts
              remain separately labeled until re-run.
            </p>
            <a href="https://github.com/CarlSR9001/backplane/tree/main/evidence">
              Read the receipts ↗
            </a>
          </div>
        </section>

        <section className="roadmap section-shell" id="roadmap">
          <p className="section-number">05 / SEVEN DILIGENCE GATES</p>
          <div className="section-intro">
            <h2>
              What ships.
              <em>What still has to earn it.</em>
            </h2>
          </div>
          <div className="milestone-list">
            {milestones.map((item) => (
              <article key={item.n}>
                <span>{item.n}</span>
                <h3>{item.label}</h3>
                <p>{item.detail}</p>
                <strong
                  className={
                    item.state === "SHIPPED"
                      ? "shipped"
                      : item.state === "PILOT READY"
                        ? "pilot"
                        : "partial"
                  }
                >
                  {item.state}
                </strong>
              </article>
            ))}
          </div>
        </section>

        <section className="wedge section-shell">
          <p className="section-number">06 / THE WEDGE</p>
          <div className="wedge-panel">
            <div>
              <p className="eyebrow">FIRST BUYER</p>
              <h2>
                One private model.
                <em>Every tenant gets its own system.</em>
              </h2>
              <p>
                Backplane starts with AI infrastructure teams serving open-weight
                models on-premises or in private clouds. Mount a different
                policy, memory, skill, adapter, and tool stack per customer
                without copying the host.
              </p>
              <div className="wedge-actions">
                <a
                  className="primary-button"
                  href="mailto:justin@cyberelf.link?subject=Backplane%20design%20partner"
                >
                  Propose a design-partner workload <span>↗</span>
                </a>
                <a
                  className="text-link"
                  href="https://github.com/CarlSR9001/backplane/blob/main/docs/PILOT.md"
                >
                  Read the pilot contract
                </a>
              </div>
            </div>
            <div className="tenant-orbit" aria-label="One host with isolated tenants">
              <span className="orbit-host">FROZEN HOST</span>
              <i className="orbit orbit-a">
                <b>POLICY</b>
              </i>
              <i className="orbit orbit-b">
                <b>MEMORY</b>
              </i>
              <i className="orbit orbit-c">
                <b>SENSOR</b>
              </i>
              <i className="orbit orbit-d">
                <b>SKILL</b>
              </i>
            </div>
          </div>
        </section>

        <section className="final-cta section-shell">
          <span className="final-kicker">BACKPLANE // CYBERELF LABS</span>
          <h2>
            Stop rebuilding the model.
            <em>Build the system around it.</em>
          </h2>
          <div>
            <a
              className="primary-button"
              href="https://cyberelf.link/downloads/backplane-source.zip"
            >
              Clone Backplane <span>↗</span>
            </a>
            <a className="ghost-button" href="mailto:justin@cyberelf.link">
              justin@cyberelf.link
            </a>
          </div>
        </section>
      </main>

      <footer>
        <div className="footer-brand">
          <strong>BACKPLANE</strong>
          <span>GOVERNED EXTENSION RUNTIME</span>
        </div>
        <div className="footer-links">
          <a href="https://cyberelf.link/">Cyberelf Labs</a>
          <a href="https://cyberelf.link/downloads/backplane-source.zip">Release source ↓</a>
          <a href="/api/docs">API</a>
        </div>
        <p>AGPL-3.0 core // commercial licensing available</p>
      </footer>
    </>
  );
}

