{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-sticky-media-scroll",
  "title": "Features — Sticky Media Scroll",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-sticky-media-scroll/FeatureStickyMediaScroll.tsx",
      "content": "'use client'\n\nimport { useEffect, useRef, useState } from 'react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst sections = [\n  {\n    id: 'connect',\n    title: 'Point at the warehouse',\n    body: 'A read-only role is the whole integration. We mirror the schema, record freshness per table, and flag anything that looks abandoned before you model against it.',\n    rows: [\n      { name: 'warehouse.orders', detail: 'fresh · 2 min' },\n      { name: 'warehouse.refunds', detail: 'fresh · 2 min' },\n      { name: 'legacy.orders_v1', detail: 'stale · 41 days' },\n    ],\n  },\n  {\n    id: 'model',\n    title: 'Write the definition once',\n    body: 'Revenue, margin, and pipeline become files with owners. Every consumer resolves the same definition, so the exec summary and the close pack cannot disagree.',\n    rows: [\n      { name: 'revenue_net', detail: 'v128 · finance' },\n      { name: 'margin_by_channel', detail: 'v41 · finance' },\n      { name: 'pipeline_weighted', detail: 'v12 · revops' },\n    ],\n  },\n  {\n    id: 'serve',\n    title: 'Serve it everywhere',\n    body: 'Dashboards, scheduled exports, and the API read the same certified metric with the caller’s own scope applied, and each result carries the freshness it was served at.',\n    rows: [\n      { name: 'Exec summary', detail: 'live' },\n      { name: 'Finance close pack', detail: 'live' },\n      { name: 'Partner API', detail: 'live' },\n    ],\n  },\n]\n\nexport function FeatureStickyMediaScroll() {\n  const [active, setActive] = useState(0)\n  const root = useRef<HTMLElement | null>(null)\n\n  useEffect(() => {\n    // Without IntersectionObserver the pinned pane simply stays on the first\n    // section and the page reads as stacked copy-and-visual pairs.\n    if (typeof IntersectionObserver === 'undefined' || !root.current) return\n    const targets = root.current.querySelectorAll<HTMLElement>('[data-section]')\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (!entry.isIntersecting) continue\n          const index = Number((entry.target as HTMLElement).dataset.section)\n          if (!Number.isNaN(index)) setActive(index)\n        }\n      },\n      { rootMargin: '-45% 0px -45% 0px' },\n    )\n    targets.forEach((target) => observer.observe(target))\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <section ref={root} data-slot=\"feature-sticky-media-scroll\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">How it fits together</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Three moves, in order</h2>\n        </div>\n\n        <div className=\"mt-12 grid gap-10 lg:grid-cols-2 lg:gap-16\">\n          <div className=\"space-y-20 lg:space-y-32\">\n            {sections.map((section, index) => (\n              <div key={section.id} data-section={index} className=\"scroll-mt-32\">\n                <p className=\"text-muted-foreground font-mono text-xs\">{String(index + 1).padStart(2, '0')}</p>\n                <h3 className=\"mt-2 text-2xl font-semibold tracking-tight text-balance\">{section.title}</h3>\n                <p className=\"text-muted-foreground mt-3 max-w-prose leading-relaxed\">{section.body}</p>\n\n                {/* Inline card below the breakpoint, where nothing can pin usefully. */}\n                <Card className=\"mt-5 lg:hidden\">\n                  <CardContent className=\"p-0\">\n                    <ul className=\"divide-border divide-y\">\n                      {section.rows.map((row) => (\n                        <li key={row.name} className=\"flex items-center justify-between gap-3 px-4 py-2.5\">\n                          <span className=\"min-w-0 truncate font-mono text-xs\">{row.name}</span>\n                          <span className=\"text-muted-foreground shrink-0 text-xs\">{row.detail}</span>\n                        </li>\n                      ))}\n                    </ul>\n                  </CardContent>\n                </Card>\n              </div>\n            ))}\n          </div>\n\n          <div className=\"hidden lg:sticky lg:top-24 lg:block lg:h-fit\">\n            <Card>\n              <CardContent className=\"p-0\">\n                <div className=\"border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs\">\n                  {sections[active].title}\n                </div>\n                <ul className=\"divide-border min-h-[9rem] divide-y\">\n                  {sections[active].rows.map((row) => (\n                    <li key={row.name} className=\"flex items-center justify-between gap-3 px-4 py-3\">\n                      <span className=\"min-w-0 truncate font-mono text-xs\">{row.name}</span>\n                      <span className=\"text-muted-foreground shrink-0 text-xs\">{row.detail}</span>\n                    </li>\n                  ))}\n                </ul>\n                <Separator />\n                <p className=\"text-muted-foreground px-4 py-2.5 text-xs\">\n                  Step {active + 1} of {sections.length}\n                </p>\n              </CardContent>\n            </Card>\n          </div>\n        </div>\n\n        <Button variant=\"outline\" className=\"mt-12\">\n          Start the walkthrough\n        </Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/FeatureStickyMediaScroll.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Deep-dive where the visual pins while the copy scrolls beside it, the pinned pane swapping content as each section enters view, degrading to stacked pairs without observers.",
  "categories": [
    "marketing"
  ]
}