---
/**
 * Pixel-faithful mock of the Warmbly /app/api-keys screen, paired with a
 * dark quick-start code panel. Maps 1:1 to the real source:
 *
 *   - web/src/app/app/api-keys/page.tsx                       PageTopbar / StatStrip / SearchPill / KeyRow / StatusPill
 *   - web/src/app/app/api-keys/_components/CreateKeyModal.tsx the Create API key modal (the reaction)
 *   - web/src/components/layout/Page.tsx                      PageTopbar / StatStrip / Stat / SectionBar / TopbarAction
 *   - internal/models/api_permission.go                      the real scope names + descriptions + categories
 *
 * The dark code panel reuses the slate-950 idiom from the real CodeSnippet
 * (page.tsx) and the developers/index marketing surfaces.
 *
 * Renders only the in-app screen content. The marketing page wraps this in
 * its own browser frame and crops overflow.
 */

// Scope-dot tone, mirrors the category coloring used across the keys UI.
const scopeTone: Record<string, string> = {
  read: 'bg-sky-400',
  write: 'bg-violet-400',
  send: 'bg-emerald-400',
};

// One row per key, matching the real KeyRow: name+description, mono
// prefix…suffix, status pill, rate limit, last used.
const keys = [
  {
    name: 'production-server',
    desc: 'Server-side calls from EU production',
    prefix: 'wmbly_live_a1',
    suffix: '4f2a',
    scope: 'write',
    rpm: 600,
    last: 'used 2m ago',
    status: 'active' as const,
  },
  {
    name: 'ci-pipeline',
    desc: 'GitHub Actions deploy step',
    prefix: 'wmbly_live_7c',
    suffix: '91c7',
    scope: 'read',
    rpm: 120,
    last: 'used 1h ago',
    status: 'active' as const,
  },
  {
    name: 'zapier-replies',
    desc: 'Inbound reply automation',
    prefix: 'wmbly_live_3d',
    suffix: '3d8e',
    scope: 'send',
    rpm: 300,
    last: 'used 3d ago',
    status: 'active' as const,
  },
  {
    name: 'old-laptop',
    desc: 'Rotated out, kept for audit',
    prefix: 'wmbly_live_0p',
    suffix: 'xx0p',
    scope: 'read',
    rpm: 120,
    last: 'used 23d ago',
    status: 'revoked' as const,
  },
];

const statusTone = (s: string) =>
  s === 'active'
    ? { bg: 'bg-emerald-50', text: 'text-emerald-700', dot: 'bg-emerald-500' }
    : s === 'revoked'
      ? { bg: 'bg-rose-50', text: 'text-rose-700', dot: 'bg-rose-500' }
      : { bg: 'bg-slate-100', text: 'text-slate-600', dot: 'bg-slate-400' };

