{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "hero-video-modal-walkthrough",
  "title": "Hero Video Modal Walkthrough",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/hero-video-modal-walkthrough/HeroVideoModalWalkthrough.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { BookOpen, Maximize2, Pause, Play, Star, Volume2, VolumeX, X } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card } from '@/components/ui/card'\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\nconst isModalOpen = ref(false)\nconst isPlaying = ref(true)\nconst isMuted = ref(false)\nconst playbackSpeed = ref<1 | 1.5 | 2>(1)\nconst activeChapterIndex = ref(0)\nconst progressPercent = ref(38)\n\nconst currentChapter = computed(() => chapters[activeChapterIndex.value])\n\nfunction openModal(index = 0) {\n  activeChapterIndex.value = index\n  isModalOpen.value = true\n  isPlaying.value = true\n}\n\nfunction closeModal() {\n  isModalOpen.value = false\n  isPlaying.value = false\n}\n\nfunction togglePlay() {\n  isPlaying.value = !isPlaying.value\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"hero-video-modal-walkthrough\"\n    class=\"bg-background relative overflow-hidden px-4 py-16 sm:px-6 sm:py-24 lg:px-8\"\n  >\n    <!-- Ambient Glow Background -->\n    <div\n      class=\"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\n    <div class=\"mx-auto max-w-6xl space-y-12 text-center\">\n      <!-- Headline & Subtitle -->\n      <div class=\"mx-auto max-w-3xl space-y-5\">\n        <Badge variant=\"secondary\" class=\"gap-1.5 px-3 py-1 font-mono text-xs shadow-xs\">\n          <Play class=\"text-primary fill-primary/20 size-3.5\" />\n          Interactive 3-Minute Architecture Walkthrough\n        </Badge>\n\n        <h1 class=\"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 class=\"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 class=\"flex flex-wrap items-center justify-center gap-3 pt-2\">\n          <Button size=\"lg\" class=\"gap-2 font-semibold shadow-xs\" @click=\"openModal(0)\">\n            <Play class=\"size-4 fill-current\" />\n            <span>Watch Product Tour (3:30)</span>\n          </Button>\n\n          <Button as=\"a\" href=\"#docs\" variant=\"outline\" size=\"lg\" class=\"gap-2 font-medium\">\n            <BookOpen class=\"text-muted-foreground size-4\" />\n            <span>Read Architecture RFC</span>\n          </Button>\n        </div>\n\n        <!-- Social Proof Avatars & Stars -->\n        <div class=\"text-muted-foreground flex flex-wrap items-center justify-center gap-6 pt-3 text-xs\">\n          <div class=\"flex -space-x-2 overflow-hidden\">\n            <div\n              class=\"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            >\n              RF\n            </div>\n            <div\n              class=\"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            >\n              PC\n            </div>\n            <div\n              class=\"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            >\n              EK\n            </div>\n            <div\n              class=\"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            >\n              SH\n            </div>\n          </div>\n          <div class=\"text-warning flex items-center gap-1\">\n            <Star v-for=\"i in 5\" :key=\"i\" class=\"size-3.5 fill-current\" />\n            <span class=\"text-foreground ml-1 font-mono text-xs font-medium\">4.9/5 by 1,400+ Design Engineers</span>\n          </div>\n        </div>\n      </div>\n\n      <!-- Video Preview Card & Chapter Trigger Grid -->\n      <div class=\"mx-auto max-w-4xl\">\n        <Card\n          class=\"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          @click=\"openModal(0)\"\n        >\n          <!-- Video Thumbnail Frame -->\n          <div\n            class=\"bg-muted/60 border-border/80 relative flex aspect-video flex-col justify-between overflow-hidden rounded-lg border p-6 text-left\"\n          >\n            <!-- Overlay Backdrop Texture -->\n            <div class=\"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 class=\"relative z-10 flex items-center justify-between\">\n              <span\n                class=\"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              >\n                <span class=\"bg-success size-2 animate-pulse rounded-full\" />\n                <span>Full HD &bull; 60 FPS</span>\n              </span>\n              <span\n                class=\"bg-background/80 border-border text-muted-foreground rounded-md border px-2.5 py-1 font-mono text-xs backdrop-blur-md\"\n              >\n                Total runtime: 3m 30s\n              </span>\n            </div>\n\n            <!-- Center: Play Button Beacon -->\n            <div class=\"relative z-10 flex flex-col items-center justify-center py-8\">\n              <div\n                class=\"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              >\n                <Play class=\"ml-1 size-7 fill-current sm:size-8\" />\n              </div>\n              <p class=\"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 class=\"border-border/60 relative z-10 grid grid-cols-1 gap-2 border-t pt-2 sm:grid-cols-3\">\n              <div\n                v-for=\"(chapter, idx) in chapters\"\n                :key=\"chapter.id\"\n                class=\"bg-background/60 border-border/50 hover:bg-background/90 rounded-lg border p-2 text-left backdrop-blur-sm transition-colors\"\n                @click.stop=\"openModal(idx)\"\n              >\n                <div class=\"text-muted-foreground flex items-center justify-between font-mono text-xs\">\n                  <span class=\"truncate\">{{ chapter.title.split('.')[1] }}</span>\n                  <span class=\"text-primary font-bold\">{{ chapter.timestamp }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </Card>\n      </div>\n    </div>\n\n    <!-- Interactive Video Dialog Modal -->\n    <div\n      v-if=\"isModalOpen\"\n      class=\"bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-md sm:p-6\"\n    >\n      <div\n        class=\"bg-card border-border animate-in fade-in-0 zoom-in-95 relative w-full max-w-4xl overflow-hidden rounded-2xl border text-left shadow-sm duration-200\"\n      >\n        <!-- Modal Top Bar -->\n        <div class=\"border-border bg-muted/40 flex items-center justify-between border-b px-4 py-3\">\n          <div class=\"flex items-center gap-2\">\n            <span class=\"bg-primary size-2.5 rounded-full\" />\n            <span class=\"text-foreground font-mono text-xs font-semibold\">{{ currentChapter.title }}</span>\n          </div>\n          <button\n            type=\"button\"\n            class=\"text-muted-foreground hover:text-foreground hover:bg-muted rounded-md p-1 transition-colors\"\n            @click=\"closeModal\"\n          >\n            <X class=\"size-4\" />\n          </button>\n        </div>\n\n        <!-- Simulated Video Playback Viewport -->\n        <div class=\"relative flex aspect-video flex-col justify-between bg-neutral-950 p-6 text-white select-none\">\n          <div class=\"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 class=\"flex flex-col items-center justify-center space-y-3\">\n            <div\n              class=\"flex size-16 items-center justify-center rounded-full border border-white/20 bg-white/10 backdrop-blur-md\"\n            >\n              <Play v-if=\"!isPlaying\" class=\"ml-1 size-7 fill-current\" />\n              <Pause v-else class=\"size-7\" />\n            </div>\n            <p class=\"max-w-md text-center font-mono text-xs text-neutral-400\">\n              {{ currentChapter.description }}\n            </p>\n          </div>\n\n          <!-- Timeline Scrubber & Controls -->\n          <div class=\"space-y-2\">\n            <!-- Progress Bar -->\n            <div class=\"h-1.5 w-full cursor-pointer overflow-hidden rounded-full bg-white/20\">\n              <div\n                class=\"bg-primary h-full transition-[width] duration-200\"\n                :style=\"{ width: `${progressPercent}%` }\"\n              />\n            </div>\n\n            <!-- Controls Row -->\n            <div class=\"flex items-center justify-between font-mono text-xs\">\n              <div class=\"flex items-center gap-3\">\n                <button type=\"button\" class=\"hover:text-primary transition-colors\" @click=\"togglePlay\">\n                  <Pause v-if=\"isPlaying\" class=\"size-4\" />\n                  <Play v-else class=\"size-4 fill-current\" />\n                </button>\n                <button type=\"button\" class=\"hover:text-primary transition-colors\" @click=\"isMuted = !isMuted\">\n                  <VolumeX v-if=\"isMuted\" class=\"size-4\" />\n                  <Volume2 v-else class=\"size-4\" />\n                </button>\n                <span class=\"text-neutral-400\">{{ currentChapter.timestamp }} / 3:30</span>\n              </div>\n\n              <div class=\"flex items-center gap-2\">\n                <button\n                  type=\"button\"\n                  class=\"rounded bg-white/10 px-2 py-0.5 transition-colors hover:bg-white/20\"\n                  @click=\"playbackSpeed = playbackSpeed === 1 ? 1.5 : playbackSpeed === 1.5 ? 2 : 1\"\n                >\n                  {{ playbackSpeed }}x\n                </button>\n                <button type=\"button\" class=\"hover:text-primary p-1 transition-colors\">\n                  <Maximize2 class=\"size-3.5\" />\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Modal Chapter Selector Footer -->\n        <div class=\"border-border bg-muted/20 grid grid-cols-3 border-t\">\n          <button\n            v-for=\"(ch, idx) in chapters\"\n            :key=\"ch.id\"\n            type=\"button\"\n            class=\"border-border border-r p-3 text-left font-mono text-xs transition-colors last:border-r-0\"\n            :class=\"\n              activeChapterIndex === idx\n                ? 'bg-background text-foreground font-semibold'\n                : 'text-muted-foreground hover:text-foreground'\n            \"\n            @click=\"activeChapterIndex = idx\"\n          >\n            <div class=\"truncate\">{{ ch.title }}</div>\n            <div class=\"text-muted-foreground mt-0.5 text-xs\">{{ ch.timestamp }}</div>\n          </button>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HeroVideoModalWalkthrough.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/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"
}