UI Patterns

import {
  useCallback,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type ReactNode,
} from "react";
import ThinkingOrb, { type OrbState } from "../thinking-orbs/snippet";
import LiquidMetal from "../liquid-metal/snippet";

/**
 * AgentThinkingChat — a live agent-chat surface that narrates its own thinking.
 *
 * It is a real, interactive chat: type a message (or pick a starter), choose a
 * model, attach files, hit send — and the agent plays one full turn. That turn
 * stitches together five best-in-class micro-interactions so the whole
 * lifecycle of a streamed answer — think → research → compose → answer — reads
 * at a glance:
 *
 *   1. ThinkingOrb          the dotted status avatar, re-tuned per phase
 *                           (weaving while thinking, searching while
 *                           researching, composing while it writes).
 *   2. ThinkingStates       transitions.dev shimmer text that swaps one line
 *                           for the next ("Collecting context…" → "Reading
 *                           relevant files…") — the outgoing copy blurs up as
 *                           the incoming one rises from below.
 *   3. ToolCallStack        every tool call collapses into one stacked
 *                           surface — the latest call plus a count of the
 *                           rest; click to expand the full trace, newest first.
 *   4. SpinningReel         transitions.dev digit reel: a counter that spins
 *                           up to the number of files scanned, with a
 *                           vertical-only motion blur that decays per column.
 *   5. StreamingText        transitions.dev word-by-word reveal: the final
 *                           answer resolves through opacity + a small blur,
 *                           delivered as a left-side assistant message under
 *                           the chosen model's avatar and a "Thought for Ns".
 *
 * …with the working card framed by the LiquidMetal ring while the agent works.
 *
 * The shell around it — the composer (message field, attach, model picker,
 * send), the starter chips, the attachment chips and the Replay control — is a
 * working chat UI, not a mock: send interrupts a turn in flight, the model you
 * pick becomes the reply's avatar, and Replay re-plays the last prompt.
 *
 * Companion snippets: this composes the glossary's own `ThinkingOrb`
 * (thinking-orbs) and `LiquidMetal` (liquid-metal). Copy those two first, then
 * fix the two import paths at the top. Everything else — the four
 * transitions.dev interactions, the chat shell and the phase controller —
 * lives in this file.
 *
 * It honours prefers-reduced-motion by skipping straight to the finished
 * answer.
 *
 * Deps: react + tailwindcss (plus the two companion snippets).
 */

/* ---- tunables (transitions.dev defaults) ---------------------------------- */

const THINK_HOLD = 1650; // how long each shimmer line holds before it swaps
const THINK_SWAP = 150;

const STREAM_GAP = 55; // ms between streamed words
const STREAM_FADE = 350;

const REEL_DUR = 1400;
const REEL_CELL = 28; // px per digit cell
const REEL_STAGGER = 90;
const REEL_SPIN_BLUR = 3;
const REEL_EASE = "cubic-bezier(0.16, 1, 0.3, 1)";

/* turn timeline (ms) — the scripted phase durations */
const T_THINK = 2600; // think phase before research begins
const T_STEP = 620; // gap between each context banner
const T_LEAD = 350; // delay before the first banner appears
const T_TAIL = 500; // hold after the last banner before composing
const T_COMPOSE = 1100; // compose phase before the answer streams

const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);
const cx = (...parts: (string | false | null | undefined)[]) =>
  parts.filter(Boolean).join(" ");

/* ---- scripted turn -------------------------------------------------------- */

export interface ContextSource {
  /** File / resource name shown in the stacked banner. */
  name: string;
  /** Short action tag, e.g. "read", "grep" or "mcp". */
  tag: string;
  /**
   * Optional leading icon. Omit for a plain file read (a teal dot); set to
   * "mcp" for a Model Context Protocol tool call (a mono accent glyph), or an
   * app key ("gmail" / "seal") for a connected-tool call (a white app badge).
   */
  icon?: keyof typeof TOOL_ICONS;
}

/**
 * Inline SVG marks for MCP tool calls. `mcp` is the Model Context Protocol
 * glyph (drawn in currentColor so it tints to the accent); `gmail` and `seal`
 * are connected-app logos rendered on a white badge.
 */