// Top StatStrip cells, mirroring useAPIKeyUsageSummary on the real page.
const stats = [
  { label: 'Active keys',      value: '3',       sub: '1 inactive',          accent: true,  last: false },
  { label: 'Requests · 24h',   value: '8,241',   sub: '4 errors',            accent: false, last: false },
  { label: 'Avg latency · 24h',value: '28ms',    sub: 'across all keys',     accent: false, last: false },
  { label: 'Last call',        value: '14s ago', sub: 'Jun 6, 02:02 PM',     accent: false, last: true },
];
---
<div class="relative w-full bg-white text-slate-900" style="min-height:520px;">
  <div class="flex min-h-[520px]">

    <!-- ════════════════════════════════════════════════════════════
         LEFT · the API Keys screen (PageTopbar + StatStrip + Keys list)
    ════════════════════════════════════════════════════════════ -->
    <div class="flex-1 min-w-0 flex flex-col border-r border-slate-200">

      <!-- PageTopbar (h-12) -->
      <div class="h-12 px-5 border-b border-slate-200 flex items-center gap-3 shrink-0 bg-white">
        <span class="text-[10px] uppercase tracking-[0.14em] text-slate-400 font-medium">API keys</span>
        <div class="h-4 w-px bg-slate-200"></div>
        <span class="text-[12.5px] text-slate-600 truncate">Programmatic access · stripe-style scoped tokens</span>
        <div class="ml-auto flex items-center gap-1.5">
          <!-- SearchPill -->
          <div class="h-7 px-2 rounded-md border border-slate-200 bg-white flex items-center gap-1.5 shrink-0">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-slate-400" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
            <span class="text-[12px] text-slate-400 w-[140px]">Search…</span>
          </div>
          <!-- Refresh -->
          <span class="h-7 w-7 rounded-md border border-slate-200 text-slate-500 inline-flex items-center justify-center shrink-0">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg>
          </span>
          <!-- Create key (TopbarAction, sky-600). Press #1 target. -->
          <button id="dv-create" class="h-7 px-2.5 rounded-md inline-flex items-center gap-1.5 text-[12px] font-medium bg-sky-600 text-white whitespace-nowrap shrink-0">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Create key
          </button>
        </div>
      </div>

      <!-- StatStrip (4 cols) -->
      <div class="grid grid-cols-4 border-b border-slate-200 shrink-0 bg-white">
        {stats.map((s) => (
          <div class={`px-5 py-4 ${!s.last ? 'border-r border-slate-200' : ''}`}>
            <div class="flex items-center gap-2">
              <span class="text-[10px] uppercase tracking-[0.14em] text-slate-400 font-medium">{s.label}</span>
              {s.accent && <span class="size-1.5 rounded-full bg-sky-500 animate-pulse"></span>}
            </div>
            <div class="text-[26px] text-slate-900 font-light leading-none mt-2 tabular-nums">{s.value}</div>
            <div class="text-[10px] text-slate-400 mt-1.5 font-mono truncate">{s.sub}</div>
          </div>
        ))}
      </div>

      <!-- SectionBar · Traffic last 24h -->
      <div class="h-9 px-5 border-b border-slate-200/60 flex items-center gap-2.5 shrink-0">
        <span class="text-[10px] uppercase tracking-[0.14em] text-slate-400 font-medium">Traffic · last 24h</span>
        <span class="font-mono text-[10.5px] text-slate-400 tabular-nums">8,241</span>
      </div>

      <!-- StackedBars activity graph (2xx / 4xx / 5xx) -->
      <div class="px-5 py-4 border-b border-slate-200/60 shrink-0">
        <div class="flex items-end gap-[3px] h-[80px]">
          {[42,55,38,61,49,72,58,80,64,47,69,53,76,60,84,51,68,57,73,45,62,79,54,66].map((h, i) => (
            <div class="flex-1 flex flex-col justify-end gap-px" style={`height:80px`}>
              {i % 7 === 3 && <div class="w-full rounded-[1px] bg-rose-500/80" style="height:4px"></div>}
              {i % 5 === 2 && <div class="w-full rounded-[1px] bg-amber-400/80" style="height:6px"></div>}
              <div class="w-full rounded-[1px] bg-emerald-500/80" style={`height:${h}%`}></div>
            </div>
          ))}
        </div>
        <div class="mt-2 flex items-center gap-3 text-[10.5px] text-slate-500">
          <span class="inline-flex items-center gap-1"><span class="size-1.5 rounded-sm bg-emerald-500/80"></span>2xx</span>
          <span class="inline-flex items-center gap-1"><span class="size-1.5 rounded-sm bg-amber-400/80"></span>4xx</span>
          <span class="inline-flex items-center gap-1"><span class="size-1.5 rounded-sm bg-rose-500/80"></span>5xx</span>
          <span class="ml-auto inline-flex items-center gap-1.5 text-[10.5px] text-slate-400">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
            live; refreshes every minute
          </span>
        </div>
      </div>

      <!-- SectionBar · Keys -->
      <div class="h-9 px-5 border-b border-slate-200/60 flex items-center gap-2.5 shrink-0">
        <span class="text-[10px] uppercase tracking-[0.14em] text-slate-400 font-medium">Keys</span>
        <span class="font-mono text-[10.5px] text-slate-400 tabular-nums">4</span>
      </div>

      <!-- Keys list (KeyRow, divide-y) -->
      <div class="divide-y divide-slate-200/60">
        {keys.map((k) => {
          const t = statusTone(k.status);
          return (
            <div class="group h-12 px-5 flex items-center gap-3 text-left hover:bg-slate-50/80">
              <!-- KeyIcon -->
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class={`shrink-0 ${k.status === 'active' ? 'text-slate-500' : 'text-slate-300'}`} stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/></svg>
              <!-- name + description -->
              <div class="flex flex-col min-w-0 max-w-[40%]">
                <span class="text-[12.5px] text-slate-900 font-medium truncate">{k.name}</span>
                <span class="text-[10.5px] text-slate-500 truncate">{k.desc}</span>
              </div>
              <!-- mono prefix…suffix -->
              <span class="font-mono text-[10.5px] text-slate-500 truncate">{k.prefix}…{k.suffix}</span>
              <!-- StatusPill -->
              <span class={`inline-flex items-center gap-1 h-5 px-1.5 rounded text-[10px] uppercase tracking-[0.08em] font-medium ${t.bg} ${t.text}`}>
                <span class={`size-1.5 rounded-full ${t.dot}`}></span>
                {k.status}
              </span>
              <!-- right: rate limit + last used -->
              <span class="ml-auto flex items-center gap-3 shrink-0">
                <span class="text-[10.5px] text-slate-400 tabular-nums inline-flex items-center">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-1 align-[-2px]" stroke-linecap="round" stroke-linejoin="round"><path d="m12 14 4-4"/><path d="M3.34 19a10 10 0 1 1 17.32 0"/></svg>
                  {k.rpm}/m
                </span>
                <span class="font-mono text-[10.5px] text-slate-400 tabular-nums w-32 text-right truncate">{k.last}</span>
              </span>
            </div>
          );
        })}
      </div>
    </div>

    <!-- ════════════════════════════════════════════════════════════
         RIGHT · Quick start (dark code panel, slate-950 idiom)
    ════════════════════════════════════════════════════════════ -->
    <div class="w-[400px] shrink-0 flex flex-col bg-slate-50/40">

      <!-- panel topbar -->
      <div class="h-12 px-5 border-b border-slate-200 flex items-center gap-3 shrink-0 bg-white">
        <span class="text-[10px] uppercase tracking-[0.14em] text-slate-400 font-medium">Quick start</span>
        <div class="h-4 w-px bg-slate-200"></div>
        <span class="text-[12.5px] text-slate-600 truncate">Your first request</span>
      </div>

      <div class="p-4 flex flex-col gap-3">
        <!-- dark code panel: cURL request -->
        <div class="rounded-md border border-slate-200 bg-slate-950 overflow-hidden">
          <div class="h-8 px-3 flex items-center gap-2 border-b border-slate-800/60">
            <span class="size-1.5 rounded-full bg-red-400/70"></span>
            <span class="size-1.5 rounded-full bg-amber-400/70"></span>
            <span class="size-1.5 rounded-full bg-emerald-400/70"></span>
            <span class="ml-2 text-[11px] text-slate-400 font-mono">curl</span>
            <span class="ml-auto inline-flex items-center gap-1 h-6 px-2 rounded text-slate-400 text-[11px]">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
              Copy
            </span>
          </div>
          <pre class="text-slate-200 px-4 py-3 text-[12px] leading-relaxed font-mono whitespace-pre overflow-x-auto"><code>curl <span style="color:#fde68a">https://api.warmbly.com/v1/campaigns</span> \
  <span style="color:#f472b6">-H</span> <span style="color:#fde68a">"Authorization: Bearer wmbly_live_a1…"</span> \
  <span style="color:#f472b6">-H</span> <span style="color:#fde68a">"Content-Type: application/json"</span></code></pre>
        </div>

        <!-- rate-limit-header note, from the page copy -->
        <p class="text-[11.5px] text-slate-500 leading-relaxed">
          Pass the secret as a <span class="font-mono text-slate-700">Bearer</span> header. Every request returns
          rate-limit headers (<span class="font-mono text-slate-700">X-RateLimit-Limit</span>,
          <span class="font-mono text-slate-700">X-RateLimit-Remaining</span>) so well-behaved clients can self-throttle
          before hitting <span class="font-mono text-slate-700">429</span>.
        </p>

        <!-- response (200) -->
        <div class="rounded-md border border-slate-200 bg-slate-950 overflow-hidden">
          <div class="h-8 px-3 flex items-center gap-2 border-b border-slate-800/60">
            <span class="text-[10px] font-mono uppercase tracking-[0.14em] text-slate-400">Response</span>
            <span class="ml-auto inline-flex items-center gap-1.5 h-5 px-1.5 rounded text-[10px] font-mono font-medium bg-emerald-500/15 text-emerald-300 ring-1 ring-emerald-400/20">
              <span class="size-1.5 rounded-full bg-emerald-400"></span>
              200 OK
            </span>
          </div>
          <pre class="text-slate-200 px-4 py-3 text-[12px] leading-relaxed font-mono overflow-x-auto"><code><span style="color:#94a3b8">&#123;</span>
  <span style="color:#7dd3fc">"id"</span>: <span style="color:#fde68a">"cmp_01HQX9F7P3A8KY"</span>,
  <span style="color:#7dd3fc">"status"</span>: <span style="color:#fde68a">"scheduled"</span>,
  <span style="color:#7dd3fc">"daily_cap"</span>: <span style="color:#a78bfa">50</span>,
  <span style="color:#7dd3fc">"created_at"</span>: <span style="color:#fde68a">"2026-06-06T14:02Z"</span>
