Black Box: X-ray

"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import { BlackBox, type BlackBoxFace } from "@/components/ui/black-box";

// A secrets vault for AI agents: sealed to them, see-through to you. The switch flips the box
// between solid and glass.
const FACES: BlackBoxFace[] = [
  {
    id: "seal",
    label: "Encrypted",
    detail: "AES-256 per workspace, with the keys in a hardware module you rotate yourself.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
        <rect x="5" y="10.5" width="14" height="9.5" rx="2" />
        <path d="M8.5 10.5V8a3.5 3.5 0 0 1 7 0v2.5" />
      </svg>
    ),
  },
  {
    id: "scope",
    label: "Scoped",
    detail: "An agent gets a token for one tool, for one run. Then it's gone.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
        <circle cx="8.5" cy="12" r="3.5" />
        <path d="M12 12h8M17 12v3M20 12v2" />
      </svg>
    ),
  },
  {
    id: "log",
    label: "Logged",
    detail: "Every read is signed and in your SIEM within a second.",
    icon: (
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
        <path d="M7 4h7l4 4v12H7z" />
        <path d="M14 4v4h4M10 13h5M10 16.5h3" />
      </svg>
    ),
  },
];

const MODES = [
  { id: "solid", label: "Sealed" },
  { id: "glass", label: "X-ray" },
] as const;

export function BlackBoxXrayDemo() {
  const [mode, setMode] = React.useState<"solid" | "glass">("solid");

  return (
    <div className="w-full max-w-3xl text-center [--black-box-light:#19d48b]">
      <h3 className="text-2xl font-semibold tracking-[-0.03em] text-balance text-zinc-950 dark:text-white">
        Shut to your agents. Glass to you.
      </h3>
      <p className="mx-auto mt-2 max-w-md text-sm leading-6 text-pretty text-zinc-500 dark:text-zinc-400">
        Keel keeps every credential your agents use in one sealed box, and lets you see straight through it.
      </p>

      <div
        role="group"
        aria-label="View"
        className="relative mx-auto mt-6 grid w-fit grid-cols-2 rounded-full bg-zinc-950/[0.05] p-1 text-[13px] font-medium ring-1 ring-zinc-950/[0.06] ring-inset dark:bg-white/[0.06] dark:ring-white/10"
      >
        <span
          aria-hidden
          className={cn(
            "absolute inset-y-1 left-1 w-[calc(50%-4px)] rounded-full bg-white shadow-sm ring-1 ring-zinc-950/[0.06] transition-transform duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] dark:bg-zinc-700 dark:ring-white/10",
            mode === "glass" && "translate-x-full",
          )}
        />
        {MODES.map((option) => (
          <button
            key={option.id}
            type="button"
            aria-pressed={mode === option.id}
            onClick={() => setMode(option.id)}
            className={cn(
              "relative rounded-full px-5 py-1.5 transition-colors duration-200 outline-none focus-visible:ring-2 focus-visible:ring-[#19d48b]",
              mode === option.id ? "text-zinc-950 dark:text-white" : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200",
            )}
          >
            {option.label}
          </button>
        ))}
      </div>

      <BlackBox faces={FACES} material={mode} className="mt-2" aria-label="How Keel keeps credentials" />
    </div>
  );
}