export const TOOL_ICONS = {
  mcp: '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24"><path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"/><path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"/></svg>',
  gmail:
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#4caf50" d="M45 16.2l-5 2.75-5 4.75L35 40h7c1.657 0 3-1.343 3-3V16.2z"/><path fill="#1e88e5" d="M3 16.2l3.614 1.71L13 23.7V40H6c-1.657 0-3-1.343-3-3V16.2z"/><polygon fill="#e53935" points="35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17"/><path fill="#c62828" d="M3 12.298V16.2l10 7.5V11.2L9.876 8.859C9.132 8.301 8.228 8 7.298 8 4.924 8 3 9.924 3 12.298z"/><path fill="#fbc02d" d="M45 12.298V16.2l-10 7.5V11.2l3.124-2.341C38.868 8.301 39.772 8 40.702 8 43.076 8 45 9.924 45 12.298z"/></svg>',
  seal: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="14 11 483 483"><style>.o{stroke:#0A0E14;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}.n{stroke:#0A0E14;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}</style><rect width="512" height="512" fill="#F9F9F9"/><g transform="translate(-28 0)"><g transform="translate(58 190) rotate(-18)"><rect x="0" y="0" width="92" height="58" rx="7" fill="#F9F9F9" class="o"/><path d="M6 8 L46 36 L86 8" fill="none" class="n"/></g><path d="M385 280C420 272 437 244 443 212C450 180 470 178 480 198C488 214 479 231 464 243C482 238 503 242 508 258C513 276 495 290 476 294C459 298 444 296 432 291C427 315 416 337 397 351C389 357 379 354 376 345C372 333 379 314 392 298C386 293 383 287 385 280 Z" fill="#9BA4A6" class="o"/><path d="M167 278C137 270 114 252 106 229C98 207 104 189 118 181C134 172 151 180 160 195C170 210 168 226 160 239C174 242 184 249 190 260C195 270 185 282 167 278 Z" fill="#9BA4A6" class="o"/><path d="M162 194C175 165 196 148 222 148H332C357 148 377 165 390 194H367C351 194 340 201 330 214L317 231C309 241 299 246 286 246H276C263 246 253 241 245 231L232 214C222 201 211 194 195 194Z" fill="#0A0E14"/><rect x="226" y="106" width="128" height="92" rx="10" fill="#F9F9F9" class="o"/><g><rect x="191" y="136" width="150" height="99" rx="12" fill="#F9F9F9" class="o"/><path d="M199 146 L266 195 L333 146" fill="none" class="o"/></g><path d="M156 194H204C218 194 228 200 237 212L250 229C258 240 268 245 281 245H291C304 245 314 240 322 229L335 212C344 200 354 194 368 194H402V317C402 353 376 375 340 375H205C169 375 143 353 143 317V214C143 203 148 197 156 194 Z" fill="#9BA4A6" class="o"/><path d="M384 321C403 328 420 343 428 360C435 375 431 390 419 397C404 405 387 399 377 385C368 372 366 359 371 348C363 342 362 332 367 326C371 321 377 318 384 321 Z" fill="#9BA4A6" class="o"/><ellipse cx="229" cy="277" rx="13" ry="23" fill="#0A0E14"/><ellipse cx="307" cy="277" rx="13" ry="23" fill="#0A0E14"/><circle cx="268" cy="304" r="9" fill="#0A0E14"/><path d="M252 322 Q268 338 284 322" fill="none" class="n"/><path d="M207 309 H188 M209 321 L190 328" fill="none" class="n"/><path d="M319 307 H336 M317 319 L334 325" fill="none" class="n"/></g><circle cx="439" cy="115" r="11" fill="#C3FFFD"/></svg>',
} as const;

export interface AgentTurn {
  /** Shimmer lines shown while the agent "thinks" (before research). */
  thinking: string[];
  /** Shimmer lines shown while it "researches" / collects context. */
  researching: string[];
  /** Context sources that stack up during research. */
  context: ContextSource[];
  /** Number the reel spins to (e.g. files scanned). */
  scanned: number;
  /** The final answer, streamed word by word. */
  answer: string;
}

export const DEFAULT_TURN: AgentTurn = {
  thinking: ["Thinking…", "Reading your message…", "Planning the approach…"],
  researching: [
    "Collecting context…",
    "Searching the codebase…",
    "Calling connected tools…",
    "Reading relevant files…",
    "Connecting the pieces…",
  ],
  context: [
    { name: "registry.ts", tag: "read" },
    { name: "App.tsx", tag: "read" },
    { name: "gmail · search", tag: "mcp", icon: "gmail" },
    { name: "export-ui-patterns.ts", tag: "grep" },
    { name: "sealgate · call_tool", tag: "mcp", icon: "seal" },
    { name: "PatternDetail.tsx", tag: "read" },
    { name: "mcp · list_tools", tag: "mcp", icon: "mcp" },
  ],
  scanned: 128,
  answer:
    "Drop a folder under src/ui-patterns/<slug>/ with three files — meta.ts, snippet.tsx and Demo.tsx. The registry auto-discovers it, so the /ui page picks it up with no wiring, and the build-time export re-derives the agent artifacts from the same folder.",
};

/** The default prompt used when a turn plays without a typed message. */
export const DEFAULT_PROMPT = "How do I add a new pattern to the /ui glossary?";

/** Starter chips shown in the empty state. */
export const EXAMPLES = [
  "Summarize the auth flow in this repo",
  "Add a dark-mode toggle to the header",
  "Find and fix the failing tests",
];

/**
 * Selectable models for the composer's picker. Each `icon` is an inline SVG
 * (external images are blocked in copy-paste contexts). The picked model
 * becomes the reply's avatar.
 */
export interface ModelOption {
  name: string;
  icon: string;
}

export const MODELS: ModelOption[] = [
  {
    name: "Claude Opus 4.8",
    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="256" height="257" preserveAspectRatio="xMidYMid" viewBox="0 0 256 257"><path fill="#D97757" d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"/></svg>',
  },
  {
    name: "GPT-5",
    icon: '<svg xmlns="http://www.w3.org/2000/svg" width="256" height="260" preserveAspectRatio="xMidYMid" viewBox="0 0 256 260"><path fill="currentColor" d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"/></svg>',
  },
  {
    name: "Grok 4",
    icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><path d="M395.479 633.828L735.91 381.105C752.599 368.715 776.454 373.548 784.406 392.792C826.26 494.285 807.561 616.253 724.288 699.996C641.016 783.739 525.151 802.104 419.247 760.277L303.556 814.143C469.49 928.202 670.987 899.995 796.901 773.282C896.776 672.843 927.708 535.937 898.785 412.476L899.047 412.739C857.105 231.37 909.358 158.874 1016.4 10.6326C1018.93 7.11771 1021.47 3.60279 1024 0L883.144 141.651V141.212L395.392 633.916"/><path d="M325.226 695.251C206.128 580.84 226.662 403.776 328.285 301.668C403.431 226.097 526.549 195.254 634.026 240.596L749.454 186.994C728.657 171.88 702.007 155.623 671.424 144.2C533.19 86.9942 367.693 115.465 255.323 228.382C147.234 337.081 113.244 504.215 171.613 646.833C215.216 753.423 143.739 828.818 71.7385 904.916C46.2237 931.893 20.6216 958.87 0 987.429L325.139 695.339"/></svg>',
  },
];

type Phase = "idle" | "thinking" | "research" | "composing" | "answer";

const ORB_FOR: Record<Exclude<Phase, "idle" | "answer">, OrbState> = {
  thinking: "weaving",
  research: "searching",
  composing: "composing",
};

/* ---- scoped styles (one <style> for every instance) ----------------------- */

const STYLE_ID = "agent-thinking-chat-styles";
const CSS = `
.atc-root {
  --think-hold: ${THINK_HOLD}ms;
  --think-swap: ${THINK_SWAP}ms;
  --think-distance: 8px;
  --think-blur: 2px;
  --think-shimmer: 2000ms;
  --think-base: #7f8b8d;
  --think-highlight: #e0fffe;
  --think-ease: ease-in-out;

  --stream-fade: ${STREAM_FADE}ms;
  --stream-blur: 1px;
  --stream-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --stack-open: 300ms;
  --stack-ease: cubic-bezier(0.22, 1, 0.36, 1);

  --reel-cell: ${REEL_CELL}px;
}

/* Thinking states -------------------------------------------------------- */
.atc-root .t-think { position: relative; display: inline-block; text-align: left; }
.atc-root .t-think-sizer { display: block; visibility: hidden; white-space: nowrap; }
.atc-root .t-think-text {
  position: absolute; top: 0; left: 0; right: 0; display: block;
  color: var(--think-base); white-space: nowrap;
  transform: translateY(0); filter: blur(0); opacity: 1;
  transition:
    transform var(--think-swap) var(--think-ease),
    filter var(--think-swap) var(--think-ease),
    opacity var(--think-swap) var(--think-ease);
  will-change: transform, filter, opacity;
}
.atc-root .t-think-text::before {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg,
    transparent 0%, transparent 40%,
    var(--think-highlight) 50%, transparent 60%, transparent 100%);
  background-size: 400% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: atc-think-shimmer var(--think-shimmer) linear infinite;
}
@keyframes atc-think-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
.atc-root .t-think-text.is-exit {
  transform: translateY(calc(var(--think-distance) * -1));
  filter: blur(var(--think-blur)); opacity: 0;
}
.atc-root .t-think-text.is-enter-start {
  transition: none; transform: translateY(var(--think-distance));
  filter: blur(var(--think-blur)); opacity: 0;
}

/* Streaming text --------------------------------------------------------- */
.atc-root .t-stream-w {
  opacity: 0; filter: blur(var(--stream-blur));
  transition:
    opacity var(--stream-fade) var(--stream-ease),
    filter var(--stream-fade) var(--stream-ease);
}
.atc-root .t-stream-w.is-in { opacity: 1; filter: blur(0); }

/* Tool-call stack -------------------------------------------------------- */
.atc-root .t-tcs-enter { animation: atc-tcs-rise 260ms var(--stack-ease) both; }
@keyframes atc-tcs-rise {
  from { opacity: 0.4; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.atc-root .t-tcs-panel { animation: atc-tcs-open var(--stack-open) var(--stack-ease) both; }
@keyframes atc-tcs-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* Spinning reel ---------------------------------------------------------- */
.atc-root .t-reel { display: inline-flex; align-items: center; height: var(--reel-cell); font-variant-numeric: tabular-nums; }
.atc-root .t-reel-col {
  position: relative; height: var(--reel-cell); overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.atc-root .t-reel-strip { display: flex; flex-direction: column; will-change: transform, filter; }
.atc-root .t-reel-digit { height: var(--reel-cell); display: flex; align-items: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .atc-root .t-think-text { transition: none !important; transform: none !important; filter: none !important; }
  .atc-root .t-think-text::before { display: none !important; }
  .atc-root .t-stream-w { transition: none !important; filter: none !important; opacity: 1 !important; }
  .atc-root .t-tcs-enter, .atc-root .t-tcs-panel { animation: none !important; }
  .atc-root .t-reel-strip { transition: none !important; filter: none !important; }
}
`;

const useScopedStyles = () => {
  useEffect(() => {
    if (typeof document === "undefined") return;
    if (document.getElementById(STYLE_ID)) return;
    const el = document.createElement("style");
    el.id = STYLE_ID;
    el.textContent = CSS;
    document.head.appendChild(el);
  }, []);
};

const usePrefersReducedMotion = () => {
  // Read synchronously on first render so consumers (e.g. an autoStart turn
  // scheduled from a mount effect) see the right value immediately, not after
  // a post-mount media-query effect flips it.
  const [reduce, setReduce] = useState(
    () =>
      typeof window !== "undefined" &&
      !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches,
  );
  useEffect(() => {
    const mq = window.matchMedia?.("(prefers-reduced-motion: reduce)");
    if (!mq) return;
    const update = () => setReduce(mq.matches);
    update();
    mq.addEventListener?.("change", update);
    return () => mq.removeEventListener?.("change", update);
  }, []);
  return reduce;
};

/* ---- 1. thinking states (shimmer swap) ------------------------------------ */

const ThinkingStates = ({ lines, reduce }: { lines: string[]; reduce: boolean }) => {
  // Two absolutely-positioned line slots; we cross-swap between them so both
  // halves of a transition animate at once, exactly like the transitions.dev
  // reference (one copy exits up-and-blurred while the next rises from below).
  const slots = [useRef<HTMLSpanElement>(null), useRef<HTMLSpanElement>(null)];
  const active = useRef(0);
  const idx = useRef(0);

  const longest = useMemo(
    () => lines.reduce((a, b) => (b.length > a.length ? b : a), ""),
    [lines],
  );

  // Reset to the first line whenever the set of lines changes.
  useEffect(() => {
    idx.current = 0;
    active.current = 0;
    const a = slots[0].current;
    const b = slots[1].current;
    if (a) {
      a.textContent = lines[0] ?? "";
      a.dataset.text = lines[0] ?? "";
      a.className = "t-think-text";
    }
    if (b) {
      b.className = "t-think-text";
      b.style.opacity = "0";
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [longest]);

  useEffect(() => {
    if (reduce || lines.length <= 1) return;
    const timer = window.setInterval(() => {
      idx.current = (idx.current + 1) % lines.length;
      const next = lines[idx.current];
      const outgoing = slots[active.current].current;
      const incoming = slots[active.current ^ 1].current;
      if (!outgoing || !incoming) return;

      incoming.style.opacity = "";
      incoming.textContent = next;
      incoming.dataset.text = next;
      incoming.className = "t-think-text is-enter-start";
      // force a reflow so the enter-start transform is the starting point
      void incoming.offsetHeight;
      incoming.className = "t-think-text";
      outgoing.className = "t-think-text is-exit";

      active.current ^= 1;
    }, THINK_HOLD);
    return () => window.clearInterval(timer);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [longest, reduce]);

  return (
    <span className="t-think font-mono text-[13px] tracking-tight" role="status" aria-live="polite">
      <span className="t-think-sizer" aria-hidden="true">
        {longest}
      </span>
      <span ref={slots[0]} className="t-think-text" data-text={lines[0]}>
        {lines[0]}
      </span>
      <span ref={slots[1]} className="t-think-text" style={{ opacity: 0 }} aria-hidden="true" />
    </span>
  );
};

/* ---- 2. streaming text ---------------------------------------------------- */

const StreamingText = ({
  text,
  run,
  reduce,
}: {
  text: string;
  run: boolean;
  reduce: boolean;
}) => {
  const tokens = useMemo(() => text.split(/(\s+)/), [text]);
  const [revealed, setRevealed] = useState(0);

  useEffect(() => {
    if (!run) {
      setRevealed(0);
      return;
    }
    if (reduce) {
      setRevealed(tokens.length);
      return;
    }
    setRevealed(0);
    const words = tokens
      .map((t, i) => ({ t, i }))
      .filter((o) => o.t.trim().length > 0);
    const timers = words.map((o, k) =>
      window.setTimeout(() => setRevealed(o.i + 1), k * STREAM_GAP),
    );
    return () => timers.forEach((t) => window.clearTimeout(t));
  }, [run, reduce, tokens]);

  return (
    <p className="t-stream text-[13.5px] leading-relaxed text-edison-white/90">
      {tokens.map((tok, i) =>
        tok.trim() === "" ? (
          <span key={i}>{tok}</span>
        ) : (
          <span key={i} className={cx("t-stream-w", i < revealed && "is-in")}>
            {tok}
          </span>
        ),
      )}
    </p>
  );
};

/* ---- 3. tool-call stack (one surface, click to expand) -------------------- */

/** The leading mark for one tool call: MCP glyph, connected-app badge, or dot. */
const ToolIcon = ({ item }: { item: ContextSource }) =>
  item.icon === "mcp" ? (
    <span
      aria-hidden="true"
      className="grid h-[18px] w-[18px] shrink-0 place-items-center text-edison-cyan [&_svg]:h-[18px] [&_svg]:w-[18px]"
      dangerouslySetInnerHTML={{ __html: TOOL_ICONS.mcp }}
    />
  ) : item.icon ? (
    <span
      aria-hidden="true"
      className="grid h-[18px] w-[18px] shrink-0 place-items-center overflow-hidden rounded-[5px] bg-white shadow-[inset_0_0_0_1px_rgba(10,14,20,0.1)] [&_svg]:h-[18px] [&_svg]:w-[18px]"
      dangerouslySetInnerHTML={{ __html: TOOL_ICONS[item.icon] }}
    />
  ) : (
    <span aria-hidden="true" className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-edison-cyan" />
  );

/** The tag chip (read / grep / mcp), shared by the surface and the list rows. */
const ToolTag = ({ tag }: { tag: string }) => (
  <span className="shrink-0 rounded border border-edison-cyan/15 px-1.5 py-0.5 font-mono text-[9px] uppercase tracking-[0.12em] text-edison-cyan/70">
    {tag}
  </span>
);

const StackGlyph = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M12 3l9 5-9 5-9-5 9-5Z" />
    <path d="M3 13l9 5 9-5" />
  </svg>
);

/**
 * Every tool call the agent makes collapses into a single stacked surface: the
 * latest call is shown with a count of the rest, and clicking expands the stack
 * into the full list of calls (newest first). One surface, the whole trace one
 * click away.
 */
const ToolCallStack = ({
  items,
  revealed,
  reduce,
  className,
}: {
  items: ContextSource[];
  revealed: number;
  reduce: boolean;
  className?: string;
}) => {
  const [open, setOpen] = useState(false);
  const panelId = useId();
  const prev = useRef(0);
  const [entered, setEntered] = useState(false);

  // Flag the top surface for a one-shot rise whenever a newer call arrives.
  useEffect(() => {
    if (revealed > prev.current) {
      setEntered(true);
      const t = window.setTimeout(() => setEntered(false), 300);
      prev.current = revealed;
      return () => window.clearTimeout(t);
    }
    prev.current = revealed;
  }, [revealed]);

  if (revealed <= 0) return null;

  const count = revealed;
  const multiple = count > 1;
  const latest = items[revealed - 1];
  // newest first
  const list = Array.from({ length: revealed }, (_, i) => items[revealed - 1 - i]);

  return (
    <div className={className}>
      <div className="relative">
        {/* stacked peek edges behind the surface — the "more underneath" cue */}
        {!open && multiple && (
          <>
            <div
              aria-hidden="true"
              className="absolute inset-x-2 top-0 h-full rounded-lg border border-edison-cyan/10 bg-[#0a0d0e]"
              style={{ transform: "translateY(5px)", opacity: 0.5 }}
            />
            {count > 2 && (
              <div
                aria-hidden="true"
                className="absolute inset-x-4 top-0 h-full rounded-lg border border-edison-cyan/10 bg-[#0a0d0e]"
                style={{ transform: "translateY(10px)", opacity: 0.28 }}
              />
            )}
          </>
        )}

        <div className="relative rounded-lg border border-edison-cyan/15 bg-[#0a0d0e] shadow-[0_4px_16px_rgba(0,0,0,0.4)]">
          {/* the single visible surface — click to expand / collapse */}
          <button
            type="button"
            onClick={() => setOpen((o) => !o)}
            aria-expanded={open}
            aria-controls={panelId}
            aria-label={open ? "Collapse tool calls" : `Expand ${count} tool call${multiple ? "s" : ""}`}
            className="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left transition hover:bg-edison-cyan/[0.04]"
          >
            {open ? (
              <>
                <span className="grid h-[18px] w-[18px] shrink-0 place-items-center text-edison-cyan [&_svg]:h-[15px] [&_svg]:w-[15px]">
                  <StackGlyph />
                </span>
                <span className="font-mono text-[12px] text-edison-white/90">
                  {count} tool call{multiple ? "s" : ""}
                </span>
              </>
            ) : (
              <div
                key={`${latest.name}-${revealed}`}
                className={cx("flex min-w-0 flex-1 items-center gap-2", !reduce && entered && "t-tcs-enter")}
              >
                <ToolIcon item={latest} />
                <span className="truncate font-mono text-[12px] text-edison-white/90">
                  {latest.name}
                </span>
              </div>
            )}
            <span className="ml-auto flex shrink-0 items-center gap-2 pl-1">
              {!open &&
                (multiple ? (
                  <span className="rounded-full border border-edison-cyan/15 bg-edison-cyan/[0.06] px-1.5 py-0.5 font-mono text-[9px] tabular-nums text-edison-cyan/80">
                    {count}
                  </span>
                ) : (
                  <ToolTag tag={latest.tag} />
                ))}
              <span className={cx("h-3 w-3 shrink-0 text-edison-grey transition-transform", open && "rotate-180")}>
                <ChevronIcon />
              </span>
            </span>
          </button>

          {/* expanded: the full trace, newest first */}
          {open && (
            <div
              id={panelId}
              role="region"
              aria-label="Tool call trace"
              tabIndex={0}
              className="t-tcs-panel max-h-[176px] overflow-y-auto border-t border-edison-cyan/10 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-edison-cyan/40"
            >
              {list.map((item, i) => (
                <div
                  key={`${item.name}-${i}`}
                  className="flex items-center gap-2 px-3 py-2 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-edison-cyan/[0.06]"
                >
                  <ToolIcon item={item} />
                  <span className="truncate font-mono text-[12px] text-edison-white/90">
                    {item.name}
                  </span>
                  <span className="ml-auto">
                    <ToolTag tag={item.tag} />
                  </span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

/* ---- 4. spinning reel ----------------------------------------------------- */

const SpinningReel = ({
  value,
  run,
  reduce,
  spins = 4,
}: {
  value: number;
  run: boolean;
  reduce: boolean;
  spins?: number;
}) => {
  const digits = useMemo(() => String(Math.max(0, Math.round(value))).split(""), [value]);
  const rawId = useId();
  const uid = useMemo(() => `atc-reel-${rawId.replace(/[^a-zA-Z0-9]/g, "")}`, [rawId]);
  const strips = useRef<(HTMLSpanElement | null)[]>([]);
  const blurs = useRef<(SVGFEGaussianBlurElement | null)[]>([]);

  useEffect(() => {
    if (!run) {
      digits.forEach((_, c) => {
        const s = strips.current[c];
        if (s) {
          s.style.transition = "none";
          s.style.transform = "translateY(0)";
        }
        blurs.current[c]?.setAttribute("stdDeviation", "0 0");
      });
      return;
    }
    if (reduce) {
      digits.forEach((d, c) => {
        const s = strips.current[c];
        if (s) {
          s.style.transition = "none";
          s.style.transform = `translateY(${-Number(d) * REEL_CELL}px)`;
        }
      });
      return;
    }

    const start = performance.now();
    digits.forEach((d, c) => {
      const s = strips.current[c];
      if (!s) return;
      s.style.transition = "none";
      s.style.transform = "translateY(0)";
      void s.offsetHeight; // reflow so the tween starts from the top
      s.style.transition = `transform ${REEL_DUR}ms ${REEL_EASE} ${c * REEL_STAGGER}ms`;
      s.style.transform = `translateY(${-(spins * 10 + Number(d)) * REEL_CELL}px)`;
    });

    let raf = 0;
    const tick = (now: number) => {
      let running = false;
      digits.forEach((_, c) => {
        const b = blurs.current[c];
        if (!b) return;
        const p = clamp01((now - start - c * REEL_STAGGER) / REEL_DUR);
        const env = Math.sin(p * Math.PI); // 0 → 1 → 0 streak envelope
        b.setAttribute("stdDeviation", `0 ${(REEL_SPIN_BLUR * env).toFixed(2)}`);
        if (p < 1) running = true;
      });
      if (running) raf = requestAnimationFrame(tick);
      else digits.forEach((_, c) => blurs.current[c]?.setAttribute("stdDeviation", "0 0"));
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [run, reduce, value]);

  return (
    <span className="t-reel text-edison-cyan" aria-label={String(value)}>
      <svg width="0" height="0" aria-hidden="true" style={{ position: "absolute" }}>
        <defs>
          {digits.map((_, c) => (
            <filter key={c} id={`${uid}-${c}`} x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur
                ref={(el) => {
                  blurs.current[c] = el;
                }}
                stdDeviation="0 0"
              />
            </filter>
          ))}
        </defs>
      </svg>
      {digits.map((_, c) => (
        <span
          key={c}
          className="t-reel-col"
          style={{ width: Math.round(REEL_CELL * 0.62) }}
        >
          <span
            ref={(el) => {
              strips.current[c] = el;
            }}
            className="t-reel-strip"
            style={{ filter: `url(#${uid}-${c})` }}
          >
            {Array.from({ length: spins * 10 + 10 }, (_, i) => (
              <span key={i} className="t-reel-digit font-mono text-[17px] font-semibold">
                {i % 10}
              </span>
            ))}
          </span>
        </span>
      ))}
    </span>
  );
};

/* ---- inline composer icons ------------------------------------------------ */

const PaperclipIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M21.44 11.05l-9.19 9.19a5 5 0 0 1-7.07-7.07l9.19-9.19a3 3 0 0 1 4.24 4.24l-9.2 9.19a1 1 0 0 1-1.41-1.41l8.49-8.49" />
  </svg>
);

const SendIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M12 19V5" />
    <path d="M6 11l6-6 6 6" />
  </svg>
);

const ChevronIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M6 9l6 6 6-6" />
  </svg>
);

const ReplayIcon = () => (
  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
    <path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9" />
    <path d="M13.5 2.5V5H11" />
  </svg>
);

/* ---- model picker --------------------------------------------------------- */

const ModelPicker = ({
  models,
  selected,
  onSelect,
}: {
  models: ModelOption[];
  selected: ModelOption;
  onSelect: (m: ModelOption) => void;
}) => {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const onDoc = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("mousedown", onDoc);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onDoc);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        aria-haspopup="listbox"
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
        className="inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-[12.5px] font-medium text-edison-white transition hover:bg-edison-cyan/8"
      >
        <span
          aria-hidden="true"
          className="grid h-[15px] w-[15px] shrink-0 place-items-center text-edison-white [&_svg]:h-full [&_svg]:w-full"
          dangerouslySetInnerHTML={{ __html: selected.icon }}
        />
        <span>{selected.name}</span>
        <span
          className={cx(
            "h-[11px] w-[11px] text-edison-grey transition-transform",
            open && "rotate-180",
          )}
        >
          <ChevronIcon />
        </span>
      </button>
      {open && (
        <div
          role="listbox"
          aria-label="Model"
          className="absolute bottom-full right-0 z-20 mb-2 flex min-w-[184px] flex-col gap-0.5 rounded-xl border border-edison-cyan/15 bg-[#0a0d0e] p-1.5 shadow-[0_16px_40px_-16px_rgba(0,0,0,0.9)]"
        >
          {models.map((m) => {
            const active = m.name === selected.name;
            return (
              <button
                key={m.name}
                type="button"
                role="option"
                aria-selected={active}
                onClick={() => {
                  onSelect(m);
                  setOpen(false);
                }}
                className={cx(
                  "flex items-center gap-2 rounded-lg px-2.5 py-2 text-left text-[12.5px] transition hover:bg-edison-cyan/8",
                  active ? "text-edison-white" : "text-edison-grey hover:text-edison-white",
                )}
              >
                <span
                  aria-hidden="true"
                  className="grid h-4 w-4 shrink-0 place-items-center text-edison-white [&_svg]:h-full [&_svg]:w-full"
                  dangerouslySetInnerHTML={{ __html: m.icon }}
                />
                <span>{m.name}</span>
                <span className={cx("ml-auto text-edison-cyan", active ? "opacity-100" : "opacity-0")}>
                  ✓
                </span>
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
};

/* ---- shell bits ----------------------------------------------------------- */

const Bubble = ({ children }: { children: ReactNode }) => (
  <div className="flex justify-end">
    <div className="max-w-[80%] rounded-2xl rounded-br-md bg-edison-cyan/10 px-3.5 py-2 text-[13.5px] leading-relaxed text-edison-white">
      {children}
    </div>
  </div>
);

/* ---- main component ------------------------------------------------------- */

export interface AgentThinkingChatProps {
  /** The scripted turn every prompt plays. */
  turn?: AgentTurn;
  /** Play the default turn once on mount instead of starting in the empty state. */
  autoStart?: boolean;
}

const AgentThinkingChat = ({ turn = DEFAULT_TURN, autoStart = false }: AgentThinkingChatProps) => {
  useScopedStyles();
  const reduce = usePrefersReducedMotion();

  const [phase, setPhase] = useState<Phase>("idle");
  const [prompt, setPrompt] = useState("");
  const [revealed, setRevealed] = useState(0);
  const [draft, setDraft] = useState("");
  const [attached, setAttached] = useState<string[]>([]);
  const [model, setModel] = useState<ModelOption>(MODELS[0]);
  // The model the current reply was generated with — captured at turn start so
  // changing the picker afterwards doesn't retroactively swap an answer's avatar.
  const [answerModel, setAnswerModel] = useState<ModelOption>(MODELS[0]);

  const timers = useRef<number[]>([]);
  const fileRef = useRef<HTMLInputElement>(null);
  const modelRef = useRef(model);
  modelRef.current = model;

  const thoughtSecs = useMemo(() => {
    const revealMs = T_THINK + T_LEAD + turn.context.length * T_STEP + T_TAIL + T_COMPOSE;
    return Math.max(1, Math.round(revealMs / 1000));
  }, [turn.context.length]);

  const clearTimers = useCallback(() => {
    timers.current.forEach((t) => window.clearTimeout(t));
    timers.current = [];
  }, []);

  // Kick off one full agent turn for `text`. Interrupts any turn in flight.
  const startTurn = useCallback(
    (text: string) => {
      clearTimers();
      setPrompt(text);
      setAttached([]);
      setRevealed(0);
      setAnswerModel(modelRef.current);

      if (reduce) {
        setRevealed(turn.context.length);
        setPhase("answer");
        return;
      }

      setPhase("thinking");
      const at = (ms: number, fn: () => void) =>
        timers.current.push(window.setTimeout(fn, ms));

      at(T_THINK, () => setPhase("research"));
      turn.context.forEach((_, i) =>
        at(T_THINK + T_LEAD + i * T_STEP, () => setRevealed(i + 1)),
      );
      const researchEnd = T_THINK + T_LEAD + turn.context.length * T_STEP + T_TAIL;
      at(researchEnd, () => setPhase("composing"));
      at(researchEnd + T_COMPOSE, () => setPhase("answer"));
    },
    [clearTimers, reduce, turn],
  );

  useEffect(() => () => clearTimers(), [clearTimers]);

  // Optional auto-play (for gallery / showcase contexts).
  const started = useRef(false);
  useEffect(() => {
    if (!autoStart || started.current) return;
    started.current = true;
    startTurn(DEFAULT_PROMPT);
  }, [autoStart, startTurn]);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const text = draft.trim();
    if (!text) return;
    setDraft("");
    startTurn(text);
  };

  const onFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
    const names = Array.from(e.target.files ?? []).map((f) => f.name);
    if (names.length) setAttached((prev) => [...prev, ...names]);
    e.target.value = "";
  };

  const working = phase === "thinking" || phase === "research" || phase === "composing";
  const lines =
    phase === "research"
      ? turn.researching
      : phase === "composing"
        ? ["Writing the answer…"]
        : turn.thinking;

  return (
    <div className="atc-root w-full max-w-md">
      <div className="rounded-2xl border border-white/10 bg-[#050707] p-3.5 sm:p-4">
        {/* user prompt bubble (once a turn is under way) */}
        {prompt && (
          <div className="mb-3">
            <Bubble>{prompt}</Bubble>
          </div>
        )}

        {/* the working card, framed by the liquid-metal ring */}
        {working && (
          <LiquidMetal
            preset="chromatic"
            strength={1}
            glow
            radius={14}
            ringWidth={2}
            speed={1}
            theme="dark"
            style={{ display: "flex", width: "100%" }}
          >
            <div className="w-full rounded-[14px] bg-[#0a0d0e] p-3.5">
              {/* status header: orb + shimmer line */}
              <div className="flex items-center gap-2.5">
                <ThinkingOrb state={ORB_FOR[phase]} size={24} color="#7ff2ee" theme="dark" />
                <ThinkingStates lines={lines} reduce={reduce} />

                {/* reel: files scanned, spins once research starts */}
                {(phase === "research" || phase === "composing") && (
                  <span className="ml-auto flex items-center gap-1.5 whitespace-nowrap font-mono text-[10px] uppercase tracking-[0.1em] text-edison-grey/50">
                    <SpinningReel value={turn.scanned} run reduce={reduce} />
                    scanned
                  </span>
                )}
              </div>

              {/* tool calls, collapsed into one expandable surface */}
              {(phase === "research" || phase === "composing") && revealed > 0 && (
                <ToolCallStack
                  items={turn.context}
                  revealed={revealed}
                  reduce={reduce}
                  className="mt-3"
                />
              )}
            </div>
          </LiquidMetal>
        )}

        {/* the reply, as a plain assistant message on the left */}
        {phase === "answer" && (
          <div className="mt-3.5 flex items-start gap-2.5">
            <span
              aria-hidden="true"
              className="mt-px grid h-[26px] w-[26px] shrink-0 place-items-center rounded-full border border-edison-cyan/15 bg-edison-cyan/5 text-edison-white [&_svg]:h-[15px] [&_svg]:w-[15px]"
              dangerouslySetInnerHTML={{ __html: answerModel.icon }}
            />
            <div className="min-w-0 flex-1">
              {turn.context.length > 0 && (
                <ToolCallStack
                  items={turn.context}
                  revealed={turn.context.length}
                  reduce={reduce}
                  className="mb-3"
                />
              )}
              <div className="mb-1.5 font-mono text-[10.5px] tracking-wide text-edison-grey/60">
                Thought for {thoughtSecs}s
              </div>
              <StreamingText text={turn.answer} run reduce={reduce} />
            </div>
          </div>
        )}

        {/* attachment chips */}
        {attached.length > 0 && (
          <div className="mt-3 flex flex-wrap gap-1.5">
            {attached.map((name, i) => (
              <span
                key={`${name}-${i}`}
                className="inline-flex items-center gap-1.5 rounded-lg border border-edison-cyan/15 bg-edison-cyan/[0.03] py-1 pl-2.5 pr-1.5 font-mono text-[11px] text-edison-white"
              >
                {name}
                <button
                  type="button"
                  aria-label="Remove attachment"
                  onClick={() => setAttached((prev) => prev.filter((_, k) => k !== i))}
                  className="grid h-4 w-4 place-items-center rounded text-edison-grey transition hover:bg-edison-cyan/8 hover:text-edison-cyan"
                >
                  ✕
                </button>
              </span>
            ))}
          </div>
        )}

        {/* composer: message field, attach, model picker, send */}
        <form
          onSubmit={handleSubmit}
          autoComplete="off"
          className="mt-3 flex flex-col gap-2.5 rounded-2xl border border-edison-cyan/12 bg-edison-cyan/[0.03] px-3.5 py-3 transition focus-within:border-edison-cyan/40"
        >
          <input
            type="file"
            ref={fileRef}
            multiple
            hidden
            onChange={onFiles}
          />
          <input
            className="w-full bg-transparent text-[14px] text-edison-white outline-none placeholder:text-edison-grey/50"
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            placeholder="Message the agent…"
            aria-label="Message the agent"
          />
          <div className="flex items-center justify-between gap-2">
            <button
              type="button"
              aria-label="Add attachment"
              onClick={() => fileRef.current?.click()}
              className="grid h-[30px] w-[30px] place-items-center rounded-lg text-edison-grey transition hover:bg-edison-cyan/8 hover:text-edison-cyan [&_svg]:h-4 [&_svg]:w-4"
            >
              <PaperclipIcon />
            </button>
            <div className="flex items-center gap-1.5">
              <ModelPicker models={MODELS} selected={model} onSelect={setModel} />
              <button
                type="submit"
                aria-label="Send message"
                className="grid h-8 w-8 place-items-center rounded-lg bg-edison-cyan text-[#04110f] transition hover:-translate-y-px [&_svg]:h-[15px] [&_svg]:w-[15px]"
              >
                <SendIcon />
              </button>
            </div>
          </div>
        </form>

        {/* empty-state starters */}
        {phase === "idle" && !prompt && (
          <div className="mt-3 flex flex-wrap gap-2">
            {EXAMPLES.map((ex) => (
              <button
                key={ex}
                type="button"
                onClick={() => startTurn(ex)}
                className="rounded-lg border border-edison-cyan/15 bg-edison-cyan/[0.03] px-3 py-1.5 text-left text-[12.5px] text-edison-grey transition hover:border-edison-cyan/40 hover:text-edison-white"
              >
                {ex}
              </button>
            ))}
          </div>
        )}
      </div>

      {/* replay the last prompt */}
      {prompt && (
        <div className="mt-4 flex justify-center">
          <button
            type="button"
            onClick={() => startTurn(prompt)}
            className="inline-flex min-h-9 items-center gap-2 rounded-lg border border-edison-cyan/15 px-3.5 text-xs font-medium text-edison-grey/70 transition hover:border-edison-cyan/40 hover:text-edison-cyan [&_svg]:h-3.5 [&_svg]:w-3.5"
          >
            <ReplayIcon />
            Replay
          </button>
        </div>
      )}
    </div>
  );
};

export default AgentThinkingChat;

import {
  useEffect,
  useRef,
  useState,
  type CanvasHTMLAttributes,
} from "react";

/**
 * ThinkingOrb — a dotted, animated "thought-orb" status indicator for AI and
 * agent UIs. Drop one next to a streaming message to show *what* the agent is
 * doing: searching, solving, listening, connecting, and so on.
 *
 * The whole thing is one <canvas> drawing filled arcs — no WebGL, no SVG
 * filters, no `ctx.filter` — so it renders pixel-identically in every browser
 * and stays cheap enough to run several at once. Nine hand-tuned states are
 * built from one primitive: points distributed on (or around) a slowly-rotating
 * unit sphere, projected orthographically, then depth-shaded so dots on the far
 * side read dimmer and smaller. Each state just decides where the dots live and
 * how they move.
 *
 * It behaves, too: it honours `prefers-reduced-motion` (one static frame), and
 * pauses itself when scrolled off-screen or when the tab is hidden.
 *
 * Deps: react only.
 */

export type OrbState =
  | "working"
  | "searching"
  | "solving"
  | "listening"
  | "connecting"
  | "weaving"
  | "composing"
  | "breathing"
  | "shaping";

export interface ThinkingOrbProps
  extends Omit<CanvasHTMLAttributes<HTMLCanvasElement>, "children"> {
  /** Which agent activity to animate. */
  state?: OrbState;
  /** Rendered CSS size in px (square). 64 for avatars, 20 for inline. */
  size?: number;
  /** Dot colour source. "auto" follows the surrounding theme. */
  theme?: "auto" | "dark" | "light";
  /** Explicit dot colour; wins over `theme`. Any CSS colour string. */
  color?: string;
  /** Animation speed multiplier. */
  speed?: number;
  /** Freeze on the current frame. */
  paused?: boolean;
}

export const ORB_STATES: OrbState[] = [
  "working",
  "searching",
  "solving",
  "listening",
  "connecting",
  "weaving",
  "composing",
  "breathing",
  "shaping",
];

const ARIA: Record<OrbState, string> = {
  working: "Working",
  searching: "Searching",
  solving: "Solving",
  listening: "Listening",
  connecting: "Connecting",
  weaving: "Weaving",
  composing: "Composing",
  breathing: "Thinking",
  shaping: "Shaping",
};

/* ---- tiny math kit -------------------------------------------------------- */

type Pt = [x: number, y: number, z: number, boost?: number];

const TAU = Math.PI * 2;
const clamp01 = (v: number) => (v < 0 ? 0 : v > 1 ? 1 : v);
const smooth = (v: number) => {
  const t = clamp01(v);
  return t * t * (3 - 2 * t);
};

/** Rotate a unit vector: `ay` spins about Y, then `ax` tilts about X. */
const rot = (x: number, y: number, z: number, ay: number, ax: number): Pt => {
  const x1 = x * Math.cos(ay) + z * Math.sin(ay);
  const z1 = -x * Math.sin(ay) + z * Math.cos(ay);
  const y2 = y * Math.cos(ax) - z1 * Math.sin(ax);
  const z2 = y * Math.sin(ax) + z1 * Math.cos(ax);
  return [x1, y2, z2];
};

/** Evenly-spread points on a unit sphere (Fibonacci lattice). */
const fibSphere = (n: number): Pt[] => {
  const pts: Pt[] = [];
  const ga = Math.PI * (3 - Math.sqrt(5));
  for (let i = 0; i < n; i++) {
    const y = 1 - (i / (n - 1)) * 2;
    const r = Math.sqrt(Math.max(0, 1 - y * y));
    const th = ga * i;
    pts.push([Math.cos(th) * r, y, Math.sin(th) * r]);
  }
  return pts;
};

/** Deterministic PRNG so "random" layouts are stable across frames. */
const mulberry32 = (seed: number) => () => {
  seed |= 0;
  seed = (seed + 0x6d2b79f5) | 0;
  let t = Math.imul(seed ^ (seed >>> 15), 1 | seed);
  t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
  return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
};

/* ---- per-state dot fields ------------------------------------------------- */
/* Each returns points in rotated unit-sphere space; an optional 4th value
 * boosts a dot's size/opacity (used for highlights like the scan band). */

const fields: Record<OrbState, (t: number, n: number) => Pt[]> = {
  working: (t, n) => {
    const pts: Pt[] = [];
    const orbits = [0.55, -0.65, 0.08];
    const per = Math.round(n / orbits.length);
    orbits.forEach((tilt, o) => {
      for (let i = 0; i < per; i++) {
        const a = (i / per) * TAU + t * 1.7 + o * 2.1;
        pts.push(rot(Math.cos(a), 0, Math.sin(a), t * 0.5, tilt));
      }
    });
    return pts;
  },

  searching: (t, n) => {
    const scan = Math.sin(t * 0.9);
    return fibSphere(n).map(([x, y, z]) => {
      const p = rot(x, y, z, t * 0.35, 0.35);
      const d = Math.abs(p[0] - scan);
      p[3] = d < 0.2 ? 1 + (1 - d / 0.2) * 1.5 : 1;
      return p;
    });
  },

  solving: (t, n) => {
    const lats = [-0.6, -0.3, 0, 0.3, 0.6];
    const per = Math.round(n / lats.length);
    const cycle = (t * 0.5) % 1;
    const solved = smooth((cycle - 0.55) / 0.35);
    const jitter = (1 - solved) * 0.9;
    const rng = mulberry32(99);
    const pts: Pt[] = [];
    lats.forEach((l) => {
      const r = Math.sqrt(Math.max(0, 1 - l * l));
      for (let i = 0; i < per; i++) {
        const off = (rng() - 0.5) * TAU * jitter;
        const a = (i / per) * TAU + off + t * 0.2;
        pts.push(rot(Math.cos(a) * r, l, Math.sin(a) * r, t * 0.3, 0.3));
      }
    });
    return pts;
  },

  listening: (t, n) => {
    const lats = [-0.62, -0.32, 0, 0.32, 0.62];
    const per = Math.round(n / lats.length);
    const pts: Pt[] = [];
    lats.forEach((l) => {
      const base = Math.sqrt(Math.max(0, 1 - l * l));
      for (let i = 0; i < per; i++) {
        const a = (i / per) * TAU;
        const wave = 1 + 0.16 * Math.sin(a * 3 - t * 3 + l * 4);
        pts.push(
          rot(Math.cos(a) * base * wave, l, Math.sin(a) * base * wave, t * 0.25, 0.3),
        );
      }
    });
    return pts;
  },

  connecting: (t, n) => {
    return fibSphere(Math.round(n * 0.6)).map(([x, y, z]) => {
      const p = rot(x, y, z, t * 0.2, 0.4);
      p[3] = 1.25;
      return p;
    });
  },

  weaving: (t, n) => {
    const per = Math.round(n / 3);
    const pts: Pt[] = [];
    for (let s = 0; s < 3; s++) {
      const phase = (s * TAU) / 3;
      for (let i = 0; i < per; i++) {
        const u = i / per;
        const lon = u * TAU * 2;
        const lat = Math.sin(u * TAU * 3 + phase + t * 1.2) * 0.7;
        const r = Math.cos(lat);
        pts.push(rot(Math.cos(lon) * r, Math.sin(lat), Math.sin(lon) * r, t * 0.4, 0.25));
      }
    }
    return pts;
  },

  composing: (t, n) => {
    const rows = [-0.14, -0.05, 0.05, 0.14];
    const per = Math.round(n / rows.length);
    const pts: Pt[] = [];
    rows.forEach((v) => {
      for (let i = 0; i < per; i++) {
        const u = i / per;
        const lon = u * TAU;
        const lat = v + 0.3 * Math.sin(u * TAU * 2 - t * 2.2);
        const r = Math.sqrt(Math.max(0, 1 - lat * lat));
        pts.push(rot(Math.cos(lon) * r, lat, Math.sin(lon) * r, t * 0.3, 0.16));
      }
    });
    return pts;
  },

  breathing: (t, n) => {
    const pts: Pt[] = [];
    [1, 0.6].forEach((scale, ring) => {
      for (let i = 0; i < n; i++) {
        const a = (i / n) * TAU;
        const morph = 1 + 0.09 * Math.sin(3 * a + t * 1.3 + ring);
        const rad = (1 + 0.1 * Math.sin(t * 1.2)) * scale * morph;
        pts.push(rot(Math.cos(a) * rad, Math.sin(a) * rad, 0, t * 0.25, 1.1));
      }
    });
    return pts;
  },

  shaping: (t, n) => {
    const shapes = [0, 3, 4]; // circle (0 sides), triangle, square
    const tt = t * 0.45;
    const idx = Math.floor(tt) % shapes.length;
    const f = smooth(tt % 1);
    const spin = t * 0.15;
    const shapePt = (sides: number, u: number): [number, number] => {
      if (sides === 0) return [Math.cos(u * TAU), Math.sin(u * TAU)];
      const seg = u * sides;
      const k = Math.floor(seg);
      const g = seg - k;
      const va = -Math.PI / 2 + (k / sides) * TAU;
      const vb = -Math.PI / 2 + ((k + 1) / sides) * TAU;
      const scl = 1.12; // fatten polygons so they fill the same disc as the circle
      return [
        (Math.cos(va) + (Math.cos(vb) - Math.cos(va)) * g) * scl,
        (Math.sin(va) + (Math.sin(vb) - Math.sin(va)) * g) * scl,
      ];
    };
    const from = shapes[idx];
    const to = shapes[(idx + 1) % shapes.length];
    const pts: Pt[] = [];
    for (let i = 0; i < n; i++) {
      const u = i / n;
      const a = shapePt(from, u);
      const b = shapePt(to, u);
      const x = a[0] + (b[0] - a[0]) * f;
      const y = a[1] + (b[1] - a[1]) * f;
      // 2D outline: spin in-plane, keep dots uniformly lit (z fixed at front).
      pts.push([x * Math.cos(spin) - y * Math.sin(spin), x * Math.sin(spin) + y * Math.cos(spin), 0.7]);
    }
    return pts;
  },
};

/* ---- theme resolution ----------------------------------------------------- */

const resolveTheme = (el: HTMLElement | null): "dark" | "light" => {
  for (let node = el; node; node = node.parentElement) {
    const attr = node.getAttribute("data-theme");
    if (attr === "dark" || attr === "light") return attr;
    if (node.classList.contains("dark")) return "dark";
    if (node.classList.contains("light")) return "light";
  }
  if (typeof window !== "undefined" && window.matchMedia) {
    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  }
  return "dark";
};

/* ---- component ------------------------------------------------------------ */

const ThinkingOrb = ({
  state = "working",
  size = 64,
  theme = "auto",
  color,
  speed = 1,
  paused = false,
  style,
  ...rest
}: ThinkingOrbProps) => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const elapsedRef = useRef(0);
  const [resolved, setResolved] = useState<"dark" | "light">("dark");
  const [reduce, setReduce] = useState(false);

  // Track the effective theme when following the surroundings.
  useEffect(() => {
    if (theme !== "auto") {
      setResolved(theme);
      return;
    }
    const el = canvasRef.current;
    const update = () => setResolved(resolveTheme(el));
    update();
    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
    mq?.addEventListener?.("change", update);
    const mo = new MutationObserver(update);
    for (let node = el?.parentElement; node; node = node.parentElement) {
      mo.observe(node, { attributes: true, attributeFilter: ["class", "data-theme"] });
    }
    return () => {
      mq?.removeEventListener?.("change", update);
      mo.disconnect();
    };
  }, [theme]);

  // Re-evaluate the reduced-motion preference live, so toggling it at the OS
  // level stops or starts the animation without a remount.
  useEffect(() => {
    const mq = window.matchMedia?.("(prefers-reduced-motion: reduce)");
    if (!mq) return;
    const update = () => setReduce(mq.matches);
    update();
    mq.addEventListener?.("change", update);
    return () => mq.removeEventListener?.("change", update);
  }, []);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas?.getContext("2d");
    if (!canvas || !ctx) return;

    const dpr = Math.min(2, typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1);
    canvas.width = Math.round(size * dpr);
    canvas.height = Math.round(size * dpr);

    const dot = color ?? (resolved === "dark" ? "#eaf0f7" : "#14171b");
    const link = color ?? (resolved === "dark" ? "#eaf0f7" : "#14171b");
    const big = size >= 40;
    const n = big ? 132 : 46;
    const dotR = Math.max(0.7, size * (big ? 0.026 : 0.036));
    const cx = size / 2;
    const cy = size / 2;
    const R = size * 0.42;

    const draw = (t: number) => {
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
      ctx.clearRect(0, 0, size, size);
      ctx.fillStyle = dot;

      const pts = fields[state](t, n);

      // "connecting" wires nearest neighbours together before the dots land.
      if (state === "connecting") {
        const prog = (t * 0.12) % 1;
        const shown = Math.floor(smooth(prog) * pts.length);
        ctx.strokeStyle = link;
        ctx.lineWidth = Math.max(0.4, size * 0.006);
        for (let i = 0; i < Math.min(shown, pts.length); i++) {
          let best = -1;
          let bd = Infinity;
          for (let j = 0; j < pts.length; j++) {
            if (j === i) continue;
            const dx = pts[i][0] - pts[j][0];
            const dy = pts[i][1] - pts[j][1];
            const dz = pts[i][2] - pts[j][2];
            const d = dx * dx + dy * dy + dz * dz;
            if (d < bd) {
              bd = d;
              best = j;
            }
          }
          if (best < 0) continue;
          const a = pts[i];
          const b = pts[best];
          ctx.globalAlpha = 0.28 * clamp01((a[2] + b[2]) / 2 + 1);
          ctx.beginPath();
          ctx.moveTo(cx + a[0] * R, cy - a[1] * R);
          ctx.lineTo(cx + b[0] * R, cy - b[1] * R);
          ctx.stroke();
        }
      }

      // Depth-sort so near dots paint over far ones, then shade by depth.
      pts.sort((a, b) => a[2] - b[2]);
      for (const [x, y, z, boost = 1] of pts) {
        const depth = (z + 1) / 2;
        const r = dotR * (0.45 + 0.55 * depth) * boost;
        ctx.globalAlpha = clamp01((0.18 + 0.82 * depth) * Math.min(1, boost));
        ctx.beginPath();
        ctx.arc(cx + x * R, cy - y * R, Math.max(0.1, r), 0, TAU);
        ctx.fill();
      }
      ctx.globalAlpha = 1;
    };

    // Reduced motion / paused: draw a single frame and schedule nothing. Both
    // freeze at whatever time has already elapsed (a fresh mount sits at 0),
    // so pausing holds the current frame instead of jumping back to the start.
    if (reduce) {
      draw(elapsedRef.current || 0.6);
      return;
    }
    if (paused) {
      draw(elapsedRef.current);
      return;
    }

    // Advance a persistent clock by real elapsed time each frame, and actually
    // stop scheduling frames while off-screen or backgrounded — not just skip
    // the paint — so idle orbs cost nothing. The loop restarts from where it
    // left off when the orb returns to view or the tab regains focus.
    let raf = 0;
    let running = false;
    let onScreen = true;
    let last = performance.now();

    const frame = (now: number) => {
      elapsedRef.current += ((now - last) / 1000) * speed;
      last = now;
      draw(elapsedRef.current);
      raf = requestAnimationFrame(frame);
    };
    const startLoop = () => {
      if (running) return;
      running = true;
      last = performance.now();
      raf = requestAnimationFrame(frame);
    };
    const stopLoop = () => {
      running = false;
      cancelAnimationFrame(raf);
    };

    const io = new IntersectionObserver(
      ([entry]) => {
        onScreen = entry.isIntersecting;
        if (onScreen && !document.hidden) startLoop();
        else stopLoop();
      },
      { threshold: 0 },
    );
    io.observe(canvas);

    const onVisibility = () => {
      if (!document.hidden && onScreen) startLoop();
      else stopLoop();
    };
    document.addEventListener("visibilitychange", onVisibility);

    if (!document.hidden) startLoop();

    return () => {
      stopLoop();
      io.disconnect();
      document.removeEventListener("visibilitychange", onVisibility);
    };
  }, [state, size, color, resolved, speed, paused, reduce]);

  return (
    <canvas
      ref={canvasRef}
      role="img"
      aria-label={rest["aria-label"] ?? ARIA[state]}
      style={{ width: size, height: size, display: "block", ...style }}
      {...rest}
    />
  );
};

export default ThinkingOrb;

import { useMemo, useRef, useState } from "react";

/**
 * McpConnectWidget — the "add it to your client" CTA, ported from the
 * daysurface.com landing page (Edison "Hackbox" system).
 *
 * A single copyable MCP server URL up top, a client picker below, and one panel
 * per client that shows the least-effort install path for THAT client:
 *   - deeplink   → a one-click "Add to <client>" button (Claude, Cursor, VS Code, Goose)
 *   - page-only  → a link that opens the right page but prefills nothing
 *                  (ChatGPT); the URL is copied to the clipboard on the way out
 *   - command    → a copyable one-liner for the terminal (Claude Code)
 *   - prompt     → a paste-into-the-agent block (Cline, Zed, Windsurf, any client)
 * with a numbered click-path as the fallback under every deeplink.
 *
 * Every install target is DERIVED from serverName + mcpUrl, so onboarding a new
 * server is a two-field change. The effort classification is computed, never
 * hand-set, so a client that changes method reclassifies itself.
 *
 * Deps: react + tailwindcss only. Icons are inline SVG (no icon library); logos
 * on the real site are brand marks, swapped here for monochrome glyphs so the
 * file pastes anywhere. Palette is the Edison token set, inlined as arbitrary
 * values: accent #c3fffd · fg #fff · fg-muted #9ba4a6 · fg-subtle #5e6575 ·
 * surface #0a0a0a · border #383838.
 */

/* ---- data model ------------------------------------------------------------ */

export type InstallMethod = "deeplink" | "prompt";
export type InstallEffort = "one-click" | "command" | "page-only" | "prompt";

export interface InstallTarget {
  id: string;
  name: string;
  method: InstallMethod;
  /** Deeplinks only. false = the link opens the right page but fills nothing in. */
  prefills?: boolean;
  /** Prompt targets: is `setupPrompt` a shell command or chat text? */
  setupKind?: "prompt" | "command";
  /** Prompt targets: the text to paste (or run). */
  setupPrompt?: string;
  /** The click-path: the whole flow, or the fallback under a deeplink. */
  steps?: string[];
  /** Optional note under the button / prompt. */
  note?: string;
}

export interface McpConnectWidgetProps {
  /** Machine name used in deep links + CLI, e.g. "daysurface". */
  serverName: string;
  /** Streamable-HTTP endpoint, e.g. "https://mcp.daysurface.com/mcp". */
  mcpUrl: string;
  /** Label a client shows in its install dialog, e.g. "DaySurface". */
  displayName?: string;
  /** Override the client list; defaults to the standard set. */
  targets?: InstallTarget[];
  /** Which client is selected first. */
  defaultId?: string;
  /**
   * Per-client logo URLs (SVG). Rendered as a currentColor-tinted CSS mask, so
   * one asset reads correctly on dark rows and on the accent button alike.
   * Any client without a URL falls back to a built-in monochrome glyph, so the
   * component still works when copied without assets.
   */
  logos?: Record<string, string>;
}

const effortMeta: Record<InstallEffort, { badge: string; stepsLabel: string }> = {
  "one-click": { badge: "1-click", stepsLabel: "If the link does not work" },
  command: { badge: "command", stepsLabel: "If the command does not work" },
  "page-only": { badge: "shortcut", stepsLabel: "Then, in ChatGPT" },
  prompt: { badge: "prompt", stepsLabel: "Or add it by hand" },
};

function effortOf(t: InstallTarget): InstallEffort {
  if (t.method === "deeplink") return t.prefills === false ? "page-only" : "one-click";
  if (t.setupKind === "command") return "command";
  return "prompt";
}

/** UTF-8-safe base64 — plain btoa throws on any multibyte character. */
const toBase64 = (s: string) =>
  btoa(Array.from(new TextEncoder().encode(s), (b) => String.fromCharCode(b)).join(""));

/** POSIX single-quote so a URL with `&`, spaces, etc. stays one shell argument. */
const shQuote = (s: string) => `'${s.replace(/'/g, `'\\''`)}'`;

/** One-click install deep links. Formats verified against each client's docs. */
function deepLink(id: string, mcpUrl: string, serverName: string, displayName: string): string | null {
  switch (id) {
    case "claude": {
      const params = new URLSearchParams({
        modal: "add-custom-connector",
        connectorName: displayName,
        connectorUrl: mcpUrl,
      });
      // Query must come BEFORE the hash fragment for Claude to read it.
      return `https://claude.ai/new?${params.toString()}#settings/customize-connectors`;
    }
    case "chatgpt":
      // ChatGPT has no deep link that opens or prefills the create form; custom
      // MCP servers are added from the Plugins page (Add, then Create custom MCP server).
      // The old #settings/Connectors?create-connector=true route targeted the
      // removed Settings → Connectors flow. The widget copies the URL to the
      // clipboard as it navigates.
      return "https://chatgpt.com/plugins";
    case "cursor": {
      const config = toBase64(JSON.stringify({ url: mcpUrl }));
      return `cursor://anysphere.cursor-deeplink/mcp/install?name=${encodeURIComponent(serverName)}&config=${encodeURIComponent(config)}`;
    }
    case "vscode": {
      const config = encodeURIComponent(JSON.stringify({ type: "http", url: mcpUrl }));
      return `https://vscode.dev/redirect/mcp/install?name=${encodeURIComponent(serverName)}&config=${config}`;
    }
    case "goose": {
      const params = new URLSearchParams({
        url: mcpUrl,
        type: "streamable_http",
        id: serverName,
        name: serverName,
        description: `${serverName} MCP server`,
        timeout: "300",
      });
      return `goose://extension?${params.toString()}`;
    }
    default:
      return null;
  }
}

/** The standard client set, built from the server's two fields. */
function defaultTargets(serverName: string, mcpUrl: string): InstallTarget[] {
  // One prompt telling the agent to use ITS OWN config keys — they differ:
  // VS Code "servers", Cursor/Cline "mcpServers", Zed "context_servers",
  // Windsurf "serverUrl" not "url".
  const agentPrompt = `Add a remote MCP server, then verify it connects.

  Name:      ${serverName}
  Endpoint:  ${mcpUrl}
  Transport: streamable HTTP (remote, not stdio)
  Auth:      OAuth in the browser, no key to paste

Use THIS client's own config keys — they differ:
VS Code "servers", Cursor/Cline "mcpServers",
Zed "context_servers", Windsurf "serverUrl" not "url".
Keep existing servers. Show me the diff, then say
what to click to finish sign-in.`;

  return [
    {
      id: "claude",
      name: "Claude",
      method: "deeplink",
      note: "Opens Claude with the name and URL already filled in — just click Add.",
      steps: [
        "Open Claude → Settings → Connectors",
        "Click “Add custom connector”",
        "Paste the URL above, then click Add and complete sign-in",
      ],
    },
    {
      id: "chatgpt",
      name: "ChatGPT",
      method: "deeplink",
      prefills: false,
      note: "Copies the URL and opens ChatGPT Plugins.",
      steps: [
        "Add → Create custom MCP server",
        "Paste the URL, Authentication → OAuth → Create as a plugin",
      ],
    },
    {
      id: "claude-code",
      name: "Claude Code",
      method: "prompt",
      setupKind: "command",
      setupPrompt: `claude mcp add --transport http --scope user ${shQuote(serverName)} ${shQuote(mcpUrl)}`,
      note: "Run it in your terminal, then /mcp in a session to sign in.",
    },
    {
      id: "cursor",
      name: "Cursor",
      method: "deeplink",
      note: "Opens Cursor and adds the server. Not working? Copy the URL above and add it under Settings → MCP.",
    },
    {
      id: "vscode",
      name: "VS Code",
      method: "deeplink",
      note: "Opens VS Code and adds the server. Requires Copilot agent mode.",
    },
    {
      id: "goose",
      name: "Goose",
      method: "deeplink",
      note: "Opens Goose and adds the extension over streamable HTTP.",
    },
    {
      id: "windsurf",
      name: "Windsurf",
      method: "prompt",
      setupPrompt: agentPrompt,
      note: "Windsurf uses “serverUrl”, not “url” — a snippet copied from another client will fail silently.",
    },
    {
      id: "other",
      name: "Any MCP client",
      method: "prompt",
      setupPrompt: agentPrompt,
      note: "Anything that speaks MCP over streamable HTTP works — there is nothing to install.",
    },
  ];
}

/* ---- inline glyphs (monochrome, tinted via currentColor) ------------------- */

const CopyIcon = ({ done }: { done: boolean }) =>
  done ? (
    <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <path d="M20 6 9 17l-5-5" />
    </svg>
  ) : (
    <svg className="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="9" y="9" width="13" height="13" />
      <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
    </svg>
  );

const glyphs: Record<string, JSX.Element> = {
  claude: <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2c.5 3.6 1.7 4.8 5.3 5.3-3.6.5-4.8 1.7-5.3 5.3-.5-3.6-1.7-4.8-5.3-5.3C10.3 6.8 11.5 5.6 12 2Zm6 9.5c.3 2.2 1 2.9 3.2 3.2-2.2.3-2.9 1-3.2 3.2-.3-2.2-1-2.9-3.2-3.2 2.2-.3 2.9-1 3.2-3.2Zm-9.5 2c.24 1.8.85 2.4 2.65 2.65-1.8.25-2.4.85-2.65 2.65-.25-1.8-.85-2.4-2.65-2.65 1.8-.25 2.4-.85 2.65-2.65Z" /></svg>,
  chatgpt: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true"><path d="M12 3.2a4 4 0 0 1 3.8 2.8 4 4 0 0 1 1.9 6.7 4 4 0 0 1-3.8 5.3 4 4 0 0 1-7.6-1.1 4 4 0 0 1-1.9-6.7A4 4 0 0 1 8.2 4.3 4 4 0 0 1 12 3.2Z" /><path d="M12 8.2 15.4 10v4L12 15.8 8.6 14v-4L12 8.2Z" /></svg>,
  cursor: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m5 3 14 8.5-6 1.6L9.6 20 5 3Z" /></svg>,
  vscode: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M8 6 2.5 12 8 18M16 6l5.5 6L16 18M12 3v18" /></svg>,
  goose: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="M8 4a4 4 0 0 1 4 4v5a5 5 0 0 1-5 5H6M12 8h4a3 3 0 0 1 0 6" /><circle cx="7" cy="6.5" r="0.6" fill="currentColor" /></svg>,
  "claude-code": <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m5 8 3 3-3 3M11 15h5" /><rect x="2.5" y="4.5" width="19" height="15" rx="1.5" /></svg>,
  mcp: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden="true"><circle cx="6" cy="12" r="2.2" /><circle cx="18" cy="6" r="2.2" /><circle cx="18" cy="18" r="2.2" /><path d="M8 11 16 7M8 13l8 4" strokeLinecap="round" /></svg>,
};

/** A client's mark: a tinted CSS mask of its real logo, or a built-in glyph. */
const ClientMark = ({
  id,
  logos,
  className,
}: {
  id: string;
  logos?: Record<string, string>;
  className?: string;
}) => {
  const url = logos?.[id];
  if (url) {
    return (
      <span
        aria-hidden="true"
        className={className}
        style={{
          display: "inline-block",
          backgroundColor: "currentColor",
          WebkitMask: `url("${url}") center / contain no-repeat`,
          mask: `url("${url}") center / contain no-repeat`,
        }}
      />
    );
  }
  return <span className={className}>{glyphs[id] ?? glyphs.mcp}</span>;
};

/* ---- component ------------------------------------------------------------- */

export default function McpConnectWidget({
  serverName,
  mcpUrl,
  displayName = serverName,
  targets,
  defaultId = "claude",
  logos,
}: McpConnectWidgetProps) {
  const list = useMemo(() => targets ?? defaultTargets(serverName, mcpUrl), [targets, serverName, mcpUrl]);
  const [selectedId, setSelectedId] = useState(defaultId);
  const [open, setOpen] = useState(false);
  const [copied, setCopied] = useState<string | null>(null);
  const rootRef = useRef<HTMLDivElement>(null);

  const selected = list.find((t) => t.id === selectedId) ?? list[0];

  const copy = (key: string, text: string) => {
    if (!navigator.clipboard) return;
    navigator.clipboard
      .writeText(text)
      .then(() => {
        setCopied(key);
        setTimeout(() => setCopied((k) => (k === key ? null : k)), 1500);
      })
      .catch(() => {
        /* permission denied / non-secure context — ignore */
      });
  };

  // No clients configured (e.g. targets={[]}): render an empty state rather
  // than dereferencing an undefined `selected`.
  if (!selected) {
    return (
      <div className="w-full max-w-lg border-2 border-[#383838] bg-[#0a0a0a] p-4 text-sm text-[#9ba4a6]">
        No MCP clients configured.
      </div>
    );
  }

  const CopyBtn = ({ code, keyName, label }: { code: string; keyName: string; label: string }) => (
    <button
      type="button"
      onClick={() => copy(keyName, code)}
      aria-label={label}
      className={`grid min-h-11 w-11 shrink-0 place-items-center border-l border-[#383838] transition hover:bg-[#c3fffd]/10 ${copied === keyName ? "bg-[#c3fffd]/10 text-[#c3fffd]" : "text-white/80 hover:text-[#c3fffd]"}`}
    >
      <CopyIcon done={copied === keyName} />
    </button>
  );

  return (
    <div
      ref={rootRef}
      className="w-full min-w-0 max-w-lg border-2 border-[#c3fffd] bg-[#0a0a0a] p-3 text-left shadow-2xl shadow-black/40 sm:p-4"
    >
      {/* MCP server URL — always copyable */}
      <span className="font-mono text-[11px] uppercase tracking-widest text-[#5e6575]">
        MCP server URL
      </span>
      <div className="mt-1.5 flex items-stretch border border-[#383838] bg-black">
        <code className="min-w-0 flex-1 truncate px-3 py-2.5 font-mono text-xs text-[#c3fffd] sm:text-sm" title={mcpUrl}>
          {mcpUrl}
        </code>
        <CopyBtn code={mcpUrl} keyName="url" label="Copy the server URL" />
      </div>

      {/* Client picker */}
      <div className="relative mt-4">
        <button
          type="button"
          onClick={() => setOpen((v) => !v)}
          aria-haspopup="listbox"
          aria-expanded={open}
          className="flex min-h-11 w-full items-center gap-2.5 border border-[#383838] bg-black px-3 text-left transition hover:border-[#c3fffd]/60"
        >
          <ClientMark id={selected.id} logos={logos} className="size-5 shrink-0 text-white [&_svg]:size-5" />
          <span className="min-w-0 flex-1 truncate text-sm font-medium text-white">{selected.name}</span>
          <svg className={`size-4 text-[#9ba4a6] transition-transform ${open ? "rotate-180" : ""}`} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
            <path d="M6 9l6 6 6-6" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>

        {open && (
          <ul
            role="listbox"
            className="absolute z-20 mt-1 max-h-72 w-full overflow-y-auto border border-[#c3fffd]/50 bg-[#1c1c1c] shadow-2xl shadow-black/60"
          >
            {list.map((t) => {
              const effort = effortOf(t);
              const isDeep = t.method === "deeplink" && t.prefills !== false;
              return (
                <li key={t.id} role="option" aria-selected={t.id === selected.id}>
                  <button
                    type="button"
                    onClick={() => {
                      setSelectedId(t.id);
                      setOpen(false);
                    }}
                    className="flex min-h-11 w-full items-center gap-2.5 px-3 text-left text-sm text-[#9ba4a6] transition hover:bg-black hover:text-white"
                  >
                    <ClientMark id={t.id} logos={logos} className="size-5 shrink-0 [&_svg]:size-5" />
                    <span className="flex-1">{t.name}</span>
                    <span className={`font-mono text-[10px] uppercase tracking-wider ${isDeep ? "text-[#c3fffd]" : "text-[#5e6575]"}`}>
                      {effortMeta[effort].badge}
                    </span>
                  </button>
                </li>
              );
            })}
          </ul>
        )}
      </div>

      {/* Panel for the selected client */}
      <div className="mt-4">
        <Panel target={selected} mcpUrl={mcpUrl} displayName={displayName} serverName={serverName} logos={logos} copied={copied} copy={copy} />
      </div>
    </div>
  );
}

/* ---- per-client panel ------------------------------------------------------ */

function Panel({
  target,
  mcpUrl,
  displayName,
  serverName,
  logos,
  copied,
  copy,
}: {
  target: InstallTarget;
  mcpUrl: string;
  displayName: string;
  serverName: string;
  logos?: Record<string, string>;
  copied: string | null;
  copy: (key: string, text: string) => void;
}) {
  const effort = effortOf(target);
  const href = deepLink(target.id, mcpUrl, serverName, displayName);

  // Deeplink → a button (+ fallback steps disclosure)
  if (href) {
    const pageOnly = effort === "page-only";
    return (
      <>
        <a
          href={href}
          onClick={() => {
            // Page-only links prefill nothing, so copy the URL on the way out.
            if (pageOnly) copy("url", mcpUrl);
          }}
          className="flex min-h-12 w-full items-center justify-center gap-2.5 bg-[#c3fffd] px-4 text-center font-semibold text-black transition hover:bg-[#7de6e2]"
        >
          <ClientMark id={target.id} logos={logos} className="size-5 shrink-0 text-black [&_svg]:size-5" />
          {pageOnly ? `Open ${target.name} Plugins` : `Add to ${target.name}`}
        </a>
        {target.note && <p className="mt-2.5 text-xs leading-relaxed text-[#5e6575]">{target.note}</p>}
        {target.steps && target.steps.length > 0 && (
          <details className="mt-3" open={effort === "page-only"}>
            <summary className="cursor-pointer list-none text-xs text-[#5e6575] transition hover:text-[#c3fffd]">
              <span className="underline decoration-dotted underline-offset-4">
                {effortMeta[effort].stepsLabel}
              </span>
            </summary>
            <Steps steps={target.steps} />
          </details>
        )}
      </>
    );
  }

  // Prompt / command → copyable block
  if (target.setupPrompt) {
    const isCommand = target.setupKind === "command";
    return (
      <>
        <p className="text-xs leading-relaxed text-[#5e6575]">
          {isCommand
            ? `Run this in your terminal — it adds the server to ${target.name}.`
            : `Paste this into ${target.name} — it will add the server for you.`}
        </p>
        <div className="mt-2 flex items-stretch border border-[#383838] bg-black">
          <pre className="max-h-64 flex-1 overflow-y-auto whitespace-pre-wrap break-words px-3 py-2.5 font-mono text-xs leading-relaxed text-[#9ba4a6]">
            {target.setupPrompt}
          </pre>
          <button
            type="button"
            onClick={() => copy(`prompt-${target.id}`, target.setupPrompt!)}
            aria-label={`Copy the ${target.name} setup ${isCommand ? "command" : "prompt"}`}
            className={`grid shrink-0 place-items-center border-l border-[#383838] px-3 transition hover:bg-[#c3fffd]/10 ${copied === `prompt-${target.id}` ? "bg-[#c3fffd]/10 text-[#c3fffd]" : "text-white/80 hover:text-[#c3fffd]"}`}
          >
            <CopyIcon done={copied === `prompt-${target.id}`} />
          </button>
        </div>
        {target.note && <p className="mt-2.5 text-xs leading-relaxed text-[#5e6575]">{target.note}</p>}
      </>
    );
  }

  // Manual → numbered steps only
  return <Steps steps={target.steps ?? []} />;
}

function Steps({ steps }: { steps: string[] }) {
  return (
    <ol className="mt-2.5 space-y-2.5">
      {steps.map((step, i) => (
        <li key={i} className="flex gap-3 text-sm text-[#9ba4a6]">
          <span className="grid size-5 shrink-0 place-items-center border border-[#c3fffd]/50 font-mono text-[11px] text-[#c3fffd]">
            {i + 1}
          </span>
          <span className="leading-relaxed">{step}</span>
        </li>
      ))}
    </ol>
  );
}

/**
 * DeliveryDrone — a self-contained isometric quadcopter illustration.
 *
 * The artwork itself is a single SVG file kept next to your other static
 * assets (default `/images/delivery-drone.svg`). This component is only the
 * thin wrapper around it: it scales the SVG to whatever width the parent
 * gives it, and adds an optional idle hover-float.
 *
 * Bring your own asset: drop the SVG into your `public/` (or point `src` at
 * wherever it lives). If you serve under a base path, prefix the URL with
 * `import.meta.env.BASE_URL`, e.g. `src={`${import.meta.env.BASE_URL}images/delivery-drone.svg`}`.
 *
 * Three airframes ship as separate assets. `delivery-drone.svg` and
 * `delivery-drone-raptor.svg` are the isometric "Classic" (high-facet) and
 * "Raptor" (low-poly) cuts; `delivery-drone-courier.svg` is an overhead
 * three-quarter view with four motion-blurred rotor discs. Point `src` at
 * whichever one suits the surface — the wrapper is identical for all three.
 *
 * The float is pure CSS so it costs nothing, and it silences itself under
 * `prefers-reduced-motion`. Sizing is driven entirely by the wrapper's
 * `className` (the image is `width:100%`), so `className="w-64"` — or any
 * width — just works.
 */

type DeliveryDroneProps = {
  /** URL of the drone SVG. Prefix with BASE_URL if you serve under a subpath. */
  src?: string;
  /** Alt text. Leave empty (default) to mark it decorative / aria-hidden. */
  alt?: string;
  /** Wrapper classes — this is where you set the width, e.g. "w-64". */
  className?: string;
  /** Gentle idle hover-float. Respects prefers-reduced-motion. Default: true. */
  float?: boolean;
};

export default function DeliveryDrone({
  src = "/images/delivery-drone.svg",
  alt = "",
  className,
  float = true,
}: DeliveryDroneProps) {
  const decorative = alt === "";
  return (
    <span className={className} style={{ display: "inline-block", lineHeight: 0 }}>
      {float && (
        <style>{`
          @keyframes eito-drone-hover {
            0%, 100% { transform: translateY(0); }
            50%      { transform: translateY(-5%); }
          }
          @media (prefers-reduced-motion: reduce) {
            .eito-drone--float { animation: none !important; }
          }
        `}</style>
      )}
      <img
        src={src}
        alt={alt}
        aria-hidden={decorative || undefined}
        draggable={false}
        className={float ? "eito-drone--float" : undefined}
        style={{
          display: "block",
          width: "100%",
          height: "auto",
          userSelect: "none",
          ...(float
            ? { animation: "eito-drone-hover 6s ease-in-out infinite", willChange: "transform" }
            : null),
        }}
      />
    </span>
  );
}

import {
  useEffect,
  useRef,
  useState,
  type CSSProperties,
  type HTMLAttributes,
  type ReactNode,
} from "react";

/**
 * LiquidMetal — wrap any element in an animated, real-time "liquid metal" ring.
 *
 * Drop it around a button, chip or icon and it draws a shimmering metallic
 * border that hugs the child's rounded corners, plus an optional soft glow.
 * The metal is a WebGL plasma shader (simplex-noise FBM warping four sine bands,
 * mapped through a five-stop metallic palette) — the same technique metal.fx
 * uses — so it reads as flowing chrome rather than a static gradient.
 *
 * It is deliberately self-contained:
 *   - No three.js, no filters, no runtime deps beyond React — raw WebGL1.
 *   - One shared GL context and one compiled program back *every* instance on
 *     the page; each wrapper only owns a cheap 2D canvas that receives a
 *     drawImage() copy per frame. Mounting fifty metal buttons still compiles
 *     the shader once and keeps one WebGL context.
 *   - The ring is a pure CSS "gradient-border" mask over the canvas, so it
 *     respects any border-radius and never touches the child's interactivity
 *     (pointer-events: none on every overlay).
 *   - It pauses itself when scrolled off-screen or when the tab is hidden, and
 *     honours prefers-reduced-motion by holding a single frame.
 *
 * Deps: react only.
 */

export type MetalPreset = "chromatic" | "silver" | "gold";

export const METAL_PRESETS: MetalPreset[] = ["chromatic", "silver", "gold"];

export interface LiquidMetalProps
  extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
  /** The element the metal ring frames (a button, chip, icon…). */
  children: ReactNode;
  /** Palette. "chromatic" is an iridescent rainbow; the others are as named. */
  preset?: MetalPreset;
  /** "auto" follows the surrounding light/dark theme. */
  theme?: "auto" | "dark" | "light";
  /** Overall effect intensity, 0–1: scales the metal's opacity and its glow. */
  strength?: number;
  /** Corner radius of the child, in px. The ring nests just outside it. */
  radius?: number;
  /** Ring thickness in px. */
  ringWidth?: number;
  /** Draw a soft blurred halo behind the child (best on dark backgrounds). */
  glow?: boolean;
  /** Animation speed multiplier. */
  speed?: number;
  /** Freeze on the current frame. */
  paused?: boolean;
}

/* ---- preset palettes (verbatim from metal.fx) ----------------------------- */

interface Mode {
  colors: string[]; // 7 stops; the shader samples the first five
  alphas: number[];
  direction: number;
  speed: number;
  intensity: number;
  scale: number;
  distortion: number;
  complexity: number;
  blur: number;
  vignette: number;
  shaderOpacity: number;
}

const PRESETS: Record<MetalPreset, { dark: Mode; light: Mode }> = {
  chromatic: {
    dark: {
      colors: ["#000000", "#aae8ff", "#c5fe9e", "#f7888d", "#0d0d0d", "#fffdc3", "#007cff"],
      alphas: [1, 1, 1, 1, 1, 1, 1],
      direction: 80, speed: 1.2, intensity: 2, scale: 1.6, distortion: 0.3,
      complexity: 0.68, blur: 1, vignette: 0.26, shaderOpacity: 1,
    },
    light: {
      colors: ["#ffffff", "#ffffff", "#ffffff", "#ffb3b3", "#adadad", "#f5ff70", "#007cff"],
      alphas: [1, 1, 1, 1, 1, 1, 1],
      direction: 80, speed: 1.2, intensity: 2, scale: 2.5, distortion: 0.3,
      complexity: 0.68, blur: 1, vignette: 0.24, shaderOpacity: 1,
    },
  },
  silver: {
    dark: {
      colors: ["#000000", "#dedede", "#747270", "#e5e5e5", "#0d0d0d", "#ffffff", "#e6e6e6"],
      alphas: [1, 1, 1, 1, 1, 1, 1],
      direction: 80, speed: 1.2, intensity: 2, scale: 2.5, distortion: 0.3,
      complexity: 0.68, blur: 1, vignette: 0.26, shaderOpacity: 0.88,
    },
    light: {
      colors: ["#f6f6f6", "#ffffff", "#ffffff", "#f7f7f7", "#c9c9c9", "#d0d0d0", "#d1d1d1"],
      alphas: [1, 1, 1, 1, 1, 1, 1],
      direction: 80, speed: 1.2, intensity: 2, scale: 2.5, distortion: 0.3,
      complexity: 0.68, blur: 1, vignette: 0.2, shaderOpacity: 1,
    },
  },
  gold: {
    dark: {
      colors: ["#000000", "#ffffff", "#ffffff", "#f7d488", "#0d0d0d", "#fffdc3", "#ffffff"],
      alphas: [1, 1, 1, 1, 1, 1, 1],
      direction: 80, speed: 1.0, intensity: 2, scale: 2.5, distortion: 0.3,
      complexity: 0.68, blur: 1, vignette: 0.26, shaderOpacity: 0.92,
    },
    light: {
      colors: ["#fff8e1", "#fffbe0", "#ffffff", "#fff6d6", "#d2c7a7", "#dcd2bc", "#f9f7e5"],
      alphas: [1, 1, 1, 1, 1, 1, 1],
      direction: 80, speed: 1.2, intensity: 2, scale: 2.5, distortion: 0.3,
      complexity: 0.68, blur: 1, vignette: 0.22, shaderOpacity: 1,
    },
  },
};

const hexToRgb = (hex: string): [number, number, number] => {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.replace(/(.)/g, "$1$1") : h, 16);
  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
};

/* ---- shaders (fragment verbatim from metal.fx) ---------------------------- */

const VERT = `attribute vec2 a_position;
void main() { gl_Position = vec4(a_position, 0.0, 1.0); }`;

const FRAG = `precision highp float;
uniform vec2 u_resolution;
uniform float u_time;
uniform vec3 u_color1, u_color2, u_color3, u_color4, u_color5;
uniform float u_alpha1, u_alpha2, u_alpha3, u_alpha4, u_alpha5;
uniform float u_intensity, u_scale, u_direction;
uniform float u_distortion, u_complexity;
uniform float u_vignette, u_blur, u_shaderOpacity;

vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec2 mod289v2(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
vec3 permute(vec3 x) { return mod289((x * 34.0 + 1.0) * x); }

float snoise(vec2 v) {
  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
                      -0.577350269189626, 0.024390243902439);
  vec2 i = floor(v + dot(v, C.yy));
  vec2 x0 = v - i + dot(i, C.xx);
  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
  vec4 x12 = x0.xyxy + C.xxzz;
  x12.xy -= i1;
  i = mod289v2(i);
  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
  m = m * m; m = m * m;
  vec3 x_ = 2.0 * fract(p * C.www) - 1.0;
  vec3 h = abs(x_) - 0.5;
  vec3 ox = floor(x_ + 0.5);
  vec3 a0 = x_ - ox;
  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
  vec3 g;
  g.x = a0.x * x0.x + h.x * x0.y;
  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
  return 130.0 * dot(m, g);
}

float fbm(vec2 p, float oct) {
  float val = 0.0, amp = 0.5;
  int n = int(oct);
  for (int i = 0; i < 7; i++) {
    if (i >= n) break;
    val += amp * snoise(p);
    p *= 2.0;
    amp *= 0.5;
  }
  return val;
}
float nfbm(vec2 p) { return fbm(p, 3.0 + u_complexity * 4.0); }

vec3 palette(float t) {
  t = clamp(t, 0.0, 1.0);
  t = t * t * (3.0 - 2.0 * t);
  float k = 64.0;
  float w1 = u_alpha1 * exp(-k * t * t);
  float w2 = u_alpha2 * exp(-k * (t - 0.25) * (t - 0.25));
  float w3 = u_alpha3 * exp(-k * (t - 0.5)  * (t - 0.5));
  float w4 = u_alpha4 * exp(-k * (t - 0.75) * (t - 0.75));
  float w5 = u_alpha5 * exp(-k * (t - 1.0)  * (t - 1.0));
  float total = w1 + w2 + w3 + w4 + w5 + 0.0001;
  return (u_color1 * w1 + u_color2 * w2 + u_color3 * w3 +
          u_color4 * w4 + u_color5 * w5) / total;
}

vec2 warp(vec2 p, float t) {
  float str = u_distortion * 2.0;
  return vec2(
    nfbm(p + vec2(t * 0.1, 0.0)),
    nfbm(p + vec2(0.0, t * 0.12) + 5.0)
  ) * str;
}

vec3 computeEffect(vec2 uv, float aspect, float t) {
  vec2 p = (uv - 0.5) * u_scale;
  p.x *= aspect;
  p += vec2(cos(u_direction), sin(u_direction)) * t * 0.15;

  float freq = 3.0 + u_complexity * 8.0;
  float val = 0.0;
  val += sin(p.x * freq + t);
  val += sin(p.y * freq + t * 1.3);
  val += sin((p.x + p.y) * freq * 0.7 + t * 0.7);
  val += sin(length(p) * freq * 0.8 - t * 1.5);
  vec2 w = warp(p, t);
  val += (w.x + w.y) * u_distortion;
  val = val * 0.2 * u_intensity + 0.5;
  return palette(clamp(val, 0.0, 1.0));
}

void main() {
  vec2 uv = gl_FragCoord.xy / u_resolution;
  float aspect = u_resolution.x / u_resolution.y;
  float t = u_time;

  vec3 col;
  if (u_blur < 0.01) {
    col = computeEffect(uv, aspect, t);
  } else {
    float r = u_blur * 0.02;
    col  = computeEffect(uv,                 aspect, t) * 0.4;
    col += computeEffect(uv + vec2( r, 0.0), aspect, t) * 0.15;
    col += computeEffect(uv + vec2(-r, 0.0), aspect, t) * 0.15;
    col += computeEffect(uv + vec2(0.0,  r), aspect, t) * 0.15;
    col += computeEffect(uv + vec2(0.0, -r), aspect, t) * 0.15;
  }

  col = pow(col, vec3(1.3));

  float edgeDist = min(min(uv.x, 1.0 - uv.x), min(uv.y, 1.0 - uv.y));
  float vigPx = 40.0 / min(u_resolution.x, u_resolution.y);
  float vigRange = vigPx * (1.0 + u_vignette * 3.0);
  float vig = edgeDist * edgeDist / (vigRange * vigRange);
  vig = smoothstep(0.0, 1.0, vig);
  col *= mix(1.0, vig, u_vignette);

  gl_FragColor = vec4(col, u_shaderOpacity);
}`;

/* ---- shared WebGL renderer ------------------------------------------------ */
/* One context + one program serve every LiquidMetal on the page. Each instance
 * owns only lightweight 2D canvases that receive a drawImage() copy per frame. */

type Uniforms = Record<string, WebGLUniformLocation | null>;

interface Instance {
  targets: HTMLCanvasElement[]; // ring canvas, optional glow canvas (same size)
  w: number; // device px
  h: number;
  mode: Mode;
  strength: number;
  speed: number;
  paused: boolean;
  visible: boolean;
  elapsed: number;
}

interface Shared {
  gl: WebGLRenderingContext;
  off: HTMLCanvasElement;
  program: WebGLProgram;
  u: Uniforms;
}

const registry = new Set<Instance>();
let shared: Shared | null = null;
let raf = 0;
let lastNow = 0;
let glFailed = false; // WebGL unavailable — stop scheduling frames for good.

const compile = (gl: WebGLRenderingContext, type: number, src: string) => {
  const s = gl.createShader(type)!;
  gl.shaderSource(s, src);
  gl.compileShader(s);
  return s;
};

const ensureShared = (): Shared | null => {
  if (shared) return shared;
  if (typeof document === "undefined") return null;
  const off = document.createElement("canvas");
  off.width = 2;
  off.height = 2;
  const gl = off.getContext("webgl", {
    alpha: true,
    premultipliedAlpha: false,
    antialias: true,
    preserveDrawingBuffer: true, // let drawImage() read the buffer after draw
  });
  if (!gl) return null;

  const program = gl.createProgram()!;
  gl.attachShader(program, compile(gl, gl.VERTEX_SHADER, VERT));
  gl.attachShader(program, compile(gl, gl.FRAGMENT_SHADER, FRAG));
  gl.linkProgram(program);
  gl.useProgram(program);

  const buf = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buf);
  // Fullscreen triangle.
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
  const loc = gl.getAttribLocation(program, "a_position");
  gl.enableVertexAttribArray(loc);
  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

  const names = [
    "u_resolution", "u_time", "u_intensity", "u_scale", "u_direction",
    "u_distortion", "u_complexity", "u_vignette", "u_blur", "u_shaderOpacity",
    "u_color1", "u_color2", "u_color3", "u_color4", "u_color5",
    "u_alpha1", "u_alpha2", "u_alpha3", "u_alpha4", "u_alpha5",
  ];
  const u: Uniforms = {};
  for (const name of names) u[name] = gl.getUniformLocation(program, name);

  shared = { gl, off, program, u };
  return shared;
};

// Render the shader on a buffer larger than the element and copy back only the
// centre. The metal.fx vignette darkens the frame's edges — which is exactly
// where a thin ring lives — so sampling the brighter interior keeps the ring
// luminous instead of muddy. (metal.fx does the same with its 1.6× button scale.)
const OVERSCAN = 1.6;

const renderInstance = (s: Shared, inst: Instance) => {
  const { gl, off, u } = s;
  const { w, h, mode } = inst;
  const bw = Math.max(2, Math.round(w * OVERSCAN));
  const bh = Math.max(2, Math.round(h * OVERSCAN));
  if (off.width !== bw || off.height !== bh) {
    off.width = bw;
    off.height = bh;
  }
  gl.viewport(0, 0, bw, bh);
  gl.clearColor(0, 0, 0, 0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  gl.uniform2f(u.u_resolution, bw, bh);
  gl.uniform1f(u.u_time, inst.elapsed);
  gl.uniform1f(u.u_intensity, mode.intensity);
  gl.uniform1f(u.u_scale, mode.scale);
  gl.uniform1f(u.u_direction, mode.direction);
  gl.uniform1f(u.u_distortion, mode.distortion);
  gl.uniform1f(u.u_complexity, mode.complexity);
  gl.uniform1f(u.u_vignette, mode.vignette);
  gl.uniform1f(u.u_blur, mode.blur);
  gl.uniform1f(u.u_shaderOpacity, mode.shaderOpacity * inst.strength);
  for (let i = 0; i < 5; i++) {
    gl.uniform3fv(u[`u_color${i + 1}`], hexToRgb(mode.colors[i]));
    gl.uniform1f(u[`u_alpha${i + 1}`], mode.alphas[i]);
  }
  gl.drawArrays(gl.TRIANGLES, 0, 3);

  const sx = (bw - w) / 2;
  const sy = (bh - h) / 2;
  for (const canvas of inst.targets) {
    if (canvas.width !== w || canvas.height !== h) {
      canvas.width = w;
      canvas.height = h;
    }
    const ctx = canvas.getContext("2d");
    if (!ctx) continue;
    ctx.clearRect(0, 0, w, h);
    ctx.drawImage(off, sx, sy, w, h, 0, 0, w, h);
  }
};

const tick = (now: number) => {
  const s = ensureShared();
  if (!s) {
    // No WebGL: give up instead of rescheduling forever on an idle registry.
    glFailed = true;
    raf = 0;
    return;
  }
  // Cap dt so a long rAF stall (a backgrounded tab) doesn't jump the shader
  // clock forward in a single frame when it resumes.
  const dt = lastNow ? Math.min((now - lastNow) / 1000, 0.05) : 0;
  lastNow = now;
  for (const inst of registry) {
    if (!inst.visible) continue;
    if (!inst.paused) inst.elapsed += dt * inst.speed;
    renderInstance(s, inst);
  }
  raf = registry.size ? requestAnimationFrame(tick) : 0;
};

const register = (inst: Instance) => {
  registry.add(inst);
  if (!raf && !glFailed) {
    lastNow = 0;
    raf = requestAnimationFrame(tick);
  }
};

const unregister = (inst: Instance) => {
  registry.delete(inst);
  if (registry.size === 0 && raf) {
    cancelAnimationFrame(raf);
    raf = 0;
  }
};

/* ---- theme + reduced-motion helpers --------------------------------------- */

const resolveTheme = (el: HTMLElement | null): "dark" | "light" => {
  for (let node = el; node; node = node.parentElement) {
    const attr = node.getAttribute("data-theme");
    if (attr === "dark" || attr === "light") return attr;
    if (node.classList.contains("dark")) return "dark";
    if (node.classList.contains("light")) return "light";
  }
  if (typeof window !== "undefined" && window.matchMedia) {
    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
  }
  return "dark";
};

/* ---- component ------------------------------------------------------------ */

const LiquidMetal = ({
  children,
  preset = "chromatic",
  theme = "auto",
  strength = 1,
  radius = 12,
  ringWidth = 2,
  glow = true,
  speed = 1,
  paused = false,
  className,
  style,
  ...rest
}: LiquidMetalProps) => {
  const wrapRef = useRef<HTMLSpanElement>(null);
  const ringRef = useRef<HTMLCanvasElement>(null);
  const glowRef = useRef<HTMLCanvasElement>(null);
  const elapsedRef = useRef(0); // survives instance re-creation so pause freezes
  const [resolved, setResolved] = useState<"dark" | "light">("dark");
  const [reduce, setReduce] = useState(false);

  const clampStrength = Math.max(0, Math.min(1, strength));

  // Follow the surrounding theme when asked to.
  useEffect(() => {
    if (theme !== "auto") {
      setResolved(theme);
      return;
    }
    const el = wrapRef.current;
    const update = () => setResolved(resolveTheme(el));
    update();
    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
    mq?.addEventListener?.("change", update);
    const mo = new MutationObserver(update);
    for (let node = el?.parentElement; node; node = node.parentElement) {
      mo.observe(node, { attributes: true, attributeFilter: ["class", "data-theme"] });
    }
    return () => {
      mq?.removeEventListener?.("change", update);
      mo.disconnect();
    };
  }, [theme]);

  // Live-track prefers-reduced-motion.
  useEffect(() => {
    const mq = window.matchMedia?.("(prefers-reduced-motion: reduce)");
    if (!mq) return;
    const update = () => setReduce(mq.matches);
    update();
    mq.addEventListener?.("change", update);
    return () => mq.removeEventListener?.("change", update);
  }, []);

  const mode = PRESETS[preset][resolved];

  // One registry entry drives the ring (+ optional glow) canvases.
  useEffect(() => {
    const wrap = wrapRef.current;
    const ring = ringRef.current;
    if (!wrap || !ring) return;

    const dpr = Math.min(2, typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1);
    const targets = glow && glowRef.current ? [ring, glowRef.current] : [ring];

    const inst: Instance = {
      targets,
      w: 2,
      h: 2,
      mode,
      strength: clampStrength,
      speed,
      paused: paused || reduce,
      visible: true,
      elapsed: elapsedRef.current || (reduce ? 0.6 : 0),
    };

    const measure = () => {
      const rect = wrap.getBoundingClientRect();
      inst.w = Math.max(2, Math.round(rect.width * dpr));
      inst.h = Math.max(2, Math.round(rect.height * dpr));
    };
    measure();

    register(inst);

    // Viewport and tab visibility are tracked separately: the instance only
    // renders while on-screen AND the tab is foregrounded, so returning to a
    // tab whose wrapper is scrolled away keeps it paused.
    let onScreen = true;
    const syncVisible = () => {
      inst.visible = onScreen && !document.hidden;
    };
    const ro = new ResizeObserver(measure);
    ro.observe(wrap);
    const io = new IntersectionObserver(
      ([e]) => {
        onScreen = e.isIntersecting;
        syncVisible();
      },
      { threshold: 0 },
    );
    io.observe(wrap);
    document.addEventListener("visibilitychange", syncVisible);

    return () => {
      elapsedRef.current = inst.elapsed; // preserve the clock for the next instance
      unregister(inst);
      ro.disconnect();
      io.disconnect();
      document.removeEventListener("visibilitychange", syncVisible);
    };
    // Re-create the instance whenever anything about how it draws changes.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [preset, resolved, clampStrength, speed, paused, reduce, glow, ringWidth]);

  const outerRadius = radius + ringWidth;

  // The "gradient-border" mask: show the canvas only in the padding band, so
  // the metal reads as a ring that respects the corner radius.
  const ringMask: CSSProperties = {
    padding: ringWidth,
    borderRadius: outerRadius,
    boxSizing: "border-box",
    WebkitMaskImage: "linear-gradient(#000 0 0), linear-gradient(#000 0 0)",
    WebkitMaskClip: "content-box, border-box",
    WebkitMaskComposite: "xor",
    maskImage: "linear-gradient(#000 0 0), linear-gradient(#000 0 0)",
    maskClip: "content-box, border-box",
    maskComposite: "exclude",
  };

  const canvasFill: CSSProperties = {
    position: "absolute",
    inset: 0,
    width: "100%",
    height: "100%",
    display: "block",
  };

  const glowSpread = ringWidth * 3;

  return (
    <span
      ref={wrapRef}
      className={className}
      style={{
        position: "relative",
        display: "inline-flex",
        padding: ringWidth,
        borderRadius: outerRadius,
        ...style,
      }}
      {...rest}
    >
      {glow && (
        <span
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: -glowSpread,
            borderRadius: outerRadius + glowSpread,
            filter: `blur(${Math.max(6, ringWidth * 4)}px)`,
            opacity: 0.55 * clampStrength,
            pointerEvents: "none",
            zIndex: 0,
          }}
        >
          <canvas ref={glowRef} style={canvasFill} />
        </span>
      )}

      <span aria-hidden="true" style={{ position: "absolute", inset: 0, pointerEvents: "none", zIndex: 1, ...ringMask }}>
        <canvas ref={ringRef} style={canvasFill} />
      </span>

      {/* Content wrapper. `flex: 1` + minWidth: 0 lets it fill a stretched
          outer (a caller passing width/flex) instead of shrink-wrapping, so a
          full-width child sits flush inside the ring; for the default content-
          sized outer it still hugs the content. */}
      <span style={{ position: "relative", zIndex: 2, display: "inline-flex", flex: "1 1 auto", minWidth: 0, borderRadius: radius }}>
        {children}
      </span>
    </span>
  );
};

export default LiquidMetal;

import type { CSSProperties, ReactNode } from "react";
import { useId } from "react";

/**
 * IPhoneMock — a photoreal iPhone 15 Pro hardware frame you can drop any screen
 * into, shipped with a pixel-honest ChatGPT-for-iOS chat screen as the sample
 * payload.
 *
 * The whole device is authored once in a fixed logical resolution (a 430 × 920
 * "point" canvas that mirrors an iPhone 15 Pro's proportions) and then scaled as
 * a single unit with a CSS transform. That is the trick that keeps it crisp and
 * simple: corner radii, the titanium rail, the Dynamic Island, the status-bar
 * glyphs and every message bubble are laid out in real iOS points, so nothing
 * has to be re-tuned when you change `width` — you set one number and the entire
 * phone scales with sub-pixel fidelity.
 *
 * Realism lives in the details that read subconsciously:
 *   - a brushed-titanium rail drawn with a horizontal metal gradient plus an
 *     inner hairline and a bright top edge (not a flat grey border),
 *   - a true pill Dynamic Island with the front-camera lens sunk into it,
 *   - the four physical buttons (Action, Volume +/−, Side) as metal nubs,
 *   - the exact iOS status bar (9:41, signal, Wi-Fi, battery) and home indicator,
 *   - ChatGPT's real chat idiom: user turns as right-aligned grey bubbles,
 *     assistant turns as full-width unbubbled text, and a pill composer.
 *
 * Deps: react only. Everything is inline SVG + inline styles, so the snippet is
 * self-contained and theme-swaps (light/dark) from a single token object.
 */

/* ---- device geometry (logical iOS points) --------------------------------- */

const DEVICE_W = 430;
const DEVICE_H = 920;
const DEVICE_RADIUS = 68;
const FRAME = 14; // titanium rail + bezel, uniform
const SCREEN_RADIUS = 55;
const BEZEL_RING = 3; // black glass ring between the titanium frame and the screen
const SCREEN_W = DEVICE_W - (FRAME + BEZEL_RING) * 2; // 396 — the actual visible viewport
const SCREEN_H = DEVICE_H - (FRAME + BEZEL_RING) * 2; // 886

/* ---- app colour tokens ----------------------------------------------------- */

export type Scheme = "light" | "dark";

interface AppTokens {
  canvas: string; // screen background
  ink: string; // primary text
  sub: string; // secondary text / icons
  faint: string; // hairlines
  bubble: string; // user bubble fill
  bubbleInk: string; // user bubble text
  composer: string; // composer pill fill
  composerBorder: string;
  accent: string; // send / active
  statusInk: string; // status-bar glyphs (over canvas)
}

const TOKENS: Record<Scheme, AppTokens> = {
  light: {
    canvas: "#ffffff",
    ink: "#0d0d0d",
    sub: "#8e8ea0",
    faint: "#ececf1",
    bubble: "#f4f4f4",
    bubbleInk: "#0d0d0d",
    composer: "#ffffff",
    composerBorder: "#e5e5e5",
    accent: "#0d0d0d",
    statusInk: "#0d0d0d",
  },
  dark: {
    canvas: "#212121",
    ink: "#ececec",
    sub: "#9a9a9a",
    faint: "#ffffff1a",
    bubble: "#303030",
    bubbleInk: "#ececec",
    composer: "#2f2f2f",
    composerBorder: "#ffffff14",
    accent: "#ffffff",
    statusInk: "#ffffff",
  },
};

/* ---- conversation model ---------------------------------------------------- */

export interface Turn {
  role: "user" | "assistant";
  text: string;
  /** Render the assistant turn as an animated typing indicator. */
  typing?: boolean;
}

/** The sample script shown in the demo — swap freely, the shell renders any. */
export const sampleConversation: Turn[] = [
  { role: "user", text: "Explain quantum entanglement like I'm five 🧠" },
  {
    role: "assistant",
    text: "Imagine two magic coins. You flip them into separate boxes and mail one to the Moon. The instant you peek at yours and see heads, you *know* the other is tails — no matter how far apart they are. The coins were linked from the start. That linked-ness is entanglement.",
  },
  { role: "user", text: "Whoa. So can it send messages faster than light? 🚀" },
  {
    role: "assistant",
    text: "Nope — and that's the beautiful catch. You only get a random result until you compare notes over a normal (slower-than-light) channel. So the universe stays safe, but the correlation is still spooky.",
  },
  { role: "assistant", text: "", typing: true },
];

/* ---- brand + system glyphs (inline SVG, no assets) ------------------------- */

/** OpenAI "blossom" knot — stylised so the snippet ships with no external asset. */
function ChatGPTMark({ size = 22, color = "currentColor" }: { size?: number; color?: string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 256 260" aria-hidden="true">
      <path
        fill={color}
        d="M239.184 106.203a64.716 64.716 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.716 64.716 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.665 64.665 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.767 64.767 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483Zm-97.56 136.338a48.397 48.397 0 0 1-31.105-11.255l1.535-.87 51.67-29.825a8.595 8.595 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601Zm-104.466-44.61a48.345 48.345 0 0 1-5.781-32.589l1.534.921 51.722 29.826a8.339 8.339 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803ZM23.549 85.38a48.499 48.499 0 0 1 25.58-21.333v61.39a8.288 8.288 0 0 0 4.195 7.316l62.874 36.272-21.845 12.636a.819.819 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405v.256Zm179.466 41.695-63.08-36.63L161.73 77.86a.819.819 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.544 8.544 0 0 0-4.4-7.213Zm21.742-32.69-1.535-.922-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.716.716 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391v.205ZM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87-51.67 29.825a8.595 8.595 0 0 0-4.246 7.367l-.051 72.697Zm11.868-25.58 28.138-16.217 28.188 16.218v32.434l-28.086 16.218-28.188-16.218-.052-32.434Z"
      />
    </svg>
  );
}

/* iOS status-bar glyphs, drawn to the real proportions. */

function SignalGlyph({ color }: { color: string }) {
  // Four ascending cellular bars.
  return (
    <svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true">
      {[0, 1, 2, 3].map((i) => (
        <rect
          key={i}
          x={i * 4.6}
          y={9 - i * 3}
          width="3"
          height={3 + i * 3}
          rx="1"
          fill={color}
        />
      ))}
    </svg>
  );
}

function WifiGlyph({ color }: { color: string }) {
  return (
    <svg width="17" height="12" viewBox="0 0 17 12" aria-hidden="true" fill="none">
      <path d="M8.5 2C5.2 2 2.2 3.3 0 5.4l1.6 1.7C3.4 5.4 5.8 4.4 8.5 4.4s5.1 1 6.9 2.7L17 5.4C14.8 3.3 11.8 2 8.5 2Z" fill={color} />
      <path d="M8.5 6.4c-1.9 0-3.6.7-4.9 2l1.7 1.7c.8-.8 2-1.3 3.2-1.3s2.4.5 3.2 1.3l1.7-1.7c-1.3-1.3-3-2-4.9-2Z" fill={color} />
      <circle cx="8.5" cy="11" r="1.4" fill={color} />
    </svg>
  );
}

function BatteryGlyph({ color }: { color: string }) {
  return (
    <svg width="28" height="13" viewBox="0 0 28 13" aria-hidden="true">
      <rect x="0.5" y="0.5" width="23" height="12" rx="3.5" fill="none" stroke={color} strokeOpacity="0.4" />
      <rect x="2" y="2" width="18" height="9" rx="2" fill={color} />
      <rect x="25" y="4" width="2" height="5" rx="1" fill={color} fillOpacity="0.4" />
    </svg>
  );
}

/* Nav + composer glyphs. */

function SidebarGlyph({ color }: { color: string }) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="3" y="4.5" width="18" height="15" rx="3.2" stroke={color} strokeWidth="1.7" />
      <line x1="9" y1="4.5" x2="9" y2="19.5" stroke={color} strokeWidth="1.7" />
    </svg>
  );
}

function ComposeGlyph({ color }: { color: string }) {
  return (
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path
        d="M4 20h4l10.5-10.5a2.12 2.12 0 0 0-3-3L5 17v3Z"
        stroke={color}
        strokeWidth="1.7"
        strokeLinejoin="round"
      />
      <path d="M13.5 6.5l3 3" stroke={color} strokeWidth="1.7" strokeLinecap="round" />
    </svg>
  );
}

function ChevronDown({ color }: { color: string }) {
  return (
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M4 6l4 4 4-4" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function PlusGlyph({ color }: { color: string }) {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <line x1="11" y1="5.5" x2="11" y2="16.5" stroke={color} strokeWidth="2" strokeLinecap="round" />
      <line x1="5.5" y1="11" x2="16.5" y2="11" stroke={color} strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

function MicGlyph({ color }: { color: string }) {
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="9" y="3" width="6" height="11" rx="3" fill={color} />
      <path d="M6 11a6 6 0 0 0 12 0M12 17v3" stroke={color} strokeWidth="1.8" strokeLinecap="round" />
    </svg>
  );
}

function WaveformGlyph({ color }: { color: string }) {
  // The "voice mode" audio button — stacked bars inside a filled disc.
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
      {[
        [3, 6, 6],
        [6.5, 3, 12],
        [10, 5, 8],
        [13.5, 7, 4],
      ].map(([x, y, h], i) => (
        <rect key={i} x={x} y={y} width="1.8" height={h} rx="0.9" fill={color} />
      ))}
    </svg>
  );
}

/* ---- screen: ChatGPT for iOS ---------------------------------------------- */

export interface ChatGPTScreenProps {
  scheme?: Scheme;
  conversation?: Turn[];
  /** Header model label, e.g. "ChatGPT 5" or "ChatGPT 4o". */
  model?: string;
  /** Status-bar clock. iOS marketing shots always read 9:41. */
  time?: string;
}

/**
 * A faithful ChatGPT-for-iOS screen: iOS status bar, the model-name nav bar,
 * a full-width assistant / right-bubbled user thread, and the pill composer.
 * Sized to the phone's inner screen (402 × 892 pt) so it drops straight into
 * IPhoneMock, but it renders standalone too.
 */
export function ChatGPTScreen({
  scheme = "light",
  conversation = sampleConversation,
  model = "ChatGPT 5",
  time = "9:41",
}: ChatGPTScreenProps) {
  const t = TOKENS[scheme];
  const styleId = useId().replace(/[:]/g, "");

  return (
    <div
      style={{
        width: SCREEN_W,
        height: SCREEN_H,
        background: t.canvas,
        color: t.ink,
        display: "flex",
        flexDirection: "column",
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
        WebkitFontSmoothing: "antialiased",
        overflow: "hidden",
      }}
    >
      <style>{`
        @keyframes ${styleId}-blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} }
        .${styleId}-dot { animation: ${styleId}-blink 1.3s infinite ease-in-out; }
      `}</style>

      {/* Status bar — 9:41 · signal · Wi-Fi · battery */}
      <div
        style={{
          height: 54,
          flexShrink: 0,
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          padding: "0 30px",
          paddingTop: 8,
        }}
      >
        <span style={{ fontSize: 17, fontWeight: 600, letterSpacing: 0.2, color: t.statusInk }}>
          {time}
        </span>
        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
          <SignalGlyph color={t.statusInk} />
          <WifiGlyph color={t.statusInk} />
          <BatteryGlyph color={t.statusInk} />
        </div>
      </div>

      {/* Nav bar — sidebar · model name (tappable) · new chat */}
      <div
        style={{
          height: 46,
          flexShrink: 0,
          display: "grid",
          gridTemplateColumns: "44px 1fr 44px",
          alignItems: "center",
          padding: "0 12px",
        }}
      >
        <SidebarGlyph color={t.ink} />
        <button
          type="button"
          style={{
            justifySelf: "center",
            display: "inline-flex",
            alignItems: "center",
            gap: 4,
            border: "none",
            background: "transparent",
            color: t.ink,
            fontSize: 17,
            fontWeight: 600,
            cursor: "pointer",
            padding: 0,
          }}
        >
          {model}
          <span style={{ opacity: 0.4 }}>
            <ChevronDown color={t.ink} />
          </span>
        </button>
        <span style={{ justifySelf: "end" }}>
          <ComposeGlyph color={t.ink} />
        </span>
      </div>

      {/* Thread */}
      <div
        style={{
          flex: 1,
          overflow: "hidden",
          display: "flex",
          flexDirection: "column",
          gap: 18,
          padding: "14px 18px 8px",
        }}
      >
        {conversation.map((turn, i) =>
          turn.role === "user" ? (
            <div key={i} style={{ display: "flex", justifyContent: "flex-end" }}>
              <div
                style={{
                  maxWidth: "78%",
                  background: t.bubble,
                  color: t.bubbleInk,
                  padding: "11px 16px",
                  borderRadius: 22,
                  borderBottomRightRadius: 8,
                  fontSize: 16.5,
                  lineHeight: 1.4,
                }}
              >
                {turn.text}
              </div>
            </div>
          ) : (
            <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start" }}>
              <div
                style={{
                  flexShrink: 0,
                  width: 30,
                  height: 30,
                  borderRadius: "50%",
                  border: `1px solid ${t.faint}`,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  color: t.ink,
                }}
              >
                <ChatGPTMark size={19} color={t.ink} />
              </div>
              {turn.typing ? (
                <div style={{ display: "flex", gap: 5, paddingTop: 12 }}>
                  {[0, 1, 2].map((d) => (
                    <span
                      key={d}
                      className={`${styleId}-dot`}
                      style={{
                        width: 7,
                        height: 7,
                        borderRadius: "50%",
                        background: t.sub,
                        animationDelay: `${d * 0.18}s`,
                      }}
                    />
                  ))}
                </div>
              ) : (
                <div style={{ fontSize: 16.5, lineHeight: 1.5, color: t.ink, paddingTop: 3 }}>
                  {renderRich(turn.text)}
                </div>
              )}
            </div>
          ),
        )}
      </div>

      {/* Composer — plus · placeholder · mic · voice */}
      <div style={{ flexShrink: 0, padding: "6px 14px 8px" }}>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 10,
            background: t.composer,
            border: `1px solid ${t.composerBorder}`,
            borderRadius: 26,
            padding: "8px 10px 8px 12px",
            boxShadow: scheme === "light" ? "0 1px 2px rgba(0,0,0,0.04)" : "none",
          }}
        >
          <PlusGlyph color={t.sub} />
          <span style={{ flex: 1, fontSize: 16.5, color: t.sub }}>Ask anything</span>
          <MicGlyph color={t.ink} />
          <span
            style={{
              width: 34,
              height: 34,
              borderRadius: "50%",
              background: t.accent,
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              flexShrink: 0,
            }}
          >
            <WaveformGlyph color={t.canvas} />
          </span>
        </div>
      </div>

      {/* Home indicator */}
      <div style={{ height: 26, flexShrink: 0, display: "flex", justifyContent: "center", alignItems: "center" }}>
        <div style={{ width: 138, height: 5, borderRadius: 3, background: t.ink, opacity: 0.85 }} />
      </div>
    </div>
  );
}

