{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "holographic-pricing-table",
  "type": "registry:ui",
  "title": "Holographic Pricing Table",
  "description": "3-tier SaaS pricing table featuring animated holographic spotlight, monthly/annual billing toggle, and tier comparison.",
  "category": "sections",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/sections/holographic-pricing-table/holographic-pricing-table.tsx",
      "type": "registry:ui",
      "target": "components/ui/holographic-pricing-table.tsx",
      "content": "import React, { useState } from 'react';\nimport { Check } from '@phosphor-icons/react';\n\nexport const HolographicPricingTable: React.FC = () => {\n  const [annual, setAnnual] = useState(true);\n\n  const plans = [\n    {\n      name: 'Developer',\n      price: annual ? 0 : 0,\n      desc: 'Free for open source and personal components',\n      features: ['All 100+ Canonical Components', 'Zero Runtime Lock-in', 'Community Discord', 'Static Registry Access'],\n      highlight: false,\n    },\n    {\n      name: 'Pro Syndicate',\n      price: annual ? 19 : 24,\n      desc: 'For high-velocity engineers shipping web apps',\n      features: ['AI Agent MCP Server Access', '3D WebGL Shader Packages', 'Private Figma Tokens', 'Priority Source PRs'],\n      highlight: true,\n    },\n    {\n      name: 'Enterprise',\n      price: annual ? 99 : 129,\n      desc: 'Dedicated design systems for enterprise scale',\n      features: ['Custom Registry Subdomains', 'Design Token Audits', 'SLA Support Agreement', 'White-label Documentation'],\n      highlight: false,\n    },\n  ];\n\n  return (\n    <div className=\"w-full max-w-4xl p-6 rounded-3xl border border-zinc-200 dark:border-white/10 bg-white/60 dark:bg-zinc-950/60 backdrop-blur-xl\">\n      {/* Billing Switch */}\n      <div className=\"flex items-center justify-center gap-3 mb-8\">\n        <span className={`text-xs font-mono ${!annual ? 'font-bold text-zinc-900 dark:text-white' : 'text-zinc-500'}`}>Monthly</span>\n        <button\n          onClick={() => setAnnual(!annual)}\n          className=\"relative w-12 h-6 rounded-full bg-zinc-200 dark:bg-zinc-800 p-0.5 cursor-pointer\"\n        >\n          <div className={`w-5 h-5 rounded-full bg-indigo-600 transition-transform ${annual ? 'translate-x-6' : ''}`} />\n        </button>\n        <div className=\"flex items-center gap-1.5\">\n          <span className={`text-xs font-mono ${annual ? 'font-bold text-zinc-900 dark:text-white' : 'text-zinc-500'}`}>Annual</span>\n          <span className=\"text-[10px] font-mono text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full font-bold\">SAVE 20%</span>\n        </div>\n      </div>\n\n      {/* Plans Grid */}\n      <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n        {plans.map((p) => (\n          <div\n            key={p.name}\n            className={`p-6 rounded-3xl border flex flex-col justify-between transition-all ${\n              p.highlight\n                ? 'border-indigo-500 bg-indigo-500/[0.04] shadow-xl relative'\n                : 'border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900/60'\n            }`}\n          >\n            {p.highlight && (\n              <span className=\"absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-0.5 rounded-full bg-indigo-600 text-white font-mono text-[10px] font-bold\">\n                POPULAR\n              </span>\n            )}\n\n            <div>\n              <h4 className=\"text-sm font-bold text-zinc-900 dark:text-white font-mono\">{p.name}</h4>\n              <div className=\"mt-2 flex items-baseline gap-1\">\n                <span className=\"text-3xl font-black text-zinc-900 dark:text-white\">${p.price}</span>\n                <span className=\"text-xs text-zinc-500 font-mono\">/mo</span>\n              </div>\n              <p className=\"mt-2 text-xs text-zinc-500 leading-relaxed\">{p.desc}</p>\n\n              <div className=\"mt-6 space-y-2.5\">\n                {p.features.map((f) => (\n                  <div key={f} className=\"flex items-center gap-2 text-xs text-zinc-700 dark:text-zinc-300\">\n                    <Check size={13} className=\"text-emerald-500 shrink-0\" weight=\"bold\" />\n                    <span>{f}</span>\n                  </div>\n                ))}\n              </div>\n            </div>\n\n            <button className={`mt-8 w-full py-2.5 rounded-xl font-mono text-xs font-bold transition-all cursor-pointer ${\n              p.highlight\n                ? 'bg-indigo-600 hover:bg-indigo-500 text-white shadow-lg'\n                : 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 text-zinc-900 dark:text-white'\n            }`}>\n              Select Plan\n            </button>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}