{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "interactive-feature-showcase",
  "description": "InteractiveFeatureShowcase block",
  "files": [
    {
      "path": "blocks/interactive-feature-showcase/page.tsx",
      "content": "\"use client\"\n\nimport {\n  InteractiveFeatureShowcase,\n  VideoFeature,\n} from \"@/components/interactive-feature-showcase\"\n\n// Delta Components demos — shown at /blocks/landing-page\nconst sampleVideoFeatures: VideoFeature[] = [\n  {\n    id: \"chat\",\n    title: \"LLM Chat, ready to ship.\",\n    description:\n      \"A complete chat interface with streaming responses, file uploads, and model selection. Composable primitives let you build the exact chat UX you need.\",\n    videoSrc: \"/videos/chat-demo.mp4\",\n    videoTitle: \"LLM Chat demo\",\n    link: \"/docs/components/chat\",\n  },\n  {\n    id: \"cambio-image\",\n    title: \"Images that feel alive.\",\n    description:\n      \"Physics-based zoom transitions, blur-up loading, and gesture-driven dismissal. Drop in CambioImage anywhere you'd use a native <img>.\",\n    videoSrc: \"/videos/cambio-image-demo.mp4\",\n    videoTitle: \"Cambio Image demo\",\n    link: \"/docs/components/cambio-image\",\n  },\n  {\n    id: \"card-deck\",\n    title: \"A swipeable stack, physics included.\",\n    description:\n      \"Touch gestures, autoplay, and customizable motion. Perfect for mobile-first product tours, testimonials, or card-based browsing.\",\n    videoSrc: \"/videos/card-deck-demo.mp4\",\n    videoTitle: \"Card Deck demo\",\n    link: \"/docs/components/card-deck\",\n  },\n  {\n    id: \"product-card\",\n    title: \"Commerce UI, out of the box.\",\n    description:\n      \"A compound Product Card with multiple layout variants, flexible sizing, and interactive hover states. Drop into any storefront or listing.\",\n    videoSrc: \"/videos/product-card-demo.mp4\",\n    videoTitle: \"Product Card demo\",\n    link: \"/docs/components/product-card\",\n  },\n]\n\nexport default function InteractiveFeatureShowcasePage() {\n  return (\n    <div className=\"bg-background min-h-screen w-full\">\n      <div className=\"mx-auto max-w-7xl p-6\">\n        <div className=\"space-y-8\">\n          <div className=\"space-y-4 text-center\">\n            <h2 className=\"text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl\">\n              Built for modern interfaces\n            </h2>\n            <p className=\"text-muted-foreground mx-auto max-w-2xl text-base sm:text-lg\">\n              Delta Components ships molecular, production-ready primitives on\n              top of shadcn/ui — from AI chat to interactive media.\n            </p>\n          </div>\n\n          <InteractiveFeatureShowcase\n            features={sampleVideoFeatures}\n            variant=\"inner-card\"\n          />\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/interactive-feature-showcase/page.tsx"
    },
    {
      "path": "blocks/interactive-feature-showcase/components/interactive-feature-showcase.tsx",
      "content": "\"use client\"\n\nimport { ArrowUpRight } from \"lucide-react\"\n\nimport {\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\nexport interface VideoFeature {\n  id: string\n  title: string\n  description: string\n  /** URL to an iframe-hosted video (e.g. Vidzflow, YouTube embed). */\n  iframeSrc?: string\n  /** URL to a local or remote .mp4 / .webm file. Takes precedence over iframeSrc. */\n  videoSrc?: string\n  /** Optional poster image for the <video> element. */\n  poster?: string\n  videoTitle: string\n  link?: string\n}\n\ninterface VideoFeaturesGridProps {\n  features: VideoFeature[]\n  variant?: \"default\" | \"inner-card\"\n}\n\nexport function InteractiveFeatureShowcase({\n  features,\n  variant = \"default\",\n}: VideoFeaturesGridProps) {\n  return (\n    <div className=\"grid gap-4 md:grid-cols-2 md:gap-6 lg:gap-8\">\n      {features.map((feature) => (\n        <VideoFeatureCard\n          key={feature.id}\n          feature={feature}\n          variant={variant}\n        />\n      ))}\n    </div>\n  )\n}\n\nfunction MediaPlayer({ feature }: { feature: VideoFeature }) {\n  if (feature.videoSrc) {\n    return (\n      <video\n        src={feature.videoSrc}\n        poster={feature.poster}\n        title={feature.videoTitle}\n        className=\"h-full w-full object-cover\"\n        autoPlay\n        muted\n        loop\n        playsInline\n        preload=\"metadata\"\n      />\n    )\n  }\n  if (feature.iframeSrc) {\n    return (\n      <iframe\n        width=\"100%\"\n        height=\"100%\"\n        src={feature.iframeSrc}\n        title={feature.videoTitle}\n        className=\"h-full w-full border-0\"\n        scrolling=\"no\"\n        allow=\"fullscreen\"\n      />\n    )\n  }\n  return null\n}\n\nfunction VideoFeatureCard({\n  feature,\n  variant = \"default\",\n}: {\n  feature: VideoFeature\n  variant?: \"default\" | \"inner-card\"\n}) {\n  if (variant === \"inner-card\") {\n    return (\n      <div className=\"border-border bg-card flex flex-col overflow-hidden rounded-sm border p-6\">\n        <div className=\"mb-8 space-y-6\">\n          <CardHeader className=\"p-0\">\n            <CardTitle className=\"text-xl md:text-2xl\">\n              {feature.title}\n            </CardTitle>\n            <CardDescription className=\"text-base leading-relaxed\">\n              {feature.description}\n            </CardDescription>\n          </CardHeader>\n          {feature.link && (\n            <a\n              href={feature.link}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              className=\"text-foreground group hover:text-foreground/80 inline-flex items-center gap-1.5 text-base font-medium transition-colors\"\n            >\n              Learn more\n              <ArrowUpRight className=\"h-4 w-4 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\" />\n            </a>\n          )}\n        </div>\n        <div className=\"aspect-square flex-1 overflow-hidden rounded-sm\">\n          <MediaPlayer feature={feature} />\n        </div>\n      </div>\n    )\n  }\n\n  // Default variant\n  const content = (\n    <>\n      <div className=\"mb-8\">\n        <div className=\"aspect-square overflow-hidden rounded-sm\">\n          <MediaPlayer feature={feature} />\n        </div>\n      </div>\n      <CardHeader className=\"max-w-md space-y-3 p-0\">\n        <CardTitle className=\"text-xl md:text-2xl\">{feature.title}</CardTitle>\n        <CardDescription className=\"text-base leading-relaxed\">\n          {feature.description}\n        </CardDescription>\n      </CardHeader>\n    </>\n  )\n\n  if (feature.link) {\n    return (\n      <a\n        href={feature.link}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"group block transition-all duration-200 hover:opacity-90\"\n      >\n        {content}\n      </a>\n    )\n  }\n\n  return <div>{content}</div>\n}\n",
      "type": "registry:component",
      "target": "components/interactive-feature-showcase.tsx"
    }
  ],
  "meta": {
    "iframeHeight": "800px",
    "container": "w-full",
    "mobile": "component"
  },
  "categories": [
    "landing-page"
  ],
  "type": "registry:block"
}