/** Minimal *italic* renderer so the sample copy can carry light emphasis. */
function renderRich(text: string): ReactNode {
  return text.split(/(\*[^*]+\*)/g).map((chunk, i) =>
    chunk.startsWith("*") && chunk.endsWith("*") ? (
      <em key={i}>{chunk.slice(1, -1)}</em>
    ) : (
      <span key={i}>{chunk}</span>
    ),
  );
}

/* ---- hardware: the iPhone 15 Pro frame ------------------------------------ */

/** A physical side button drawn as a titanium nub. */
function SideButton({
  side,
  top,
  height,
}: {
  side: "left" | "right";
  top: number;
  height: number;
}) {
  return (
    <div
      style={{
        position: "absolute",
        top,
        height,
        width: 3,
        [side]: -1,
        borderRadius: 2,
        background:
          side === "left"
            ? "linear-gradient(90deg,#3a3a3d,#6b6b70 60%,#48484b)"
            : "linear-gradient(90deg,#48484b,#6b6b70 40%,#3a3a3d)",
        boxShadow: "inset 0 1px 1px rgba(255,255,255,0.25)",
      }}
    />
  );
}

export interface IPhoneMockProps {
  /** Rendered width in CSS px. The whole device scales from here. Default 300. */
  width?: number;
  /** Screen payload. Defaults to the bundled ChatGPT screen. */
  children?: ReactNode;
  /** Which titanium finish the frame reads as. */
  titanium?: "natural" | "black" | "blue";
  style?: CSSProperties;
}

