{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "ai-model-benchmark-card",
  "type": "registry:ui",
  "title": "AI Model Benchmark Card",
  "description": "Comparative matrix showcasing leading LLM inference speeds, MMLU accuracy ratings, latency distribution, and token economics.",
  "category": "ai",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/ai/ai-model-benchmark-card/ai-model-benchmark-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/ai-model-benchmark-card.tsx",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { \n  Gauge, \n  TrendUp, \n  CurrencyDollar, \n  Cpu, \n  CheckCircle,\n  Lightning,\n  Brain\n} from '@phosphor-icons/react';\n\nexport interface ModelMetric {\n  id: string;\n  name: string;\n  provider: string;\n  speedTps: number;\n  ttftMs: number;\n  mmluScore: number;\n  inputCost: string;\n  outputCost: string;\n  contextWindow: string;\n  accent: string;\n}\n\nconst DEFAULT_MODELS: ModelMetric[] = [\n  {\n    id: 'claude-3-7',\n    name: 'Claude 3.7 Sonnet',\n    provider: 'Anthropic',\n    speedTps: 118,\n    ttftMs: 140,\n    mmluScore: 92.4,\n    inputCost: '$3.00',\n    outputCost: '$15.00',\n    contextWindow: '200k',\n    accent: '#f97316',\n  },\n  {\n    id: 'gpt-4o',\n    name: 'GPT-4o Omnimodal',\n    provider: 'OpenAI',\n    speedTps: 124,\n    ttftMs: 165,\n    mmluScore: 90.8,\n    inputCost: '$2.50',\n    outputCost: '$10.00',\n    contextWindow: '128k',\n    accent: '#10b981',\n  },\n  {\n    id: 'deepseek-r1',\n    name: 'DeepSeek R1 Reasoner',\n    provider: 'DeepSeek',\n    speedTps: 84,\n    ttftMs: 240,\n    mmluScore: 91.2,\n    inputCost: '$0.55',\n    outputCost: '$2.19',\n    contextWindow: '64k',\n    accent: '#3b82f6',\n  },\n  {\n    id: 'llama-3-3',\n    name: 'Llama 3.3 70B Open',\n    provider: 'Meta AI',\n    speedTps: 165,\n    ttftMs: 95,\n    mmluScore: 88.6,\n    inputCost: '$0.35',\n    outputCost: '$0.90',\n    contextWindow: '128k',\n    accent: '#8b5cf6',\n  },\n];\n\nexport interface AiModelBenchmarkCardProps {\n  initialModelId?: string;\n  className?: string;\n}\n\nexport const AiModelBenchmarkCard: React.FC<AiModelBenchmarkCardProps> = ({\n  initialModelId = 'claude-3-7',\n  className = '',\n}) => {\n  const [selectedId, setSelectedId] = useState(initialModelId);\n  const activeModel = DEFAULT_MODELS.find((m) => m.id === selectedId) || DEFAULT_MODELS[0];\n\n  return (\n    <div className={`w-full max-w-xl mx-auto rounded-3xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-[#07080d] p-6 shadow-2xl font-mono text-xs select-none ${className}`}>\n      {/* Top Header */}\n      <div className=\"flex items-center justify-between pb-4 border-b border-zinc-200/80 dark:border-white/5\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className=\"flex h-8 w-8 items-center justify-center rounded-xl bg-orange-500/10 border border-orange-500/20 text-orange-400\">\n            <Brain size={16} weight=\"bold\" />\n          </div>\n          <div>\n            <h3 className=\"font-bold text-zinc-900 dark:text-white\">Neural Speed & Reasoning Matrix</h3>\n            <span className=\"text-[11px] text-zinc-500\">Standardized Token Inference Telemetry</span>\n          </div>\n        </div>\n\n        <span className=\"px-2 py-0.5 rounded-full text-[10px] font-bold bg-zinc-100 dark:bg-white/5 text-zinc-600 dark:text-zinc-300 border border-zinc-200 dark:border-white/10\">\n          v2026.Q4\n        </span>\n      </div>\n\n      {/* Model Selector Tabs */}\n      <div className=\"my-5 grid grid-cols-2 sm:grid-cols-4 gap-2\">\n        {DEFAULT_MODELS.map((model) => {\n          const isSelected = model.id === selectedId;\n          return (\n            <button\n              key={model.id}\n              onClick={() => setSelectedId(model.id)}\n              className={`p-2.5 rounded-2xl border text-left transition-all cursor-pointer ${\n                isSelected\n                  ? 'bg-zinc-100 dark:bg-white/10 border-zinc-400 dark:border-white/20 shadow-xs'\n                  : 'bg-zinc-50/50 dark:bg-white/[0.02] border-zinc-200 dark:border-white/5 hover:border-zinc-300'\n              }`}\n            >\n              <div className=\"flex items-center justify-between mb-1\">\n                <span className=\"text-[10px] font-bold uppercase text-zinc-400 truncate\">\n                  {model.provider}\n                </span>\n                <span \n                  style={{ backgroundColor: model.accent }} \n                  className=\"h-1.5 w-1.5 rounded-full\" \n                />\n              </div>\n              <div className=\"font-bold text-zinc-900 dark:text-white text-[11px] truncate\">\n                {model.name.split(' ')[0]} {model.name.split(' ')[1] || ''}\n              </div>\n            </button>\n          );\n        })}\n      </div>\n\n      {/* Main Benchmark Telemetry Display */}\n      <AnimatePresence mode=\"wait\">\n        <motion.div\n          key={activeModel.id}\n          initial={{ opacity: 0, y: 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -8 }}\n          transition={{ duration: 0.2 }}\n          className=\"space-y-4 rounded-2xl bg-zinc-50 dark:bg-black/60 border border-zinc-200/60 dark:border-white/5 p-4\"\n        >\n          {/* 1. Inference Throughput Speed */}\n          <div>\n            <div className=\"flex items-center justify-between mb-1.5\">\n              <span className=\"flex items-center gap-1.5 text-zinc-600 dark:text-zinc-400\">\n                <Lightning size={14} className=\"text-amber-400\" />\n                <span>Streaming Throughput</span>\n              </span>\n              <span className=\"font-bold text-zinc-900 dark:text-white\">\n                {activeModel.speedTps} tokens/sec\n              </span>\n            </div>\n            {/* Speed Bar */}\n            <div className=\"h-2 w-full rounded-full bg-zinc-200 dark:bg-white/10 overflow-hidden\">\n              <motion.div\n                initial={{ width: 0 }}\n                animate={{ width: `${Math.min(100, (activeModel.speedTps / 180) * 100)}%` }}\n                transition={{ duration: 0.6, ease: 'easeOut' }}\n                style={{ backgroundColor: activeModel.accent }}\n                className=\"h-full rounded-full\"\n              />\n            </div>\n          </div>\n\n          {/* 2. Reasoning Benchmark Accuracy (MMLU) */}\n          <div>\n            <div className=\"flex items-center justify-between mb-1.5\">\n              <span className=\"flex items-center gap-1.5 text-zinc-600 dark:text-zinc-400\">\n                <TrendUp size={14} className=\"text-emerald-400\" />\n                <span>MMLU-Pro Accuracy</span>\n              </span>\n              <span className=\"font-bold text-zinc-900 dark:text-white\">\n                {activeModel.mmluScore}%\n              </span>\n            </div>\n            {/* Accuracy Bar */}\n            <div className=\"h-2 w-full rounded-full bg-zinc-200 dark:bg-white/10 overflow-hidden\">\n              <motion.div\n                initial={{ width: 0 }}\n                animate={{ width: `${activeModel.mmluScore}%` }}\n                transition={{ duration: 0.6, ease: 'easeOut' }}\n                className=\"h-full rounded-full bg-emerald-500\"\n              />\n            </div>\n          </div>\n\n          {/* 3. Cost & Specs Matrix Grid */}\n          <div className=\"grid grid-cols-3 gap-2 pt-2 border-t border-zinc-200 dark:border-white/5 text-center\">\n            <div className=\"p-2 rounded-xl bg-white dark:bg-white/5 border border-zinc-200/50 dark:border-white/5\">\n              <span className=\"text-[10px] text-zinc-400 uppercase\">Latency (TTFT)</span>\n              <p className=\"font-bold text-zinc-900 dark:text-white mt-0.5\">{activeModel.ttftMs}ms</p>\n            </div>\n            <div className=\"p-2 rounded-xl bg-white dark:bg-white/5 border border-zinc-200/50 dark:border-white/5\">\n              <span className=\"text-[10px] text-zinc-400 uppercase\">Input / Output</span>\n              <p className=\"font-bold text-zinc-900 dark:text-white mt-0.5\">{activeModel.inputCost} / {activeModel.outputCost}</p>\n            </div>\n            <div className=\"p-2 rounded-xl bg-white dark:bg-white/5 border border-zinc-200/50 dark:border-white/5\">\n              <span className=\"text-[10px] text-zinc-400 uppercase\">Context</span>\n              <p className=\"font-bold text-zinc-900 dark:text-white mt-0.5\">{activeModel.contextWindow}</p>\n            </div>\n          </div>\n        </motion.div>\n      </AnimatePresence>\n\n      {/* Footer Model Summary */}\n      <div className=\"flex items-center justify-between pt-4 mt-4 border-t border-zinc-200/80 dark:border-white/5 text-[11px] text-zinc-400\">\n        <span className=\"flex items-center gap-1.5\">\n          <CheckCircle size={14} className=\"text-emerald-400\" />\n          <span>Speculative Decoding Supported</span>\n        </span>\n        <span className=\"text-zinc-500 font-bold uppercase\">Zero Batch Queue</span>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}