<span style="color:#94a3b8">&#125;</span></code></pre>
        </div>

        <!-- HMAC-signed webhooks note -->
        <div class="rounded-md border border-slate-200 bg-white px-3.5 py-3">
          <div class="flex items-center gap-1.5 mb-1.5">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="text-sky-600" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg>
            <span class="text-[10px] uppercase tracking-[0.14em] text-slate-500 font-medium">HMAC-signed webhooks</span>
          </div>
          <p class="text-[11px] text-slate-500 leading-relaxed">
            Events post to your endpoint with an <span class="font-mono text-slate-700">X-Warmbly-Signature</span> header.
            Verify the HMAC-SHA256 digest before you trust the body.
          </p>
          <div class="mt-2 flex items-center gap-2">
            <span class="inline-flex items-center gap-1.5 h-5 px-2 rounded bg-sky-50 text-sky-700 text-[10.5px] font-mono">
              <span class="size-1.5 rounded-full bg-sky-500"></span>
              contact.replied
            </span>
            <span class="font-mono text-[10px] text-slate-400 tabular-nums">delivered 4s ago</span>
          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- ════════════════════════════════════════════════════════════
       DEMO SCENE · cursor presses "Create key" -> CreateKeyModal opens,
       cursor then presses the dark scrim (click-outside) -> modal dismisses
  ════════════════════════════════════════════════════════════ -->

  <!-- (b) reaction overlay: the real CreateKeyModal -->
  <div class="dv-react" style="left:0;top:0;right:0;bottom:0;" aria-hidden="true">
    <div class="absolute inset-0 bg-slate-900/30"></div>
    <div class="absolute inset-0 flex items-start justify-center pt-6 px-4">
      <div class="dv-card w-[560px] bg-white rounded-lg border border-slate-200 shadow-[0_24px_60px_-12px_rgba(15,23,42,0.25)] overflow-hidden">

        <!-- modal header -->
        <div class="h-11 px-4 border-b border-slate-200 flex items-center gap-2">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" class="text-slate-500" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/></svg>
          <span class="text-[12.5px] font-medium text-slate-900">Create API key</span>
          <span class="ml-auto w-7 h-7 rounded-md inline-flex items-center justify-center text-slate-500">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
          </span>
        </div>

        <!-- modal body -->
        <div class="px-5 py-3.5 space-y-3.5">
          <!-- Name field -->
          <div>
            <div class="flex items-center gap-2 mb-1">
              <span class="text-[11px] uppercase tracking-[0.14em] text-slate-500 font-medium">Name</span>
            </div>
            <div class="w-full h-8 px-2.5 rounded-md border border-sky-400 ring-1 ring-sky-200 bg-white flex items-center">
              <span class="text-[12.5px] text-slate-900">Staging</span>
              <span class="dv-caret ml-px w-px h-3.5 bg-sky-500"></span>
            </div>
            <p class="text-[10.5px] text-slate-400 mt-1 leading-relaxed">Shown in the dashboard. e.g. production-server, ci-pipeline.</p>
          </div>

          <!-- Permissions: preset cards + matrix -->
          <div>
            <div class="flex items-center gap-2 mb-1">
              <span class="text-[11px] uppercase tracking-[0.14em] text-slate-500 font-medium">Permissions</span>
            </div>
            <!-- preset cards -->
            <div class="grid grid-cols-3 gap-1.5 mb-2">
              <div class="relative text-left rounded-md border px-2.5 py-2 border-sky-400 bg-sky-50/60">
                <div class="flex items-center gap-1.5 mb-0.5">
                  <span class="text-sky-600"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></svg></span>
                  <span class="text-[11.5px] font-medium text-sky-900">Read-only</span>
                </div>
                <p class="text-[10.5px] text-slate-500">View everything</p>
              </div>
              <div class="relative text-left rounded-md border px-2.5 py-2 border-slate-200 bg-white">
                <div class="flex items-center gap-1.5 mb-0.5">
                  <span class="text-slate-500"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/></svg></span>
                  <span class="text-[11.5px] font-medium text-slate-900">Full access</span>
                </div>
                <p class="text-[10.5px] text-slate-500">Read + write</p>
              </div>
              <div class="relative text-left rounded-md border px-2.5 py-2 border-slate-200 bg-white">
                <div class="flex items-center gap-1.5 mb-0.5">
                  <span class="text-slate-500"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="1" x2="7" y1="14" y2="14"/><line x1="9" x2="15" y1="8" y2="8"/><line x1="17" x2="23" y1="16" y2="16"/></svg></span>
                  <span class="text-[11.5px] font-medium text-slate-900">Custom</span>
                </div>
                <p class="text-[10.5px] text-slate-500">Pick scopes</p>
              </div>
            </div>
            <!-- PermissionMatrix: grouped checkbox rows (read [checked], write [checked], special) -->
            <div class="rounded-md border border-slate-200 divide-y divide-slate-200/60 max-h-[148px] overflow-hidden">
              <!-- read group -->
              <div>
                <div class="px-2.5 py-1.5 bg-slate-50/60 text-[10px] uppercase tracking-[0.14em] text-slate-500 font-medium">read</div>
                <div>
                  <div class="w-full px-2.5 py-1.5 flex items-center gap-2 text-left">
                    <span class="w-3.5 h-3.5 rounded border border-sky-600 bg-sky-600 text-white flex items-center justify-center shrink-0">
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <span class="font-mono text-[11px] text-slate-900">READ_CAMPAIGNS</span>
                    <span class="text-[10.5px] text-slate-500 truncate">View campaigns and sequences</span>
                  </div>
                  <div class="w-full px-2.5 py-1.5 flex items-center gap-2 text-left">
                    <span class="w-3.5 h-3.5 rounded border border-sky-600 bg-sky-600 text-white flex items-center justify-center shrink-0">
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <span class="font-mono text-[11px] text-slate-900">READ_CONTACTS</span>
                    <span class="text-[10.5px] text-slate-500 truncate">View contact lists, notes, and activities</span>
                  </div>
                </div>
              </div>
              <!-- write group -->
              <div>
                <div class="px-2.5 py-1.5 bg-slate-50/60 text-[10px] uppercase tracking-[0.14em] text-slate-500 font-medium">write</div>
                <div>
                  <div class="w-full px-2.5 py-1.5 flex items-center gap-2 text-left">
                    <span class="w-3.5 h-3.5 rounded border border-sky-600 bg-sky-600 text-white flex items-center justify-center shrink-0">
                      <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                    </span>
                    <span class="font-mono text-[11px] text-slate-900">WRITE_CAMPAIGNS</span>
                    <span class="text-[10.5px] text-slate-500 truncate">Create and modify campaigns and sequences</span>
                  </div>
                  <div class="w-full px-2.5 py-1.5 flex items-center gap-2 text-left">
                    <span class="w-3.5 h-3.5 rounded border border-slate-300 bg-white shrink-0"></span>
                    <span class="font-mono text-[11px] text-slate-900">SEND_CAMPAIGNS</span>
                    <span class="text-[10.5px] text-slate-500 truncate">Start and stop campaigns (sends real mail)</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Expires pills -->
          <div>
            <div class="flex items-center gap-2 mb-1">
              <span class="text-[11px] uppercase tracking-[0.14em] text-slate-500 font-medium">Expires</span>
            </div>
            <div class="flex items-center gap-1">
              <span class="h-7 px-3 rounded-md text-[11.5px] bg-slate-900 text-white inline-flex items-center whitespace-nowrap shrink-0">Never</span>
              <span class="h-7 px-3 rounded-md text-[11.5px] border border-slate-200 text-slate-600 inline-flex items-center whitespace-nowrap shrink-0">30 days</span>
              <span class="h-7 px-3 rounded-md text-[11.5px] border border-slate-200 text-slate-600 inline-flex items-center whitespace-nowrap shrink-0">90 days</span>
              <span class="h-7 px-3 rounded-md text-[11.5px] border border-slate-200 text-slate-600 inline-flex items-center whitespace-nowrap shrink-0">365 days</span>
            </div>
          </div>
        </div>

        <!-- modal footer -->
        <div class="h-12 px-4 border-t border-slate-200 flex items-center gap-2 bg-slate-50/40">
          <span class="text-[11px] text-slate-500 inline-flex items-center gap-1.5 min-w-0">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            <span class="truncate">The secret will be shown once. Save it somewhere safe.</span>
          </span>
          <div class="ml-auto flex items-center gap-1.5 shrink-0">
            <span class="h-7 px-3 rounded-md border border-slate-200 text-[12px] text-slate-700 inline-flex items-center whitespace-nowrap shrink-0">Cancel</span>
            <!-- modal Create key -->
            <span class="h-7 px-3 rounded-md bg-sky-600 text-white text-[12px] font-medium inline-flex items-center gap-1.5 whitespace-nowrap shrink-0">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6"/><path d="m15.5 7.5 3 3L22 7l-3-3"/></svg>
              Create key
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- (a) cursor -->
  <div class="dv-cursor" aria-hidden="true">
    <span class="dv-ripple"></span>
    <svg width="23" height="27" viewBox="0 0 23 27" fill="none"><path d="M3 2.2 L3 20.4 L7.7 16 L10.9 23.2 L14 21.8 L10.9 14.8 L17.2 14.6 Z" fill="#ffffff" stroke="#0f172a" stroke-width="1.4" stroke-linejoin="round"/></svg>
  </div>

  <!-- (c) demo-scene styles -->
  <style>
    .dv-cursor{position:absolute;z-index:50;width:23px;height:27px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(15,23,42,.4));animation:dv-move 11s cubic-bezier(.5,0,.2,1) infinite;}
    .dv-cursor svg{display:block;transform-origin:3px 2px;animation:dv-press 11s ease-in-out infinite;}
    .dv-ripple{position:absolute;left:-6px;top:-6px;width:32px;height:32px;border-radius:9999px;background:rgba(2,132,199,.5);transform:scale(0);opacity:0;animation:dv-rip 11s ease-out infinite;}
    .dv-react{position:absolute;z-index:40;opacity:0;animation:dv-react 11s ease-out infinite;}
    .dv-card{transform-origin:center;transform:scale(.94);animation:dv-card 11s ease-out infinite;}
    .dv-caret{display:inline-block;animation:dv-blink 1s step-end infinite;}
    /* press feedback on the trigger, synced to the press #1 cursor dip; press #2 lands on the scrim (no target highlight, the modal dismisses) */
    #dv-create{animation:dv-btn1 11s ease-out infinite;}
    @keyframes dv-move{0%{left:30%;top:60%}22%{left:47.5%;top:4.6%}32%{left:47.5%;top:4.6%}58%{left:8%;top:85%}68%{left:8%;top:85%}88%{left:30%;top:60%}100%{left:30%;top:60%}}
    @keyframes dv-press{0%,26%{transform:scale(1)}28%{transform:scale(.82)}31%,62%{transform:scale(1)}64%{transform:scale(.82)}67%,100%{transform:scale(1)}}
    @keyframes dv-rip{0%,26%{transform:scale(0);opacity:0}29%{transform:scale(.25);opacity:.7}41%{transform:scale(1.9);opacity:0}60%{transform:scale(0);opacity:0}63%{transform:scale(.25);opacity:.7}75%{transform:scale(1.9);opacity:0}100%{transform:scale(0);opacity:0}}
    @keyframes dv-react{0%,29%{opacity:0}33%{opacity:1}60%{opacity:1}66%{opacity:0}100%{opacity:0}}
    @keyframes dv-card{0%,29%{transform:scale(.94)}33%{transform:scale(1)}60%{transform:scale(1)}66%{transform:scale(.94)}100%{transform:scale(.94)}}
    @keyframes dv-btn1{0%,27%{background-color:#0284c7;box-shadow:0 0 0 0 rgba(186,230,253,0)}28%{background-color:#0369a1;box-shadow:0 0 0 2px rgba(186,230,253,.9)}31%,100%{background-color:#0284c7;box-shadow:0 0 0 0 rgba(186,230,253,0)}}
    @keyframes dv-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
    @media (prefers-reduced-motion: reduce){.dv-cursor{display:none}.dv-react{display:none}}
  </style>
</div>
