{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "social-proof-video-wall",
  "title": "Social Proof Video Wall",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/social-proof-video-wall/SocialProofVideoWall.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowRight, Play, Video, X } from 'lucide-react'\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  className?: 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: '-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 -> 1',\n    metricLabel: 'Vendor dependency consolidation',\n  },\n]\n\nexport function SocialProofVideoWall({\n  title = 'Trusted by world-class design engineers and platform architects.',\n  description = 'Discover how high-velocity engineering organizations leverage unbundled UI primitives to build ultra-fast, accessible products.',\n  testimonials = DEFAULT_TESTIMONIALS,\n  className,\n}: SocialProofVideoWallProps) {\n  const [selectedCategory, setSelectedCategory] = React.useState<'all' | 'fintech' | 'saas' | 'ai'>('all')\n  const [activeVideo, setActiveVideo] = React.useState<VideoTestimonial | null>(null)\n\n  const filteredTestimonials = React.useMemo(() => {\n    if (selectedCategory === 'all') return testimonials\n    return testimonials.filter((t) => t.category === selectedCategory)\n  }, [testimonials, selectedCategory])\n\n  return (\n    <section\n      data-slot=\"social-proof-video-wall\"\n      className={cn('bg-background relative overflow-hidden py-16 sm:py-24', className)}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"mx-auto max-w-3xl space-y-4 text-center\">\n          <a\n            href=\"#customer-stories\"\n            className=\"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 className=\"text-primary size-3.5\" />\n            <span>Engineering Case Studies</span>\n            <ArrowRight className=\"text-muted-foreground size-3 transition-transform group-hover:translate-x-0.5\" />\n          </a>\n\n          <h2 className=\"text-foreground text-3xl font-bold tracking-tight sm:text-4xl\">{title}</h2>\n\n          <p className=\"text-muted-foreground text-base sm:text-lg\">{description}</p>\n\n          {/* Category Filter Tabs */}\n          <div className=\"flex flex-wrap items-center justify-center gap-2 pt-2\">\n            {[\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            ].map((cat) => (\n              <button\n                key={cat.id}\n                type=\"button\"\n                className={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                onClick={() => setSelectedCategory(cat.id as any)}\n              >\n                {cat.label}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {/* Video Grid (2x2) */}\n        <div className=\"mt-12 grid grid-cols-1 gap-6 md:grid-cols-2\">\n          {filteredTestimonials.map((item) => (\n            <Card\n              key={item.id}\n              className=\"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 className=\"space-y-5 p-6\">\n                {/* Simulated Video Preview Banner */}\n                <div\n                  className=\"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                  onClick={() => setActiveVideo(item)}\n                >\n                  {/* Center Play Icon */}\n                  <div className=\"bg-background/90 text-primary flex size-12 items-center justify-center rounded-full shadow-md transition-transform group-hover/video:scale-110\">\n                    <Play className=\"fill-primary size-5 pl-0.5\" />\n                  </div>\n\n                  {/* Top Pill (Duration) */}\n                  <div className=\"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                    {item.duration}\n                  </div>\n\n                  {/* Top Left Tag */}\n                  <div className=\"absolute top-2.5 left-2.5\">\n                    <Badge\n                      variant=\"outline\"\n                      className=\"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 className=\"space-y-3\">\n                  <p className=\"text-muted-foreground text-xs leading-relaxed italic\">&ldquo;{item.quote}&rdquo;</p>\n\n                  <div className=\"border-border/80 flex items-center justify-between border-t pt-3\">\n                    <div>\n                      <div className=\"text-foreground text-xs font-bold\">{item.name}</div>\n                      <div className=\"text-muted-foreground text-xs\">\n                        {item.role} &bull; {item.company}\n                      </div>\n                    </div>\n\n                    <div className=\"text-right\">\n                      <div className=\"text-success font-mono text-sm font-bold\">{item.metricHighlight}</div>\n                      <div className=\"text-muted-foreground text-xs\">{item.metricLabel}</div>\n                    </div>\n                  </div>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n\n        {/* Video Modal Simulation */}\n        {activeVideo && (\n          <div\n            className=\"bg-background/80 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm\"\n            onClick={() => setActiveVideo(null)}\n          >\n            <div\n              className=\"border-border bg-card relative w-full max-w-2xl space-y-4 rounded-xl border p-6 shadow-sm\"\n              onClick={(e) => e.stopPropagation()}\n            >\n              <div className=\"border-border flex items-center justify-between border-b pb-3\">\n                <div className=\"flex items-center gap-2\">\n                  <Video className=\"text-primary size-4\" />\n                  <span className=\"text-foreground text-sm font-bold\">\n                    {activeVideo.company} &bull; Architecture Deep-Dive\n                  </span>\n                </div>\n                <button\n                  type=\"button\"\n                  className=\"text-muted-foreground hover:text-foreground rounded-md p-1\"\n                  onClick={() => setActiveVideo(null)}\n                >\n                  <X className=\"size-4\" />\n                </button>\n              </div>\n\n              {/* Video Play Area */}\n              <div className=\"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                <div className=\"bg-primary text-primary-foreground flex size-14 animate-pulse items-center justify-center rounded-full shadow-lg\">\n                  <Play className=\"fill-primary-foreground size-6 pl-0.5\" />\n                </div>\n                <div className=\"text-foreground text-xs font-bold\">Streaming Case Study (HD 1080p)</div>\n                <div className=\"text-muted-foreground text-xs\">\n                  {activeVideo.name} &bull; {activeVideo.role}\n                </div>\n              </div>\n\n              <div className=\"text-muted-foreground text-xs\">&ldquo;{activeVideo.quote}&rdquo;</div>\n            </div>\n          </div>\n        )}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/social-proof-video-wall/SocialProofVideoWall.tsx"
    },
    {
      "path": "packages/registry-react/blocks/social-proof-video-wall/index.ts",
      "content": "export { SocialProofVideoWall } from './SocialProofVideoWall'\nexport type { SocialProofVideoWallProps, VideoTestimonial } from './SocialProofVideoWall'\n",
      "type": "registry:block",
      "target": "~/components/blocks/social-proof-video-wall/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Engineering case study and video testimonial wall with playback simulation, category filtering, and metric highlights.",
  "categories": [
    "marketing",
    "feature"
  ]
}