const RAILS: Record<NonNullable<IPhoneMockProps["titanium"]>, string> = {
  // Horizontal metal gradient: dark edge → bright specular → dark edge.
  natural: "linear-gradient(90deg,#2c2c2e 0%,#8b8b90 12%,#5a5a5f 30%,#3d3d40 50%,#5a5a5f 70%,#9a9a9f 88%,#2c2c2e 100%)",
  black: "linear-gradient(90deg,#141416 0%,#4a4a4d 12%,#2a2a2c 30%,#151517 50%,#2a2a2c 70%,#525256 88%,#131315 100%)",
  blue: "linear-gradient(90deg,#2a3340 0%,#7d8a9c 12%,#495260 30%,#333c48 50%,#495260 70%,#8792a4 88%,#28313d 100%)",
};

/**
 * The device frame. Everything inside is authored in the 430 × 920 logical
 * canvas and scaled together via a single transform, so the phone stays crisp
 * at any `width` and the caller only ever thinks in one number.
 */
export default function IPhoneMock({
  width = 300,
  children,
  titanium = "natural",
  style,
}: IPhoneMockProps) {
  const scale = width / DEVICE_W;

  return (
    <div
      style={{
        width: DEVICE_W * scale,
        height: DEVICE_H * scale,
        ...style,
      }}
    >
      <div
        style={{
          width: DEVICE_W,
          height: DEVICE_H,
          transform: `scale(${scale})`,
          transformOrigin: "top left",
          position: "relative",
        }}
      >
        {/* Physical buttons — behind the metal so they read as extrusions */}
        <SideButton side="left" top={196} height={30} /> {/* Action button */}
        <SideButton side="left" top={250} height={62} /> {/* Volume up */}
        <SideButton side="left" top={330} height={62} /> {/* Volume down */}
        <SideButton side="right" top={286} height={104} /> {/* Side button */}

        {/* Titanium frame */}
        <div
          style={{
            position: "absolute",
            inset: 0,
            borderRadius: DEVICE_RADIUS,
            background: RAILS[titanium],
            padding: FRAME,
            boxShadow: [
              "0 30px 60px -15px rgba(0,0,0,0.55)", // cast shadow
              "0 4px 12px rgba(0,0,0,0.4)",
              "inset 0 0 0 1px rgba(255,255,255,0.18)", // bright rail top-line
              "inset 0 -2px 6px rgba(0,0,0,0.5)",
            ].join(","),
            boxSizing: "border-box",
          }}
        >
          {/* Black bezel ring — the sliver of glass surround before the screen */}
          <div
            style={{
              width: "100%",
              height: "100%",
              borderRadius: SCREEN_RADIUS + 2,
              background: "#000",
              padding: 3,
              boxSizing: "border-box",
              boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.9)",
            }}
          >
            {/* Screen — clips the app content */}
            <div
              style={{
                position: "relative",
                width: "100%",
                height: "100%",
                borderRadius: SCREEN_RADIUS,
                overflow: "hidden",
                background: "#000",
              }}
            >
              {children ?? <ChatGPTScreen />}

              {/* Dynamic Island — sits above the app, with a sunken lens */}
              <div
                style={{
                  position: "absolute",
                  top: 12,
                  left: "50%",
                  transform: "translateX(-50%)",
                  width: 118,
                  height: 34,
                  borderRadius: 20,
                  background: "#000",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "flex-end",
                  paddingRight: 12,
                  boxShadow: "inset 0 0 2px rgba(255,255,255,0.06)",
                  pointerEvents: "none",
                }}
              >
                <div
                  style={{
                    width: 11,
                    height: 11,
                    borderRadius: "50%",
                    background:
                      "radial-gradient(circle at 35% 30%, #2b3a4a 0%, #0a0f16 55%, #000 100%)",
                    boxShadow: "inset 0 0 1px rgba(120,170,220,0.5)",
                  }}
                />
              </div>

              {/* Screen glare — a soft diagonal sheen over the glass */}
              <div
                aria-hidden="true"
                style={{
                  position: "absolute",
                  inset: 0,
                  borderRadius: SCREEN_RADIUS,
                  background:
                    "linear-gradient(125deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 100%)",
                  pointerEvents: "none",
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

import type { CSSProperties, ReactNode } from "react";
import { useId } from "react";

/**
 * MacBookMock — a photoreal MacBook Pro hardware frame you can drop any screen
 * into, shipped with a pixel-honest Claude-desktop chat screen as the sample
 * payload.
 *
 * Same trick as its iPhone sibling: the whole laptop is authored once in a
 * fixed logical canvas (a 1118 × 704 "point" space that mirrors a 14" MacBook
 * Pro seen head-on) and then scaled as a single unit with one CSS transform.
 * The aluminium lid, the black-glass bezel, the camera notch, the tapered base
 * with its finger-groove and every pixel of the app are laid out in real
 * points, so nothing is re-tuned when you change `width` — you set one number
 * and the entire machine scales with sub-pixel fidelity.
 *
 * Realism lives in the details that read subconsciously:
 *   - a brushed-aluminium lid rim and a vertically-lit tapered base (not a flat
 *     grey box), with a soft contact shadow on the ground beneath it,
 *   - the real MacBook Pro camera notch dipping into the top of the display,
 *   - a macOS window shell: traffic-light buttons, a warm sidebar, a model
 *     selector, and the exact Claude chat idiom (right-aligned user bubbles,
 *     full-width Claude turns behind the sunburst mark, and the pill composer),
 *   - two chassis finishes (Silver / Space Black) and a light/dark app theme,
 *     both live React — no bitmaps.
 *
 * Deps: react only. Everything is inline SVG + inline styles, so the snippet is
 * self-contained and theme-swaps from a single token object.
 */

/* ---- device geometry (logical points, 14" MacBook Pro head-on) ------------ */

const DISPLAY_W = 1000;
const DISPLAY_H = 640; // ~16:10.24
const BEZEL = 13; // black-glass border around the display
const RIM = 6; // thin aluminium edge outside the glass
const INSET = BEZEL + RIM; // 19
const LID_W = DISPLAY_W + INSET * 2; // 1038
const LID_H = DISPLAY_H + INSET * 2; // 678
const LID_RADIUS = 26;
const SCREEN_RADIUS = 8;
const NOTCH_W = 190;
const NOTCH_H = 20;
const BASE_H = 26;
const BASE_OVERHANG = 40; // base flares this far past the lid on each side
const BASE_W = LID_W + BASE_OVERHANG * 2; // 1118

const DEVICE_W = BASE_W; // 1118
const DEVICE_H = LID_H + BASE_H; // 704

/* ---- app colour tokens (Claude desktop) ----------------------------------- */

export type Scheme = "light" | "dark";

interface AppTokens {
  canvas: string; // main chat background
  sidebar: string; // sidebar fill
  ink: string; // primary text
  sub: string; // secondary text / icons
  faint: string; // hairlines / borders
  active: string; // active sidebar row
  bubble: string; // user bubble fill
  bubbleInk: string;
  composer: string; // composer surface
  composerBorder: string;
  accent: string; // Claude clay / send button
  accentInk: string; // glyph on the accent
}

const TOKENS: Record<Scheme, AppTokens> = {
  light: {
    canvas: "#faf9f5",
    sidebar: "#f2f0e9",
    ink: "#262624",
    sub: "#8a897f",
    faint: "#e7e3d8",
    active: "#e7e2d5",
    bubble: "#f0e8d9",
    bubbleInk: "#33322d",
    composer: "#ffffff",
    composerBorder: "#e5e0d3",
    accent: "#d97757",
    accentInk: "#ffffff",
  },
  dark: {
    canvas: "#262624",
    sidebar: "#1f1e1d",
    ink: "#f5f4ee",
    sub: "#9d9b90",
    faint: "#ffffff14",
    active: "#35332e",
    bubble: "#37342e",
    bubbleInk: "#f0ede4",
    composer: "#30302e",
    composerBorder: "#ffffff1f",
    accent: "#d97757",
    accentInk: "#fdf6f1",
  },
};

/* ---- conversation model ---------------------------------------------------- */

export interface Turn {
  role: "user" | "assistant";
  /** Supports **bold**, *italic*, and blank-line paragraphs / single newlines. */
  text: string;
  /** Render the assistant turn as an animated typing indicator. */
  typing?: boolean;
}

/** The sample script shown in the demo — swap freely, the shell renders any. */
export const sampleConversation: Turn[] = [
  {
    role: "user",
    text: "Draft a warm but concise out-of-office reply — I'm away Aug 27 – Sep 8. ✈️",
  },
  {
    role: "assistant",
    text: "Here's one that stays friendly without over-explaining:\n\n**Subject:** Out of office until Sep 8\n\nThanks for your note! I'm away until **September 8** with limited access to email, so I may be slow to reply. I'll get back to you as soon as I'm back at my desk.\n\nFor anything urgent, please reach out to my team at *team@example.com*.\n\nBest,\nEito",
  },
  { role: "user", text: "Love it. Make the tone a touch more formal." },
  { role: "assistant", text: "", typing: true },
];

const RECENTS = [
  "Out-of-office reply",
  "Refactor auth middleware",
  "Kyoto trip itinerary",
  "Explain diffusion models",
  "Weekly newsletter draft",
];

/* ---- brand + system glyphs (inline SVG, no assets) ------------------------- */

/** Claude "sunburst" mark — radiating rounded rays, drawn from a single loop. */
function ClaudeBurst({ size = 20, color = "#d97757" }: { size?: number; color?: string }) {
  const rays = 12;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
      <g fill={color}>
        {Array.from({ length: rays }).map((_, i) => (
          <rect
            key={i}
            x={11.05}
            y={1.8}
            width={1.9}
            height={9.2}
            rx={0.95}
            transform={`rotate(${(i * 360) / rays} 12 12)`}
          />
        ))}
      </g>
    </svg>
  );
}

function EditGlyph({ color }: { color: string }) {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path
        d="M4 20h4L18.5 9.5a2.12 2.12 0 0 0-3-3L5 17v3Z"
        stroke={color}
        strokeWidth="1.7"
        strokeLinejoin="round"
      />
      <path d="M13.5 6.5l3 3" stroke={color} strokeWidth="1.7" strokeLinecap="round" />
    </svg>
  );
}

function SidebarGlyph({ color }: { color: string }) {
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <rect x="3" y="4.5" width="18" height="15" rx="3.2" stroke={color} strokeWidth="1.7" />
      <line x1="9" y1="4.5" x2="9" y2="19.5" stroke={color} strokeWidth="1.7" />
    </svg>
  );
}

function SearchGlyph({ color }: { color: string }) {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="11" cy="11" r="6.5" stroke={color} strokeWidth="1.7" />
      <line x1="16" y1="16" x2="20.5" y2="20.5" stroke={color} strokeWidth="1.7" strokeLinecap="round" />
    </svg>
  );
}

function ChevronDown({ color, size = 14 }: { color: string; size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M4 6l4 4 4-4" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function PlusGlyph({ color }: { color: string }) {
  return (
    <svg width="20" height="20" viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <line x1="11" y1="5" x2="11" y2="17" stroke={color} strokeWidth="1.9" strokeLinecap="round" />
      <line x1="5" y1="11" x2="17" y2="11" stroke={color} strokeWidth="1.9" strokeLinecap="round" />
    </svg>
  );
}

function ArrowUp({ color }: { color: string }) {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <line x1="12" y1="19" x2="12" y2="6" stroke={color} strokeWidth="2.2" strokeLinecap="round" />
      <path d="M6 12l6-6 6 6" stroke={color} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function ShareGlyph({ color }: { color: string }) {
  return (
    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <circle cx="18" cy="5" r="2.6" stroke={color} strokeWidth="1.6" />
      <circle cx="6" cy="12" r="2.6" stroke={color} strokeWidth="1.6" />
      <circle cx="18" cy="19" r="2.6" stroke={color} strokeWidth="1.6" />
      <path d="M8.3 10.7l7.4-4.3M8.3 13.3l7.4 4.3" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  );
}

/* ---- screen: Claude for desktop ------------------------------------------- */

export interface ClaudeScreenProps {
  scheme?: Scheme;
  conversation?: Turn[];
  /** Model label shown in the header + composer, e.g. "Claude Opus 4.5". */
  model?: string;
  /** Signed-in display name, shown in the sidebar footer. */
  user?: string;
}

/**
 * A faithful Claude-desktop screen: the macOS traffic lights, a warm sidebar
 * with recents and an account footer, a model-selector header, the centred
 * chat column (right-bubbled user turns, full-width Claude turns behind the
 * sunburst), and the pill composer. Sized to the laptop's inner display
 * (1000 × 640 pt) so it drops straight into MacBookMock, but renders standalone.
 */
export function ClaudeScreen({
  scheme = "light",
  conversation = sampleConversation,
  model = "Claude Opus 4.5",
  user = "Eito Miyamura",
}: ClaudeScreenProps) {
  const t = TOKENS[scheme];
  const styleId = useId().replace(/[:]/g, "");

  return (
    <div
      style={{
        width: DISPLAY_W,
        height: DISPLAY_H,
        background: t.canvas,
        color: t.ink,
        display: "flex",
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
        WebkitFontSmoothing: "antialiased",
        overflow: "hidden",
      }}
    >
      <style>{`
        @keyframes ${styleId}-blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} }
        .${styleId}-dot { animation: ${styleId}-blink 1.3s infinite ease-in-out; }
      `}</style>

      {/* ---- Sidebar ---- */}
      <aside
        style={{
          width: 236,
          flexShrink: 0,
          background: t.sidebar,
          borderRight: `1px solid ${t.faint}`,
          display: "flex",
          flexDirection: "column",
          padding: "0 10px",
        }}
      >
        {/* traffic lights + collapse */}
        <div
          style={{
            height: 44,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            paddingLeft: 4,
          }}
        >
          <div style={{ display: "flex", gap: 8 }}>
            {["#ff5f57", "#febc2e", "#28c840"].map((c) => (
              <span
                key={c}
                style={{
                  width: 12,
                  height: 12,
                  borderRadius: "50%",
                  background: c,
                  boxShadow: "inset 0 0 0 0.5px rgba(0,0,0,0.18)",
                }}
              />
            ))}
          </div>
          <span style={{ opacity: 0.55 }}>
            <SidebarGlyph color={t.sub} />
          </span>
        </div>

        {/* new chat */}
        <button
          type="button"
          style={{
            display: "flex",
            alignItems: "center",
            gap: 9,
            width: "100%",
            border: "none",
            background: "transparent",
            color: t.accent,
            fontSize: 14.5,
            fontWeight: 600,
            padding: "9px 8px",
            borderRadius: 9,
            cursor: "pointer",
          }}
        >
          <EditGlyph color={t.accent} />
          New chat
        </button>

        {/* search */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 8,
            padding: "8px 9px",
            margin: "2px 0 10px",
            borderRadius: 9,
            color: t.sub,
            fontSize: 13.5,
          }}
        >
          <SearchGlyph color={t.sub} />
          <span style={{ flex: 1 }}>Search chats</span>
          <span style={{ fontSize: 11.5, opacity: 0.7 }}>⌘K</span>
        </div>

        {/* recents */}
        <div
          style={{
            fontSize: 11,
            fontWeight: 600,
            letterSpacing: 0.4,
            textTransform: "uppercase",
            color: t.sub,
            padding: "0 9px 6px",
          }}
        >
          Recents
        </div>
        <nav style={{ display: "flex", flexDirection: "column", gap: 1 }}>
          {RECENTS.map((label, i) => (
            <div
              key={label}
              style={{
                display: "flex",
                alignItems: "center",
                gap: 8,
                padding: "8px 9px",
                borderRadius: 8,
                fontSize: 13.5,
                color: t.ink,
                background: i === 0 ? t.active : "transparent",
                fontWeight: i === 0 ? 500 : 400,
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis",
              }}
            >
              {label}
            </div>
          ))}
        </nav>

        <div style={{ flex: 1 }} />

        {/* account footer */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: 9,
            padding: "9px 8px",
            marginBottom: 10,
            borderRadius: 10,
          }}
        >
          <span
            style={{
              width: 28,
              height: 28,
              borderRadius: "50%",
              background: "linear-gradient(135deg,#d97757,#c15f3c)",
              color: "#fff",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontSize: 12,
              fontWeight: 600,
              flexShrink: 0,
            }}
          >
            EM
          </span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div
              style={{
                fontSize: 13,
                fontWeight: 600,
                color: t.ink,
                whiteSpace: "nowrap",
                overflow: "hidden",
                textOverflow: "ellipsis",
              }}
            >
              {user}
            </div>
            <div style={{ fontSize: 11.5, color: t.sub }}>Max plan</div>
          </div>
          <ChevronDown color={t.sub} />
        </div>
      </aside>

      {/* ---- Main ---- */}
      <main style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
        {/* header — model selector + share */}
        <header
          style={{
            height: 52,
            flexShrink: 0,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            padding: "0 20px",
          }}
        >
          <button
            type="button"
            style={{
              display: "inline-flex",
              alignItems: "center",
              gap: 6,
              border: "none",
              background: "transparent",
              color: t.ink,
              fontSize: 15.5,
              fontWeight: 600,
              cursor: "pointer",
              padding: "6px 8px",
              borderRadius: 8,
            }}
          >
            {model}
            <span style={{ opacity: 0.45 }}>
              <ChevronDown color={t.ink} />
            </span>
          </button>
          <span style={{ opacity: 0.7 }}>
            <ShareGlyph color={t.sub} />
          </span>
        </header>

        {/* thread — centred column */}
        <div style={{ flex: 1, overflow: "hidden", display: "flex", justifyContent: "center" }}>
          <div
            style={{
              width: "100%",
              maxWidth: 640,
              display: "flex",
              flexDirection: "column",
              gap: 22,
              padding: "10px 24px 4px",
            }}
          >
            {conversation.map((turn, i) =>
              turn.role === "user" ? (
                <div key={i} style={{ display: "flex", justifyContent: "flex-end" }}>
                  <div
                    style={{
                      maxWidth: "82%",
                      background: t.bubble,
                      color: t.bubbleInk,
                      padding: "11px 16px",
                      borderRadius: 18,
                      borderBottomRightRadius: 6,
                      fontSize: 15,
                      lineHeight: 1.5,
                    }}
                  >
                    {turn.text}
                  </div>
                </div>
              ) : (
                <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <div
                    style={{
                      flexShrink: 0,
                      width: 28,
                      height: 28,
                      borderRadius: "50%",
                      border: `1px solid ${t.faint}`,
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      background: scheme === "light" ? "#fff" : "#ffffff08",
                    }}
                  >
                    <ClaudeBurst size={17} color={t.accent} />
                  </div>
                  {turn.typing ? (
                    <div style={{ display: "flex", gap: 5, paddingTop: 11 }}>
                      {[0, 1, 2].map((d) => (
                        <span
                          key={d}
                          className={`${styleId}-dot`}
                          style={{
                            width: 7,
                            height: 7,
                            borderRadius: "50%",
                            background: t.sub,
                            animationDelay: `${d * 0.18}s`,
                          }}
                        />
                      ))}
                    </div>
                  ) : (
                    <div style={{ flex: 1, fontSize: 15, lineHeight: 1.6, color: t.ink, paddingTop: 3 }}>
                      {renderRich(turn.text)}
                    </div>
                  )}
                </div>
              ),
            )}
          </div>
        </div>

        {/* composer */}
        <div style={{ flexShrink: 0, display: "flex", justifyContent: "center", padding: "6px 24px 8px" }}>
          <div style={{ width: "100%", maxWidth: 700 }}>
            <div
              style={{
                background: t.composer,
                border: `1px solid ${t.composerBorder}`,
                borderRadius: 22,
                padding: "12px 12px 10px 16px",
                boxShadow: scheme === "light" ? "0 2px 8px rgba(60,50,30,0.06)" : "none",
              }}
            >
              <div style={{ fontSize: 15, color: t.sub, padding: "2px 0 12px" }}>Reply to Claude…</div>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span
                  style={{
                    width: 30,
                    height: 30,
                    borderRadius: "50%",
                    border: `1px solid ${t.faint}`,
                    display: "inline-flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <PlusGlyph color={t.sub} />
                </span>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 4, fontSize: 13, color: t.sub }}>
                    {model.replace("Claude ", "")}
                    <ChevronDown color={t.sub} size={13} />
                  </span>
                  <span
                    style={{
                      width: 32,
                      height: 32,
                      borderRadius: "50%",
                      background: t.accent,
                      display: "inline-flex",
                      alignItems: "center",
                      justifyContent: "center",
                      flexShrink: 0,
                    }}
                  >
                    <ArrowUp color={t.accentInk} />
                  </span>
                </div>
              </div>
            </div>
            <div style={{ textAlign: "center", fontSize: 11.5, color: t.sub, paddingTop: 7 }}>
              Claude can make mistakes. Please double-check responses.
            </div>
          </div>
        </div>
      </main>
    </div>
  );
}

/** Minimal renderer: blank-line paragraphs, single newlines, **bold**, *italic*. */
function renderRich(text: string): ReactNode {
  return text.split("\n\n").map((block, bi) => (
    <p key={bi} style={{ margin: bi === 0 ? 0 : "12px 0 0" }}>
      {block.split("\n").map((line, li) => (
        <span key={li}>
          {li > 0 && <br />}
          {renderInline(line, `${bi}-${li}`)}
        </span>
      ))}
    </p>
  ));
}

function renderInline(text: string, keyBase: string): ReactNode[] {
  return text
    .split(/(\*\*[^*]+\*\*|\*[^*]+\*)/g)
    .filter(Boolean)
    .map((chunk, i) => {
      const key = `${keyBase}-${i}`;
      if (chunk.startsWith("**") && chunk.endsWith("**"))
        return <strong key={key}>{chunk.slice(2, -2)}</strong>;
      if (chunk.startsWith("*") && chunk.endsWith("*")) return <em key={key}>{chunk.slice(1, -1)}</em>;
      return <span key={key}>{chunk}</span>;
    });
}

/* ---- hardware: the MacBook Pro frame -------------------------------------- */

export interface MacBookMockProps {
  /** Rendered width in CSS px. The whole laptop scales from here. Default 720. */
  width?: number;
  /** Screen payload. Defaults to the bundled Claude screen. */
  children?: ReactNode;
  /** Aluminium finish the chassis reads as. */
  chassis?: "silver" | "spaceblack";
  style?: CSSProperties;
}

interface ChassisTokens {
  lid: string; // lid rim gradient
  baseTop: string; // base gradient top stop
  baseMid: string;
  baseBot: string;
  edge: string; // hairline edge
}

const CHASSIS: Record<NonNullable<MacBookMockProps["chassis"]>, ChassisTokens> = {
  silver: {
    lid: "linear-gradient(180deg,#e2e2e5,#c6c6ca 55%,#b4b4b8)",
    baseTop: "#ececed",
    baseMid: "#cfcfd3",
    baseBot: "#a8a8ad",
    edge: "rgba(255,255,255,0.6)",
  },
  spaceblack: {
    lid: "linear-gradient(180deg,#48484b,#37373a 55%,#2c2c2e)",
    baseTop: "#54545a",
    baseMid: "#3c3c40",
    baseBot: "#242427",
    edge: "rgba(255,255,255,0.14)",
  },
};

/**
 * The device frame. Everything inside is authored in the 1118 × 704 logical
 * canvas and scaled together via a single transform, so the laptop stays crisp
 * at any `width` and the caller only ever thinks in one number.
 */
export default function MacBookMock({
  width = 720,
  children,
  chassis = "silver",
  style,
}: MacBookMockProps) {
  const scale = width / DEVICE_W;
  const gid = useId().replace(/[:]/g, "");
  const c = CHASSIS[chassis];

  // Base outline: a shallow tapered wedge with rounded bottom corners and a
  // finger-groove scooped from the top-centre front edge.
  const bw = BASE_W;
  const cx = bw / 2;
  const notchR = 54;
  const notchDepth = 11;
  const topInset = 46;
  const br = 11;
  const basePath = [
    `M ${topInset} 1`,
    `L ${cx - notchR} 1`,
    `Q ${cx} ${1 + notchDepth} ${cx + notchR} 1`,
    `L ${bw - topInset} 1`,
    `L ${bw - 1} ${BASE_H - br}`,
    `Q ${bw - 1} ${BASE_H} ${bw - 1 - br} ${BASE_H}`,
    `L ${br + 1} ${BASE_H}`,
    `Q 1 ${BASE_H} 1 ${BASE_H - br}`,
    "Z",
  ].join(" ");

  return (
    <div style={{ width: DEVICE_W * scale, height: DEVICE_H * scale, ...style }}>
      <div
        style={{
          width: DEVICE_W,
          height: DEVICE_H,
          transform: `scale(${scale})`,
          transformOrigin: "top left",
          position: "relative",
        }}
      >
        {/* contact shadow on the ground */}
        <div
          aria-hidden="true"
          style={{
            position: "absolute",
            left: DEVICE_W * 0.07,
            bottom: -14,
            width: DEVICE_W * 0.86,
            height: 30,
            borderRadius: "50%",
            background: "radial-gradient(ellipse at center, rgba(0,0,0,0.42), rgba(0,0,0,0) 72%)",
            filter: "blur(6px)",
          }}
        />

        {/* base / deck front */}
        <svg
          width={BASE_W}
          height={BASE_H}
          viewBox={`0 0 ${BASE_W} ${BASE_H}`}
          style={{ position: "absolute", left: 0, top: LID_H }}
          aria-hidden="true"
        >
          <defs>
            <linearGradient id={`${gid}-base`} x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor={c.baseTop} />
              <stop offset="0.4" stopColor={c.baseMid} />
              <stop offset="1" stopColor={c.baseBot} />
            </linearGradient>
          </defs>
          <path d={basePath} fill={`url(#${gid}-base)`} />
          {/* bright top hairline + groove shading */}
          <path
            d={`M ${topInset} 1 L ${cx - notchR} 1 Q ${cx} ${1 + notchDepth} ${cx + notchR} 1 L ${bw - topInset} 1`}
            fill="none"
            stroke={c.edge}
            strokeWidth="1.2"
          />
        </svg>

        {/* lid */}
        <div
          style={{
            position: "absolute",
            left: BASE_OVERHANG,
            top: 0,
            width: LID_W,
            height: LID_H,
            borderRadius: LID_RADIUS,
            background: c.lid,
            padding: RIM,
            boxSizing: "border-box",
            boxShadow: [
              "0 22px 48px -14px rgba(0,0,0,0.5)",
              "inset 0 1px 0 rgba(255,255,255,0.35)",
              "inset 0 0 0 0.5px rgba(0,0,0,0.25)",
            ].join(","),
          }}
        >
          {/* black-glass bezel */}
          <div
            style={{
              width: "100%",
              height: "100%",
              borderRadius: LID_RADIUS - RIM,
              background: "#050505",
              padding: BEZEL,
              boxSizing: "border-box",
              boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.9)",
            }}
          >
            {/* display — clips the app */}
            <div
              style={{
                position: "relative",
                width: "100%",
                height: "100%",
                borderRadius: SCREEN_RADIUS,
                overflow: "hidden",
                background: "#000",
              }}
            >
              {children ?? <ClaudeScreen />}

              {/* camera notch */}
              <div
                style={{
                  position: "absolute",
                  top: 0,
                  left: "50%",
                  transform: "translateX(-50%)",
                  width: NOTCH_W,
                  height: NOTCH_H,
                  background: "#050505",
                  borderBottomLeftRadius: 11,
                  borderBottomRightRadius: 11,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  pointerEvents: "none",
                }}
              >
                <span
                  style={{
                    width: 6,
                    height: 6,
                    borderRadius: "50%",
                    background: "radial-gradient(circle at 35% 30%, #223, #000 70%)",
                    boxShadow: "inset 0 0 1px rgba(120,150,200,0.5)",
                  }}
                />
              </div>

              {/* glass glare */}
              <div
                aria-hidden="true"
                style={{
                  position: "absolute",
                  inset: 0,
                  borderRadius: SCREEN_RADIUS,
                  background:
                    "linear-gradient(120deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 100%)",
                  pointerEvents: "none",
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

import {
  useCallback,
  useEffect,
  useId,
  useRef,
  useState,
  type CSSProperties,
  type ReactNode,
} from "react";

/**
 * LaunchFilm — a product-launch promo "video" with no video file.
 *
 * The whole film is authored as DATA: an ordered list of chapters, each with a
 * label, a duration (seconds), a timestamp caption and a live React scene. A
 * single requestAnimationFrame clock advances a normalized playhead across the
 * total runtime; the chapter the playhead lands in is cross-faded in and handed
 * its own in-chapter progress (0→1) so each scene can animate itself. The
 * labelled chapter track along the bottom is a real scrubber — click or drag it
 * to seek — with a timestamp bubble that rides the playhead.
 *
 * Because it's React + CSS the whole thing stays crisp at any width (it scales
 * from one `width` prop, like a device mock), is restyleable/themeable in code,
 * and weighs a few kilobytes instead of a multi-megabyte bitmap movie.
 *
 * Deps: react only. Everything below is inline SVG + inline styles + one
 * injected <style> block for the keyframes, so the snippet is self-contained.
 */

/* ---- logical canvas (scaled to `width` by one transform) ------------------ */

const STAGE_W = 920;
const STAGE_H = 516;
const TRACK_H = 104;
const GAP = 14;
const CANVAS_W = STAGE_W;
const CANVAS_H = STAGE_H + GAP + TRACK_H;

/* ---- palette (light product UI on a soft stage) --------------------------- */

const c = {
  stage: "#f3f3f2",
  card: "#ffffff",
  ink: "#1c1c1a",
  sub: "#6b6b66",
  faint: "#9a9a94",
  line: "#ececea",
  line2: "#e2e2df",
  chip: "#f5f5f3",
  accent: "#2f6df6",
  accentSoft: "#eaf1ff",
  green: "#12a150",
  segIdle: "#e7e7e4",
  segActive: "#cfcfca",
  playhead: "#111110",
} as const;

const SANS =
  '"Archivo", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif';
const MONO = 'ui-monospace, "SF Mono", Menlo, monospace';

const fmt = (s: number) => {
  const m = Math.floor(s / 60);
  const sec = Math.floor(s % 60);
  return `${m}:${sec.toString().padStart(2, "0")}`;
};

/* ---- shared bits ---------------------------------------------------------- */

/** The launch mark — a rounded sunburst asterisk. */
function Mark({ size = 22, color = c.ink }: { size?: number; color?: string }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
      {Array.from({ length: 8 }).map((_, i) => (
        <rect
          key={i}
          x="11"
          y="2.5"
          width="2"
          height="8"
          rx="1"
          fill={color}
          transform={`rotate(${i * 45} 12 12)`}
        />
      ))}
    </svg>
  );
}

/** A framed browser/app card the scenes sit inside. */
function Frame({
  children,
  style,
  pad = 0,
}: {
  children: ReactNode;
  style?: CSSProperties;
  pad?: number;
}) {
  return (
    <div
      style={{
        position: "absolute",
        inset: 0,
        borderRadius: 22,
        background: c.card,
        boxShadow: "0 26px 60px -30px rgba(20,20,18,0.45), 0 2px 0 rgba(20,20,18,0.02)",
        overflow: "hidden",
        padding: pad,
        ...style,
      }}
    >
      {children}
    </div>
  );
}

/** Reveal a block once its scene's progress passes `at` (0→1). */
function Reveal({
  p,
  at,
  children,
  y = 10,
  dur = 0.12,
}: {
  p: number;
  at: number;
  children: ReactNode;
  y?: number;
  dur?: number;
}) {
  const t = Math.max(0, Math.min(1, (p - at) / dur));
  const e = t * t * (3 - 2 * t); // smoothstep
  return (
    <div style={{ opacity: e, transform: `translateY(${(1 - e) * y}px)`, willChange: "opacity, transform" }}>
      {children}
    </div>
  );
}

/**
 * BorderBeam — a bright comet of light that travels around a rounded border,
 * over a hairline static edge (Jakub Antalik's beam, in a light-mode palette).
 *
 * A big conic-gradient layer sits behind the content and rotates; the content
 * card, inset by `border`, masks the centre so only a thin ring of the conic
 * shows — the rotating bright arc reads as a beam sweeping the perimeter. The
 * transparent stops of the conic reveal the faint static border underneath.
 */
function BorderBeam({
  children,
  radius = 18,
  border = 2,
  duration = 4.5,
  style,
}: {
  children: ReactNode;
  radius?: number;
  border?: number;
  duration?: number;
  style?: CSSProperties;
}) {
  return (
    <div style={{ position: "relative", borderRadius: radius, padding: border, overflow: "hidden", background: c.line2, ...style }}>
      <div
        className="lf-beam"
        style={{
          position: "absolute",
          top: "50%",
          left: "50%",
          width: 1100,
          height: 1100,
          transform: "translate(-50%, -50%)",
          animationDuration: `${duration}s`,
          background:
            "conic-gradient(from 0deg, transparent 0deg, transparent 258deg, rgba(168,85,247,0) 284deg, #a855f7 312deg, #3b82f6 338deg, #67e8f9 353deg, transparent 360deg)",
        }}
        aria-hidden="true"
      />
      <div style={{ position: "relative", zIndex: 1, borderRadius: radius - border, background: c.card, overflow: "hidden" }}>
        {children}
      </div>
    </div>
  );
}

/* ---- SCENES --------------------------------------------------------------- */
/* Each scene receives `p` — its own progress 0→1 within the chapter — so it can
   animate independently of the film clock. */

/** 01 · Hook — title card that resolves out of the mark. */
function SceneHook({ p }: { p: number }) {
  const rise = Math.min(1, p / 0.5);
  const e = rise * rise * (3 - 2 * rise);
  return (
    <Frame style={{ background: "radial-gradient(120% 80% at 50% 0%, #fafafa, #f0f0ee)" }}>
      <div
        style={{
          position: "absolute",
          inset: 0,
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          gap: 22,
        }}
      >
        <div style={{ transform: `scale(${0.9 + e * 0.1})`, opacity: e }}>
          <Mark size={54} />
        </div>
        <div style={{ textAlign: "center", opacity: e, transform: `translateY(${(1 - e) * 12}px)` }}>
          <div style={{ fontFamily: SANS, fontSize: 40, fontWeight: 700, color: c.ink, letterSpacing: -1 }}>
            Meet Alpaca
          </div>
          <div style={{ fontFamily: SANS, fontSize: 18, color: c.sub, marginTop: 8 }}>
            The agent that just gets it done.
          </div>
        </div>
        <Reveal p={p} at={0.55} y={8}>
          <div
            style={{
              fontFamily: MONO,
              fontSize: 11,
              letterSpacing: 2,
              textTransform: "uppercase",
              color: c.faint,
              border: `1px solid ${c.line2}`,
              borderRadius: 999,
              padding: "7px 14px",
            }}
          >
            A 30-second tour
          </div>
        </Reveal>
      </div>
    </Frame>
  );
}

/** A macOS-style pointer cursor. */
function Cursor({ size = 26 }: { size?: number }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true" style={{ filter: "drop-shadow(0 2px 3px rgba(0,0,0,0.35))" }}>
      <path d="M5 3 L5 19 L9.2 15 L12 21 L15 19.6 L12.2 13.8 L18 13.8 Z" fill="#fff" stroke="#1c1c1a" strokeWidth="1.3" strokeLinejoin="round" />
    </svg>
  );
}

/**
 * 02 · Just ask — the dark composer with the prompt typing itself in. Shot A
 * pushes into the textbox as it types; the pan + Shot B re-frame the SAME
 * composer onto its send button, which a cursor clicks (press + ripple + ✓).
 * The turn itself plays out in the next chapter, Agent at work.
 */

// Send-button centre within the 876×472 stage body (derived from the layout:
// a centred 620px composer with the 30px send button at its bottom-right).
// The close-up camera scales about this point, then translates it back to
// stage centre so the button lands in the middle of frame.
const SEND_X = 711;
const SEND_Y = 210;
const SEND_ZOOM = 2.9;
const BODY_CX = 438; // 876 / 2
const BODY_CY = 236; // 472 / 2

/** The composer card — shared verbatim by both shots so the cut reads as one continuous UI. */
function JustAskComposer({
  typed,
  done,
  sent,
  press,
}: {
  typed: string;
  done: boolean;
  sent: boolean;
  press: number;
}) {
  return (
    <div style={{ borderRadius: 18, border: `1px solid ${done || sent ? "rgba(127,242,238,0.45)" : "#2a3134"}`, background: "#14191b", boxShadow: done || sent ? "0 0 0 1px rgba(127,242,238,0.22), 0 16px 38px -20px rgba(0,0,0,0.8)" : "0 16px 38px -20px rgba(0,0,0,0.8)", transition: "border-color .2s, box-shadow .2s" }}>
      <div style={{ padding: "18px 20px" }}>
      <div style={{ fontFamily: SANS, fontSize: 16, color: typed ? "#eef4f4" : "#6b7678", minHeight: 22 }}>
        {typed || "Ask anything…"}
        {!done && (
          <span className="lf-caret" style={{ display: "inline-block", width: 2, height: 17, background: "#7ff2ee", marginLeft: 1, verticalAlign: -2 }} />
        )}
      </div>
      <div style={{ display: "flex", alignItems: "center", gap: 14, marginTop: 22, fontFamily: SANS, fontSize: 13, color: "#9ba4a6" }}>
        <span style={{ fontSize: 18, color: "#6b7678" }}>＋</span>
        <span>⌘</span>
        <span style={{ display: "flex", alignItems: "center", gap: 5 }}>
          <span style={{ color: "#7ff2ee" }}>✦</span> Super Computer
          <em style={{ color: "#7ff2ee", fontStyle: "normal", fontSize: 11, background: "rgba(127,242,238,0.1)", borderRadius: 6, padding: "1px 6px" }}>New</em>
        </span>
        <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ width: 15, height: 15, display: "inline-flex" }} dangerouslySetInnerHTML={{ __html: CLAUDE_ICON }} />
          <span style={{ color: "#e8eeee" }}>Opus 4.7</span>
          <span style={{ color: "#6b7678", fontSize: 11 }}>▾</span>
        </span>
        <span
          style={{
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            width: 30,
            height: 30,
            borderRadius: 999,
            background: done || sent ? "#7ff2ee" : "#2a3134",
            color: done || sent ? "#062a28" : "#6b7678",
            transition: "background .2s",
            transform: `scale(${press})`,
          }}
        >
          {sent ? "✓" : "↑"}
        </span>
      </div>
      </div>
    </div>
  );
}

