{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-video",
  "title": "Hero Video",
  "description": "Video thumbnail with play button that opens a modal player",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/pioneerui/hero-video.tsx",
      "content": "\"use client\"\n\nimport React, { useState } from \"react\"\nimport { motion, AnimatePresence } from \"motion/react\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface HeroVideoProps extends React.HTMLAttributes<HTMLDivElement> {\n  videoSrc: string\n  thumbnailSrc?: string\n  thumbnailAlt?: string\n  buttonText?: string\n  animationStyle?: \"from-center\" | \"from-bottom\" | \"fade\"\n}\n\nconst PlayIcon = () => (\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"currentColor\"\n    className=\"h-6 w-6 text-primary\"\n  >\n    <path d=\"M8 5.14v14l11-7-11-7z\" />\n  </svg>\n)\n\nexport function HeroVideo({\n  videoSrc,\n  thumbnailSrc,\n  thumbnailAlt = \"Video thumbnail\",\n  buttonText = \"Watch video\",\n  animationStyle = \"from-center\",\n  className,\n  ...props\n}: HeroVideoProps) {\n  const [isOpen, setIsOpen] = useState(false)\n\n  const modalVariants = {\n    \"from-center\": {\n      initial: { opacity: 0, scale: 0.8 },\n      animate: { opacity: 1, scale: 1 },\n      exit: { opacity: 0, scale: 0.8 },\n    },\n    \"from-bottom\": {\n      initial: { opacity: 0, y: 80 },\n      animate: { opacity: 1, y: 0 },\n      exit: { opacity: 0, y: 80 },\n    },\n    fade: {\n      initial: { opacity: 0 },\n      animate: { opacity: 1 },\n      exit: { opacity: 0 },\n    },\n  }[animationStyle]\n\n  return (\n    <>\n      <div\n        className={cn(\"relative cursor-pointer overflow-hidden rounded-2xl border bg-muted\", className)}\n        onClick={() => setIsOpen(true)}\n        {...props}\n      >\n        {thumbnailSrc && (\n          <img\n            src={thumbnailSrc}\n            alt={thumbnailAlt}\n            className=\"h-full w-full object-cover\"\n          />\n        )}\n\n        {/* Play button overlay */}\n        <div className=\"absolute inset-0 flex items-center justify-center bg-black/20 transition-colors duration-200 hover:bg-black/30\">\n          <div className=\"flex flex-col items-center gap-3\">\n            <div className=\"flex h-14 w-14 items-center justify-center rounded-full bg-background/90 shadow-lg ring-1 ring-white/20 backdrop-blur-sm transition-transform duration-200 hover:scale-105\">\n              <PlayIcon />\n            </div>\n            {buttonText && (\n              <span className=\"rounded-full bg-background/80 px-3 py-1 text-sm font-medium text-foreground backdrop-blur-sm\">\n                {buttonText}\n              </span>\n            )}\n          </div>\n        </div>\n      </div>\n\n      <AnimatePresence>\n        {isOpen && (\n          <motion.div\n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            exit={{ opacity: 0 }}\n            onClick={() => setIsOpen(false)}\n          >\n            <motion.div\n              className=\"relative w-full max-w-4xl overflow-hidden rounded-2xl bg-black shadow-2xl\"\n              onClick={(e) => e.stopPropagation()}\n              {...modalVariants}\n              transition={{ type: \"spring\", stiffness: 300, damping: 25 }}\n            >\n              <button\n                className=\"absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white backdrop-blur-sm transition-colors hover:bg-black/80\"\n                onClick={() => setIsOpen(false)}\n                aria-label=\"Close video\"\n              >\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} className=\"h-4 w-4\">\n                  <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\" />\n                  <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\" />\n                </svg>\n              </button>\n              <div className=\"aspect-video\">\n                <iframe\n                  src={videoSrc}\n                  className=\"h-full w-full\"\n                  allow=\"autoplay; fullscreen\"\n                  allowFullScreen\n                />\n              </div>\n            </motion.div>\n          </motion.div>\n        )}\n      </AnimatePresence>\n    </>\n  )\n}\n",
      "type": "registry:ui",
      "target": "components/pioneerui/hero-video.tsx"
    }
  ],
  "type": "registry:ui"
}