{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "social-proof-video-wall",
  "title": "Social Proof Video Wall",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/social-proof-video-wall/SocialProofVideoWall.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowRight, Play, Video, X } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface VideoTestimonial {\n  id: string\n  name: string\n  role: string\n  company: string\n  category: 'fintech' | 'saas' | 'ai'\n  quote: string\n  duration: string\n  metricHighlight: string\n  metricLabel: string\n}\n\nexport interface SocialProofVideoWallProps {\n  title?: string\n  description?: string\n  testimonials?: VideoTestimonial[]\n  class?: string\n}\n\nconst DEFAULT_TESTIMONIALS: VideoTestimonial[] = [\n  {\n    id: 'story-1',\n    name: 'Elena Rostova',\n    role: 'Staff Frontend Architect',\n    company: 'FinFlow Global',\n    category: 'fintech',\n    quote:\n      'Unbundled components gave our core engineering team complete ownership over PCI-compliant ledger tables without maintaining a bloated bespoke fork.',\n    duration: '2:14',\n    metricHighlight: '4.2x Faster',\n    metricLabel: 'Sprint delivery velocity',\n  },\n  {\n    id: 'story-2',\n    name: 'Marcus Vance',\n    role: 'VP of Engineering',\n    company: 'Synthetix AI',\n    category: 'ai',\n    quote:\n      'Our AI canvas needed sub-millisecond AST updates. Copying pure Vue and React primitives eliminated hours of npm dependency version conflicts.',\n    duration: '1:48',\n    metricHighlight: '&minus;380 KB',\n    metricLabel: 'Zero runtime bundle overhead',\n  },\n  {\n    id: 'story-3',\n    name: 'Sarah Chen',\n    role: 'Head of Product Design',\n    company: 'Linearis Cloud',\n    category: 'saas',\n    quote:\n      'The Tailwind v4 token system and OKLCH color palettes match our design system tokens 1:1. Zero translation friction between Figma and code.',\n    duration: '3:05',\n    metricHighlight: '100% Token Sync',\n    metricLabel: 'Figma to code parity',\n  },\n  {\n    id: 'story-4',\n    name: 'Devon Wright',\n    role: 'Principal Engineer',\n    company: 'OmniStream Data',\n    category: 'saas',\n    quote:\n      'We replaced 14 disparate npm UI libraries with a single clean registry pull. Full keyboard ergonomics and ARIA compliance right out of the box.',\n    duration: '2:30',\n    metricHighlight: '14 &rarr; 1',\n    metricLabel: 'Vendor dependency consolidation',\n  },\n]\n\nconst props = withDefaults(defineProps<SocialProofVideoWallProps>(), {\n  title: 'Trusted by world-class design engineers and platform architects.',\n  description:\n    'Discover how high-velocity engineering organizations leverage unbundled UI primitives to build ultra-fast, accessible products.',\n})\n\nconst selectedCategory = ref<'all' | 'fintech' | 'saas' | 'ai'>('all')\nconst activeVideo = ref<VideoTestimonial | null>(null)\n\nconst activeTestimonials = computed(() => props.testimonials ?? DEFAULT_TESTIMONIALS)\n\nconst filteredTestimonials = computed(() => {\n  if (selectedCategory.value === 'all') return activeTestimonials.value\n  return activeTestimonials.value.filter((t) => t.category === selectedCategory.value)\n})\n\nfunction openVideoModal(t: VideoTestimonial) {\n  activeVideo.value = t\n}\n\nfunction closeVideoModal() {\n  activeVideo.value = null\n}\n</script>\n\n<template>\n  <section\n    data-slot=\"social-proof-video-wall\"\n    :class=\"cn('bg-background relative overflow-hidden py-16 sm:py-24', props.class)\"\n  >\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mx-auto max-w-3xl space-y-4 text-center\">\n        <a\n          href=\"#customer-stories\"\n          class=\"group border-border/80 bg-secondary/60 hover:bg-secondary text-foreground inline-flex items-center gap-2 rounded-full border px-3.5 py-1 text-xs font-medium shadow-2xs transition-colors\"\n        >\n          <Video class=\"text-primary size-3.5\" />\n          <span>Engineering Case Studies</span>\n          <ArrowRight class=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n        </a>\n\n        <h2 class=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">\n          {{ title }}\n        </h2>\n\n        <p class=\"text-muted-foreground text-base sm:text-lg\">\n          {{ description }}\n        </p>\n\n        <!-- Category Filter Tabs -->\n        <div class=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n          <button\n            v-for=\"cat in [\n              { id: 'all', label: 'All Customer Stories' },\n              { id: 'saas', label: 'Enterprise SaaS' },\n              { id: 'fintech', label: 'Fintech & Security' },\n              { id: 'ai', label: 'AI & Data Platforms' },\n            ]\"\n            :key=\"cat.id\"\n            type=\"button\"\n            :class=\"\n              cn(\n                'rounded-lg border px-3 py-1.5 text-xs font-medium transition-colors',\n                selectedCategory === cat.id\n                  ? 'border-primary bg-primary/10 text-primary font-semibold'\n                  : 'border-border bg-card text-muted-foreground hover:text-foreground',\n              )\n            \"\n            @click=\"selectedCategory = cat.id as any\"\n          >\n            {{ cat.label }}\n          </button>\n        </div>\n      </div>\n\n      <!-- Video Grid (2x2) -->\n      <div class=\"mt-12 grid grid-cols-1 gap-6 md:grid-cols-2\">\n        <Card\n          v-for=\"item in filteredTestimonials\"\n          :key=\"item.id\"\n          class=\"group border-border bg-card hover:border-primary/40 relative flex flex-col justify-between overflow-hidden shadow-xs transition-colors hover:shadow-sm\"\n        >\n          <CardContent class=\"space-y-5 p-6\">\n            <!-- Simulated Video Preview Banner -->\n            <div\n              class=\"border-border bg-muted/60 group/video relative flex aspect-16/9 w-full cursor-pointer items-center justify-center overflow-hidden rounded-lg border\"\n              @click=\"openVideoModal(item)\"\n            >\n              <!-- Center Play Icon -->\n              <div\n                class=\"bg-background/90 text-primary flex size-12 items-center justify-center rounded-full shadow-md transition-transform group-hover/video:scale-110\"\n              >\n                <Play class=\"fill-primary size-5 pl-0.5\" />\n              </div>\n\n              <!-- Top Pill (Duration) -->\n              <div\n                class=\"bg-background/80 text-foreground absolute right-2.5 bottom-2.5 rounded px-2 py-0.5 font-mono text-xs font-medium backdrop-blur-xs\"\n              >\n                {{ item.duration }}\n              </div>\n\n              <!-- Top Left Tag -->\n              <div class=\"absolute top-2.5 left-2.5\">\n                <Badge\n                  variant=\"outline\"\n                  class=\"border-border/80 bg-background/80 font-mono text-xs tracking-wider uppercase backdrop-blur-xs\"\n                >\n                  {{ item.company }}\n                </Badge>\n              </div>\n            </div>\n\n            <!-- Quote & Speaker Details -->\n            <div class=\"space-y-3\">\n              <p class=\"text-muted-foreground text-xs leading-relaxed italic\">&ldquo;{{ item.quote }}&rdquo;</p>\n\n              <div class=\"border-border/80 flex items-center justify-between border-t pt-3\">\n                <div>\n                  <div class=\"text-foreground text-xs font-bold\">{{ item.name }}</div>\n                  <div class=\"text-muted-foreground text-xs\">{{ item.role }} &bull; {{ item.company }}</div>\n                </div>\n\n                <div class=\"text-right\">\n                  <div class=\"text-success font-mono text-sm font-bold\" v-html=\"item.metricHighlight\" />\n                  <div class=\"text-muted-foreground text-xs\">{{ item.metricLabel }}</div>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n\n      <!-- Video Modal Simulation -->\n      <div\n        v-if=\"activeVideo\"\n        class=\"bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm\"\n        @click.self=\"closeVideoModal\"\n      >\n        <div class=\"border-border bg-card relative w-full max-w-2xl space-y-4 rounded-xl border p-6 shadow-sm\">\n          <div class=\"border-border flex items-center justify-between border-b pb-3\">\n            <div class=\"flex items-center gap-2\">\n              <Video class=\"text-primary size-4\" />\n              <span class=\"text-foreground text-sm font-bold\"\n                >{{ activeVideo.company }} &bull; Architecture Deep-Dive</span\n              >\n            </div>\n            <button\n              type=\"button\"\n              class=\"text-muted-foreground hover:text-foreground rounded-md p-1\"\n              @click=\"closeVideoModal\"\n            >\n              <X class=\"size-4\" />\n            </button>\n          </div>\n\n          <!-- Video Play Area -->\n          <div\n            class=\"border-border bg-muted/40 flex aspect-16/9 w-full flex-col items-center justify-center space-y-2 rounded-lg border p-6 text-center\"\n          >\n            <div\n              class=\"bg-primary text-primary-foreground flex size-14 animate-pulse items-center justify-center rounded-full shadow-lg\"\n            >\n              <Play class=\"fill-primary-foreground size-6 pl-0.5\" />\n            </div>\n            <div class=\"text-foreground text-xs font-bold\">Streaming Case Study (HD 1080p)</div>\n            <div class=\"text-muted-foreground text-xs\">{{ activeVideo.name }} &bull; {{ activeVideo.role }}</div>\n          </div>\n\n          <div class=\"text-muted-foreground text-xs\">&ldquo;{{ activeVideo.quote }}&rdquo;</div>\n        </div>\n      </div>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/social-proof-video-wall/SocialProofVideoWall.vue"
    },
    {
      "path": "packages/registry-vue/blocks/social-proof-video-wall/index.ts",
      "content": "export { default as SocialProofVideoWall } from './SocialProofVideoWall.vue'\nexport type { SocialProofVideoWallProps, VideoTestimonial } from './SocialProofVideoWall.vue'\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/social-proof-video-wall/index.ts"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/card.json"
  ],
  "description": "Engineering case study and video testimonial wall with playback simulation, category filtering, and metric highlights.",
  "categories": [
    "marketing",
    "feature"
  ]
}