{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-video-modal-walkthrough",
  "title": "Hero Video Modal Walkthrough",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/hero-video-modal-walkthrough/HeroVideoModalWalkthrough.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { BookOpen, Maximize2, Pause, Play, Star, Volume2, VolumeX, X } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\ninterface VideoChapter {\n  id: string\n  title: string\n  timestamp: string\n  description: string\n}\n\nconst chapters: VideoChapter[] = [\n  {\n    id: 'intro',\n    title: '1. Architecture & Registry Engine',\n    timestamp: '0:45',\n    description: 'Learn how unbundled components provide 100% source ownership without npm dependencies.',\n  },\n  {\n    id: 'tokens',\n    title: '2. OKLCH Theme & Token System',\n    timestamp: '1:30',\n    description: 'Explore the fluid color space engine and dynamic contrast balancing in Tailwind v4.',\n  },\n  {\n    id: 'parity',\n    title: '3. Dual-Framework Parity Model',\n    timestamp: '2:15',\n    description: 'Deep dive into mirror synchronization between Vue 3.5 SFC and React 19 TSX.',\n  },\n]\n\nexport interface HeroVideoModalWalkthroughProps {\n  className?: string\n}\n\nexport function HeroVideoModalWalkthrough({ className }: HeroVideoModalWalkthroughProps) {\n  const [isModalOpen, setIsModalOpen] = React.useState(false)\n  const [isPlaying, setIsPlaying] = React.useState(true)\n  const [isMuted, setIsMuted] = React.useState(false)\n  const [playbackSpeed, setPlaybackSpeed] = React.useState<1 | 1.5 | 2>(1)\n  const [activeChapterIndex, setActiveChapterIndex] = React.useState(0)\n  const [progressPercent] = React.useState(38)\n\n  const currentChapter = chapters[activeChapterIndex]\n\n  const openModal = (index = 0) => {\n    setActiveChapterIndex(index)\n    setIsModalOpen(true)\n    setIsPlaying(true)\n  }\n\n  const closeModal = () => {\n    setIsModalOpen(false)\n    setIsPlaying(false)\n  }\n\n  return (\n    <section\n      data-slot=\"hero-video-modal-walkthrough\"\n      className={cn('bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8', className)}\n    >\n      {/* Ambient Glow Background */}\n      <div className=\"bg-primary/10 pointer-events-none absolute top-12 left-1/2 -z-10 h-72 w-full max-w-5xl -translate-x-1/2 rounded-full blur-xl\" />\n\n      <div className=\"mx-auto max-w-6xl space-y-12 text-center\">\n        {/* Headline & Subtitle */}\n        <div className=\"mx-auto max-w-3xl space-y-5\">\n          <Badge variant=\"secondary\" className=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n            <Play className=\"text-primary fill-primary/20 size-3.5\" />\n            Interactive 3-Minute Architecture Walkthrough\n          </Badge>\n\n          <h1 className=\"text-foreground text-4xl leading-[1.12] font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n            See how top engineering teams build with UIPKGE.\n          </h1>\n\n          <p className=\"text-muted-foreground text-base leading-relaxed sm:text-lg\">\n            Watch a full walkthrough of our design engineering principles, OKLCH token engine, and dual-framework\n            component architecture.\n          </p>\n\n          {/* CTA Action Buttons */}\n          <div className=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n            <Button size=\"lg\" className=\"gap-2 font-semibold shadow-xs\" onClick={() => openModal(0)}>\n              <Play className=\"size-4 fill-current\" />\n              <span>Watch Product Tour (3:30)</span>\n            </Button>\n\n            <Button asChild variant=\"outline\" size=\"lg\" className=\"gap-2 font-medium\">\n              <a href=\"#docs\">\n                <BookOpen className=\"text-muted-foreground size-4\" />\n                <span>Read Architecture RFC</span>\n              </a>\n            </Button>\n          </div>\n\n          {/* Social Proof Avatars & Stars */}\n          <div className=\"text-muted-foreground flex flex-wrap items-center justify-center gap-6 pt-3 text-xs\">\n            <div className=\"flex -space-x-2 overflow-hidden\">\n              <div className=\"ring-background bg-primary/20 text-primary flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2\">\n                RF\n              </div>\n              <div className=\"ring-background bg-success/20 text-success flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2\">\n                PC\n              </div>\n              <div className=\"ring-background bg-info/20 text-info flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2\">\n                EK\n              </div>\n              <div className=\"ring-background bg-warning/20 text-warning flex inline-block size-7 items-center justify-center rounded-full text-xs font-bold ring-2\">\n                SH\n              </div>\n            </div>\n            <div className=\"text-warning flex items-center gap-1\">\n              {[1, 2, 3, 4, 5].map((i) => (\n                <Star key={i} className=\"size-3.5 fill-current\" />\n              ))}\n              <span className=\"text-foreground ml-1 font-mono text-xs font-medium\">\n                4.9/5 by 1,400+ Design Engineers\n              </span>\n            </div>\n          </div>\n        </div>\n\n        {/* Video Preview Card & Chapter Trigger Grid */}\n        <div className=\"mx-auto max-w-4xl\">\n          <Card\n            className=\"border-border bg-card group cursor-pointer overflow-hidden rounded-2xl p-2 shadow-sm transition-[box-shadow,transform] duration-150 active:scale-[0.99]\"\n            onClick={() => openModal(0)}\n          >\n            {/* Video Thumbnail Frame */}\n            <div className=\"bg-muted/60 border-border/80 relative flex aspect-video flex-col justify-between overflow-hidden rounded-lg border p-6 text-left\">\n              {/* Overlay Backdrop Texture */}\n              <div className=\"from-background/95 via-background/40 absolute inset-0 z-0 bg-gradient-to-t to-transparent\" />\n\n              {/* Top Row: Badge & Length */}\n              <div className=\"relative z-10 flex items-center justify-between\">\n                <span className=\"bg-background/80 border-border text-foreground inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1 font-mono text-xs font-medium backdrop-blur-md\">\n                  <span className=\"bg-success size-2 animate-pulse rounded-full\" />\n                  <span>Full HD &bull; 60 FPS</span>\n                </span>\n                <span className=\"bg-background/80 border-border text-muted-foreground rounded-md border px-2.5 py-1 font-mono text-xs backdrop-blur-md\">\n                  Total runtime: 3m 30s\n                </span>\n              </div>\n\n              {/* Center: Play Button Beacon */}\n              <div className=\"relative z-10 flex flex-col items-center justify-center py-8\">\n                <div className=\"bg-primary text-primary-foreground shadow-primary/25 flex size-16 items-center justify-center rounded-full shadow-lg transition-transform duration-300 group-hover:scale-110 sm:size-20\">\n                  <Play className=\"ml-1 size-7 fill-current sm:size-8\" />\n                </div>\n                <p className=\"text-foreground mt-4 text-sm font-semibold tracking-tight\">\n                  Click to Launch Interactive Player\n                </p>\n              </div>\n\n              {/* Bottom: Chapter Navigation Strip */}\n              <div className=\"border-border/60 relative z-10 grid grid-cols-1 gap-2 border-t pt-2 sm:grid-cols-3\">\n                {chapters.map((chapter, idx) => (\n                  <div\n                    key={chapter.id}\n                    className=\"bg-background/60 border-border/50 hover:bg-background/90 rounded-lg border p-2 text-left backdrop-blur-sm transition-colors\"\n                    onClick={(e) => {\n                      e.stopPropagation()\n                      openModal(idx)\n                    }}\n                  >\n                    <div className=\"text-muted-foreground flex items-center justify-between font-mono text-xs\">\n                      <span className=\"truncate\">{chapter.title.split('.')[1]}</span>\n                      <span className=\"text-primary font-bold\">{chapter.timestamp}</span>\n                    </div>\n                  </div>\n                ))}\n              </div>\n            </div>\n          </Card>\n        </div>\n      </div>\n\n      {/* Interactive Video Dialog Modal */}\n      {isModalOpen && (\n        <div className=\"bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md sm:p-6\">\n          <div className=\"bg-card border-border relative w-full max-w-4xl overflow-hidden rounded-2xl border text-left shadow-sm\">\n            {/* Modal Top Bar */}\n            <div className=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-3\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"bg-primary size-2.5 rounded-full\" />\n                <span className=\"text-foreground font-mono text-xs font-semibold\">{currentChapter.title}</span>\n              </div>\n              <button\n                type=\"button\"\n                className=\"text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1 transition-colors\"\n                onClick={closeModal}\n              >\n                <X className=\"size-4\" />\n              </button>\n            </div>\n\n            {/* Simulated Video Playback Viewport */}\n            <div className=\"relative flex aspect-video flex-col justify-between bg-neutral-950 p-6 text-white select-none\">\n              <div className=\"flex items-center justify-between font-mono text-xs opacity-80\">\n                <span>UIPKGE Architecture Masterclass</span>\n                <span>OKLCH Engine v2.4</span>\n              </div>\n\n              {/* Video Mock Graphic */}\n              <div className=\"flex flex-col items-center justify-center space-y-3\">\n                <div className=\"flex size-16 items-center justify-center rounded-full border border-white/20 bg-white/10 backdrop-blur-md\">\n                  {!isPlaying ? <Play className=\"ml-1 size-7 fill-current\" /> : <Pause className=\"size-7\" />}\n                </div>\n                <p className=\"max-w-md text-center font-mono text-xs text-neutral-400\">{currentChapter.description}</p>\n              </div>\n\n              {/* Timeline Scrubber & Controls */}\n              <div className=\"space-y-2\">\n                {/* Progress Bar */}\n                <div className=\"h-1.5 w-full cursor-pointer overflow-hidden rounded-full bg-white/20\">\n                  <div\n                    className=\"bg-primary h-full transition-[width] duration-200\"\n                    style={{ width: `${progressPercent}%` }}\n                  />\n                </div>\n\n                {/* Controls Row */}\n                <div className=\"flex items-center justify-between font-mono text-xs\">\n                  <div className=\"flex items-center gap-3\">\n                    <button\n                      type=\"button\"\n                      className=\"hover:text-primary transition-colors\"\n                      onClick={() => setIsPlaying(!isPlaying)}\n                    >\n                      {isPlaying ? <Pause className=\"size-4\" /> : <Play className=\"size-4 fill-current\" />}\n                    </button>\n                    <button\n                      type=\"button\"\n                      className=\"hover:text-primary transition-colors\"\n                      onClick={() => setIsMuted(!isMuted)}\n                    >\n                      {isMuted ? <VolumeX className=\"size-4\" /> : <Volume2 className=\"size-4\" />}\n                    </button>\n                    <span className=\"text-neutral-400\">{currentChapter.timestamp} / 3:30</span>\n                  </div>\n\n                  <div className=\"flex items-center gap-2\">\n                    <button\n                      type=\"button\"\n                      className=\"rounded bg-white/10 px-2 py-0.5 transition-colors hover:bg-white/20\"\n                      onClick={() => setPlaybackSpeed((s) => (s === 1 ? 1.5 : s === 1.5 ? 2 : 1))}\n                    >\n                      {playbackSpeed}x\n                    </button>\n                    <button type=\"button\" className=\"hover:text-primary p-1 transition-colors\">\n                      <Maximize2 className=\"size-3.5\" />\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            {/* Modal Chapter Selector Footer */}\n            <div className=\"border-border bg-muted/20 grid grid-cols-3 border-t\">\n              {chapters.map((ch, idx) => (\n                <button\n                  key={ch.id}\n                  type=\"button\"\n                  className={cn(\n                    'border-border border-r p-3 text-left font-mono text-xs transition-colors last:border-r-0',\n                    activeChapterIndex === idx\n                      ? 'bg-background text-foreground font-semibold'\n                      : 'text-muted-foreground hover:text-foreground',\n                  )}\n                  onClick={() => setActiveChapterIndex(idx)}\n                >\n                  <div className=\"truncate\">{ch.title}</div>\n                  <div className=\"text-muted-foreground mt-0.5 text-xs\">{ch.timestamp}</div>\n                </button>\n              ))}\n            </div>\n          </div>\n        </div>\n      )}\n    </section>\n  )\n}\nexport default HeroVideoModalWalkthrough\n",
      "type": "registry:block",
      "target": "~/components/blocks/HeroVideoModalWalkthrough.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Product walkthrough hero section with interactive video modal player, chapter timestamps navigation, playback speed controls, and social proof.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "hero"
}