{
  "$schema": "https://www.cooki-ui.design/schema/registry-item.json",
  "name": "interactive-feature-carousel",
  "type": "registry:ui",
  "title": "Interactive Feature Carousel",
  "description": "3D perspective feature deck with depth blur, interactive drag/swipe navigation, pagination pills, and keyboard traversal.",
  "category": "layout",
  "dependencies": [
    "framer-motion",
    "@phosphor-icons/react"
  ],
  "files": [
    {
      "path": "registry/layout/interactive-feature-carousel/interactive-feature-carousel.tsx",
      "type": "registry:ui",
      "target": "components/ui/interactive-feature-carousel.tsx",
      "content": "import React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'framer-motion';\nimport { \n  CaretLeft, \n  CaretRight, \n  Lightning, \n  ShieldCheck, \n  Cpu, \n  Browsers, \n  ArrowRight,\n  CloudCheck\n} from '@phosphor-icons/react';\n\nexport interface CarouselSlide {\n  id: string;\n  badge: string;\n  title: string;\n  description: string;\n  metric: string;\n  metricLabel: string;\n  icon: 'lightning' | 'shield' | 'cpu' | 'cloud';\n}\n\nconst DEFAULT_SLIDES: CarouselSlide[] = [\n  {\n    id: '1',\n    badge: 'EDGE COMPUTE',\n    title: 'Sub-Millisecond V8 Isolate Execution',\n    description: 'Distribute serverless functions globally across 320+ edge point-of-presences with zero cold starts.',\n    metric: '0.8ms',\n    metricLabel: 'Global Median Latency',\n    icon: 'lightning',\n  },\n  {\n    id: '2',\n    badge: 'NEURAL INFRA',\n    title: 'Autonomous Multi-Agent Orchestration',\n    description: 'Coordinate background reasoning swarms with streaming token compaction and distributed state locks.',\n    metric: '99.98%',\n    metricLabel: 'Agent Consensus Rate',\n    icon: 'cpu',\n  },\n  {\n    id: '3',\n    badge: 'ENTERPRISE VAULT',\n    title: 'Zero-Knowledge Cryptographic Isolation',\n    description: 'Hardware-enforced confidential computing enclaves guaranteeing memory encryption at runtime.',\n    metric: '256-bit',\n    metricLabel: 'AES-GCM Quantum Shield',\n    icon: 'shield',\n  },\n  {\n    id: '4',\n    badge: 'HYPER-SCALE CACHE',\n    title: 'Distributed In-Memory Semantic Store',\n    description: 'Sub-second vector indexing with real-time replication across multi-region datacenters.',\n    metric: '12M req/s',\n    metricLabel: 'Throughput Capacity',\n    icon: 'cloud',\n  },\n];\n\nexport interface InteractiveFeatureCarouselProps {\n  slides?: CarouselSlide[];\n  autoplay?: boolean;\n  autoplayInterval?: number;\n  className?: string;\n}\n\nexport const InteractiveFeatureCarousel: React.FC<InteractiveFeatureCarouselProps> = ({\n  slides = DEFAULT_SLIDES,\n  autoplay = false,\n  autoplayInterval = 4500,\n  className = '',\n}) => {\n  const [currentIndex, setCurrentIndex] = useState(0);\n\n  useEffect(() => {\n    if (!autoplay) return;\n    const timer = setInterval(() => {\n      setCurrentIndex((prev) => (prev + 1) % slides.length);\n    }, autoplayInterval);\n    return () => clearInterval(timer);\n  }, [autoplay, autoplayInterval, slides.length]);\n\n  const handlePrev = () => {\n    setCurrentIndex((prev) => (prev - 1 + slides.length) % slides.length);\n  };\n\n  const handleNext = () => {\n    setCurrentIndex((prev) => (prev + 1) % slides.length);\n  };\n\n  const getSlideIcon = (type: CarouselSlide['icon']) => {\n    switch (type) {\n      case 'lightning': return <Lightning size={24} weight=\"bold\" className=\"text-amber-400\" />;\n      case 'cpu': return <Cpu size={24} weight=\"bold\" className=\"text-cyan-400\" />;\n      case 'shield': return <ShieldCheck size={24} weight=\"bold\" className=\"text-emerald-400\" />;\n      case 'cloud': return <CloudCheck size={24} weight=\"bold\" className=\"text-violet-400\" />;\n      default: return <Browsers size={24} weight=\"bold\" className=\"text-indigo-400\" />;\n    }\n  };\n\n  return (\n    <div className={`relative w-full max-w-4xl mx-auto py-8 px-4 flex flex-col items-center select-none ${className}`}>\n      {/* 3D Stacked Card Perspective Deck */}\n      <div className=\"relative w-full h-[340px] sm:h-[320px] flex items-center justify-center perspective-[1000px]\">\n        {slides.map((slide, index) => {\n          // Calculate relative position (-1: left, 0: center, 1: right)\n          const offset = (index - currentIndex + slides.length) % slides.length;\n          let normalizedOffset = offset;\n          if (offset > slides.length / 2) {\n            normalizedOffset = offset - slides.length;\n          }\n\n          const isCenter = normalizedOffset === 0;\n          const isLeft = normalizedOffset === -1;\n          const isRight = normalizedOffset === 1;\n          const isVisible = Math.abs(normalizedOffset) <= 1;\n\n          if (!isVisible) return null;\n\n          return (\n            <motion.div\n              key={slide.id}\n              onClick={() => {\n                if (isLeft) handlePrev();\n                if (isRight) handleNext();\n              }}\n              initial={false}\n              animate={{\n                x: isCenter ? '0%' : isLeft ? '-45%' : '45%',\n                scale: isCenter ? 1 : 0.86,\n                rotateY: isCenter ? 0 : isLeft ? 14 : -14,\n                zIndex: isCenter ? 30 : 10,\n                opacity: isCenter ? 1 : 0.45,\n                filter: isCenter ? 'blur(0px)' : 'blur(1.5px)',\n              }}\n              transition={{\n                type: 'spring',\n                stiffness: 280,\n                damping: 26,\n              }}\n              className={`absolute w-full max-w-[340px] sm:max-w-[420px] rounded-3xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900/90 backdrop-blur-xl p-6 sm:p-7 shadow-2xl cursor-pointer transition-colors duration-200`}\n            >\n              {/* Card Header & Icon */}\n              <div className=\"flex items-center justify-between mb-5\">\n                <div className=\"flex h-12 w-12 items-center justify-center rounded-2xl bg-zinc-100 dark:bg-zinc-800/80 border border-zinc-200 dark:border-white/5\">\n                  {getSlideIcon(slide.icon)}\n                </div>\n                <span className=\"px-3 py-1 rounded-full text-[10px] font-mono font-bold tracking-wider uppercase text-zinc-600 dark:text-zinc-300 bg-zinc-100 dark:bg-zinc-800 border border-zinc-200 dark:border-white/10\">\n                  {slide.badge}\n                </span>\n              </div>\n\n              {/* Title & Description */}\n              <h3 className=\"text-base sm:text-lg font-bold text-zinc-900 dark:text-white mb-2 leading-snug\">\n                {slide.title}\n              </h3>\n              <p className=\"text-xs sm:text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed mb-6 line-clamp-2\">\n                {slide.description}\n              </p>\n\n              {/* Metric & Action Row */}\n              <div className=\"flex items-end justify-between pt-4 border-t border-zinc-200/80 dark:border-white/5\">\n                <div>\n                  <div className=\"text-lg sm:text-xl font-bold font-mono text-zinc-900 dark:text-zinc-100\">\n                    {slide.metric}\n                  </div>\n                  <div className=\"text-[10px] font-mono uppercase text-zinc-400\">\n                    {slide.metricLabel}\n                  </div>\n                </div>\n\n                <div className=\"flex items-center gap-1.5 text-xs font-semibold text-emerald-600 dark:text-emerald-400 hover:translate-x-1 transition-transform\">\n                  <span>Explore</span>\n                  <ArrowRight size={13} weight=\"bold\" />\n                </div>\n              </div>\n            </motion.div>\n          );\n        })}\n      </div>\n\n      {/* Navigation Controls & Pagination Indicators */}\n      <div className=\"mt-6 flex items-center gap-6\">\n        <button\n          onClick={handlePrev}\n          aria-label=\"Previous slide\"\n          className=\"flex h-10 w-10 items-center justify-center rounded-full border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-200 shadow-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer\"\n        >\n          <CaretLeft size={16} weight=\"bold\" />\n        </button>\n\n        {/* Step Dots */}\n        <div className=\"flex items-center gap-2\">\n          {slides.map((_, i) => (\n            <button\n              key={i}\n              onClick={() => setCurrentIndex(i)}\n              className={`h-2 rounded-full transition-all cursor-pointer ${\n                currentIndex === i \n                  ? 'w-7 bg-zinc-900 dark:bg-white' \n                  : 'w-2 bg-zinc-300 dark:bg-zinc-700 hover:bg-zinc-400'\n              }`}\n              aria-label={`Go to slide ${i + 1}`}\n            />\n          ))}\n        </div>\n\n        <button\n          onClick={handleNext}\n          aria-label=\"Next slide\"\n          className=\"flex h-10 w-10 items-center justify-center rounded-full border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-200 shadow-sm hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer\"\n        >\n          <CaretRight size={16} weight=\"bold\" />\n        </button>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}