/** Header + composer + quick cards — the full "Just ask" UI, without any camera. */
function JustAskBody({
  p,
  typed,
  done,
  sent,
  press,
}: {
  p: number;
  typed: string;
  done: boolean;
  sent: boolean;
  press: number;
}) {
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", paddingTop: 46 }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6 }}>
        <Mark size={26} color="#eef4f4" />
        <div style={{ fontFamily: SANS, fontSize: 22, fontWeight: 600, color: "#eef4f4" }}>
          Where should we begin?
        </div>
      </div>

      {/* composer */}
      <div style={{ width: 620, marginTop: 26 }}>
        <JustAskComposer typed={typed} done={done} sent={sent} press={press} />
      </div>

      {/* quick cards */}
      <Reveal p={p} at={0.08} y={14}>
        <div style={{ display: "flex", gap: 14, marginTop: 20 }}>
          {[
            { t: "Create", s: "Tasks, Images, Docs" },
            { t: "Find", s: "Answers & Files" },
            { t: "Research", s: "Apps & Web" },
          ].map((q) => (
            <div key={q.t} style={{ width: 196, background: "#14191b", border: "1px solid #2a3134", borderRadius: 14, padding: "16px 18px", boxShadow: "0 8px 22px -18px rgba(0,0,0,0.8)" }}>
              <div style={{ fontSize: 16, color: "#6b7678" }}>◎</div>
              <div style={{ fontFamily: SANS, fontSize: 15, fontWeight: 600, color: "#eef4f4", marginTop: 22 }}>{q.t}</div>
              <div style={{ fontFamily: SANS, fontSize: 12.5, color: "#6b7678", marginTop: 3 }}>{q.s}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </div>
  );
}

/* ---- the agent's turn, as film -------------------------------------------------
   Shot C plays one full turn à la agent-thinking-chat — orb + shimmer status,
   context-source stack, reel counter, blur-streamed answer — with every bit of
   motion re-derived from chapter progress so the turn scrubs cleanly. */

/* Inline SVG marks for tool calls, as in agent-thinking-chat: `mcp` is the Model
   Context Protocol glyph (currentColor, tints to the accent); `gmail` and
   `seal` are connected-app logos on a white badge. */
const TOOL_ICONS = {
  mcp: '<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" fill-rule="evenodd" viewBox="0 0 24 24"><path d="M15.688 2.343a2.588 2.588 0 00-3.61 0l-9.626 9.44a.863.863 0 01-1.203 0 .823.823 0 010-1.18l9.626-9.44a4.313 4.313 0 016.016 0 4.116 4.116 0 011.204 3.54 4.3 4.3 0 013.609 1.18l.05.05a4.115 4.115 0 010 5.9l-8.706 8.537a.274.274 0 000 .393l1.788 1.754a.823.823 0 010 1.18.863.863 0 01-1.203 0l-1.788-1.753a1.92 1.92 0 010-2.754l8.706-8.538a2.47 2.47 0 000-3.54l-.05-.049a2.588 2.588 0 00-3.607-.003l-7.172 7.034-.002.002-.098.097a.863.863 0 01-1.204 0 .823.823 0 010-1.18l7.273-7.133a2.47 2.47 0 00-.003-3.537z"/><path d="M14.485 4.703a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a4.115 4.115 0 000 5.9 4.314 4.314 0 006.016 0l7.12-6.982a.823.823 0 000-1.18.863.863 0 00-1.204 0l-7.119 6.982a2.588 2.588 0 01-3.61 0 2.47 2.47 0 010-3.54l7.12-6.982z"/></svg>',
  gmail:
    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#4caf50" d="M45 16.2l-5 2.75-5 4.75L35 40h7c1.657 0 3-1.343 3-3V16.2z"/><path fill="#1e88e5" d="M3 16.2l3.614 1.71L13 23.7V40H6c-1.657 0-3-1.343-3-3V16.2z"/><polygon fill="#e53935" points="35,11.2 24,19.45 13,11.2 12,17 13,23.7 24,31.95 35,23.7 36,17"/><path fill="#c62828" d="M3 12.298V16.2l10 7.5V11.2L9.876 8.859C9.132 8.301 8.228 8 7.298 8 4.924 8 3 9.924 3 12.298z"/><path fill="#fbc02d" d="M45 12.298V16.2l-10 7.5V11.2l3.124-2.341C38.868 8.301 39.772 8 40.702 8 43.076 8 45 9.924 45 12.298z"/></svg>',
  seal: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="14 11 483 483"><rect width="512" height="512" fill="#F9F9F9"/><g transform="translate(-28 0)"><g transform="translate(58 190) rotate(-18)"><rect x="0" y="0" width="92" height="58" rx="7" fill="#F9F9F9" stroke="#0A0E14" stroke-width="8"/><path d="M6 8 L46 36 L86 8" fill="none" stroke="#0A0E14" stroke-width="5"/></g><path d="M385 280C420 272 437 244 443 212C450 180 470 178 480 198C488 214 479 231 464 243C482 238 503 242 508 258C513 276 495 290 476 294C459 298 444 296 432 291C427 315 416 337 397 351C389 357 379 354 376 345C372 333 379 314 392 298C386 293 383 287 385 280 Z" fill="#9BA4A6" stroke="#0A0E14" stroke-width="8"/><path d="M167 278C137 270 114 252 106 229C98 207 104 189 118 181C134 172 151 180 160 195C170 210 168 226 160 239C174 242 184 249 190 260C195 270 185 282 167 278 Z" fill="#9BA4A6" stroke="#0A0E14" stroke-width="8"/><path d="M162 194C175 165 196 148 222 148H332C357 148 377 165 390 194H367C351 194 340 201 330 214L317 231C309 241 299 246 286 246H276C263 246 253 241 245 231L232 214C222 201 211 194 195 194Z" fill="#0A0E14"/><rect x="226" y="106" width="128" height="92" rx="10" fill="#F9F9F9" stroke="#0A0E14" stroke-width="8"/><rect x="191" y="136" width="150" height="99" rx="12" fill="#F9F9F9" stroke="#0A0E14" stroke-width="8"/><path d="M199 146 L266 195 L333 146" fill="none" stroke="#0A0E14" stroke-width="8"/><path d="M156 194H204C218 194 228 200 237 212L250 229C258 240 268 245 281 245H291C304 245 314 240 322 229L335 212C344 200 354 194 368 194H402V317C402 353 376 375 340 375H205C169 375 143 353 143 317V214C143 203 148 197 156 194 Z" fill="#9BA4A6" stroke="#0A0E14" stroke-width="8"/><path d="M384 321C403 328 420 343 428 360C435 375 431 390 419 397C404 405 387 399 377 385C368 372 366 359 371 348C363 342 362 332 367 326C371 321 377 318 384 321 Z" fill="#9BA4A6" stroke="#0A0E14" stroke-width="8"/><ellipse cx="229" cy="277" rx="13" ry="23" fill="#0A0E14"/><ellipse cx="307" cy="277" rx="13" ry="23" fill="#0A0E14"/><circle cx="268" cy="304" r="9" fill="#0A0E14"/><path d="M252 322 Q268 338 284 322" fill="none" stroke="#0A0E14" stroke-width="5"/></g><circle cx="439" cy="115" r="11" fill="#C3FFFD"/></svg>',
} as const;

/* The reply/model avatar — the Opus mark, as in agent-thinking-chat. */
const CLAUDE_ICON =
  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 257"><path fill="#D97757" d="m50.228 170.321 50.357-28.257.843-2.463-.843-1.361h-2.462l-8.426-.518-28.775-.778-24.952-1.037-24.175-1.296-6.092-1.297L0 125.796l.583-3.759 5.12-3.434 7.324.648 16.202 1.101 24.304 1.685 17.629 1.037 26.118 2.722h4.148l.583-1.685-1.426-1.037-1.101-1.037-25.147-17.045-27.22-18.017-14.258-10.37-7.713-5.25-3.888-4.925-1.685-10.758 7-7.713 9.397.649 2.398.648 9.527 7.323 20.35 15.75L94.817 91.9l3.889 3.24 1.555-1.102.195-.777-1.75-2.917-14.453-26.118-15.425-26.572-6.87-11.018-1.814-6.61c-.648-2.723-1.102-4.991-1.102-7.778l7.972-10.823L71.42 0 82.05 1.426l4.472 3.888 6.61 15.101 10.694 23.786 16.591 32.34 4.861 9.592 2.592 8.879.973 2.722h1.685v-1.556l1.36-18.211 2.528-22.36 2.463-28.776.843-8.1 4.018-9.722 7.971-5.25 6.222 2.981 5.12 7.324-.713 4.73-3.046 19.768-5.962 30.98-3.889 20.739h2.268l2.593-2.593 10.499-13.934 17.628-22.036 7.778-8.749 9.073-9.657 5.833-4.601h11.018l8.1 12.055-3.628 12.443-11.342 14.388-9.398 12.184-13.48 18.147-8.426 14.518.778 1.166 2.01-.194 30.46-6.481 16.462-2.982 19.637-3.37 8.88 4.148.971 4.213-3.5 8.62-20.998 5.184-24.628 4.926-36.682 8.685-.454.324.519.648 16.526 1.555 7.065.389h17.304l32.21 2.398 8.426 5.574 5.055 6.805-.843 5.184-12.962 6.611-17.498-4.148-40.83-9.721-14-3.5h-1.944v1.167l11.666 11.406 21.387 19.314 26.767 24.887 1.36 6.157-3.434 4.86-3.63-.518-23.526-17.693-9.073-7.972-20.545-17.304h-1.36v1.814l4.73 6.935 25.017 37.59 1.296 11.536-1.814 3.76-6.481 2.268-7.13-1.297-14.647-20.544-15.1-23.138-12.185-20.739-1.49.843-7.194 77.448-3.37 3.953-7.778 2.981-6.48-4.925-3.436-7.972 3.435-15.749 4.148-20.544 3.37-16.333 3.046-20.285 1.815-6.74-.13-.454-1.49.194-15.295 20.999-23.267 31.433-18.406 19.702-4.407 1.75-7.648-3.954.713-7.064 4.277-6.286 25.47-32.405 15.36-20.092 9.917-11.6-.065-1.686h-.583L44.07 198.125l-12.055 1.555-5.185-4.86.648-7.972 2.463-2.593 20.35-13.999-.064.065Z"/></svg>';

const ASK_SOURCES: { name: string; tag: string; icon?: keyof typeof TOOL_ICONS }[] = [
  { name: "launch-plan.md", tag: "read" },
  { name: "Landing.tsx", tag: "read" },
  { name: "gmail · launch threads", tag: "mcp", icon: "gmail" },
  { name: "waitlist.csv", tag: "grep" },
  { name: "sealgate · call_tool", tag: "mcp", icon: "seal" },
  { name: "mcp · list_tools", tag: "mcp", icon: "mcp" },
];
const ASK_SCANNED = 64;
const ASK_ANSWER =
  "Done — your launch plan is drafted and the landing page is built. Three phases, waitlist wired up, launch-day checklist included. Want me to tighten the hero copy next?";
// shimmer line boundaries within shot C (0→1): last entry pins the end.
const ASK_LINES: { t: number; s: string }[] = [
  { t: 0.0, s: "Thinking…" },
  { t: 0.1, s: "Reading your message…" },
  { t: 0.2, s: "Planning the approach…" },
  { t: 0.34, s: "Collecting context…" },
  { t: 0.44, s: "Calling connected tools…" },
  { t: 0.54, s: "Reading relevant files…" },
  { t: 0.74, s: "Writing the answer…" },
];

/** Dotted orb avatar — ring rotation + core pulse driven by progress. */
function AskOrb({ q }: { q: number }) {
  const rot = q * 300;
  const pulse = 1 + 0.12 * Math.sin(q * 22);
  return (
    <span style={{ position: "relative", width: 26, height: 26, flex: "none", display: "inline-block" }}>
      {Array.from({ length: 8 }).map((_, i) => {
        const a = ((rot + i * 45) * Math.PI) / 180;
        return (
          <span
            key={i}
            style={{
              position: "absolute",
              left: 13 + 9.5 * Math.cos(a) - 1.75,
              top: 13 + 9.5 * Math.sin(a) - 1.75,
              width: 3.5,
              height: 3.5,
              borderRadius: 999,
              background: "#7ff2ee",
              opacity: 0.3 + 0.7 * (((i / 8 + q * 2) % 1 + 1) % 1),
            }}
          />
        );
      })}
      <span style={{ position: "absolute", left: 13 - 4 * pulse, top: 13 - 4 * pulse, width: 8 * pulse, height: 8 * pulse, borderRadius: 999, background: "#7ff2ee", boxShadow: "0 0 12px rgba(127,242,238,0.8)" }} />
    </span>
  );
}

/** Shimmer status lines — stacked, swapping with blur/rise; sheen sweeps with progress. */
function AskShimmer({ q }: { q: number }) {
  const longest = ASK_LINES.reduce((a, b) => (b.s.length > a.length ? b.s : a), "");
  const sheen = (q * 500) % 100;
  return (
    <span style={{ position: "relative", display: "inline-block", fontFamily: MONO, fontSize: 13 }}>
      <span style={{ visibility: "hidden", whiteSpace: "nowrap" }}>{longest}</span>
      {ASK_LINES.map((l, k) => {
        const t1 = k + 1 < ASK_LINES.length ? ASK_LINES[k + 1].t : 2;
        const enter = Math.max(0, Math.min(1, (q - l.t) / 0.05));
        const exit = Math.max(0, Math.min(1, (q - (t1 - 0.05)) / 0.05));
        const vis = enter * (1 - exit);
        const blur = (1 - enter + exit) * 2;
        return (
          <span
            key={l.s}
            style={{
              position: "absolute",
              top: 0,
              left: 0,
              right: 0,
              whiteSpace: "nowrap",
              opacity: vis,
              transform: `translateY(${(1 - enter) * 8 - exit * 8}px)`,
              filter: `blur(${blur}px)`,
              color: "transparent",
              backgroundImage: "linear-gradient(100deg,#7f8b8d 35%,#e0fffe 50%,#7f8b8d 65%)",
              backgroundSize: "220% 100%",
              backgroundPosition: `${sheen}% 0`,
              WebkitBackgroundClip: "text",
              backgroundClip: "text",
            }}
          >
            {l.s}
          </span>
        );
      })}
    </span>
  );
}

/** Sonner-style stack of context sources — newest on top, older ones receding
 * with the reference peek/scale/fade; hover spreads the stack into the
 * reserved headroom, exactly like agent-thinking-chat. */
function AskStack({ q }: { q: number }) {
  const [spread, setSpread] = useState(false);
  const appear = ASK_SOURCES.map((_, i) => 0.32 + i * 0.07);
  const visible = ASK_SOURCES.map((_, i) => i).filter((i) => q >= appear[i]);
  const shown = visible.slice(-4);
  return (
    <div style={{ paddingTop: 56 }} onMouseEnter={() => setSpread(true)} onMouseLeave={() => setSpread(false)}>
      <div style={{ position: "relative", height: 46 }}>
        {shown.map((idx, s) => {
          const depth = shown.length - 1 - s;
          const t = Math.max(0, Math.min(1, (q - appear[idx]) / 0.07));
          const e = t * t * (3 - 2 * t);
          const leaving = depth === 3;
          const fade = leaving ? Math.max(0, 1 - (q - appear[idx] - 0.12) * 7) : 1 - depth * 0.42;
          const item = ASK_SOURCES[idx];
          const rest = leaving
            ? `translateY(${-3 * 9}px) scale(${1 - 3 * 0.05})`
            : spread && depth > 0
              ? `translateY(calc(${-depth} * (100% + 8px))) scale(1)`
              : `translateY(${(1 - e) * 34 - depth * 9}px) scale(${1 - depth * 0.05})`;
          return (
            <div
              key={idx}
              style={{
                position: "absolute",
                left: 0,
                right: 0,
                bottom: 0,
                zIndex: leaving ? 0 : 3 - depth,
                transformOrigin: "50% 100%",
                opacity: (spread && depth > 0 ? 1 : e * fade),
                transform: rest,
                filter: `blur(${(spread && depth > 0 ? 0 : 1 - e) * 2}px)`,
                transition: "transform .35s cubic-bezier(0.22,1,0.36,1), opacity .35s cubic-bezier(0.22,1,0.36,1)",
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 8, background: "#0a0d0e", border: "1px solid rgba(195,255,253,0.15)", borderRadius: 8, padding: "8px 12px", boxShadow: "0 4px 16px rgba(0,0,0,0.4)" }}>
                {item.icon === "mcp" ? (
                  <span style={{ width: 18, height: 18, flex: "none", display: "inline-flex", color: "#7ff2ee" }}>
                    <span style={{ width: 18, height: 18, display: "inline-flex" }} dangerouslySetInnerHTML={{ __html: TOOL_ICONS.mcp }} />
                  </span>
                ) : item.icon ? (
                  <span style={{ width: 18, height: 18, flex: "none", display: "inline-flex", alignItems: "center", justifyContent: "center", overflow: "hidden", borderRadius: 5, background: "#fff", boxShadow: "inset 0 0 0 1px rgba(10,14,20,0.1)" }}>
                    <span style={{ width: 18, height: 18, display: "inline-flex" }} dangerouslySetInnerHTML={{ __html: TOOL_ICONS[item.icon] }} />
                  </span>
                ) : (
                  <span style={{ width: 6, height: 6, flex: "none", borderRadius: 999, background: "#3ddbd3", marginLeft: 6, marginRight: 6 }} />
                )}
                <span style={{ fontFamily: MONO, fontSize: 12, color: "#e8eeee", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{item.name}</span>
                <span style={{ marginLeft: "auto", fontFamily: MONO, fontSize: 9, letterSpacing: 1.5, textTransform: "uppercase", color: "rgba(127,242,238,0.7)", border: "1px solid rgba(127,242,238,0.15)", borderRadius: 4, padding: "2px 6px" }}>{item.tag}</span>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

/** Digit-reel counter — columns spin to their final digit with a vertical motion
 * blur that swells mid-spin and decays as each column lands, like the
 * reference. Render-driven (no rAF), so it scrubs cleanly. */
function AskReel({ value, q }: { value: number; q: number }) {
  const digits = String(value).split("");
  const CELL = 28;
  const SPINS = 4;
  const rawId = useId();
  const uid = `ask-reel-${rawId.replace(/[^a-zA-Z0-9]/g, "")}`;
  const col = (c: number) => {
    const t = Math.max(0, Math.min(1, (q - 0.32 - c * 0.09) / 0.5));
    const e = t * t * (3 - 2 * t);
    return { e, env: Math.sin(t * Math.PI) }; // 0→1→0 streak envelope
  };
  return (
    <span style={{ display: "inline-flex", alignItems: "center", height: CELL, color: "#7ff2ee" }}>
      <svg width={0} height={0} aria-hidden="true" style={{ position: "absolute" }}>
        <defs>
          {digits.map((_, c) => (
            <filter key={c} id={`${uid}-${c}`} x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation={`0 ${(3 * col(c).env).toFixed(2)}`} />
            </filter>
          ))}
        </defs>
      </svg>
      {digits.map((d, c) => (
        <span
          key={c}
          style={{
            position: "relative",
            height: CELL,
            width: 17,
            overflow: "hidden",
            WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)",
            maskImage: "linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)",
          }}
        >
          <span
            style={{
              display: "flex",
              flexDirection: "column",
              transform: `translateY(${-col(c).e * (SPINS * 10 + Number(d)) * CELL}px)`,
              filter: `url(#${uid}-${c})`,
            }}
          >
            {Array.from({ length: SPINS * 10 + 10 }, (_, i) => (
              <span key={i} style={{ height: CELL, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: MONO, fontSize: 17, fontWeight: 600 }}>
                {i % 10}
              </span>
            ))}
          </span>
        </span>
      ))}
    </span>
  );
}

/** Word-by-word answer reveal through opacity + blur. */
function AskStream({ text, q }: { text: string; q: number }) {
  const words = text.split(" ");
  const f = Math.max(0, Math.min(1, (q - 0.78) / 0.2)) * words.length;
  return (
    <div style={{ fontFamily: SANS, fontSize: 13.5, lineHeight: 1.65, color: "#e8eeee" }}>
      {words.map((w, i) => {
        const r = Math.max(0, Math.min(1, (f - i) * 0.8));
        return (
          <span key={i} style={{ opacity: r, filter: `blur(${(1 - r) * 3}px)` }}>
            {w}{i < words.length - 1 ? " " : ""}
          </span>
        );
      })}
    </div>
  );
}

/** Shot C — the working card (orb + shimmer, stack, reel) with the streamed answer below. */
function AskWorking({ qc }: { qc: number }) {
  const entry = Math.min(1, qc / 0.08);
  const ee = entry * entry * (3 - 2 * entry);
  const answerIn = Math.max(0, Math.min(1, (qc - 0.74) / 0.08));
  return (
    <Frame style={{ background: "#0e1113" }}>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", opacity: ee, transform: `translateY(${(1 - ee) * 14}px) scale(${1.04 - ee * 0.04})` }}>
        {/* working card, framed by a travelling-light ring for the liquid-metal read */}
        <div style={{ position: "relative", width: 640, borderRadius: 16, padding: 2, overflow: "hidden", background: "#1b2124" }}>
          <div
            className="lf-beam"
            style={{
              position: "absolute",
              top: "50%",
              left: "50%",
              width: 1100,
              height: 1100,
              transform: "translate(-50%, -50%)",
              animationDuration: "6s",
              background:
                "conic-gradient(from 0deg, transparent 0deg, transparent 262deg, rgba(127,242,238,0) 288deg, rgba(127,242,238,0.95) 318deg, #a855f7 342deg, transparent 360deg)",
            }}
            aria-hidden="true"
          />
          <div style={{ position: "relative", zIndex: 1, borderRadius: 14, background: "#0a0d0e", padding: "14px 16px", overflow: "hidden" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <AskOrb q={qc} />
              <AskShimmer q={qc} />
              <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 7, fontFamily: MONO, fontSize: 10, letterSpacing: 1, color: "#6b7678", whiteSpace: "nowrap" }}>
                <AskReel value={ASK_SCANNED} q={qc} /> SCANNED
              </span>
            </div>
            <AskStack q={qc} />
          </div>
        </div>
        <div style={{ width: 640, marginTop: 14, display: "flex", gap: 10, opacity: answerIn }}>
          <span style={{ width: 26, height: 26, flex: "none", borderRadius: 999, border: "1px solid rgba(195,255,253,0.15)", background: "rgba(195,255,253,0.05)", color: "#eef4f4", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
            <span style={{ width: 15, height: 15, display: "inline-flex" }} dangerouslySetInnerHTML={{ __html: CLAUDE_ICON }} />
          </span>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: MONO, fontSize: 10.5, letterSpacing: 0.5, color: "rgba(155,164,166,0.75)", marginBottom: 5 }}>Thought for 3s</div>
            <AskStream text={ASK_ANSWER} q={qc} />
          </div>
        </div>
      </div>
    </Frame>
  );
}

function SceneJustAsk({ p }: { p: number }) {
  const prompt = "Draft the launch plan and build the landing page.";
  const typeFrac = Math.max(0, Math.min(1, (p - 0.1) / 0.35));
  const chars = Math.floor(typeFrac * prompt.length);
  const typed = prompt.slice(0, chars);
  const done = chars >= prompt.length;

  const CUT = 0.5; // camera pans to the send-button close-up once typing is done
  const PANW = 0.12; // pan duration (chapter-p)

  /* ---- PAN · glide from the typing framing to the button close-up ----
     Same composer, one continuous camera move: the focus point travels from
     the prompt (370,175) to the send button while the zoom rides 1.6→2.9x.
     Endpoints match Shot A / Shot B exactly, so the joins are seamless. */
  const panT = Math.max(0, Math.min(1, (p - CUT) / PANW));
  if (panT > 0 && panT < 1) {
    const pe = panT * panT * (3 - 2 * panT);
    const fx = 370 + (SEND_X - 370) * pe;
    const fy = 175 + (SEND_Y - 175) * pe;
    const zoom = 1.6 * Math.pow(SEND_ZOOM / 1.6, pe);
    const tx = (BODY_CX - 370) + (370 - SEND_X) * pe;
    const ty = (BODY_CY - 175) + (175 - SEND_Y) * pe;
    return (
      <Frame style={{ background: "#0e1113" }}>
        <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
          <div style={{ position: "absolute", inset: 0, transform: `translate(${tx}px, ${ty}px)` }}>
            <div style={{ position: "absolute", inset: 0, transform: `scale(${zoom})`, transformOrigin: `${fx}px ${fy}px`, willChange: "transform" }}>
              <JustAskBody p={1} typed={prompt} done sent={false} press={1} />
            </div>
          </div>
        </div>
      </Frame>
    );
  }

  /* ---- SHOT B · same composer, camera zoom-cut onto its send button ---- */
  if (p >= CUT + PANW) {
    const lp = (p - CUT - PANW) / (1 - CUT - PANW); // 0→1 within the button shot
    // cursor flies in to the button's new home (stage centre), then presses
    const approach = Math.min(1, lp / 0.34);
    const ae = approach * approach * (3 - 2 * approach);
    const offX = (1 - ae) * 150;
    const offY = (1 - ae) * 160;
    const contact = Math.max(0, Math.min(1, (lp - 0.32) / 0.1));
    const release = Math.max(0, Math.min(1, (lp - 0.44) / 0.16));
    const press = 1 - 0.1 * (contact - release);
    // ripple after the press lands
    const rp = Math.max(0, Math.min(1, (lp - 0.4) / 0.55));
    const sent = lp > 0.5;
    return (
      <Frame style={{ background: "#0e1113" }}>
        <div style={{ position: "absolute", inset: 0, overflow: "hidden" }}>
          {/* re-centre the zoom point so the send button lands mid-frame */}
          <div style={{ position: "absolute", inset: 0, transform: `translate(${BODY_CX - SEND_X}px, ${BODY_CY - SEND_Y}px)` }}>
            <div style={{ position: "absolute", inset: 0, transform: `scale(${SEND_ZOOM})`, transformOrigin: `${SEND_X}px ${SEND_Y}px`, willChange: "transform" }}>
              <JustAskBody p={1} typed={prompt} done sent={sent} press={press} />
            </div>
          </div>
          {/* ripple ring, in screen space over the button */}
          {rp > 0 && rp < 1 && (
            <div style={{ position: "absolute", left: BODY_CX, top: BODY_CY, width: 170, height: 170, borderRadius: 999, border: `3px solid ${c.accent}`, opacity: (1 - rp) * 0.55, transform: `translate(-50%, -50%) scale(${1 + rp * 1.5})` }} />
          )}
          {/* cursor */}
          <div style={{ position: "absolute", left: BODY_CX, top: BODY_CY, transform: `translate(${offX - 6}px, ${offY - 4}px) scale(${1 - contact * 0.12 + release * 0.12})` }}>
            <Cursor size={40} />
          </div>
        </div>
      </Frame>
    );
  }

  /* ---- SHOT A · composer, camera pushing into the textbox ----
     The camera drifts as it pushes: starts wide on the natural layout, then
     settles hard onto the typed prompt (focus 370,175 — near the prompt's
     middle, so the full text lands centred with a generous left margin).
     At 1.6x the send button slides out of the right edge; the pan then
     travels across the composer to re-discover it. */
  const ze = typeFrac * typeFrac * (3 - 2 * typeFrac); // smoothstep on typing
  const zoom = 1.08 + ze * 0.52; // up to ~1.6
  const driftX = (BODY_CX - 370) * ze;
  const driftY = (BODY_CY - 175) * ze;
  return (
    <Frame style={{ background: "#0e1113" }}>
      <div style={{ position: "absolute", inset: 0, transform: `translate(${driftX}px, ${driftY}px)` }}>
        <div style={{ position: "absolute", inset: 0, transform: `scale(${zoom})`, transformOrigin: "370px 175px", willChange: "transform" }}>
          <JustAskBody p={p} typed={typed} done={done} sent={false} press={1} />
        </div>
      </div>
    </Frame>
  );
}

/** 03 · Agent at work — the full agent turn on the new components: thinking orb
 * + shimmer status → context-source stack + reel counter → blur-streamed
 * answer. Progress-driven throughout, so it scrubs cleanly. */
function SceneAgent({ p }: { p: number }) {
  return <AskWorking qc={p} />;
}

/** 04 · Result — a desktop monitor showing an Artifacts gallery. */
function SceneResult({ p }: { p: number }) {
  const art = ["AI Landing Page", "Research Agent", "Code Assistant", "Meeting Notes", "Prompt Library", "Growth Plan"];
  return (
    <Frame style={{ background: "#efefed" }}>
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }}>
        {/* monitor */}
        <div style={{ width: 660, background: "#0e0e0d", borderRadius: 16, padding: 12, boxShadow: "0 30px 60px -30px rgba(0,0,0,0.5)" }}>
          <div style={{ background: c.card, borderRadius: 8, overflow: "hidden", height: 322, display: "flex" }}>
            {/* sidebar */}
            <div style={{ width: 150, borderRight: `1px solid ${c.line}`, padding: "14px 12px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                <Mark size={13} />
                <span style={{ fontFamily: SANS, fontSize: 12, fontWeight: 600, color: c.ink }}>Alpaca</span>
              </div>
              {["New chat", "Projects", "Artifacts", "Apps"].map((s, i) => (
                <div key={s} style={{ fontFamily: SANS, fontSize: 11.5, color: i === 2 ? c.ink : c.faint, background: i === 2 ? c.chip : "transparent", borderRadius: 6, padding: "6px 8px", marginTop: i === 0 ? 14 : 2 }}>
                  {s}
                </div>
              ))}
            </div>
            {/* gallery */}
            <div style={{ flex: 1, padding: "16px 18px" }}>
              <div style={{ display: "flex", alignItems: "center" }}>
                <span style={{ fontFamily: SANS, fontSize: 14, fontWeight: 600, color: c.ink }}>Artifacts</span>
                <span style={{ marginLeft: "auto", fontFamily: SANS, fontSize: 11, color: "#fff", background: c.ink, borderRadius: 999, padding: "4px 12px" }}>New artifact</span>
              </div>
              <div style={{ marginTop: 14, display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12 }}>
                {art.map((a, i) => {
                  const t = Math.max(0, Math.min(1, (p - 0.1 - i * 0.08) / 0.18));
                  const e = t * t * (3 - 2 * t);
                  return (
                    <div key={a} style={{ opacity: e, transform: `translateY(${(1 - e) * 10}px)` }}>
                      <div style={{ height: 66, borderRadius: 8, background: `linear-gradient(135deg, ${c.chip}, #fff)`, border: `1px solid ${c.line}` }} />
                      <div style={{ fontFamily: SANS, fontSize: 11, fontWeight: 600, color: c.ink, marginTop: 7 }}>{a}</div>
                      <div style={{ fontFamily: SANS, fontSize: 10, color: c.faint }}>2d ago</div>
                    </div>
                  );
                })}
              </div>
            </div>
          </div>
        </div>
        {/* stand */}
        <div style={{ width: 90, height: 30, background: "linear-gradient(#c9c9c5,#e6e6e2)", borderRadius: "0 0 8px 8px" }} />
        <div style={{ width: 190, height: 8, background: "#d2d2ce", borderRadius: 999, marginTop: 2 }} />
      </div>
    </Frame>
  );
}

/**
  * 05 · Integrations — two shots, one sentence: "Connect the tools your team
 * uses." Shot A is pure motion — two ticker rows of app tiles glide past in
 * opposite directions and wire themselves up (dots flip green, the counter
 * climbs to 8/8). Shot B lands the payoff: the grid, toggles flipping on,
 * with the MCP endpoint strip underneath.
 */
const INT_APPS: { n: string; d: string; g: string }[] = [
  { n: "X", d: "Social media management", g: "#111" },
  { n: "GitHub", d: "Streamline your dev workflow", g: "#24292f" },
  { n: "Slack", d: "Team communication", g: "#611f69" },
  { n: "Asana", d: "Project tasks & deadlines", g: "#f06a6a" },
  { n: "Zoom", d: "Meetings & webinars", g: "#2d8cff" },
  { n: "Trello", d: "Boards and cards", g: "#0079bf" },
  { n: "Figma", d: "Design & prototype", g: "#a259ff" },
  { n: "Notion", d: "Docs & databases", g: "#111" },
];

/** One app tile for the Shot A tickers — fixed 150px width so rows loop seamlessly. */
function TickerTile({ a, on }: { a: { n: string; d: string; g: string }; on: boolean }) {
  return (
    <div style={{ width: 150, flex: "none", display: "flex", alignItems: "center", gap: 10, background: c.card, border: `1px solid ${on ? c.accent : c.line}`, borderRadius: 14, padding: 10, boxShadow: on ? "0 10px 24px -16px rgba(59,90,246,0.5)" : "0 8px 20px -16px rgba(20,20,18,0.35)", transition: "border-color .2s, box-shadow .2s" }}>
      <div style={{ width: 34, height: 34, flex: "none", borderRadius: 9, background: a.g, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: SANS, fontWeight: 700, fontSize: 15 }}>
        {a.n[0]}
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontFamily: SANS, fontSize: 13, fontWeight: 600, color: c.ink, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{a.n}</div>
        <div style={{ display: "flex", alignItems: "center", gap: 5, marginTop: 3 }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: on ? c.green : c.line2, transition: "background .2s" }} />
          <span style={{ fontFamily: MONO, fontSize: 9.5, letterSpacing: 1, color: on ? c.green : c.faint }}>{on ? "SYNCED" : "READY"}</span>
        </div>
      </div>
    </div>
  );
}

function SceneIntegrations({ p }: { p: number }) {
  const CUT = 0.5; // hard cut: shot A makes the promise, shot B shows the proof

  /* ---- SHOT B · "your team uses." — the grid, toggles flipping on ---- */
  if (p >= CUT) {
    const qb = (p - CUT) / (1 - CUT); // 0→1 within shot B
    const entry = Math.min(1, qb / 0.14);
    const ee = entry * entry * (3 - 2 * entry);
    const servers = ["Gmail", "Linear", "Postgres", "Stripe"];
    return (
      <Frame style={{ background: c.card }}>
        <div style={{ position: "absolute", inset: 0, overflow: "hidden", opacity: ee, transform: `scale(${1.05 - ee * 0.05})` }}>
          <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 60, background: "linear-gradient(90deg,#c7b3ff,#a9d4ff,#c9f0e4)" }} />
          <div style={{ position: "absolute", inset: 0, padding: "30px 54px 0" }}>
            <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: 2, color: c.faint }}>INTEGRATIONS</div>
            <div style={{ fontFamily: SANS, fontSize: 30, fontWeight: 700, color: c.ink, letterSpacing: -0.5, marginTop: 4 }}>your team uses.</div>
            <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr", gap: "10px 34px" }}>
              {INT_APPS.map((a, i) => {
                const t = Math.max(0, Math.min(1, (qb - 0.1 - i * 0.07) / 0.16));
                const e = t * t * (3 - 2 * t);
                const on = qb > 0.12 + i * 0.07;
                return (
                  <div key={a.n} style={{ display: "flex", alignItems: "center", gap: 12, opacity: e, transform: `translateY(${(1 - e) * 10}px)` }}>
                    <div style={{ width: 34, height: 34, borderRadius: 9, background: a.g, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: SANS, fontWeight: 700, fontSize: 14 }}>
                      {a.n[0]}
                    </div>
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontFamily: SANS, fontSize: 14, fontWeight: 600, color: c.ink }}>{a.n}</div>
                      <div style={{ fontFamily: SANS, fontSize: 11.5, color: c.faint, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{a.d}</div>
                    </div>
                    <div style={{ marginLeft: "auto", width: 22, height: 22, borderRadius: 999, display: "flex", alignItems: "center", justifyContent: "center", fontSize: 13, color: on ? c.green : c.faint, border: `1px solid ${on ? "transparent" : c.line2}`, background: on ? "#e7f7ee" : "transparent", transition: "all .2s" }}>
                      {on ? "✓" : "+"}
                    </div>
                  </div>
                );
              })}
            </div>
            {/* MCP strip — the same endpoint, one click away */}
            <div style={{ marginTop: 12, border: `1px solid ${c.line}`, borderRadius: 12, padding: "9px 14px", display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ fontSize: 15 }}>🔌</span>
              <span style={{ fontFamily: MONO, fontSize: 12, color: c.ink }}>mcp.alpaca.dev/sse</span>
              <span style={{ marginLeft: "auto", fontFamily: SANS, fontSize: 11.5, fontWeight: 600, color: "#fff", background: c.ink, borderRadius: 8, padding: "5px 12px" }}>Connect</span>
            </div>
            <div style={{ marginTop: 8, display: "flex", gap: 6 }}>
              {servers.map((s, i) => {
                const t = Math.max(0, Math.min(1, (qb - 0.5 - i * 0.08) / 0.18));
                const e = t * t * (3 - 2 * t);
                return (
                  <span key={s} style={{ opacity: e, transform: `scale(${0.9 + e * 0.1})`, fontFamily: MONO, fontSize: 10.5, color: c.sub, background: c.chip, border: `1px solid ${c.line2}`, borderRadius: 999, padding: "4px 10px" }}>
                    {s} <span style={{ color: c.green }}>●</span>
                  </span>
                );
              })}
            </div>
          </div>
        </div>
      </Frame>
    );
  }

  /* ---- SHOT A · "Connect the tools" — tickers wiring themselves up ----
     Two rows glide past in opposite directions, driven by film time so the
     shot scrubs cleanly; each row travels exactly one set-width, looping
     seamlessly. Tiles flip to SYNCED one by one as the counter climbs. */
  const q = Math.min(1, p / 0.42);
  const qe = q * q * (3 - 2 * q);
  const connected = INT_APPS.filter((_, i) => q > 0.06 + i * 0.1).length;
  const push = 1 + 0.05 * Math.min(1, p / CUT); // lean into the cut
  const SET_W = INT_APPS.length * (150 + 12); // one loop of tiles
  const row = (dir: 1 | -1) => ({
    display: "flex" as const,
    gap: 12,
    width: "max-content",
    transform: `translateX(${dir === 1 ? -SET_W * qe : -SET_W * (1 - qe)}px)`,
    willChange: "transform" as const,
  });
  const copies = [0, 1, 2];
  return (
    <Frame style={{ background: "radial-gradient(110% 100% at 50% 0%, #f3f1ff 0%, #f4f4f3 55%, #efefed 100%)" }}>
      <div style={{ position: "absolute", inset: 0, overflow: "hidden", transform: `scale(${push})` }}>
        <div style={{ textAlign: "center", paddingTop: 52 }}>
          <Reveal p={p} at={0.02} y={12}>
            <div style={{ fontFamily: SANS, fontSize: 34, fontWeight: 700, color: c.ink, letterSpacing: -0.8 }}>Connect the tools</div>
          </Reveal>
          <Reveal p={p} at={0.08} y={8}>
            <div style={{ display: "inline-flex", alignItems: "center", gap: 7, marginTop: 10, fontFamily: MONO, fontSize: 11.5, letterSpacing: 1.5, color: c.sub, background: c.card, border: `1px solid ${c.line}`, borderRadius: 999, padding: "6px 14px" }}>
              <span style={{ width: 7, height: 7, borderRadius: 999, background: connected >= INT_APPS.length ? c.green : c.accent }} />
              {connected}/{INT_APPS.length} CONNECTED
            </div>
          </Reveal>
        </div>
        {/* row 1 · drifts left */}
        <div style={{ position: "absolute", top: 196, left: 0, right: 0, overflow: "hidden", opacity: Math.min(1, p / 0.06) }}>
          <div style={row(1)}>
            {copies.flatMap((cp) => INT_APPS.map((a, i) => <TickerTile key={`${cp}-${a.n}`} a={a} on={q > 0.06 + i * 0.1} />))}
          </div>
        </div>
        {/* row 2 · drifts right */}
        <div style={{ position: "absolute", top: 272, left: 0, right: 0, overflow: "hidden", opacity: Math.min(1, Math.max(0, (p - 0.04) / 0.06)) }}>
          <div style={row(-1)}>
            {copies.flatMap((cp) => INT_APPS.map((a, i) => <TickerTile key={`${cp}-${a.n}`} a={a} on={q > 0.06 + ((i + 4) % INT_APPS.length) * 0.1} />))}
          </div>
        </div>
        <div style={{ position: "absolute", bottom: 30, left: 0, right: 0, textAlign: "center", fontFamily: MONO, fontSize: 10.5, letterSpacing: 2, color: c.faint }}>
          ONE CLICK · NO CODE · EVERY TOOL
        </div>
      </div>
    </Frame>
  );
}

/** A small mono uppercase caption that sits above whichever device is on. */
function BeatCaption({ text }: { text: string }) {
  return (
    <div
      style={{
        fontFamily: MONO,
        fontSize: 11,
        letterSpacing: 2,
        textTransform: "uppercase",
        color: c.faint,
        border: `1px solid ${c.line2}`,
        background: c.card,
        borderRadius: 999,
        padding: "6px 14px",
        whiteSpace: "nowrap",
      }}
    >
      {text}
    </div>
  );
}

/**
  * 06 · Anywhere — the same app, everywhere. The scene runs in two beats: it opens
 * on the mobile app, then cross-fades to the identical Alpaca Labs app on a
 * desktop, so the "anywhere" promise is shown on both form factors.
 */
function SceneAnywhere({ p }: { p: number }) {
  const recents = ["Fix spacing on cards", "Agent response feels verbose", "Mobile runtime cleanup", "Improve retrieval accuracy"];

  // two beats: mobile for the first half, desktop for the second, cross-faded.
  const SWAP = 0.5;
  const mobileOpacity = 1 - Math.max(0, Math.min(1, (p - (SWAP - 0.05)) / 0.1));
  const desktopOpacity = Math.max(0, Math.min(1, (p - SWAP) / 0.1));

  // per-beat entry rise
  const mr = Math.min(1, p / 0.35);
  const me = mr * mr * (3 - 2 * mr);
  const dr = Math.max(0, Math.min(1, (p - SWAP) / 0.35));
  const de = dr * dr * (3 - 2 * dr);

  return (
    <Frame style={{ background: "#efefed" }}>
      {/* ---- beat A · mobile ---- */}
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", gap: 16, alignItems: "center", justifyContent: "center", opacity: mobileOpacity }}>
        <BeatCaption text="On the go" />
        <div style={{ width: 224, height: 408, background: "#111", borderRadius: 38, padding: 8, boxShadow: "0 34px 70px -30px rgba(0,0,0,0.55)", opacity: me, transform: `translateY(${(1 - me) * 26}px)` }}>
          <div style={{ position: "relative", width: "100%", height: "100%", background: c.card, borderRadius: 32, overflow: "hidden", padding: "26px 18px 16px" }}>
            <div style={{ position: "absolute", top: 12, left: "50%", transform: "translateX(-50%)", width: 84, height: 20, background: "#111", borderRadius: 999 }} />
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 8 }}>
              <Mark size={16} />
              <span style={{ fontFamily: SANS, fontSize: 15, fontWeight: 700, color: c.ink }}>Alpaca Labs</span>
            </div>
            {["Projects", "Artifacts", "MCP"].map((s, i) => (
              <div key={s} style={{ display: "flex", alignItems: "center", fontFamily: SANS, fontSize: 12.5, color: c.sub, marginTop: i === 0 ? 16 : 8 }}>
                {s}
                {s === "MCP" && <span style={{ marginLeft: "auto", color: c.accent, fontSize: 10, fontWeight: 600 }}>New</span>}
              </div>
            ))}
            <div style={{ fontFamily: MONO, fontSize: 9.5, letterSpacing: 1, textTransform: "uppercase", color: c.faint, marginTop: 18 }}>Recents</div>
            {recents.map((r, i) => {
              const t = Math.max(0, Math.min(1, (p - 0.12 - i * 0.06) / 0.14));
              const re = t * t * (3 - 2 * t);
              return (
                <div key={r} style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 10, opacity: re, transform: `translateX(${(1 - re) * 8}px)` }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: i === 0 ? c.accent : c.line2 }} />
                  <span style={{ fontFamily: SANS, fontSize: 12, color: c.ink, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r}</span>
                </div>
              );
            })}
            <div style={{ position: "absolute", left: 18, right: 18, bottom: 16, textAlign: "center", fontFamily: SANS, fontSize: 12.5, fontWeight: 600, color: "#fff", background: c.ink, borderRadius: 999, padding: "11px 0" }}>
              New task
            </div>
          </div>
        </div>
      </div>

      {/* ---- beat B · desktop ---- */}
      <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", gap: 16, alignItems: "center", justifyContent: "center", opacity: desktopOpacity, pointerEvents: "none" }}>
        <BeatCaption text="At your desk" />
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", transform: `translateY(${(1 - de) * 24}px)` }}>
          {/* laptop screen */}
          <div style={{ width: 600, background: "#0e0e0d", borderRadius: 16, padding: 12, boxShadow: "0 30px 60px -30px rgba(0,0,0,0.5)" }}>
            <div style={{ background: c.card, borderRadius: 8, overflow: "hidden", height: 300, display: "flex" }}>
              {/* sidebar */}
              <div style={{ width: 152, borderRight: `1px solid ${c.line}`, padding: "14px 12px" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                  <Mark size={13} />
                  <span style={{ fontFamily: SANS, fontSize: 12, fontWeight: 700, color: c.ink }}>Alpaca Labs</span>
                </div>
                {["New task", "Projects", "Artifacts", "MCP"].map((s, i) => (
                  <div key={s} style={{ display: "flex", alignItems: "center", fontFamily: SANS, fontSize: 11.5, color: i === 0 ? c.ink : c.faint, background: i === 0 ? c.chip : "transparent", borderRadius: 6, padding: "6px 8px", marginTop: i === 0 ? 14 : 2 }}>
                    {s}
                    {s === "MCP" && <span style={{ marginLeft: "auto", color: c.accent, fontSize: 9, fontWeight: 600 }}>New</span>}
                  </div>
                ))}
              </div>
              {/* main */}
              <div style={{ flex: 1, padding: "16px 20px", display: "flex", flexDirection: "column" }}>
                <div style={{ fontFamily: MONO, fontSize: 9.5, letterSpacing: 1, textTransform: "uppercase", color: c.faint }}>Recents</div>
                <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10 }}>
                  {recents.map((r, i) => {
                    const t = Math.max(0, Math.min(1, (p - (SWAP + 0.06) - i * 0.05) / 0.14));
                    const re = t * t * (3 - 2 * t);
                    return (
                      <div key={r} style={{ opacity: re, transform: `translateY(${(1 - re) * 8}px)`, border: `1px solid ${c.line}`, borderRadius: 10, padding: "11px 12px" }}>
                        <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
                          <span style={{ width: 6, height: 6, borderRadius: 999, background: i === 0 ? c.accent : c.line2 }} />
                          <span style={{ fontFamily: SANS, fontSize: 12, fontWeight: 600, color: c.ink, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{r}</span>
                        </div>
                        <div style={{ marginTop: 9, height: 5, width: `${70 - i * 8}%`, borderRadius: 4, background: c.line2 }} />
                      </div>
                    );
                  })}
                </div>
                {/* mini composer */}
                <div style={{ marginTop: "auto", display: "flex", alignItems: "center", gap: 10, border: `1px solid ${c.line2}`, borderRadius: 10, padding: "10px 12px" }}>
                  <span style={{ color: c.faint, fontSize: 15 }}>＋</span>
                  <span style={{ fontFamily: SANS, fontSize: 12, color: c.faint }}>Where should we begin?</span>
                  <span style={{ marginLeft: "auto", width: 22, height: 22, borderRadius: 999, background: c.accent, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 12 }}>↑</span>
                </div>
              </div>
            </div>
          </div>
          {/* laptop base */}
          <div style={{ width: 664, height: 14, background: "linear-gradient(#cfcfca,#e8e8e4)", borderRadius: "0 0 12px 12px", boxShadow: "0 10px 20px -12px rgba(0,0,0,0.4)" }} />
          <div style={{ width: 96, height: 5, background: "#c4c4bf", borderRadius: "0 0 6px 6px" }} />
        </div>
      </div>
    </Frame>
  );
}

/* ---- the film ------------------------------------------------------------- */

export interface Chapter {
  id: string;
  label: string;
  /** seconds this chapter runs for */
  duration: number;
  /** receives 0→1 progress within this chapter */
  Scene: (props: { p: number }) => ReactNode;
}

export const DEFAULT_CHAPTERS: Chapter[] = [
  { id: "hook", label: "Hook", duration: 5, Scene: SceneHook },
  { id: "ask", label: "Just ask", duration: 5, Scene: SceneJustAsk },
  { id: "agent", label: "Agent at work", duration: 6, Scene: SceneAgent },
  { id: "result", label: "Result", duration: 6, Scene: SceneResult },
  { id: "integrations", label: "Integrations", duration: 8, Scene: SceneIntegrations },
  { id: "anywhere", label: "Anywhere", duration: 6, Scene: SceneAnywhere },
];

const KEYFRAMES = `
@keyframes lf-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.lf-caret { animation: lf-blink 1s step-end infinite; }
@keyframes lf-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes lf-spin { to { transform: translate(-50%, -50%) rotate(360deg) } }
.lf-beam { animation: lf-spin linear infinite; will-change: transform; }
`;

export interface LaunchFilmProps {
  /** Rendered width in px; the whole film scales from this. Default 920. */
  width?: number;
  chapters?: Chapter[];
  /** Autoplay on mount. Default true. */
  autoPlay?: boolean;
  /** Loop back to the start at the end. Default true. */
  loop?: boolean;
}

export default function LaunchFilm({
  width = STAGE_W,
  chapters = DEFAULT_CHAPTERS,
  autoPlay = true,
  loop = true,
}: LaunchFilmProps) {
  const total = chapters.reduce((s, ch) => s + ch.duration, 0);
  const scale = width / CANVAS_W;

  const [time, setTime] = useState(0);
  const [playing, setPlaying] = useState(autoPlay);
  const raf = useRef<number>();
  const last = useRef<number>();
  const trackRef = useRef<HTMLDivElement>(null);
  const dragging = useRef(false);

  // rAF clock
  useEffect(() => {
    if (!playing) {
      last.current = undefined;
      return;
    }
    const tick = (now: number) => {
      if (last.current != null) {
        const dt = (now - last.current) / 1000;
        setTime((prev) => {
          let next = prev + dt;
          if (next >= total) {
            if (loop) next %= total;
            else {
              next = total;
              setPlaying(false);
            }
          }
          return next;
        });
      }
      last.current = now;
      raf.current = requestAnimationFrame(tick);
    };
    raf.current = requestAnimationFrame(tick);
    return () => {
      if (raf.current) cancelAnimationFrame(raf.current);
      last.current = undefined;
    };
  }, [playing, total, loop]);

  // locate active chapter + in-chapter progress
  let acc = 0;
  let activeIndex = 0;
  let chapterProgress = 0;
  for (let i = 0; i < chapters.length; i++) {
    const end = acc + chapters[i].duration;
    if (time < end || i === chapters.length - 1) {
      activeIndex = i;
      chapterProgress = Math.min(1, (time - acc) / chapters[i].duration);
      break;
    }
    acc = end;
  }
  const Active = chapters[activeIndex].Scene;
  const playhead = Math.min(1, time / total); // 0→1 across the whole film

  // seeking
  const seekToClientX = useCallback(
    (clientX: number) => {
      const el = trackRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const frac = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
      setTime(frac * total);
    },
    [total],
  );

  const onPointerDown = (e: React.PointerEvent) => {
    dragging.current = true;
    (e.target as Element).setPointerCapture?.(e.pointerId);
    seekToClientX(e.clientX);
  };
  const onPointerMove = (e: React.PointerEvent) => {
    if (dragging.current) seekToClientX(e.clientX);
  };
  const onPointerUp = () => {
    dragging.current = false;
  };

  return (
    <div style={{ width: CANVAS_W * scale, height: CANVAS_H * scale, fontFamily: SANS }}>
      <style>{KEYFRAMES}</style>
      <div
        style={{
          width: CANVAS_W,
          height: CANVAS_H,
          transform: `scale(${scale})`,
          transformOrigin: "top left",
          position: "relative",
        }}
      >
        {/* stage */}
        <div style={{ position: "absolute", top: 0, left: 0, width: STAGE_W, height: STAGE_H, background: c.stage, borderRadius: 24, overflow: "hidden" }}>
          <div style={{ position: "absolute", inset: 22 }}>
            {/* re-mount per chapter so the entry cross-fade replays */}
            <div key={chapters[activeIndex].id} style={{ position: "absolute", inset: 0, animation: "lf-fade 0.5s ease" }}>
              <Active p={chapterProgress} />
            </div>
          </div>

          {/* play / pause */}
          <button
            type="button"
            aria-label={playing ? "Pause" : "Play"}
            onClick={() => {
              if (!loop && time >= total) setTime(0);
              setPlaying((v) => !v);
            }}
            style={{
              position: "absolute",
              left: 16,
              bottom: 16,
              width: 40,
              height: 40,
              borderRadius: 999,
              border: "none",
              cursor: "pointer",
              background: "rgba(20,20,18,0.82)",
              color: "#fff",
              fontSize: 15,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              backdropFilter: "blur(4px)",
            }}
          >
            {playing ? "❚❚" : "▶"}
          </button>
        </div>

        {/* chapter track / scrubber */}
        <div style={{ position: "absolute", left: 0, top: STAGE_H + GAP, width: STAGE_W, height: TRACK_H }}>
          {/* progress rail + playhead bubble */}
          <div style={{ position: "relative", height: 26 }}>
            <div style={{ position: "absolute", top: 12, left: 0, right: 0, height: 2, background: c.line2, borderRadius: 2 }} />
            <div style={{ position: "absolute", top: 12, left: 0, width: `${playhead * 100}%`, height: 2, background: c.playhead, borderRadius: 2 }} />
            {/* playhead + timestamp bubble */}
            <div style={{ position: "absolute", top: 0, left: `${playhead * 100}%`, transform: "translateX(-50%)", display: "flex", flexDirection: "column", alignItems: "center" }}>
              <div style={{ fontFamily: MONO, fontSize: 11, color: "#fff", background: c.playhead, borderRadius: 6, padding: "3px 8px", lineHeight: 1, whiteSpace: "nowrap" }}>
                {fmt(time)}
              </div>
              <div style={{ width: 11, height: 11, borderRadius: 999, background: c.playhead, marginTop: 3, boxShadow: "0 0 0 3px rgba(20,20,18,0.12)" }} />
            </div>
          </div>

          {/* labelled, draggable segments */}
          <div
            ref={trackRef}
            onPointerDown={onPointerDown}
            onPointerMove={onPointerMove}
            onPointerUp={onPointerUp}
            style={{ display: "flex", gap: 8, marginTop: 8, height: TRACK_H - 34, cursor: "pointer", touchAction: "none" }}
          >
            {chapters.map((ch, i) => (
              <div
                key={ch.id}
                style={{
                  flex: ch.duration,
                  borderRadius: 10,
                  background: i === activeIndex ? c.segActive : c.segIdle,
                  transition: "background .25s",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  textAlign: "center",
                  padding: "0 8px",
                }}
              >
                <span style={{ fontFamily: SANS, fontSize: 15, fontWeight: i === activeIndex ? 600 : 500, color: i === activeIndex ? c.ink : c.sub }}>
                  {ch.label}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

import { useCallback, useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
import ChatShell, { chatThemes, type ChatTheme, type Turn as ChatTurn } from "../chat-shell/snippet";
import IPhoneMock, { ChatGPTScreen } from "../iphone-mock/snippet";
import MacBookMock, { ClaudeScreen } from "../macbook-mock/snippet";
import { INTEGRATIONS, type Integration } from "./integrations";
import wordmarkSvg from "./assets/sealgate-wordmark.svg?raw";
import logomarkSvg from "./assets/sealgate-logomark.svg?raw";

/**
 * SealGateFilm: a SealGate launch film built on the LaunchFilm engine (one rAF
 * clock, data-driven chapters, a draggable chapter scrubber) and dressed in the
 * sealgate.ai brand system: black stage, Core Cyan as the single signal, Archivo
 * Medium as the default face, JetBrains Mono for data, Hackbox tags at 40% x 10%.
 *
 * The story, one chapter each:
 *   1. SealGate           wordmark + the landing-page headline
 *   2. Write a policy     a policy composer types itself; the camera pushes in and
 *                         zoom-cuts onto the send button (LaunchFilm's "Just ask")
 *   3-5. one continuous world with one camera (chapter cuts are invisible):
 *      Agent at work      the SealGate agent collects context (status line,
 *                         scanned reel, a stack of sources), writes the policy,
 *                         drops into the gate as its seal and docks the policy
 *                         as the gate's POLICY tag
 *      Ask in any AI      the camera pushes into Claude and ChatGPT (ChatShell)
 *                         as the team prompts
 *      Airlock            the camera pulls back and both calls travel to Gmail
 *                         through the gate: entry door opens, the call is
 *                         scanned, then the exit door opens or the call is held
 *   6. Integrations       every agent and data source listed on sealgate.ai
 *   7. Any device         the same enforcement on iPhone (ChatGPT) and MacBook
 *                         (Claude), using IPhoneMock + MacBookMock
 *   8. Start free         end card + CTA
 *
 * Every animation reads the film clock, so pausing or scrubbing freezes the
 * exact frame. Reuses three sibling patterns (chat-shell, iphone-mock,
 * macbook-mock); ChatShell needs Tailwind. Brand SVGs are imported with Vite's
 * `?raw` and inlined as data URIs.
 */

const STAGE_W = 920;
const STAGE_H = 516;
const TRACK_H = 96;
const GAP = 12;
const CANVAS_W = STAGE_W;
const CANVAS_H = STAGE_H + GAP + TRACK_H;
const INSET = 22;
const BOX_W = STAGE_W - INSET * 2; // 876
const BOX_H = STAGE_H - INSET * 2; // 472

const c = {
  black: "#000000",
  panel: "#05070a",
  panel2: "#1C1C1C",
  line: "#383838",
  line2: "#555555",
  grey: "#9BA4A6",
  dim: "#8F8F8F",
  white: "#F9F9F9",
  cyan: "#C3FFFD",
  green: "#00C781",
  red: "#FF3B4D",
} as const;

const SANS = '"Archivo", ui-sans-serif, sans-serif';
const MONO = '"JetBrains Mono", ui-monospace, Menlo, monospace';
const FONTS = "@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');";

const BASE = (import.meta as { env?: { BASE_URL?: string } }).env?.BASE_URL ?? "/";
const uri = (svg: string) => `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
const WORDMARK = uri(wordmarkSvg);
const LOGOMARK = uri(logomarkSvg);

const clamp01 = (v: number) => Math.max(0, Math.min(1, v));
const ease = (t: number) => t * t * (3 - 2 * t);
const lerp = (a: number, b: number, t: number) => a + (b - a) * t;
const seg = (t: number, a: number, b: number) => clamp01((t - a) / (b - a));
const at = (p: number, start: number, dur: number) => ease(clamp01((p - start) / dur));
const pulse = (t: number, a: number, b: number) => Math.min(seg(t, a - 0.06, a), 1 - seg(t, b, b + 0.06));
const fmt = (s: number) => `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, "0")}`;

/** The SealGate wordmark inline, sized by height (it replaces the name in text). */
function Wordmark({ h, style }: { h: number; style?: CSSProperties }) {
  return <img src={WORDMARK} alt="SealGate" style={{ height: h, width: h * (2241.77 / 391), display: "inline-block", verticalAlign: "middle", ...style }} />;
}

/* ---- integrations as images ---------------------------------------------- */

const byName = (name: string) => INTEGRATIONS.find((i) => i.name === name) as Integration;

/** A brand tile as a standalone SVG (for <img>/<image> and ChatShell icons). */
function tileSvg(it: Integration) {
  if (it.raw) return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${it.viewBox}">${it.body}</svg>`;
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect width="24" height="24" rx="5" fill="${it.color}"/><svg x="4.2" y="4.2" width="15.6" height="15.6" viewBox="${it.viewBox}">${it.body}</svg></svg>`;
}
const GMAIL = uri(tileSvg(byName("Gmail")));

/** Chrome's mark, drawn inline (three 120° sectors around the blue core). */
const CHROME = uri(
  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="#EA4335" d="M24 24L4.95 13A22 22 0 0 1 43.05 13Z"/><path fill="#FBBC04" d="M24 24L43.05 13A22 22 0 0 1 24 46Z"/><path fill="#34A853" d="M24 24L24 46A22 22 0 0 1 4.95 13Z"/><circle cx="24" cy="24" r="10" fill="#fff"/><circle cx="24" cy="24" r="8" fill="#4285F4"/></svg>`,
);
const CLAUDE_TILE = uri(tileSvg(byName("Claude Desktop")));
const CHATGPT_TILE = uri(tileSvg(byName("ChatGPT")));
const GROKBOT = `${BASE}icons/agents/grokbot.svg`;

function Tile({ it, size }: { it: Integration; size: number }) {
  return <img src={uri(tileSvg(it))} alt={it.name} width={size} height={size} style={{ display: "block", outline: `1px solid ${c.line}`, outlineOffset: -1, borderRadius: size * 0.21 }} />;
}

/* ---- brand primitives ----------------------------------------------------- */

function Scene({ children }: { children: ReactNode }) {
  return <div style={{ position: "absolute", inset: 0, background: c.black, border: `1px solid ${c.line}`, overflow: "hidden" }}>{children}</div>;
}

function Label({ children, color = c.grey }: { children: ReactNode; color?: string }) {
  return <div style={{ fontFamily: MONO, fontSize: 11, letterSpacing: 2, textTransform: "uppercase", color }}>{children}</div>;
}

function Rise({ e, y = 10, children, style }: { e: number; y?: number; children: ReactNode; style?: CSSProperties }) {
  return <div style={{ opacity: e, transform: `translateY(${(1 - e) * y}px)`, ...style }}>{children}</div>;
}

/** Mono label + Archivo Light headline, as section heads read on sealgate.ai. */
function Heading({ p, label, title, center }: { p: number; label?: string; title: string; center?: boolean }) {
  return (
    <Rise e={at(p, 0, 0.14)} style={{ textAlign: center ? "center" : "left" }}>
      {label && <Label color={c.cyan}>{label}</Label>}
      <div style={{ fontFamily: SANS, fontSize: 28, fontWeight: 500, color: c.white, marginTop: label ? 8 : 0, letterSpacing: -0.6 }}>{title}</div>
    </Rise>
  );
}

/* ---- 01 · SealGate -------------------------------------------------------- */

function SceneHook({ p }: { p: number }) {
  return (
    <Scene>
      <div style={{ position: "absolute", left: 0, right: 0, top: 138, display: "flex", flexDirection: "column", alignItems: "center" }}>
        <Rise e={at(p, 0.1, 0.25)}>
          <img src={WORDMARK} alt="SealGate" style={{ height: 58, display: "block" }} />
        </Rise>
        <Rise e={at(p, 0.3, 0.25)}>
          <div style={{ fontFamily: SANS, fontSize: 32, fontWeight: 500, color: c.white, marginTop: 36, letterSpacing: -0.8 }}>
            Connect &amp; Govern how agents interact with your data
          </div>
        </Rise>
      </div>
    </Scene>
  );
}

/* ---- 02 · Write a policy -------------------------------------------------- */
/* The composer draws itself in, the heading rises word by word and the agents
   the rule covers spring onto it. While the rule types, the camera tracks the
   caret; each key phrase is underlined as it lands and pops a matching chip.
   The camera then pushes onto the send button, pulls back on the press, and
   the rule lifts off as a message that lands exactly where the next chapter's
   agent picks it up. */

const COMP = { x: 128, y: 190, w: 620, h: 124 };
const SEND = { x: COMP.x + COMP.w - 18 - 17, y: COMP.y + COMP.h - 16 - 17 };
const TYPE = { from: 0.95, to: 2.85 };
const TERMS = [
  { text: "email", chip: "gmail.send_email" },
  { text: "customer data", chip: "pii" },
  { text: "outside the company", chip: "external domains" },
];
const HEADLINE = "What should your agents never do?";

/** The composer's send button: outlined until the rule is typed, then a Core
    Cyan fill springs out from its centre; the press dips it and throws a ring. */
function SendButton({ fill, press }: { fill: number; press: number }) {
  const size = 34;
  const dip = press > 0 ? 1 - 0.12 * Math.sin(Math.min(1, press * 2.5) * Math.PI) : 1;
  const f = fill > 0 ? spring(fill) : 0;
  return (
    <div style={{ position: "absolute", left: SEND.x - COMP.x - size / 2, top: SEND.y - COMP.y - size / 2, width: size, height: size, transform: `scale(${dip})` }}>
      {press > 0 && press < 1 && (
        <div style={{ position: "absolute", inset: 0, borderRadius: 8, border: `1.5px solid ${c.cyan}`, transform: `scale(${1 + press * 1.1})`, opacity: 1 - press }} />
      )}
      <div style={{ position: "absolute", inset: 0, borderRadius: 8, border: `1px solid ${fill > 0 ? c.cyan : c.line2}` }} />
      <div style={{ position: "absolute", inset: 0, borderRadius: 8, background: c.cyan, transform: `scale(${f.toFixed(3)})` }} />
      <svg width={16} height={16} viewBox="0 0 24 24" fill="none" stroke={fill > 0.4 ? c.black : c.dim} strokeWidth={2.4} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ position: "absolute", left: 9, top: 9, transform: `translateY(${(-3 * Math.sin(Math.min(1, press * 2) * Math.PI)).toFixed(2)}px)` }}>
        <path d="M12 19V5M5 12l7-7 7 7" />
      </svg>
    </div>
  );
}

const typedAt = (t: number) => Math.floor(seg(t, TYPE.from, TYPE.to) * POLICY_PROMPT.length);
const termDone = (text: string) => TYPE.from + ((POLICY_PROMPT.indexOf(text) + text.length) / POLICY_PROMPT.length) * (TYPE.to - TYPE.from);

/** The rule as typed so far, key phrases underlined in cyan as they complete. */
function TypedRule({ chars, t }: { chars: number; t: number }) {
  const out: ReactNode[] = [];
  let i = 0;
  for (const term of TERMS) {
    const k = POLICY_PROMPT.indexOf(term.text);
    out.push(POLICY_PROMPT.slice(i, Math.min(k, chars)));
    if (chars <= k) return <>{out}</>;
    const u = ease(seg(t, termDone(term.text), termDone(term.text) + 0.25));
    out.push(
      <span key={term.text} style={{ position: "relative", color: u > 0.5 ? c.cyan : c.white }}>
        {POLICY_PROMPT.slice(k, Math.min(k + term.text.length, chars))}
        <span style={{ position: "absolute", left: 0, bottom: -3, height: 2, width: `${u * 100}%`, background: c.cyan }} />
      </span>,
    );
    i = k + term.text.length;
  }
  out.push(POLICY_PROMPT.slice(i, chars));
  return <>{out}</>;
}

/** The sent rule as a message bubble, shared with the agent chapter so the
    hand-off lands on the same pixels. */
const BUBBLE_W = 330;
function Bubble({ style }: { style?: CSSProperties }) {
  return (
    <div style={{ position: "absolute", width: BUBBLE_W, boxSizing: "border-box", border: `1px solid ${c.line2}`, background: c.panel2, padding: "8px 12px", fontFamily: SANS, fontWeight: 500, fontSize: 12.5, lineHeight: "17px", color: c.white, transformOrigin: "0 0", ...style }}>
      {POLICY_PROMPT}
    </div>
  );
}

function policyCam(t: number): Pose {
  const home: Pose = { s: 1, x: COMP.x + COMP.w / 2, y: 236 };
  // a gentle drift that follows the caret without losing the start of the line
  const track: Pose = { s: 1.2, x: COMP.x + COMP.w / 2 + lerp(-50, 50, seg(t, TYPE.from, TYPE.to)), y: COMP.y + 40 };
  const send: Pose = { s: 2.1, x: SEND.x - 60, y: SEND.y - 10 };
  if (t < 0.9) return mix({ ...home, s: 0.92 }, home, ease(seg(t, 0, 0.9)));
  if (t < 3.0) return mix(home, track, ease(seg(t, 0.9, 1.6)));
  if (t < 3.6) return mix(track, send, ease(seg(t, 3.0, 3.4)));
  return mix(send, P_WIDE, ease(seg(t, 3.6, 4.35)));
}

function ScenePolicy({ p }: { p: number }) {
  const t = p * 5;
  const chars = typedAt(t);
  const done = chars >= POLICY_PROMPT.length;
  const caretOn = Math.floor(t * 2.6) % 2 === 0;
  const cam = policyCam(t);

  const draw = ease(seg(t, 0.15, 0.85));
  const perim = 2 * (COMP.w + COMP.h);
  const beam = 150;
  const collapse = ease(seg(t, 3.7, 4.2));
  const lift = seg(t, 3.72, 4.6);

  // the bubble flies in screen space, from the composer text to the agent chapter's spot
  const f = ease(lift);
  const fromX = BOX_W / 2 + cam.s * (COMP.x + 20 - cam.x);
  const fromY = BOX_H / 2 + cam.s * (COMP.y + 16 - cam.y);
  const toX = BOX_W / 2 + P_NET.s * (RULE_AT.x - P_NET.x);
  const toY = BOX_H / 2 + P_NET.s * (RULE_AT.y - P_NET.y);
  const bx = lerp(fromX, toX, f);
  const by = lerp(fromY, toY, f) - Math.sin(f * Math.PI) * 26;
  const bs = lerp(cam.s * 1.15, P_NET.s, f);
  const brand = at(t, 0.05, 0.4);

  return (
    <Scene>
      <div style={{ position: "absolute", inset: 0, transformOrigin: "0 0", transform: `translate(${(BOX_W / 2 - cam.s * cam.x).toFixed(1)}px, ${(BOX_H / 2 - cam.s * cam.y).toFixed(1)}px) scale(${cam.s.toFixed(3)})` }}>
        <div style={{ position: "absolute", left: COMP.x, top: 102, width: COMP.w, opacity: 1 - collapse, transform: `translateY(${(-collapse * 16).toFixed(1)}px)` }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10, opacity: brand, transform: `translateX(${((1 - brand) * -14).toFixed(1)}px)` }}>
            <Wordmark h={22} />
          </div>
          <div style={{ fontFamily: SANS, fontSize: 24, fontWeight: 500, color: c.white, marginTop: 14, display: "flex", flexWrap: "wrap", columnGap: 7 }}>
            {HEADLINE.split(" ").map((word, i) => {
              const e = at(t, 0.2 + i * 0.07, 0.45);
              return (
                <span key={i} style={{ display: "inline-block", overflow: "hidden", paddingBottom: 3 }}>
                  <span style={{ display: "inline-block", transform: `translateY(${((1 - e) * 110).toFixed(1)}%)` }}>{word}</span>
                </span>
              );
            })}
          </div>
        </div>
        <div style={{ position: "absolute", left: COMP.x, top: COMP.y, width: COMP.w, height: COMP.h, transformOrigin: "50% 0", transform: `translateY(${(collapse * 18).toFixed(1)}px) scaleY(${(1 - collapse * 0.35).toFixed(3)})`, opacity: 1 - collapse }}>
          <div style={{ position: "absolute", inset: 0, background: c.panel, opacity: draw }} />
          <svg width={COMP.w} height={COMP.h} style={{ position: "absolute", left: 0, top: 0, overflow: "visible" }} aria-hidden="true">
            <rect x={0.5} y={0.5} width={COMP.w - 1} height={COMP.h - 1} fill="none" stroke={c.line2} strokeWidth={1} strokeDasharray={perim} strokeDashoffset={perim * (1 - draw)} />
            {draw >= 1 && <rect x={0} y={0} width={COMP.w} height={COMP.h} fill="none" stroke={c.cyan} strokeWidth={2} strokeDasharray={`${beam} ${perim - beam}`} strokeDashoffset={-perim * (t - 0.85) * 0.32} />}
          </svg>
          <div style={{ position: "relative", padding: "22px 20px 0", fontFamily: SANS, fontWeight: 500, fontSize: 16, color: chars ? c.white : c.dim, minHeight: 22, opacity: draw * (1 - seg(t, 3.72, 3.85)) }}>
            {chars ? <TypedRule chars={chars} t={t} /> : "Describe a rule in plain English…"}
            {!done && t > 0.6 && <span style={{ display: "inline-block", width: 2, height: 17, background: c.cyan, marginLeft: 1, verticalAlign: -2, opacity: caretOn ? 1 : 0 }} />}
          </div>
          {/* the agents this rule applies to, then the phrases it picked out */}
          <div style={{ position: "absolute", left: 18, right: 70, bottom: 20, display: "flex", alignItems: "center", gap: 8 }}>
            <div style={{ display: "flex", marginRight: 6 }}>
              {[CLAUDE_TILE, CHATGPT_TILE, GROKBOT].map((src, i) => {
                const e = seg(t, 0.6 + i * 0.1, 1.0 + i * 0.1);
                return <img key={src} src={src} alt="" width={22} height={22} style={{ display: "block", borderRadius: 5, marginLeft: i ? -5 : 0, boxShadow: `0 0 0 2px ${c.panel}, 0 0 0 3px ${c.line2}`, position: "relative", zIndex: 3 - i, opacity: clamp01(e * 3), transform: `scale(${e > 0 ? spring(e).toFixed(3) : 0})` }} />;
              })}
            </div>
            {TERMS.map((term) => {
              const e = seg(t, termDone(term.text) + 0.1, termDone(term.text) + 0.45);
              if (e <= 0) return null;
              const sp = spring(e);
              return (
                <span key={term.chip} style={{ fontFamily: MONO, fontSize: 11, color: c.cyan, border: `1px solid ${c.cyan}`, padding: "3px 7px", whiteSpace: "nowrap", opacity: clamp01(e * 3), transform: `translateY(${((1 - sp) * 10).toFixed(1)}px) scale(${(0.8 + 0.2 * sp).toFixed(3)})` }}>
                  {term.chip}
                </span>
              );
            })}
          </div>
          <SendButton fill={seg(t, 3.05, 3.4)} press={seg(t, 3.45, 3.95)} />
        </div>
      </div>
      {lift > 0 && <Bubble style={{ left: bx, top: by, transform: `scale(${bs.toFixed(3)})`, opacity: clamp01(lift * 6) }} />}
    </Scene>
  );
}

/* ---- 04 · Ask in any AI (intent-based prompting) -------------------------- */

const theme = (id: "claude" | "chatgpt"): ChatTheme => ({ ...chatThemes[id], logo: `${BASE}icons/agents/${id}.svg` });
const CLAUDE = theme("claude");
const CHATGPT = theme("chatgpt");

const ASK_CLAUDE = "Send the Q3 board summary to the leadership team.";
const ASK_GPT = "Email our customer list to my personal Gmail.";

function claudeTurns(stage: number): ChatTurn[] {
  const t: ChatTurn[] = [];
  if (stage >= 1) t.push({ role: "user", text: ASK_CLAUDE });
  if (stage >= 2) t.push({ role: "tool", name: "gmail.send_email", label: "Sending email to leadership@acme.com", icon: GMAIL });
  if (stage >= 3) t.push({ role: "assistant", text: "Sent to leadership@acme.com. SealGate checked it against company policy." });
  return t;
}
function gptTurns(stage: number): ChatTurn[] {
  const t: ChatTurn[] = [];
  if (stage >= 1) t.push({ role: "user", text: ASK_GPT });
  if (stage >= 2) t.push({ role: "reason", seconds: 4 }, { role: "tool", name: "gmail.send_email", label: "Sending email via Gmail" });
  if (stage >= 3) t.push({ role: "assistant", text: "SealGate blocked this: customer data can't be emailed outside the company." });
  return t;
}

function Window({ theme: th, turns, width, scale, body }: { theme: ChatTheme; turns: ChatTurn[]; width: number; scale: number; body: number }) {
  return (
    <div style={{ width: width * scale, transformOrigin: "0 0" }}>
      <div style={{ width, transform: `scale(${scale})`, transformOrigin: "0 0" }}>
        <ChatShell theme={th} conversation={turns} bodyHeight={body} />
      </div>
    </div>
  );
}

/* ---- 05 · Airlock --------------------------------------------------------- */
/* The SealGate gate as an airlock, geometry and stage timings ported from the
   sealgate.ai hero: the call reaches the entry door, the door opens, the camera
   zooms the call up to a readable card and scans it, then the exit door opens
   onto Gmail, or the gate turns red and the call stays inside. */

const ST = { arrive: 0.18, enter: 0.26, zoomIn: 0.33, scanEnd: 0.56, zoomOut: 0.7, small: 0.76, leave: 0.84, done: 1, blockFade: 0.84 };
const AG = { x: 480, y: 280, size: 196 };
const AL = AG.x - AG.size / 2;
const AR = AG.x + AG.size / 2;
const AT = AG.y - AG.size / 2;
const AB = AG.y + AG.size / 2;
const A_DOOR = 30;
const A_SEAL = 64;
const A_SEAL_Y = AT + AG.size * 0.1 + 10 + A_SEAL / 2;
const A_IN = (AL + AG.x - A_SEAL / 2) / 2;
const A_OUT = (AR + AG.x + A_SEAL / 2) / 2;
const A_ZW = AG.size - 12;
const A_ZH = 62;
const A_ZY = AB - 8 - A_ZH / 2;
const A_PKT = 9;
const SRC = [
  { x: 292, y: 192 },
  { x: 292, y: 372 },
];
const DEST = { x: 776, y: AG.y, size: 60 };

interface Call {
  t: number;
  src: number;
  blocked: boolean;
  to: string;
  attach?: string;
}

function ADoor({ x, open, alert }: { x: number; open: number; alert: boolean }) {
  const h = A_DOOR / 2;
  const f = h * open;
  return (
    <g stroke={alert ? c.red : c.cyan} strokeWidth={2}>
      <line x1={x} y1={AT} x2={x} y2={AG.y - h} />
      <line x1={x} y1={AG.y + h} x2={x} y2={AB} />
      <line x1={x} y1={AG.y - h - f} x2={x} y2={AG.y - f} strokeWidth={4} />
      <line x1={x} y1={AG.y + f} x2={x} y2={AG.y + h + f} strokeWidth={4} />
    </g>
  );
}

/**
 * The gate. `draw` traces the frame in (0 -> 1) while the policy is being built,
 * `tag` shows the docked POLICY tag, `wiring` fades in the lanes and Gmail.
 */
function Airlock({ call, done, draw = 1, tag = 1, wiring = 1, seal = 1, lanes = [1, 1] }: { call?: Call; done: boolean[]; draw?: number; tag?: number; wiring?: number; seal?: number; lanes?: number[] }) {
  const t = call?.t ?? 0;
  const f = !!call && call.blocked && t >= ST.scanEnd;
  const ok = !!call && !call.blocked && t >= ST.scanEnd;
  const inOpen = call ? pulse(t, ST.arrive - 0.02, ST.enter) : 0;
  const outOpen = call && !f ? pulse(t, ST.small - 0.02, ST.leave) : 0;
  const zoom = call ? (t < ST.zoomOut ? ease(seg(t, ST.enter, ST.zoomIn)) : 1 - ease(seg(t, ST.zoomOut, ST.small))) : 0;

  let px = 0;
  let py = AG.y;
  if (call) {
    const s = SRC[call.src];
    const doorIn = AL - 6;
    const doorOut = AR + 6;
    if (t < ST.arrive) {
      const u = seg(t, 0, ST.arrive);
      px = lerp(s.x, doorIn, u);
      py = lerp(s.y, AG.y, u);
    } else if (t < ST.enter) px = lerp(doorIn, A_IN, ease(seg(t, ST.arrive, ST.enter)));
    else if (f || t < ST.small) px = f ? A_IN : A_OUT;
    else if (t < ST.leave) px = lerp(A_OUT, doorOut, ease(seg(t, ST.small, ST.leave)));
    else px = lerp(doorOut, DEST.x - DEST.size / 2 - 6, seg(t, ST.leave, ST.done));
  }
  const base = t < ST.zoomOut || f ? A_IN : A_OUT;
  const cx = lerp(base, AG.x, zoom);
  const w = lerp(A_PKT, A_ZW, zoom);
  const h = lerp(A_PKT, A_ZH, zoom);
  const cy = lerp(AG.y, A_ZY, zoom);
  const fade = f ? 1 - seg(t, ST.small, ST.blockFade) * 0.6 : 1;
  const detail = clamp01((zoom - 0.6) / 0.4);
  const inGate = t >= ST.enter && (f || t < ST.small);
  const visible = !!call && t > 0.02 && t < 0.985;
  const scanning = zoom > 0.95 && t < ST.scanEnd;
  const scanY = lerp(A_ZY - A_ZH / 2 + 4, A_ZY + A_ZH / 2 - 4, 0.5 - 0.5 * Math.cos(seg(t, ST.zoomIn, ST.scanEnd) * Math.PI * 2));
  const ink = f ? c.red : ok ? c.cyan : c.white;
  const hot = f || done[1];
  const x1 = AR + 6;
  const x2 = DEST.x - DEST.size / 2 - 6;
  const mx = (x1 + x2) / 2;

  return (
    <svg width={BOX_W} height={BOX_H} style={{ position: "absolute", left: 0, top: 0 }} fill="none">
      <defs>
        <marker id="sgf-arrow" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
          <path d="M0,0 L6,3 L0,6 Z" fill={c.cyan} />
        </marker>
      </defs>
      {SRC.map((s, i) => {
        const d = lanes[i] ?? 1;
        if (d <= 0) return null;
        const tx = lerp(s.x, AL - 6, d);
        const ty = lerp(s.y, AG.y, d);
        return (
          <g key={i}>
            <line x1={s.x} y1={s.y} x2={tx} y2={ty} stroke={c.cyan} strokeOpacity={call?.src === i ? 1 : 0.45} strokeWidth={1.5} strokeDasharray="4 4" />
            {d < 1 && <rect x={tx - 3} y={ty - 3} width={6} height={6} fill={c.cyan} />}
          </g>
        );
      })}
      <g opacity={wiring}>
      <line x1={x1} y1={AG.y} x2={x2} y2={AG.y} stroke={hot && !ok ? c.red : c.cyan} strokeOpacity={0.8} strokeWidth={1.5} strokeDasharray={hot && !ok ? "4 4" : undefined} markerEnd={hot && !ok ? undefined : "url(#sgf-arrow)"} />
      {hot && !ok && (
        <g>
          <rect x={mx - 10} y={AG.y - 10} width={20} height={20} fill={c.black} stroke={c.red} strokeWidth={1.5} />
          <path d={`M${mx - 4.5},${AG.y - 4.5} L${mx + 4.5},${AG.y + 4.5} M${mx + 4.5},${AG.y - 4.5} L${mx - 4.5},${AG.y + 4.5}`} stroke={c.red} strokeWidth={1.5} />
        </g>
      )}
      <image href={GMAIL} x={DEST.x - DEST.size / 2} y={DEST.y - DEST.size / 2} width={DEST.size} height={DEST.size} />
      <text x={DEST.x} y={DEST.y + DEST.size / 2 + 22} textAnchor="middle" fill={c.grey} fontSize={11} letterSpacing={2} style={{ fontFamily: MONO }}>GMAIL</text>
      </g>
      {draw < 1 ? (
        <rect x={AL} y={AT} width={AG.size} height={AG.size} stroke={c.cyan} strokeWidth={2} strokeDasharray={AG.size * 4} strokeDashoffset={AG.size * 4 * (1 - draw)} />
      ) : (
        <>
          <g stroke={f ? c.red : c.cyan} strokeWidth={2}>
            <line x1={AL} y1={AT} x2={AR} y2={AT} />
            <line x1={AL} y1={AB} x2={AR} y2={AB} />
          </g>
          <ADoor x={AL} open={inOpen} alert={f} />
          <ADoor x={AR} open={outOpen} alert={f} />
        </>
      )}
      {tag > 0 && (
        <g opacity={tag}>
          <rect x={AL + 1} y={AT + 1} width={AG.size * 0.4} height={AG.size * 0.1} fill={f ? c.red : c.cyan} />
          <text x={AL + 8} y={AT + 1 + AG.size * 0.1 - 6} fill={c.black} fontSize={9} fontWeight={500} letterSpacing={3} style={{ fontFamily: MONO }}>POLICY</text>
        </g>
      )}
      <rect x={AG.x - A_SEAL / 2} y={A_SEAL_Y - A_SEAL / 2} width={A_SEAL} height={A_SEAL} fill={c.black} stroke={c.red} strokeWidth={2} strokeOpacity={f ? 1 : 0} />
      <image href={LOGOMARK} x={AG.x - 22} y={A_SEAL_Y - 22} width={44} height={44} opacity={seal} />
      {visible && call && (
        <g opacity={fade}>
          <rect
            x={(inGate ? cx : px) - (inGate ? w : A_PKT) / 2}
            y={(inGate ? cy : py) - (inGate ? h : A_PKT) / 2}
            width={inGate ? w : A_PKT}
            height={inGate ? h : A_PKT}
            fill={zoom > 0.05 ? c.black : f ? c.red : c.cyan}
            stroke={ink}
            strokeWidth={zoom > 0.05 ? 1.5 : 0}
          />
          {detail > 0 && (
            <g opacity={detail}>
              <image href={GMAIL} x={AG.x - A_ZW / 2 + 8} y={A_ZY - 13} width={26} height={26} />
              <g fontSize={9.5} style={{ fontFamily: MONO }}>
                <text x={AG.x - A_ZW / 2 + 42} y={call.attach ? A_ZY - 11 : A_ZY - 4} fill={ink}>gmail.send_email</text>
                <text x={AG.x - A_ZW / 2 + 42} y={call.attach ? A_ZY + 3 : A_ZY + 11} fill={ink} textDecoration={f ? "line-through" : undefined}>
                  to: {call.to}
                </text>
                {call.attach && (
                  <text x={AG.x - A_ZW / 2 + 42} y={A_ZY + 17} fill={ink} textDecoration={f ? "line-through" : undefined}>
                    + {call.attach}
                  </text>
                )}
              </g>
            </g>
          )}
          {scanning && <line x1={AG.x - A_ZW / 2 + 2} y1={scanY} x2={AG.x + A_ZW / 2 - 2} y2={scanY} stroke={c.cyan} strokeOpacity={0.7} />}
        </g>
      )}
      {f && (
        <text x={AG.x} y={AB + 26} textAnchor="middle" fill={c.red} fontSize={11} letterSpacing={2} style={{ fontFamily: MONO }}>
          BLOCKED · EXTERNAL DOMAIN + PII
        </text>
      )}
      {ok && (
        <text x={AG.x} y={AB + 26} textAnchor="middle" fill={c.green} fontSize={11} letterSpacing={2} style={{ fontFamily: MONO }}>
          ALLOWED · INTERNAL RECIPIENT
        </text>
      )}
    </svg>
  );
}

/* ---- 03-05 · one continuous world ---------------------------------------- */
/* Chapters 3, 4 and 5 are windows onto ONE scene driven by a single world
   clock `w` (seconds) and one camera, so the chapter cuts are invisible:
     0-5s   the SealGate agent works the rule (status line, scanned reel,
            a stack of the context sources it collects), resolves it into
            policy code, its avatar drops into the gate as the seal and the
            policy card docks as the gate's POLICY tag
     5-10s  the camera pushes into Claude and ChatGPT as the team prompts
     10-17s the camera pulls back and both tool calls run through the gate */

const POLICY_PROMPT = "Never let agents email customer data outside the company.";
const CORE = { x: AG.x, y: A_SEAL_Y };

type Pose = { s: number; x: number; y: number };
const P_NET: Pose = { s: 1.25, x: 480, y: 118 };
const P_WIDE: Pose = { s: 1, x: BOX_W / 2, y: BOX_H / 2 };
const P_CHAT: Pose = { s: 1.3, x: 326, y: 282 };
const P_CLAUDE: Pose = { s: 1.85, x: 176, y: 196 };
const P_GPT: Pose = { s: 1.85, x: 176, y: 376 };
const mix = (a: Pose, b: Pose, t: number): Pose => ({ s: lerp(a.s, b.s, t), x: lerp(a.x, b.x, t), y: lerp(a.y, b.y, t) });

/** A whip pan: slow out, very fast middle, slow in. */
const whip = (t: number) => (t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2);
/** Back-out spring for entrances (overshoots then settles). */
const spring = (t: number) => {
  const k = 1.7;
  const u = t - 1;
  return 1 + (k + 1) * u * u * u + k * u * u;
};

function camera(w: number): Pose {
  if (w < 3.4) return P_NET;
  if (w < 4.6) return mix(P_NET, P_WIDE, ease(seg(w, 3.4, 4.6)));
  if (w < 5.5) return mix(P_WIDE, P_CLAUDE, ease(seg(w, 4.6, 5.5)));
  if (w < 6.55) return P_CLAUDE;
  if (w < 6.95) return mix(P_CLAUDE, P_GPT, whip(seg(w, 6.55, 6.95)));
  if (w < 8.0) return P_GPT;
  if (w < 8.7) return mix(P_GPT, P_CHAT, ease(seg(w, 8.0, 8.7)));
  if (w < 9.4) return P_CHAT;
  return mix(P_CHAT, P_WIDE, ease(seg(w, 9.4, 10.5)));
}

type Rect = { x: number; y: number; w: number; h: number };
const mixRect = (a: Rect, b: Rect, t: number): Rect => ({ x: lerp(a.x, b.x, t), y: lerp(a.y, b.y, t), w: lerp(a.w, b.w, t), h: lerp(a.h, b.h, t) });
const WORK: Rect = { x: 270, y: 66, w: 420, h: 116 };
const CARD_TAG: Rect = { x: AL + 1, y: AT + 1, w: AG.size * 0.4, h: AG.size * 0.1 };
const ORB = { x: WORK.x + 24, y: WORK.y + 22, size: 20 };

/* ---- the agent at work (after the agent-thinking-chat pattern) ----------- */
/* Rebuilt on the film clock so it scrubs: a thinking avatar, a shimmering
   status line, a spinning-reel "scanned" counter and a Sonner-style stack of
   the context sources it pulls in (file reads and MCP tool calls). */

type Source = { kind: "file" | "mcp"; label: string; icon?: string; tag?: string };
const SOURCES: Source[] = [
  { kind: "file", label: "policies/data-handling.md" },
  { kind: "mcp", label: "gmail · list_labels", icon: GMAIL },
  { kind: "mcp", label: 'gdrive · search("customers")', icon: uri(tileSvg(byName("Google Drive"))) },
  { kind: "file", label: "customers.csv", tag: "pii" },
  { kind: "mcp", label: "slack · list_channels", icon: uri(tileSvg(byName("Slack"))) },
  { kind: "mcp", label: "sealgate · list_policies", icon: LOGOMARK },
];
const SOURCE_AT = (i: number) => 1.0 + i * 0.32;
const SCANNED = 214;

function statusLine(w: number) {
  if (w < 1.0) return "Thinking…";
  if (w < 1.9) return "Collecting context…";
  if (w < 2.6) return "Calling connected tools…";
  return "Writing policy…";
}

/** Shimmer without a gradient: a highlight sweeps across the characters. */
function Shimmer({ text, w }: { text: string; w: number }) {
  const sweep = ((w * 0.9) % 1) * (text.length + 8) - 4;
  return (
    <span style={{ fontFamily: MONO, fontSize: 12.5 }}>
      {[...text].map((ch, i) => {
        const d = Math.abs(i - sweep);
        return (
          <span key={i} style={{ color: d < 3 ? c.white : c.grey, opacity: d < 3 ? 1 : 0.75 }}>
            {ch}
          </span>
        );
      })}
    </span>
  );
}

/** Spinning-reel counter: each digit rolls continuously and blurs while fast. */
function Reel({ value, speed }: { value: number; speed: number }) {
  const cell = 18;
  const digits = String(SCANNED).length;
  return (
    <span style={{ display: "inline-flex", fontFamily: MONO, fontSize: 15, fontWeight: 500, color: c.cyan, height: cell, overflow: "hidden" }}>
      {Array.from({ length: digits }, (_, k) => {
        const place = 10 ** (digits - 1 - k);
        const roll = (value / place) % 10;
        return (
          <span key={k} style={{ display: "inline-block", width: 11, textAlign: "center", position: "relative", height: cell }}>
            <span style={{ position: "absolute", left: 0, right: 0, top: 0, transform: `translateY(${-roll * cell}px)`, filter: speed > 0.05 ? `blur(${Math.min(2.5, speed * (place === 1 ? 3 : 1))}px)` : undefined }}>
              {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0].map((n, j) => (
                <span key={j} style={{ display: "block", height: cell, lineHeight: `${cell}px` }}>{n}</span>
              ))}
            </span>
          </span>
        );
      })}
    </span>
  );
}

function SourceRow({ s, count }: { s: Source; count: number }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10, height: 36, padding: "0 12px", border: `1px solid ${c.line}`, background: c.panel }}>
      {s.kind === "file" ? <span style={{ width: 6, height: 6, background: c.cyan }} /> : <img src={s.icon} alt="" width={16} height={16} style={{ borderRadius: 3 }} />}
      <span style={{ fontFamily: MONO, fontSize: 12, color: c.white }}>{s.label}</span>
      {s.tag && <span style={{ fontFamily: MONO, fontSize: 10, color: c.black, background: c.cyan, padding: "1px 6px" }}>{s.tag}</span>}
      <span style={{ marginLeft: "auto", width: 20, height: 20, border: `1px solid ${c.line2}`, borderRadius: 10, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: MONO, fontSize: 10, color: c.grey }}>{count}</span>
    </div>
  );
}

