{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-accordion-media",
  "title": "Features — Accordion with Media",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-accordion-media/FeatureAccordionMedia.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\n\nconst features = [\n  {\n    id: 'catalog',\n    title: 'Catalogue what exists',\n    body: 'The schema mirror lists every table and column with its freshness, so modelling starts from what is actually there rather than what the docs claim.',\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: 'review',\n    title: 'Review before it ships',\n    body: 'Definition changes open a pull request. Reviewers see the diff, the consumers affected, and the reconciliation result against prior quarters.',\n    rows: [\n      { name: '+ window: trailing_28d', detail: 'added' },\n      { name: '- window: trailing_30d', detail: 'removed' },\n      { name: '41 consumers affected', detail: 'checked' },\n    ],\n  },\n  {\n    id: 'observe',\n    title: 'Watch it after it ships',\n    body: 'Freshness and drift alerts fire against certified metrics and route to the owner named in the definition, not a shared inbox.',\n    rows: [\n      { name: 'revenue_net', detail: 'within threshold' },\n      { name: 'margin_by_channel', detail: 'within threshold' },\n      { name: 'pipeline_weighted', detail: 'drift · owner paged' },\n    ],\n  },\n]\n\nexport function FeatureAccordionMedia() {\n  const [open, setOpen] = useState(features[0].id)\n  // The pane follows the open item; falling back to the first keeps the pane\n  // populated when everything is collapsed.\n  const active = features.find((feature) => feature.id === open) ?? features[0]\n\n  return (\n    <section data-slot=\"feature-accordion-media\" 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\">Workflow</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Three habits, one loop</h2>\n        </div>\n\n        <div className=\"mt-10 grid gap-8 lg:grid-cols-2 lg:gap-12\">\n          <Accordion value={open} onValueChange={setOpen} type=\"single\" collapsible className=\"w-full\">\n            {features.map((feature) => (\n              <AccordionItem key={feature.id} value={feature.id}>\n                <AccordionTrigger className=\"text-left font-medium\">{feature.title}</AccordionTrigger>\n                <AccordionContent className=\"text-muted-foreground leading-relaxed\">\n                  {feature.body}\n                  {/* Inline pane below the breakpoint, where a side pane would be\n                      too narrow to read. */}\n                  <Card className=\"mt-4 lg:hidden\">\n                    <CardContent className=\"p-0\">\n                      <ul className=\"divide-border divide-y\">\n                        {feature.rows.map((row) => (\n                          <li key={row.name} className=\"flex items-center justify-between gap-3 px-4 py-2.5\">\n                            <span className=\"text-foreground min-w-0 truncate font-mono text-xs\">{row.name}</span>\n                            <span className=\"shrink-0 text-xs\">{row.detail}</span>\n                          </li>\n                        ))}\n                      </ul>\n                    </CardContent>\n                  </Card>\n                </AccordionContent>\n              </AccordionItem>\n            ))}\n          </Accordion>\n\n          <Card className=\"hidden self-start lg:block\">\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                {active.title}\n              </div>\n              <ul className=\"divide-border divide-y\">\n                {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            </CardContent>\n          </Card>\n        </div>\n\n        <Button variant=\"ghost\" className=\"mt-8\">\n          See the full workflow\n        </Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/FeatureAccordionMedia.tsx"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/accordion.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "Single-open accordion of features beside a media pane that follows the open item, collapsing to inline panes on narrow screens where a side pane would be unreadable.",
  "categories": [
    "marketing"
  ]
}