{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-faq-visuals",
  "title": "Animated Faq Visuals",
  "author": "AlgorizeTech",
  "description": "Theme-adaptive interactive visual preview components (CLI terminal, token customizer, MIT license certificate, performance HUD) for animated FAQ sections.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/blocks/AnimatedFAQVisuals.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  Terminal,\n  Check,\n  Copy,\n  Sparkles,\n  ShieldCheck,\n  Activity,\n  Zap,\n  Sliders,\n  Palette,\n  Cpu,\n} from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\n// ============================================================================\n// 1. CLI & INSTALLATION VISUAL (Interactive Terminal)\n// ============================================================================\nexport function CLIInstallationVisual() {\n  const [pkg, setPkg] = useState<\"npm\" | \"pnpm\" | \"bun\">(\"pnpm\");\n  const [copied, setCopied] = useState(false);\n\n  const command =\n    pkg === \"pnpm\"\n      ? \"pnpm dlx shadcn@latest add @avara-ui/animated-faq\"\n      : pkg === \"bun\"\n      ? \"bunx --bun shadcn@latest add @avara-ui/animated-faq\"\n      : \"npx shadcn@latest add @avara-ui/animated-faq\";\n\n  const handleCopy = () => {\n    navigator.clipboard?.writeText(command);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <div className=\"w-full h-full py-4.5 px-6 sm:px-8 flex flex-col justify-between bg-card dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 font-mono text-xs select-none transition-colors duration-200\">\n      {/* Terminal Titlebar */}\n      <div className=\"flex items-center justify-between pb-3 border-b border-border/70\">\n        <div className=\"flex items-center gap-2\">\n          <div className=\"flex gap-1.5\">\n            <div className=\"size-2.5 rounded-full bg-red-500/80\" />\n            <div className=\"size-2.5 rounded-full bg-yellow-500/80\" />\n            <div className=\"size-2.5 rounded-full bg-emerald-500/80\" />\n          </div>\n          <span className=\"text-[11px] text-neutral-600 dark:text-neutral-400 font-sans font-medium pl-1 flex items-center gap-1.5\">\n            <Terminal className=\"size-3 text-primary\" /> install-component.sh\n          </span>\n        </div>\n\n        {/* Package Switcher */}\n        <div className=\"flex bg-neutral-200/80 dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-800 rounded-lg p-0.5 text-[10px]\">\n          {([\"pnpm\", \"npm\", \"bun\"] as const).map((p) => (\n            <button\n              key={p}\n              type=\"button\"\n              onClick={() => setPkg(p)}\n              className={cn(\n                \"px-2 py-0.5 rounded transition-colors cursor-pointer\",\n                pkg === p\n                  ? \"bg-white dark:bg-primary text-neutral-900 dark:text-primary-foreground font-semibold shadow-xs\"\n                  : \"text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-200\"\n              )}\n            >\n              {p}\n            </button>\n          ))}\n        </div>\n      </div>\n\n      {/* Terminal Body & Execution Log */}\n      <div className=\"my-auto py-3 space-y-2 text-[11px] sm:text-xs leading-relaxed\">\n        <div className=\"flex items-center justify-between p-2 rounded-lg bg-white dark:bg-neutral-900/90 border border-neutral-200 dark:border-neutral-800 shadow-xs\">\n          <div className=\"flex items-center gap-2 truncate pr-2\">\n            <span className=\"text-primary font-bold\">$</span>\n            <span className=\"text-neutral-800 dark:text-neutral-200 truncate\">{command}</span>\n          </div>\n          <button\n            type=\"button\"\n            onClick={handleCopy}\n            className=\"p-1 rounded bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 text-neutral-600 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white transition-colors shrink-0 cursor-pointer\"\n            title=\"Copy command\"\n          >\n            {copied ? <Check className=\"size-3 text-emerald-500 dark:text-emerald-400\" /> : <Copy className=\"size-3\" />}\n          </button>\n        </div>\n\n        <div className=\"space-y-1 text-[10.5px] text-neutral-600 dark:text-neutral-400 pt-1\">\n          <p className=\"flex items-center gap-1.5 text-emerald-600 dark:text-emerald-400 font-medium\">\n            <Check className=\"size-3 shrink-0\" />\n            <span>Found registry component @avara-ui/animated-faq</span>\n          </p>\n          <p className=\"flex items-center gap-1.5 text-emerald-600 dark:text-emerald-400 font-medium\">\n            <Check className=\"size-3 shrink-0\" />\n            <span>Generated src/components/custom/blocks/AnimatedFAQBlock.tsx</span>\n          </p>\n          <p className=\"flex items-center gap-1.5 text-neutral-500 font-sans\">\n            <Sparkles className=\"size-3 text-primary shrink-0\" />\n            <span>Zero build lock-in • Pure TypeScript & Tailwind CSS</span>\n          </p>\n        </div>\n      </div>\n\n      {/* Terminal Footer Status */}\n      <div className=\"pt-2.5 border-t border-neutral-200 dark:border-neutral-800/80 flex items-center justify-between text-[10px] text-neutral-500 font-sans\">\n        <span className=\"flex items-center gap-1.5\">\n          <span className=\"size-1.5 rounded-full bg-emerald-500 animate-pulse\" />\n          Ready to Import\n        </span>\n        <span>Output: 100% Native Code</span>\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// 2. TAILWIND & THEMING VISUAL (Interactive Token & Palette Customizer)\n// ============================================================================\nexport function ThemingVisual() {\n  const [selectedColor, setSelectedColor] = useState({\n    name: \"Emerald\",\n    hex: \"#10b981\",\n    bgClass: \"bg-emerald-500\",\n    textClass: \"text-emerald-500 dark:text-emerald-400\",\n    borderClass: \"border-emerald-500/40\",\n  });\n  const radius = \"rounded-xl\";\n\n  const PALETTES = [\n    { name: \"Emerald\", hex: \"#10b981\", bgClass: \"bg-emerald-500\", textClass: \"text-emerald-500 dark:text-emerald-400\", borderClass: \"border-emerald-500/40\" },\n    { name: \"Violet\", hex: \"#8b5cf6\", bgClass: \"bg-purple-500\", textClass: \"text-purple-500 dark:text-purple-400\", borderClass: \"border-purple-500/40\" },\n    { name: \"Cyan\", hex: \"#06b6d4\", bgClass: \"bg-cyan-500\", textClass: \"text-cyan-500 dark:text-cyan-400\", borderClass: \"border-cyan-500/40\" },\n    { name: \"Amber\", hex: \"#f59e0b\", bgClass: \"bg-amber-500\", textClass: \"text-amber-500 dark:text-amber-400\", borderClass: \"border-amber-500/40\" },\n    { name: \"Rose\", hex: \"#f43f5e\", bgClass: \"bg-rose-500\", textClass: \"text-rose-500 dark:text-rose-400\", borderClass: \"border-rose-500/40\" },\n  ];\n\n  return (\n    <div className=\"w-full h-full py-4.5 px-6 sm:px-8 flex flex-col justify-between bg-card dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 select-none transition-colors duration-200\">\n      {/* Header Controls */}\n      <div className=\"flex items-center justify-between pb-3 border-b border-border/70\">\n        <div className=\"flex items-center gap-2\">\n          <Palette className=\"size-4 text-primary\" />\n          <span className=\"text-xs font-semibold tracking-tight text-neutral-800 dark:text-neutral-200\">\n            Live Design Token Engine\n          </span>\n        </div>\n        <span className=\"font-mono text-[10px] px-2 py-0.5 rounded-full bg-muted/60 text-muted-foreground border border-border/60\">\n          OKLCH Tokens\n        </span>\n      </div>\n\n      {/* Interactive Swatches & Controls */}\n      <div className=\"my-auto py-2 space-y-4\">\n        {/* Color Swatch Picker */}\n        <div>\n          <div className=\"flex items-center justify-between text-[11px] text-muted-foreground mb-1.5 font-medium\">\n            <span>Primary Color</span>\n            <span className=\"font-mono font-semibold\" style={{ color: selectedColor.hex }}>\n              {selectedColor.name} ({selectedColor.hex})\n            </span>\n          </div>\n          <div className=\"flex items-center gap-2.5\">\n            {PALETTES.map((p) => (\n              <button\n                key={p.name}\n                type=\"button\"\n                onClick={() => setSelectedColor(p)}\n                className={cn(\n                  \"size-6 rounded-full transition-transform cursor-pointer border-2 shadow-xs\",\n                  selectedColor.name === p.name\n                    ? \"scale-110 border-neutral-900 dark:border-white ring-2 ring-neutral-900/20 dark:ring-white/20\"\n                    : \"border-transparent opacity-75 hover:opacity-100\"\n                )}\n                style={{ backgroundColor: p.hex }}\n                title={p.name}\n              />\n            ))}\n          </div>\n        </div>\n\n        {/* Live Morphing Preview Component */}\n        <div\n          className={cn(\n            \"p-3.5 border bg-muted/30 dark:bg-neutral-900/70 transition-all duration-300 flex items-center justify-between gap-3 shadow-xs\",\n            radius,\n            selectedColor.borderClass\n          )}\n        >\n          <div className=\"space-y-0.5\">\n            <p className=\"text-xs font-semibold text-foreground\">Interactive Component</p>\n            <p className=\"text-[10px] text-muted-foreground\">Adapts to your global theme tokens</p>\n          </div>\n          <button\n            type=\"button\"\n            className={cn(\n              \"px-3 py-1.5 text-xs font-semibold text-white shadow-xs transition-all duration-300 cursor-pointer\",\n              radius,\n              selectedColor.bgClass\n            )}\n          >\n            Action\n          </button>\n        </div>\n      </div>\n\n      {/* Footer Details */}\n      <div className=\"pt-2 border-t border-border/70 flex items-center justify-between text-[10px] text-muted-foreground font-mono\">\n        <span className=\"flex items-center gap-1\">\n          <Sliders className=\"size-3 text-primary\" /> CSS Variables Auto-Sync\n        </span>\n        <span>Dark & Light Native</span>\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// 3. MIT LICENSING VISUAL (Commercial Open-Source Certificate)\n// ============================================================================\nexport function LicensingVisual() {\n  return (\n    <div className=\"w-full h-full py-4.5 px-6 sm:px-8 flex flex-col justify-between bg-card dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 select-none transition-colors duration-200\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between pb-3 border-b border-border/70\">\n        <div className=\"flex items-center gap-2\">\n          <div className=\"p-1 rounded-md bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20\">\n            <ShieldCheck className=\"size-4\" />\n          </div>\n          <span className=\"text-xs font-semibold text-neutral-800 dark:text-neutral-200\">\n            MIT Open-Source License\n          </span>\n        </div>\n        <span className=\"text-[10px] font-mono px-2 py-0.5 rounded bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20 font-bold\">\n          100% FREE\n        </span>\n      </div>\n\n      {/* License Feature Matrix */}\n      <div className=\"my-auto py-2 space-y-2\">\n        <div className=\"grid grid-cols-2 gap-2 text-[11px]\">\n          <div className=\"p-2.5 rounded-xl bg-muted/30 dark:bg-neutral-900/70 border border-border/60 flex items-center gap-2 shadow-xs\">\n            <Check className=\"size-3.5 text-emerald-600 dark:text-emerald-400 shrink-0\" />\n            <span className=\"text-foreground font-medium\">Commercial SaaS</span>\n          </div>\n          <div className=\"p-2.5 rounded-xl bg-muted/30 dark:bg-neutral-900/70 border border-border/60 flex items-center gap-2 shadow-xs\">\n            <Check className=\"size-3.5 text-emerald-600 dark:text-emerald-400 shrink-0\" />\n            <span className=\"text-foreground font-medium\">Client Projects</span>\n          </div>\n          <div className=\"p-2.5 rounded-xl bg-muted/30 dark:bg-neutral-900/70 border border-border/60 flex items-center gap-2 shadow-xs\">\n            <Check className=\"size-3.5 text-emerald-600 dark:text-emerald-400 shrink-0\" />\n            <span className=\"text-foreground font-medium\">Zero Royalties</span>\n          </div>\n          <div className=\"p-2.5 rounded-xl bg-muted/30 dark:bg-neutral-900/70 border border-border/60 flex items-center gap-2 shadow-xs\">\n            <Check className=\"size-3.5 text-emerald-600 dark:text-emerald-400 shrink-0\" />\n            <span className=\"text-foreground font-medium\">Private Repos</span>\n          </div>\n        </div>\n\n        <div className=\"p-2.5 rounded-xl bg-primary/10 border border-primary/20 flex items-center justify-between text-xs text-primary\">\n          <span className=\"font-semibold flex items-center gap-1.5\">\n            <Sparkles className=\"size-3.5\" /> No Attribution Required\n          </span>\n          <span className=\"font-mono text-[10px] opacity-80\">Perpetual</span>\n        </div>\n      </div>\n\n      {/* Footer */}\n      <div className=\"pt-2 border-t border-border/70 flex items-center justify-between text-[10px] text-muted-foreground font-mono\">\n        <span>License: MIT (SPDX: MIT)</span>\n        <span>Free for Life</span>\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// 4. PERFORMANCE & 60FPS VISUAL (Lighthouse 100 & GPU Engine HUD)\n// ============================================================================\nexport function PerformanceVisual() {\n  return (\n    <div className=\"w-full h-full py-4.5 px-6 sm:px-8 flex flex-col justify-between bg-card dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 select-none transition-colors duration-200\">\n      {/* Header */}\n      <div className=\"flex items-center justify-between pb-3 border-b border-border/70\">\n        <div className=\"flex items-center gap-2\">\n          <Activity className=\"size-4 text-emerald-600 dark:text-emerald-400\" />\n          <span className=\"text-xs font-semibold text-neutral-800 dark:text-neutral-200\">\n            GPU Motion & Performance Engine\n          </span>\n        </div>\n        <div className=\"flex items-center gap-1.5 text-[11px] font-mono text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded border border-emerald-500/20 font-bold\">\n          <Zap className=\"size-3\" /> 60.0 FPS\n        </div>\n      </div>\n\n      {/* Benchmark HUD Grid */}\n      <div className=\"my-auto py-2 grid grid-cols-3 gap-2.5 text-center\">\n        {/* Lighthouse 100 */}\n        <div className=\"p-3 rounded-xl bg-muted/30 dark:bg-neutral-900/70 border border-border/60 flex flex-col items-center justify-center shadow-xs\">\n          <div className=\"size-11 rounded-full border-2 border-emerald-500 flex items-center justify-center font-bold text-emerald-600 dark:text-emerald-400 text-sm shadow-[0_0_10px_rgba(16,185,129,0.15)] dark:shadow-[0_0_12px_rgba(16,185,129,0.3)]\">\n            100\n          </div>\n          <span className=\"text-[10px] text-muted-foreground font-medium mt-1.5\">Lighthouse</span>\n        </div>\n\n        {/* 0.00 CLS */}\n        <div className=\"p-3 rounded-xl bg-muted/30 dark:bg-neutral-900/70 border border-border/60 flex flex-col items-center justify-center shadow-xs\">\n          <div className=\"text-base sm:text-lg font-extrabold text-foreground font-mono\">\n            0.00\n          </div>\n          <span className=\"text-[10px] text-emerald-600 dark:text-emerald-400 font-medium mt-0.5\">Zero CLS</span>\n          <span className=\"text-[9px] text-muted-foreground font-mono\">Layout Shift</span>\n        </div>\n\n        {/* 0kB Runtime */}\n        <div className=\"p-3 rounded-xl bg-muted/30 dark:bg-neutral-900/70 border border-border/60 flex flex-col items-center justify-center shadow-xs\">\n          <div className=\"text-base sm:text-lg font-extrabold text-foreground font-mono\">\n            0 kB\n          </div>\n          <span className=\"text-[10px] text-primary font-medium mt-0.5\">Zero Bloat</span>\n          <span className=\"text-[9px] text-muted-foreground font-mono\">Native CSS</span>\n        </div>\n      </div>\n\n      {/* GPU Stream Line */}\n      <div className=\"pt-2 border-t border-border/70 flex items-center justify-between text-[10px] text-muted-foreground font-mono\">\n        <span className=\"flex items-center gap-1 text-emerald-600 dark:text-emerald-400 font-medium\">\n          <Cpu className=\"size-3\" /> transform: translate3d\n        </span>\n        <span className=\"text-neutral-500\">Hardware Accelerated</span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/custom/blocks/AnimatedFAQVisuals.tsx"
    }
  ],
  "docs": "Exports: CLIInstallationVisual, ThemingVisual, LicensingVisual, PerformanceVisual.",
  "categories": [
    "marketing",
    "data-display"
  ],
  "type": "registry:component"
}