/** The working card: status + reel header over a stack of collected sources. */
function WorkCard({ w }: { w: number }) {
  const show = seg(w, 0.35, 0.65) * (1 - seg(w, 2.85, 3.1));
  if (show <= 0) return null;
  const e = ease(seg(w, 0.9, 2.7));
  const speed = w > 0.9 && w < 2.7 ? 6 * e * (1 - e) : 0;
  return (
    <div style={{ position: "absolute", left: WORK.x, top: WORK.y, width: WORK.w, height: WORK.h, border: `1px solid ${c.cyan}`, background: c.black, opacity: show, zIndex: 1, transform: `translateY(${(1 - seg(w, 0.35, 0.65)) * 10}px)` }}>
      <div style={{ position: "absolute", left: 0, top: 0, width: "40%", height: 3, background: c.cyan }} />
      <div style={{ display: "flex", alignItems: "center", height: 44, padding: "0 14px 0 46px" }}>
        <Shimmer text={statusLine(w)} w={w} />
        <span style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 8 }}>
          <Reel value={SCANNED * e} speed={speed} />
          <Label>scanned</Label>
        </span>
      </div>
      <div style={{ position: "relative", margin: "14px 12px 0", height: 48 }}>
        {SOURCES.map((s, i) => {
          const enter = ease(seg(w, SOURCE_AT(i), SOURCE_AT(i) + 0.2));
          if (enter <= 0) return null;
          // continuous depth: how far newer rows have pushed this one back
          const depth = SOURCES.reduce((d, _, j) => (j > i ? d + ease(seg(w, SOURCE_AT(j), SOURCE_AT(j) + 0.2)) : d), 0);
          if (depth > 2.5) return null;
          const y = (1 - enter) * 14 - depth * 7;
          const sc = 1 - depth * 0.05;
          const op = enter * clamp01(1 - depth * 0.35);
          return (
            <div key={s.label} style={{ position: "absolute", left: 0, right: 0, top: 8, transform: `translateY(${y}px) scale(${sc})`, transformOrigin: "50% 0", zIndex: 10 - Math.round(depth), opacity: op }}>
              <SourceRow s={s} count={i + 1} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

/** The agent's avatar: the SealGate mark, orbited by a dashed ring while it
    works; when the card resolves it flies down to become the gate's seal. */
function AgentOrb({ w }: { w: number }) {
  if (w < 0.35 || w >= 4.05) return null;
  const fly = ease(seg(w, 3.1, 4.0));
  const x = lerp(ORB.x, CORE.x, fly);
  const y = lerp(ORB.y, CORE.y, fly);
  const size = lerp(ORB.size, 44, fly);
  const working = 1 - seg(w, 2.9, 3.2);
  return (
    <div style={{ position: "absolute", left: x - size / 2, top: y - size / 2, width: size, height: size, opacity: seg(w, 0.35, 0.65), zIndex: 2 }}>
      <svg width={size + 16} height={size + 16} style={{ position: "absolute", left: -8, top: -8, transform: `rotate(${w * 140}deg)`, opacity: working }} fill="none">
        <circle cx={(size + 16) / 2} cy={(size + 16) / 2} r={size / 2 + 6} stroke={c.cyan} strokeWidth={1.2} strokeDasharray="3 5" />
      </svg>
      <img src={LOGOMARK} alt="" width={size} height={size} style={{ display: "block", transform: `scale(${1 + 0.06 * Math.sin(w * 9) * working})` }} />
    </div>
  );
}

/** The sent rule, as the user's message above the working card. It is already
    in place at w=0: the policy chapter flew it here. */
const RULE_AT = { x: WORK.x + WORK.w - BUBBLE_W, y: 18 };
function RuleBubble({ w }: { w: number }) {
  const e = 1 - seg(w, 2.9, 3.3);
  if (e <= 0) return null;
  return <Bubble style={{ left: RULE_AT.x, top: RULE_AT.y, opacity: e }} />;
}

/** The compiled policy: appears where the working card was, then docks as the gate tag. */
function PolicyCard({ w }: { w: number }) {
  if (w < 2.85 || w >= 4.4) return null;
  const dock = ease(seg(w, 3.6, 4.4));
  const r = mixRect({ ...WORK, h: 112 }, CARD_TAG, dock);
  const code = seg(w, 2.95, 3.15) * (1 - seg(w, 3.6, 3.85));
  const lines = Math.floor(seg(w, 3.0, 3.45) * 2 + 0.001);
  return (
    <div style={{ position: "absolute", left: r.x, top: r.y, width: r.w, height: r.h, opacity: seg(w, 2.85, 3.05), border: `1px solid ${c.cyan}`, background: dock > 0.6 ? c.cyan : c.panel, overflow: "hidden", zIndex: 3 }}>
      <div style={{ position: "absolute", left: 0, top: 0, width: "40%", height: 18, background: c.cyan, fontFamily: MONO, fontSize: 9, fontWeight: 500, letterSpacing: 3, color: c.black, padding: "4px 8px", opacity: 1 - dock }}>POLICY</div>
      <div style={{ position: "absolute", left: 12, right: 8, top: 30, fontFamily: MONO, fontSize: 11, lineHeight: "20px", opacity: code, whiteSpace: "pre" }}>
        <div style={{ color: c.grey }}>
          <span style={{ color: c.cyan }}>export default policy</span>([
        </div>
        <div style={{ opacity: lines > 0 ? 1 : 0, color: c.grey }}>
          {"  "}<span style={{ color: "#ff4b5c" }}>block</span>(<span style={{ color: c.white }}>"gmail.send_email"</span>).<span style={{ color: c.cyan }}>to</span>(<span style={{ color: c.cyan }}>notIn</span>(<span style={{ color: c.white }}>org.domains</span>)),
        </div>
        <div style={{ opacity: lines > 1 ? 1 : 0, color: c.grey }}>
          {"  "}<span style={{ color: "#f2b545" }}>quarantine</span>({"{ "}<span style={{ color: c.cyan }}>data: </span><span style={{ color: c.white }}>"pii"</span>{" }"}),
        </div>
        <div style={{ color: c.grey }}>])</div>
      </div>
    </div>
  );
}

/* ---- the prompting beat: typed in close-up, sent into the thread ------- */

const WIN = [
  { x: 40, y: 110, w: 252, h: 164 },
  { x: 40, y: 290, w: 252, h: 164 },
];
const CAPSULE = [
  { theme: CLAUDE, text: ASK_CLAUDE, type: [5.35, 6.1], send: 6.15, bg: "#ffffff", edge: "#e5e0d6", ink: "#2d2a26" },
  { theme: CHATGPT, text: ASK_GPT, type: [7.0, 7.7], send: 7.75, bg: "#303030", edge: "#4a4a4a", ink: "#ececec" },
];

/** The composer, blown up: the prompt types itself, then the pill flies up
    into the thread and becomes the user's message. */
function PromptCapsule({ i, w }: { i: number; w: number }) {
  const cfg = CAPSULE[i];
  const win = WIN[i];
  const appear = ease(seg(w, cfg.type[0] - 0.25, cfg.type[0]));
  const fly = ease(seg(w, cfg.send, cfg.send + 0.3));
  if (appear <= 0 || fly >= 1) return null;
  const typed = Math.floor(seg(w, cfg.type[0], cfg.type[1]) * cfg.text.length);
  const ready = typed >= cfg.text.length;
  const from = { x: win.x + win.w / 2, y: win.y + win.h - 26 };
  const to = { x: win.x + win.w - 58, y: win.y + 42 };
  const x = lerp(from.x, to.x, fly);
  const y = lerp(from.y, to.y, fly) - (1 - appear) * 6;
  const sc = lerp(1, 0.55, fly);
  return (
    <div style={{ position: "absolute", left: x - 118, top: y - 17, width: 236, height: 34, transform: `scale(${sc})`, opacity: appear * (1 - fly * 0.9), zIndex: 6 }}>
      <div style={{ position: "absolute", inset: 0, borderRadius: 17, background: cfg.bg, border: `1px solid ${cfg.edge}`, boxShadow: `0 0 0 ${1 + (1 - fly) * 2}px rgba(195,255,253,${0.5 * (1 - fly)}), 0 10px 24px -12px rgba(0,0,0,0.7)`, display: "flex", alignItems: "center", gap: 7, padding: "0 5px 0 10px" }}>
        <span style={{ width: 12, height: 12, flex: "none", background: cfg.theme.accent === "#ffffff" ? cfg.ink : cfg.theme.accent, WebkitMask: `url("${cfg.theme.logo}") center / contain no-repeat`, mask: `url("${cfg.theme.logo}") center / contain no-repeat` }} />
        <span style={{ flex: 1, minWidth: 0, whiteSpace: "nowrap", overflow: "hidden", fontFamily: "system-ui, sans-serif", fontSize: 9.5, color: cfg.ink, direction: "rtl", textAlign: "left" }}>
          <bdi>
            {cfg.text.slice(0, typed)}
            {!ready && <span style={{ display: "inline-block", width: 1.5, height: 11, background: cfg.ink, marginLeft: 1, verticalAlign: -2, opacity: Math.floor(w * 8) % 2 ? 0 : 1 }} />}
          </bdi>
        </span>
        <span style={{ width: 22, height: 22, flex: "none", borderRadius: 11, display: "flex", alignItems: "center", justifyContent: "center", background: ready ? cfg.theme.accent : "transparent", border: ready ? "none" : `1px solid ${cfg.edge}`, transform: `scale(${w > cfg.send - 0.06 && w < cfg.send + 0.08 ? 0.85 : 1})` }}>
          <svg width={10} height={10} viewBox="0 0 24 24" fill="none" stroke={ready ? cfg.theme.accentFg : cfg.ink} strokeWidth={3} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M12 19V5M5 12l7-7 7 7" />
          </svg>
        </span>
      </div>
    </div>
  );
}

/** A cyan flash around a window the moment its tool call fires. */
function Flash({ i, at: t0, w }: { i: number; at: number; w: number }) {
  const u = seg(w, t0, t0 + 0.55);
  if (u <= 0 || u >= 1) return null;
  const win = WIN[i];
  return <div style={{ position: "absolute", left: win.x, top: win.y, width: win.w, height: win.h, border: `2px solid ${c.cyan}`, borderRadius: 8, transform: `scale(${1 + u * 0.06})`, opacity: 1 - u, zIndex: 5 }} />;
}

/** How fast the camera is moving, in screen px per frame-ish, for motion blur. */
function camBlur(w: number) {
  if (w < 6.55 || w > 6.95) return 0; // only the whip pan smears
  const a = camera(w);
  const b = camera(w + 0.01);
  const px = Math.hypot((b.x - a.x) * a.s, (b.y - a.y) * a.s) + Math.abs(b.s - a.s) * 300;
  return Math.min(5, Math.max(0, (px - 2.5) * 0.45));
}

function World({ w }: { w: number }) {
  const cam = camera(w);
  const call1 = { t: seg(w, 11.0, 13.0), src: 0, blocked: false, to: "leadership@acme.com" };
  const call2 = {
    t: w < 15.2 ? lerp(0, ST.scanEnd, seg(w, 13.2, 15.2)) : lerp(ST.scanEnd, 0.8, seg(w, 15.2, 17)),
    src: 1,
    blocked: true,
    to: "me@gmail.com",
    attach: "customers.csv",
  };
  const call: Call | undefined = w < 11 ? undefined : w < 13.1 ? call1 : w >= 13.2 ? call2 : undefined;
  const done = [w > 13, w > 15.2];
  const cStage = (w > 6.4 ? 1 : 0) + (w > 8.5 ? 1 : 0) + (done[0] ? 1 : 0);
  const gStage = (w > 8.0 ? 1 : 0) + (w > 8.8 ? 1 : 0) + (w > 16.3 ? 1 : 0);
  const enter = [seg(w, 4.6, 5.3), seg(w, 4.75, 5.45)];
  const winStyle = (i: number): CSSProperties => {
    const e = enter[i];
    const sp = e > 0 ? spring(e) : 0;
    return { position: "absolute", left: WIN[i].x, top: WIN[i].y, opacity: clamp01(e * 2.5), transform: `translateX(${((1 - sp) * -90).toFixed(1)}px) scale(${(0.92 + 0.08 * sp).toFixed(3)})`, transformOrigin: "0 50%" };
  };
  const blur = camBlur(w);
  const netLabel = seg(w, 0.2, 0.6) * (1 - seg(w, 4.0, 4.5));
  const chatLabel = seg(w, 5.3, 5.7) * (1 - seg(w, 8.0, 8.3));
  const gateHead = seg(w, 10.3, 10.9);
  return (
    <Scene>
      <div style={{ position: "absolute", left: 0, top: 0, width: BOX_W, height: BOX_H, transformOrigin: "0 0", transform: `translate(${(BOX_W / 2 - cam.s * cam.x).toFixed(1)}px, ${(BOX_H / 2 - cam.s * cam.y).toFixed(1)}px) scale(${cam.s.toFixed(3)})`, filter: blur > 0.2 ? `blur(${blur.toFixed(2)}px)` : undefined }}>
        <div style={winStyle(0)}>
          <Window theme={CLAUDE} turns={claudeTurns(cStage)} width={420} scale={0.6} body={170} />
        </div>
        <div style={winStyle(1)}>
          <Window theme={CHATGPT} turns={gptTurns(gStage)} width={420} scale={0.6} body={170} />
        </div>
        <Flash i={0} at={8.5} w={w} />
        <Flash i={1} at={8.8} w={w} />
        <PromptCapsule i={0} w={w} />
        <PromptCapsule i={1} w={w} />
        <Airlock
          call={call}
          done={done}
          draw={w < 3.2 ? 0 : seg(w, 3.2, 4.2)}
          tag={w >= 4.4 ? 1 : 0}
          wiring={seg(w, 10.0, 10.8)}
          seal={seg(w, 3.98, 4.05)}
          lanes={[ease(seg(w, 8.55, 9.5)), ease(seg(w, 8.85, 9.8))]}
        />
        <RuleBubble w={w} />
        <WorkCard w={w} />
        <PolicyCard w={w} />
        <AgentOrb w={w} />
      </div>
      <div style={{ position: "absolute", left: 40, top: 24, opacity: netLabel }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <Wordmark h={22} />
        </div>
      </div>
      <div style={{ position: "absolute", left: 30, top: 170, width: 165, opacity: chatLabel, transform: `translateX(${(1 - chatLabel) * -12}px)` }}>
        <Label color={c.cyan}>Intent-based prompting</Label>
        <div style={{ fontFamily: SANS, fontWeight: 500, fontSize: 22, lineHeight: 1.2, color: c.white, marginTop: 10, letterSpacing: -0.4 }}>Your team asks in Claude or ChatGPT.</div>
      </div>
      <div style={{ position: "absolute", left: 40, top: 26, opacity: gateHead }}>
        <div style={{ fontFamily: SANS, fontWeight: 500, fontSize: 28, color: c.white, letterSpacing: -0.6 }}>Intent-based access control</div>
      </div>
    </Scene>
  );
}

const SceneNetwork = ({ p }: { p: number }) => <World w={p * 5} />;
const SceneAsk = ({ p }: { p: number }) => <World w={5 + p * 5} />;
const SceneGate = ({ p }: { p: number }) => <World w={10 + p * 7} />;

/* ---- 06 · Integrations ---------------------------------------------------- */

/* A tilted two-ring orbit around SealGate: agents on the outer ring, your data
   on the inner one, counter-rotating. Icons fly in from off-frame onto their
   ring, depth comes from the ring tilt (front = larger + brighter), cyan pulses
   run agent -> SealGate -> data along the spokes, and a spotlight walks through
   a few marks, lifting each one with its name. */
const ORBIT = { x: BOX_W / 2, y: 288 };
const RINGS = {
  agent: { rx: 372, ry: 142, spin: 0.9 },
  data: { rx: 214, ry: 80, spin: -1.3, phase: -Math.PI / 2 + 0.3 },
};
const SPOTLIGHT = ["Claude Desktop", "ChatGPT", "Gmail", "Codex CLI", "Cursor", "Grokbot", "Muse"];
/** Agents held on the front arc of the ring for the whole spin, in order of
    increasing angle (right to left along the bottom of the ellipse). */
const FRONT = ["Cursor", "Codex CLI", "Claude Desktop", "ChatGPT", "Grokbot", "Muse"];
const FRONT_STEP = 0.28;

/** Agent-ring angle at p=0: FRONT spaced on an arc that is centred on the front
    (angle pi/2) at mid-scene, the rest spread evenly over the back. */
function agentAngle(name: string, rest: string[]) {
  const mid = Math.PI / 2 - RINGS.agent.spin / 2;
  const f = FRONT.indexOf(name);
  if (f >= 0) return mid + (f - (FRONT.length - 1) / 2) * FRONT_STEP;
  const half = ((FRONT.length - 1) / 2) * FRONT_STEP + FRONT_STEP;
  const span = Math.PI * 2 - half * 2;
  return mid + half + ((rest.indexOf(name) + 0.5) / rest.length) * span;
}

function SceneIntegrations({ p }: { p: number }) {
  const agents = INTEGRATIONS.filter((i) => i.group === "agent");
  const data = INTEGRATIONS.filter((i) => i.group === "data");
  const spotIdx = p > 0.36 ? Math.floor((p - 0.36) / 0.09) : -1;
  const spot = spotIdx >= 0 && spotIdx < SPOTLIGHT.length ? SPOTLIGHT[spotIdx] : "";
  const spotE = spot ? Math.sin(clamp01(((p - 0.36) % 0.09) / 0.09) * Math.PI) : 0;

  const rest = agents.filter((it) => !FRONT.includes(it.name)).map((it) => it.name);
  const items = [
    ...agents.map((it, i) => ({ it, ring: RINGS.agent, a0: agentAngle(it.name, rest), k: i, dir: -1 })),
    ...data.map((it, i) => ({ it, ring: RINGS.data, a0: RINGS.data.phase + (i / data.length) * Math.PI * 2, k: agents.length + i, dir: 1 })),
  ].map(({ it, ring, a0, k, dir }) => {
    const a = a0 + p * ring.spin;
    const e = at(p, 0.02 + k * 0.012, 0.18);
    const depth = (Math.sin(a) + 1) / 2; // 0 back .. 1 front
    const far = 2.3 - e * 1.3; // fly in from outside the ring
    const x = ORBIT.x + Math.cos(a) * ring.rx * far;
    const y = ORBIT.y + Math.sin(a) * ring.ry * far;
    const lift = it.name === spot ? spotE : 0;
    return { it, x, y, e, depth, lift, dir, k, size: 30 + depth * 14 + lift * 16 };
  });
  const flow = seg(p, 0.3, 0.42);

  return (
    <Scene>
      <div style={{ position: "absolute", left: 60, top: 28, right: 60, display: "flex", alignItems: "flex-end", zIndex: 5 }}>
        <Heading p={p} title="Any agent, Any integration" />
      </div>
      <svg width={BOX_W} height={BOX_H} style={{ position: "absolute", left: 0, top: 0 }} fill="none">
        {(["agent", "data"] as const).map((r) => (
          <ellipse key={r} cx={ORBIT.x} cy={ORBIT.y} rx={RINGS[r].rx} ry={RINGS[r].ry} stroke={c.line} strokeDasharray="2 6" opacity={seg(p, 0.05, 0.3)} />
        ))}
        {items.map((d) => {
          // pulses: agents stream in to SealGate, SealGate streams out to data
          const u = (p * 2.4 + d.k * 0.29) % 1;
          const from = d.dir < 0 ? { x: d.x, y: d.y } : ORBIT;
          const to = d.dir < 0 ? ORBIT : { x: d.x, y: d.y };
          return (
            <g key={d.it.name} opacity={d.e}>
              <line x1={ORBIT.x} y1={ORBIT.y} x2={d.x} y2={d.y} stroke={c.cyan} strokeOpacity={0.08 + d.depth * 0.12 + d.lift * 0.5} strokeWidth={1} />
              {flow > 0 && <rect x={lerp(from.x, to.x, u) - 2} y={lerp(from.y, to.y, u) - 2} width={4} height={4} fill={c.cyan} opacity={flow * (0.35 + d.depth * 0.65) * Math.sin(u * Math.PI)} />}
            </g>
          );
        })}
      </svg>
      {/* SealGate at the hub */}
      <div style={{ position: "absolute", left: ORBIT.x - 36, top: ORBIT.y - 36, width: 72, height: 72, display: "flex", alignItems: "center", justifyContent: "center", zIndex: 2, opacity: at(p, 0, 0.15) }}>
        <div style={{ position: "absolute", inset: 0, border: `1.5px solid ${c.cyan}`, transform: `scale(${1 + ((p * 3) % 1) * 0.8})`, opacity: flow * (1 - ((p * 3) % 1)) }} />
        <img src={LOGOMARK} alt="SealGate" width={56} height={56} style={{ display: "block" }} />
      </div>
      {[...items]
        .sort((a, b) => a.depth + a.lift - (b.depth + b.lift))
        .map((d) => (
          <div
            key={d.it.name}
            style={{
              position: "absolute",
              left: d.x - d.size / 2,
              top: d.y - d.size / 2,
              zIndex: d.depth > 0.5 || d.lift > 0 ? 3 : 1,
              opacity: d.e * (0.45 + d.depth * 0.55 + d.lift * 0.45),
              filter: d.lift > 0.2 ? undefined : `brightness(${0.7 + d.depth * 0.3})`,
            }}
          >
            <Tile it={d.it} size={d.size} />
            {d.lift > 0.05 && (
              <div style={{ position: "absolute", left: "50%", top: d.size + 6, transform: "translateX(-50%)", whiteSpace: "nowrap", fontFamily: MONO, fontSize: 11, color: c.cyan, opacity: d.lift }}>
                {d.it.name}
              </div>
            )}
          </div>
        ))}
    </Scene>
  );
}

/** SealGate's Chrome extension: a Chrome window strip with the SealGate icon
    pinned in the toolbar and its popover open over a ChatGPT tab. */
function ChromeExtension({ popover }: { popover: number }) {
  const ui = { tabs: "#1b1c1f", bar: "#35363a", omni: "#202124", text: "#e8eaed", sub: "#9aa0a6", edge: "#3c4043" };
  return (
    <div style={{ width: 186 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 10 }}>
        <img src={CHROME} alt="Chrome" width={20} height={20} />
        <Label>Chrome extension</Label>
      </div>
      <div style={{ border: `1px solid ${ui.edge}`, borderRadius: 10, overflow: "hidden", background: ui.omni, boxShadow: "0 18px 40px -18px rgba(0,0,0,0.8)" }}>
        <div style={{ height: 28, background: ui.tabs, display: "flex", alignItems: "flex-end", padding: "0 8px" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 6, background: ui.bar, borderRadius: "7px 7px 0 0", padding: "5px 10px", fontFamily: "system-ui, sans-serif", fontSize: 10.5, color: ui.text }}>
            <img src={CHATGPT_TILE} alt="" width={12} height={12} style={{ borderRadius: 3 }} />
            ChatGPT
          </div>
        </div>
        <div style={{ height: 36, background: ui.bar, display: "flex", alignItems: "center", gap: 8, padding: "0 8px" }}>
          <div style={{ flex: 1, height: 24, borderRadius: 12, background: ui.omni, display: "flex", alignItems: "center", padding: "0 10px", fontFamily: "system-ui, sans-serif", fontSize: 10.5, color: ui.sub }}>chatgpt.com</div>
          <div style={{ width: 26, height: 26, borderRadius: 13, display: "flex", alignItems: "center", justifyContent: "center", background: `rgba(195,255,253,${0.12 + popover * 0.1})`, boxShadow: `0 0 0 1.5px rgba(195,255,253,${popover})` }}>
            <img src={LOGOMARK} alt="SealGate" width={16} height={16} />
          </div>
        </div>
        <div style={{ height: popover * 66, overflow: "hidden" }}>
          <div style={{ padding: "12px 12px", display: "flex", alignItems: "center", gap: 10, borderTop: `1px solid ${ui.edge}` }}>
            <img src={LOGOMARK} alt="" width={24} height={24} />
            <div>
              <Wordmark h={11} style={{ display: "block" }} />
              <div style={{ fontFamily: MONO, fontSize: 10, color: c.cyan, marginTop: 6 }}>protecting · 2 rules</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---- 07 · Any device ------------------------------------------------------ */

function SceneDevices({ p }: { p: number }) {
  const phone = at(p, 0.05, 0.18);
  const mac = at(p, 0.15, 0.18);
  const phoneTurns = [
    { role: "user" as const, text: ASK_GPT },
    ...(p > 0.45
      ? [{ role: "assistant" as const, text: "SealGate blocked this. Sending customer data outside the company isn't allowed by your organisation's policy." }]
      : [{ role: "assistant" as const, text: "", typing: true }]),
  ];
  const macTurns = [
    { role: "user" as const, text: ASK_CLAUDE },
    ...(p > 0.6
      ? [{ role: "assistant" as const, text: "Sent to **leadership@acme.com**. SealGate checked the email against company policy and logged the action to your account." }]
      : [{ role: "assistant" as const, text: "", typing: true }]),
  ];
  return (
    <Scene>
      <div style={{ position: "absolute", left: 0, right: 0, top: 28 }}>
        <Heading p={p} label="Secure AI on any device" title="Secure agents on any device, anywhere." center />
      </div>
      <Rise e={phone} y={24} style={{ position: "absolute", left: 36, top: 102 }}>
        <IPhoneMock width={166} titanium="black">
          <ChatGPTScreen scheme="dark" conversation={phoneTurns} />
        </IPhoneMock>
      </Rise>
      <Rise e={mac} y={24} style={{ position: "absolute", left: 218, top: 150 }}>
        <MacBookMock width={440} chassis="spaceblack">
          <ClaudeScreen scheme="dark" conversation={macTurns} />
        </MacBookMock>
      </Rise>
      <Rise e={at(p, 0.3, 0.18)} y={24} style={{ position: "absolute", left: 670, top: 186, zIndex: 2 }}>
        <ChromeExtension popover={at(p, 0.48, 0.14)} />
      </Rise>
    </Scene>
  );
}

/* ---- 08 · Start free ------------------------------------------------------ */

function SceneEnd({ p }: { p: number }) {
  return (
    <Scene>
      <div style={{ position: "absolute", left: 0, right: 0, top: 104, display: "flex", flexDirection: "column", alignItems: "center" }}>
        <Rise e={at(p, 0, 0.2)}>
          <img src={WORDMARK} alt="SealGate" style={{ height: 52, display: "block" }} />
        </Rise>
        <Rise e={at(p, 0.15, 0.2)}>
          <div style={{ fontFamily: SANS, fontSize: 32, fontWeight: 500, color: c.white, letterSpacing: -0.8, marginTop: 40 }}>
            Secure your agents without slowing them down.
          </div>
        </Rise>
        <Rise e={at(p, 0.3, 0.2)} style={{ display: "flex", justifyContent: "center", gap: 12, marginTop: 34 }}>
          <div style={{ background: c.cyan, color: c.black, fontFamily: SANS, fontSize: 15, fontWeight: 500, padding: "12px 22px", borderRadius: 2 }}>Start free</div>
          <div style={{ border: `1px solid ${c.line2}`, color: c.white, fontFamily: SANS, fontWeight: 500, fontSize: 15, padding: "12px 22px", borderRadius: 2 }}>Book a demo</div>
        </Rise>
        <Rise e={at(p, 0.42, 0.2)}>
          <div style={{ marginTop: 26 }}>
            <Label>sealgate.ai</Label>
          </div>
        </Rise>
      </div>
    </Scene>
  );
}

/* ---- the film engine ------------------------------------------------------ */

export interface Chapter {
  id: string;
  label: ReactNode;
  duration: number;
  Scene: (props: { p: number }) => ReactNode;
}

export const SEALGATE_CHAPTERS: Chapter[] = [
  { id: "hook", label: <Wordmark h={11} />, duration: 3, Scene: SceneHook },
  { id: "policy", label: "Write a policy", duration: 5, Scene: ScenePolicy },
  { id: "agent", label: "Agent at work", duration: 5, Scene: SceneNetwork },
  { id: "intent", label: "Ask in any AI", duration: 5, Scene: SceneAsk },
  { id: "airlock", label: "Airlock", duration: 7, Scene: SceneGate },
  { id: "integrations", label: "Integrations", duration: 5, Scene: SceneIntegrations },
  { id: "devices", label: "Any device", duration: 5, Scene: SceneDevices },
  { id: "end", label: "Start", duration: 3, Scene: SceneEnd },
]; // 38s

const FADE = 0.35; // seconds of true cross-fade between chapters

export default function SealGateFilm({ width = STAGE_W, chapters = SEALGATE_CHAPTERS, autoPlay = true, loop = true }: { width?: number; chapters?: Chapter[]; autoPlay?: boolean; loop?: boolean }) {
  const total = chapters.reduce((s, ch) => s + ch.duration, 0);
  const scale = width / CANVAS_W;
  const [time, setTime] = useState(0);
  const [playing, setPlaying] = useState(autoPlay);
  const last = useRef<number>();
  const trackRef = useRef<HTMLDivElement>(null);
  const dragging = useRef(false);

  useEffect(() => {
    if (!playing) return;
    let raf = 0;
    const tick = (now: number) => {
      if (last.current != null) {
        const dt = (now - last.current) / 1000;
        setTime((prev) => {
          const next = prev + dt;
          if (next < total) return next;
          if (loop) return next % total;
          setPlaying(false);
          return total;
        });
      }
      last.current = now;
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => {
      cancelAnimationFrame(raf);
      last.current = undefined;
    };
  }, [playing, total, loop]);

  const starts: number[] = [];
  chapters.reduce((acc, ch) => (starts.push(acc), acc + ch.duration), 0);
  let active = chapters.length - 1;
  for (let i = 0; i < chapters.length; i++) if (time < starts[i] + chapters[i].duration) { active = i; break; }
  const local = time - starts[active];
  const progress = clamp01(local / chapters[active].duration);
  const prev = active > 0 && local < FADE ? active - 1 : -1;
  const fadeIn = prev >= 0 ? local / FADE : 1;
  const playhead = clamp01(time / total);

  const seek = useCallback((clientX: number) => {
    const el = trackRef.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    setTime(clamp01((clientX - r.left) / r.width) * total * 0.9999);
  }, [total]);

  const ActiveScene = chapters[active].Scene;
  const PrevScene = prev >= 0 ? chapters[prev].Scene : null;

  return (
    <div style={{ width: CANVAS_W * scale, height: CANVAS_H * scale, fontFamily: SANS }}>
      <style>{FONTS}</style>
      <div style={{ width: CANVAS_W, height: CANVAS_H, transform: `scale(${scale})`, transformOrigin: "top left", position: "relative" }}>
        <div style={{ position: "absolute", left: 0, top: 0, width: STAGE_W, height: STAGE_H, background: c.black, border: `1px solid ${c.line}`, overflow: "hidden" }}>
          <div style={{ position: "absolute", inset: INSET - 1 }}>
            {PrevScene && (
              <div style={{ position: "absolute", inset: 0 }}>
                <PrevScene p={1} />
              </div>
            )}
            <div style={{ position: "absolute", inset: 0, opacity: fadeIn }}>
              <ActiveScene p={progress} />
            </div>
          </div>
          <button
            type="button"
            aria-label={playing ? "Pause" : "Play"}
            onClick={() => {
              if (!loop && time >= total) setTime(0);
              setPlaying((v) => !v);
            }}
            style={{ position: "absolute", left: INSET + 12, bottom: INSET + 12, width: 34, height: 34, border: `1px solid ${c.line2}`, background: c.black, color: c.cyan, cursor: "pointer", fontSize: 12, borderRadius: 2 }}
          >
            {playing ? "❚❚" : "▶"}
          </button>
        </div>

        <div style={{ position: "absolute", left: 0, top: STAGE_H + GAP, width: STAGE_W, height: TRACK_H }}>
          <div style={{ position: "relative", height: 26 }}>
            <div style={{ position: "absolute", top: 12, left: 0, right: 0, height: 1, background: c.line2 }} />
            <div style={{ position: "absolute", top: 11, left: 0, width: `${playhead * 100}%`, height: 3, background: c.cyan }} />
            <div style={{ position: "absolute", top: 0, left: `${playhead * 100}%`, transform: "translateX(-50%)", display: "flex", flexDirection: "column", alignItems: "center" }}>
              <div style={{ fontFamily: MONO, fontSize: 11, color: c.black, background: c.cyan, padding: "3px 7px", lineHeight: 1 }}>{fmt(time)}</div>
              <div style={{ width: 2, height: 10, background: c.cyan }} />
            </div>
          </div>
          <div
            ref={trackRef}
            role="slider"
            tabIndex={0}
            aria-label="Film position"
            aria-valuemin={0}
            aria-valuemax={total}
            aria-valuenow={Math.round(time)}
            onKeyDown={(e) => {
              if (e.key === "ArrowRight") setTime((t) => Math.min(total * 0.9999, t + 1));
              if (e.key === "ArrowLeft") setTime((t) => Math.max(0, t - 1));
              if (e.key === " ") { e.preventDefault(); setPlaying((v) => !v); }
            }}
            onPointerDown={(e) => { dragging.current = true; (e.target as Element).setPointerCapture?.(e.pointerId); seek(e.clientX); }}
            onPointerMove={(e) => dragging.current && seek(e.clientX)}
            onPointerUp={() => { dragging.current = false; }}
            style={{ display: "flex", gap: 6, marginTop: 6, height: TRACK_H - 32, cursor: "pointer", touchAction: "none", outline: "none" }}
          >
            {chapters.map((ch, i) => (
              <div
                key={ch.id}
                style={{
                  flex: ch.duration,
                  position: "relative",
                  border: `1px solid ${i === active ? c.cyan : c.line}`,
                  background: c.black,
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                {i === active && <div style={{ position: "absolute", left: -1, top: -1, width: "40%", height: 6, background: c.cyan }} />}
                <span style={{ fontFamily: MONO, fontSize: 12, letterSpacing: 0.5, color: i === active ? c.white : c.grey }}>{ch.label}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

import type { CSSProperties, ReactNode } from "react";

/**
 * ChatShell — a themeable chat-client mock, ported from the daysurface.com
 * landing page hero (its four-client chat toggle).
 *
 * The idea worth copying: ONE chat component that reskins to look like Claude,
 * ChatGPT, Goose, or VS Code. The entire client identity — canvas, chrome,
 * bubble colour, accent, avatar mark, serif-vs-sans, name, composer
 * placeholder — is carried in a small `ChatTheme` token set. On the real site
 * those tokens are CSS custom properties keyed off `<html data-client>`, so
 * selecting a client anywhere on the page re-skins every chat frame in CSS at
 * first paint, with no JS in the swap.
 *
 * This snippet keeps that shape: the theme is spread onto the shell root as
 * `--chat-*` custom properties, and every nested element reads them via
 * `var(--chat-*)`. Swap the theme object and the whole shell changes identity.
 *
 * A conversation is a list of turns (`user` bubble · `reason` summary line ·
 * `assistant` line · `tool` call chip), so the same shell renders any script.
 * The assistant line uses the theme's `sayFont` (serif for Claude, sans
 * elsewhere) — the small tell that makes each client read as itself.
 *
 * Deps: react + tailwindcss only. Each client's real brand SVG is supplied as a
 * URL (theme.logo) and painted via CSS `mask`, so it tints to the accent and
 * two instances never collide on the ids inside a multi-path logo (VS Code).
 */

/* ---- theme model ----------------------------------------------------------- */

/**
 * How a client draws a completed tool call. Each real client has its own idiom,
 * so this is part of the theme, not a shared chip:
 *   - timeline (Claude) muted activity row — the client mark (or the tool's own
 *                    app icon) + a sans muted label ("Verifying available
 *                    tools and resources", "Gmail status"), no border
 *   - task (ChatGPT) borderless activity title ("Curating Inbox…") + spinner icon,
 *                    sans muted — the human-readable task, not the raw tool id
 *   - pill           bordered mono pill, accent glyph, trailing ✓
 *   - bare           borderless muted "Used <name>" line, no status mark
 *   - card (Goose)   bordered card: filled-accent check disc · name · chevron
 *   - row  (VS Code) bordered row, "Ran <name>" (name in a link colour) · chevron
 */
export interface ToolCallStyle {
  variant: "timeline" | "task" | "pill" | "bare" | "card" | "row";
  /** Verb prefix before the tool name, e.g. "Used" / "Ran". */
  verb?: string;
  /** Trailing status mark: an inline ✓ (Claude) or a filled disc (Goose). */
  check?: "inline" | "disc";
  /** Trailing disclosure chevron (Goose, VS Code). */
  chevron?: boolean;
  /** Override the tool-name colour — VS Code's link blue, distinct from accent. */
  nameColor?: string;
}

export interface ChatTheme {
  /** Client id, also the React key when mapping presets. */
  id: string;
  /** Display name in the header pill. */
  name: string;
  /** Page/message canvas. */
  canvas: string;
  /** Header + composer chrome surface. */
  chrome: string;
  /** Hairline borders. */
  border: string;
  /** Primary text. */
  text: string;
  /** Muted text (placeholder, secondary). */
  muted: string;
  /** Brand accent — avatar tint, send button, tool-chip icon. */
  accent: string;
  /** Foreground drawn ON the accent (send-button arrow). */
  accentFg: string;
  /** User bubble fill. */
  bubble: string;
  /** User bubble text (defaults to `text`). */
  bubbleText?: string;
  /** Assistant copy font — a serif here is the Claude tell. */
  sayFont: string;
  /** Composer placeholder line. */
  placeholder: string;
  /**
   * URL of the client's brand SVG (e.g. the real Claude / OpenAI / Goose /
   * VS Code mark). Rendered via CSS `mask`, so it's tinted to a single colour
   * (the accent) and never collides on ids the way inline multi-path logos do.
   */
  logo: string;
  /** Whether assistant turns show the avatar mark. ChatGPT/Goose render none. */
  assistantAvatar: boolean;
  /** How this client renders a tool call — each has its own idiom. */
  toolCall: ToolCallStyle;
  /**
   * Phrasing this client puts before a reasoning duration, e.g. ChatGPT's
   * "Worked for" (→ "Worked for 14s") or Claude's "Thought for". Absent means
   * this client shows no reasoning summary, and `reason` turns are dropped for
   * it — the same one-conversation-many-idioms trick `label` uses on tool calls.
   */
  reasonVerb?: string;
}

/**
 * The four presets reproduced from the DaySurface hero. Their `logo` paths are
 * root-relative to THIS site's `/icons` library, so copied verbatim into another
 * app the masked marks resolve against that app's root and render blank. When
 * reusing these presets elsewhere, point `logo` at your own asset URLs (the demo
 * prefixes `import.meta.env.BASE_URL` to resolve them under any base path).
 */
export const chatThemes: Record<string, ChatTheme> = {
  claude: {
    id: "claude",
    name: "Claude",
    canvas: "#f5f1e8",
    chrome: "#faf8f2",
    border: "#e5e0d6",
    text: "#2d2a26",
    muted: "#9a9286",
    accent: "#c96442",
    accentFg: "#ffffff",
    bubble: "#e7e1d4",
    sayFont: "Georgia, 'Times New Roman', serif",
    placeholder: "Reply to Claude…",
    logo: "/icons/agents/claude.svg",
    assistantAvatar: true,
    toolCall: { variant: "timeline" },
  },
  chatgpt: {
    id: "chatgpt",
    name: "ChatGPT",
    canvas: "#212121",
    chrome: "#303030",
    border: "#3a3a3a",
    text: "#ececec",
    muted: "#b4b4b4",
    accent: "#ffffff", // current ChatGPT mark is near-white, not the legacy teal
    accentFg: "#0d0d0d",
    bubble: "#2f4a7a", // current ChatGPT user bubble is blue
    bubbleText: "#ffffff",
    sayFont: "system-ui, sans-serif",
    placeholder: "Ask ChatGPT",
    logo: "/icons/agents/chatgpt.svg",
    assistantAvatar: false, // ChatGPT replies are plain full-width text, no avatar
    toolCall: { variant: "task", chevron: true },
    reasonVerb: "Worked for", // collapsed "Worked for 14s ⌄" reasoning summary
  },
  goose: {
    id: "goose",
    name: "goose",
    canvas: "#22252a",
    chrome: "#3f434b",
    border: "#474e57",
    text: "#e3e6ea",
    muted: "#878787",
    accent: "#13bbaf",
    accentFg: "#10221f",
    bubble: "#ffffff",
    bubbleText: "#22252a",
    sayFont: "system-ui, sans-serif",
    placeholder: "Ask goose anything…",
    logo: "/icons/agents/goose.svg",
    assistantAvatar: false, // Goose replies are plain text + timestamp, no avatar
    toolCall: { variant: "card", check: "disc", chevron: true },
  },
  vscode: {
    id: "vscode",
    name: "VS Code",
    canvas: "#1f1f1f",
    chrome: "#181818",
    border: "#3c3c3c",
    text: "#cccccc",
    muted: "#858585",
    accent: "#0078d4",
    accentFg: "#ffffff",
    bubble: "#2b2b2b",
    sayFont: "system-ui, sans-serif",
    placeholder: "Ask Copilot",
    logo: "/icons/agents/vscode.svg",
    assistantAvatar: true,
    toolCall: { variant: "row", verb: "Ran", chevron: true, nameColor: "#4daafc" },
  },
};

/* ---- conversation model ---------------------------------------------------- */

export type Turn =
  | { role: "user"; text: string }
  | { role: "assistant"; text: string }
  // A client's collapsed reasoning summary ("Worked for 14s"). `seconds` is the
  // duration; the verb ("Worked for") is the client's, from `theme.reasonVerb`,
  // so one turn reads natively per client (and vanishes where there's no verb).
  | { role: "reason"; seconds: number }
  // `name` is the raw tool id (shown by Goose/VS Code); `label` is the human
  // activity title Claude/ChatGPT show instead ("Curating Inbox…"). `icon` is an
  // optional full-colour app-icon URL the Claude timeline uses in place of the
  // client mark (e.g. a Gmail mark for a Gmail tool).
  | { role: "tool"; name: string; label?: string; icon?: string; ok?: boolean };

type ToolTurn = Extract<Turn, { role: "tool" }>;

export interface ChatShellProps {
  theme: ChatTheme;
  conversation: Turn[];
  /** Fixed body height so a client swap never reflows the surrounding layout. */
  bodyHeight?: number;
  className?: string;
}

/* ---- marks ----------------------------------------------------------------- */

/**
 * The client's real brand mark — the SVG at `logo`, painted through a CSS mask
 * so it renders as a crisp single-colour silhouette in `color` (default: the
 * accent). Masking (vs. an <img>) lets currentColor logos show on dark canvases
 * and avoids id clashes between two instances of a multi-path logo.
 */
function Mark({ logo, size = 20, color = "var(--chat-accent)" }: { logo: string; size?: number; color?: string }) {
  return (
    <span
      aria-hidden="true"
      className="inline-block shrink-0"
      style={{
        width: size,
        height: size,
        background: color,
        WebkitMask: `url("${logo}") center / contain no-repeat`,
        mask: `url("${logo}") center / contain no-repeat`,
      }}
    />
  );
}

/* ---- tool calls ------------------------------------------------------------ */

/** The "run / return" glyph every client puts before a tool name. */
const RunGlyph = ({ color }: { color: string }) => (
  <svg
    className="size-3 shrink-0"
    viewBox="0 0 24 24"
    fill="none"
    stroke={color}
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <path d="M7 8l4 4-4 4m6 0h6" />
  </svg>
);

/** Trailing disclosure chevron (Goose / VS Code). */
const DiscloseChevron = () => (
  <svg
    className="size-3.5 rotate-90 shrink-0"
    viewBox="0 0 24 24"
    fill="none"
    stroke="var(--chat-muted)"
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <path d="M9 6l6 6-6 6" />
  </svg>
);

/** Down caret (collapse/expand affordance) — header model pill, ChatGPT task chip and reasoning line. Inherits colour via currentColor. */
const CaretDown = ({ className = "size-3.5 shrink-0" }: { className?: string }) => (
  <svg
    className={className}
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    strokeWidth={2}
    strokeLinecap="round"
    strokeLinejoin="round"
    aria-hidden="true"
  >
    <path d="M6 9l6 6 6-6" />
  </svg>
);

/**
 * A completed tool call, drawn in the current client's idiom (theme.toolCall).
 * This is the part that must NOT be uniform — each client renders it differently.
 */
function ToolCall({ turn, style }: { turn: ToolTurn; style: ToolCallStyle }) {
  const label = style.verb ? `${style.verb} ${turn.name}` : turn.name;

  // The Claude "timeline" variant is drawn as connected nodes by the shell
  // (TimelineNode / Row), not here — it needs cross-row rail state.

  if (style.variant === "task") {
    // ChatGPT: borderless activity title ("Curating Inbox…" / "Called tool") in
    // sans muted, an activity glyph before it and a disclosure chevron after.
    return (
      <div className="inline-flex items-center gap-2 text-sm" style={{ color: "var(--chat-muted)" }}>
        {/* ChatGPT's tool-invocation "plug" glyph */}
        <svg
          className="size-4 shrink-0"
          viewBox="32 40 96 100"
          fill="none"
          stroke="currentColor"
          strokeWidth={8}
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M 98 106 C 109.32 104.74, 120.65 103.48, 125 97 C 130.16 89.32, 125.52 74.29, 118 64 C 110.51 53.74, 100.17 48.19, 89 47 C 77.64 45.79, 65.42 49.10, 56 56 C 46.84 62.72, 40.33 72.83, 38 84 C 35.65 95.25, 37.54 107.56, 44 117 C 50.73 126.84, 62.43 133.56, 74 135 C 85.42 136.42, 96.71 132.71, 108 129" />
          <path d="M 65 92 C 64.40 94.05, 63.79 96.10, 64 98 C 64.39 101.57, 67.62 104.63, 71 107 C 74.19 109.24, 77.52 110.87, 81 111 C 83.98 111.11, 87.08 110.13, 90 109 C 92.41 108.07, 94.71 107.03, 97 106" />
          <path d="M 98 105 C 99.20 102.06, 100.41 99.12, 101 96 C 101.50 93.37, 101.56 90.60, 101 88 C 100.37 85.09, 98.96 82.39, 97 80 C 95.11 77.70, 92.70 75.70, 90 75 C 87.80 74.43, 85.40 74.71, 83 75" />
          <path d="M 65 92 L 83 75" />
          <path d="M 65 92 L 60 85" />
          <path d="M 83 75 L 76 69" />
        </svg>
        <span className="min-w-0 truncate">{turn.label ?? "Called tool"}</span>
        {style.chevron && <CaretDown />}
      </div>
    );
  }

  if (style.variant === "bare") {
    // ChatGPT: borderless muted line, "Used <name>", no status mark.
    return (
      <div
        className="inline-flex items-center gap-1.5 font-mono text-[11px]"
        style={{ color: "var(--chat-muted)" }}
      >
        <RunGlyph color="currentColor" />
        {label}
      </div>
    );
  }

  if (style.variant === "card") {
    // Goose: bordered card — filled-accent check disc · name · chevron.
    return (
      <div
        className="rounded-lg border"
        style={{ borderColor: "var(--chat-border)", background: "var(--chat-canvas)" }}
      >
        <div className="flex items-center gap-2 px-3 py-2">
          {/* Success disc — suppressed on a failed call (turn.ok === false) so a
              failure never reads as done, matching the pill variant's trailing ✓. */}
          {turn.ok !== false && style.check === "disc" && (
            <span
              className="grid size-4 shrink-0 place-items-center rounded-full"
              style={{ background: "var(--chat-accent)", color: "var(--chat-accent-fg)" }}
            >
              <svg
                className="size-2.5"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth={3.5}
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg>
            </span>
          )}
          <span className="min-w-0 flex-1 truncate font-mono text-xs" style={{ color: "var(--chat-text)" }}>
            {turn.name}
          </span>
          {style.chevron && <DiscloseChevron />}
        </div>
      </div>
    );
  }

  if (style.variant === "row") {
    // VS Code: bordered row, "Ran <name>" (name in a link colour) · chevron.
    return (
      <div
        className="flex items-center gap-1.5 rounded border px-2 py-1 text-[11px]"
        style={{ borderColor: "var(--chat-border)", background: "var(--chat-canvas)", color: "var(--chat-muted)" }}
      >
        <RunGlyph color="var(--chat-muted)" />
        <span className="min-w-0 flex-1 truncate font-mono">
          {style.verb ? `${style.verb} ` : ""}
          <span style={{ color: style.nameColor ?? "var(--chat-accent)" }}>{turn.name}</span>
        </span>
        {style.chevron && <DiscloseChevron />}
      </div>
    );
  }

  // Claude (pill): bordered mono pill, accent glyph, trailing ✓.
  return (
    <div
      className="inline-flex items-center gap-1.5 rounded-lg border px-2 py-1 font-mono text-[11px]"
      style={{ background: "var(--chat-chrome)", borderColor: "var(--chat-border)", color: "var(--chat-muted)" }}
    >
      <RunGlyph color="var(--chat-accent)" />
      {turn.name}
      {turn.ok !== false && style.check === "inline" && (
        <span style={{ color: "var(--chat-accent)" }}>✓</span>
      )}
    </div>
  );
}

/* ---- turns ----------------------------------------------------------------- */

/** A rail colour derived from the muted token, kept faint like a thread line. */
const RAIL = "color-mix(in srgb, var(--chat-muted) 55%, transparent)";

/**
 * One node on Claude's activity timeline: a left icon on a vertical rail (drawn
 * above/below as `railTop`/`railBottom` say, so consecutive nodes read as one
 * connected thread) plus the row's content. The icon sits on a canvas-coloured
 * chip so the rail "breaks" cleanly at each node.
 */
function TimelineNode({
  icon,
  railTop,
  railBottom,
  children,
}: {
  icon: ReactNode;
  railTop: boolean;
  railBottom: boolean;
  children: ReactNode;
}) {
  return (
    // Flush rows (no gap) with a min-height give the rail room to run unbroken
    // from one node to the next; the icon chip punches a hole at each node.
    <div className="flex min-h-[44px] gap-2.5">
      <div className="relative flex w-5 shrink-0 items-center justify-center self-stretch">
        {railTop && (
          <span className="absolute left-1/2 top-0 h-1/2 w-px -translate-x-1/2" style={{ background: RAIL }} />
        )}
        {railBottom && (
          <span className="absolute bottom-0 left-1/2 h-1/2 w-px -translate-x-1/2" style={{ background: RAIL }} />
        )}
        <span
          className="relative z-10 grid place-items-center rounded-sm p-0.5"
          style={{ background: "var(--chat-canvas)" }}
        >
          {icon}
        </span>
      </div>
      <div className="min-w-0 flex-1 self-center">{children}</div>
    </div>
  );
}

/**
 * A client's collapsed reasoning summary — ChatGPT's "Worked for 14s ⌄" row: a
 * muted, clickable-looking line with a trailing caret. Reskinned by the theme
 * tokens like everything else; the verb comes from the theme, the seconds from
 * the turn. Only rendered for clients with a `reasonVerb` (filtered upstream).
 */
function ReasonLine({ verb, seconds }: { verb: string; seconds: number }) {
  return (
    <div className="inline-flex items-center gap-1 text-sm" style={{ color: "var(--chat-muted)" }}>
      <span>{`${verb} ${seconds}s`}</span>
      <CaretDown />
    </div>
  );
}

function Row({
  turn,
  theme,
  timeline,
  railTop,
  railBottom,
}: {
  turn: Turn;
  theme: ChatTheme;
  timeline: boolean;
  railTop: boolean;
  railBottom: boolean;
}) {
  if (turn.role === "user") {
    return (
      <div className={`flex justify-end ${timeline ? "py-1" : ""}`}>
        <p
          className="max-w-[80%] rounded-2xl px-4 py-2 text-sm"
          style={{ background: "var(--chat-bubble)", color: "var(--chat-bubble-text)" }}
        >
          {turn.text}
        </p>
      </div>
    );
  }

  // Reasoning summary. `reason` turns only reach here for a non-timeline client
  // with a `reasonVerb` (the rest are filtered out upstream), so the else-branch
  // never renders in practice — it's here to narrow `reasonVerb` to a string
  // (avoiding a non-null assertion), not as a fallback.
  if (turn.role === "reason") {
    return theme.reasonVerb ? <ReasonLine verb={theme.reasonVerb} seconds={turn.seconds} /> : null;
  }

  // Claude activity timeline: assistant + tool turns are connected rail nodes.
  if (timeline) {
    const isTool = turn.role === "tool";
    const icon =
      isTool && turn.icon ? (
        <img src={turn.icon} alt="" aria-hidden="true" className="size-[18px] shrink-0 rounded-sm" />
      ) : (
        <Mark logo={theme.logo} size={isTool ? 18 : 20} />
      );
    return (
      <TimelineNode icon={icon} railTop={railTop} railBottom={railBottom}>
        {isTool ? (
          <span className="block min-w-0 truncate text-[15px]" style={{ color: "var(--chat-muted)" }}>
            {turn.label ?? turn.name}
          </span>
        ) : (
          <p
            className="text-[15px] leading-relaxed"
            style={{ fontFamily: "var(--chat-say-font)", color: "var(--chat-text)" }}
          >
            {turn.text}
          </p>
        )}
      </TimelineNode>
    );
  }

  if (turn.role === "tool") {
    return <ToolCall turn={turn} style={theme.toolCall} />;
  }

  // assistant: serif/sans copy, no bubble — avatar only when the client shows one
  return (
    <div className="flex gap-2.5">
      {theme.assistantAvatar && (
        <span className="mt-0.5">
          <Mark logo={theme.logo} />
        </span>
      )}
      <p
        className="min-w-0 flex-1 text-[15px] leading-relaxed"
        style={{ fontFamily: "var(--chat-say-font)", color: "var(--chat-text)" }}
      >
        {turn.text}
      </p>
    </div>
  );
}

/** Timeline nodes are the rows with a left icon — assistant lines and tool calls. */
const isTimelineNode = (turn: Turn | undefined) =>
  turn?.role === "assistant" || turn?.role === "tool";

/* ---- shell ----------------------------------------------------------------- */

export default function ChatShell({
  theme,
  conversation,
  bodyHeight = 268,
  className = "",
}: ChatShellProps) {
  // Claude renders tool calls as a connected activity rail (see TimelineNode).
  const timeline = theme.toolCall.variant === "timeline";

  // Drop reasoning summaries up front for any client that won't render them as
  // a rail node — verbless clients (no summary at all) AND timeline clients
  // (a `ReasonLine` isn't a timeline node, so leaving one between two nodes
  // would break Claude's connected rail). Only a non-timeline client with a
  // `reasonVerb` keeps its `reason` turns.
  const turns =
    theme.reasonVerb && !timeline ? conversation : conversation.filter((t) => t.role !== "reason");

  // The theme becomes CSS custom properties on the shell root; every nested
  // element reads them via var(). Reskinning is a one-object swap.
  const vars = {
    "--chat-canvas": theme.canvas,
    "--chat-chrome": theme.chrome,
    "--chat-border": theme.border,
    "--chat-text": theme.text,
    "--chat-muted": theme.muted,
    "--chat-accent": theme.accent,
    "--chat-accent-fg": theme.accentFg,
    "--chat-bubble": theme.bubble,
    "--chat-bubble-text": theme.bubbleText ?? theme.text,
    "--chat-say-font": theme.sayFont,
  } as CSSProperties;

  return (
    <div
      className={`w-full max-w-md overflow-hidden rounded-xl border shadow-2xl shadow-black/40 ${className}`}
      style={{
        ...vars,
        background: "var(--chat-canvas)",
        borderColor: "var(--chat-border)",
        color: "var(--chat-text)",
      }}
    >
      {/* header: model pill */}
      <div
        className="flex items-center gap-2 border-b px-3.5 py-2.5"
        style={{ background: "var(--chat-chrome)", borderColor: "var(--chat-border)" }}
      >
        <span
          className="inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-xs font-medium"
          style={{ borderColor: "var(--chat-border)", color: "var(--chat-text)" }}
        >
          <Mark logo={theme.logo} size={14} />
          {theme.name}
          <span style={{ color: "var(--chat-muted)" }}>
            <CaretDown className="size-3" />
          </span>
        </span>
      </div>

      {/* conversation — fixed height, scrolls internally so a swap never reflows.
          In timeline mode rows sit flush (their own py) so the rail is unbroken;
          otherwise turns are spaced. */}
      <div
        className={`overflow-y-auto px-3.5 py-3.5 ${timeline ? "" : "space-y-3.5"}`}
        style={{ height: bodyHeight }}
      >
        {turns.map((turn, i) => (
          <Row
            key={i}
            turn={turn}
            theme={theme}
            timeline={timeline}
            railTop={timeline && isTimelineNode(turn) && isTimelineNode(turns[i - 1])}
            railBottom={timeline && isTimelineNode(turn) && isTimelineNode(turns[i + 1])}
          />
        ))}
      </div>

      {/* composer */}
      <div className="px-3.5 pb-3.5">
        <div
          className="flex items-center gap-2 rounded-2xl border px-3.5 py-2.5"
          style={{ background: "var(--chat-chrome)", borderColor: "var(--chat-border)" }}
        >
          <span className="min-w-0 flex-1 truncate text-sm" style={{ color: "var(--chat-muted)" }}>
            {theme.placeholder}
          </span>
          <span
            className="grid size-7 shrink-0 place-items-center rounded-full"
            style={{ background: "var(--chat-accent)", color: "var(--chat-accent-fg)" }}
          >
            <svg
              className="size-4"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2.5}
              strokeLinecap="round"
              strokeLinejoin="round"
              aria-hidden="true"
            >
              <path d="M12 19V5M5 12l7-7 7 7" />
            </svg>
          </span>
        </div>
      </div>
    </div>
  );
}