{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-cases-industry-grid",
  "title": "Use Cases — Industry Grid",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/use-cases-industry-grid/UseCasesIndustryGrid.tsx",
      "content": "'use client'\n\nimport { useMemo, useState } from 'react'\nimport { ArrowUpRight, Banknote, Factory, HeartPulse, ShoppingCart, Ship, Truck } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\nconst useCases = [\n  {\n    icon: Banknote,\n    segment: 'Financial services',\n    title: 'Close the books without a spreadsheet relay',\n    body: 'Ledger-reconciled metrics that lock on period close, with an auditable trail for every restatement.',\n    metric: '5 days off close',\n  },\n  {\n    icon: HeartPulse,\n    segment: 'Healthcare',\n    title: 'Report on care quality without exposing PHI',\n    body: 'Row-level scoping evaluated per query, so a shared dashboard never leaks a chart the viewer cannot open.',\n    metric: 'HIPAA-scoped by default',\n  },\n  {\n    icon: ShoppingCart,\n    segment: 'Retail',\n    title: 'One margin definition across every channel',\n    body: 'Store, marketplace, and wholesale roll up to the same certified metric instead of three competing exports.',\n    metric: '3 channels, 1 number',\n  },\n  {\n    icon: Truck,\n    segment: 'Logistics',\n    title: 'Track service levels against the contract',\n    body: 'On-time thresholds encoded per customer contract, so breach reporting stops being a manual comparison.',\n    metric: '98.2% SLA visibility',\n  },\n  {\n    icon: Factory,\n    segment: 'Manufacturing',\n    title: 'Yield reporting that survives a line change',\n    body: 'Definitions version with the production line, so last quarter’s numbers stay comparable after a retool.',\n    metric: '12 lines reconciled',\n  },\n  {\n    icon: Ship,\n    segment: 'Logistics',\n    title: 'Landed cost per shipment, not per guess',\n    body: 'Freight, duty, and demurrage join at query time against the booking rather than a monthly allocation.',\n    metric: 'Per-shipment costing',\n  },\n]\n\nconst ALL = 'All'\nconst segments = [ALL, ...new Set(useCases.map((useCase) => useCase.segment))]\n\nexport function UseCasesIndustryGrid() {\n  const [active, setActive] = useState(ALL)\n  const visible = useMemo(\n    () => (active === ALL ? useCases : useCases.filter((useCase) => useCase.segment === active)),\n    [active],\n  )\n\n  return (\n    <section data-slot=\"use-cases-industry-grid\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"flex flex-wrap items-end justify-between gap-6\">\n          <div className=\"max-w-2xl\">\n            <Badge variant=\"secondary\">By industry</Badge>\n            <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Where teams start</h2>\n            <p className=\"text-muted-foreground mt-3 text-lg\">\n              Six rollouts we run often enough to have opinions about. Filter to yours.\n            </p>\n          </div>\n\n          <ToggleGroup\n            value={active}\n            type=\"single\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-nowrap overflow-x-auto\"\n            aria-label=\"Filter use cases by industry\"\n            // Single-select emits '' when the active item is pressed again;\n            // fall back to ALL so the grid can never end up empty.\n            onValueChange={(value: string) => setActive(value || ALL)}\n          >\n            {segments.map((segment) => (\n              <ToggleGroupItem key={segment} value={segment}>\n                {segment}\n              </ToggleGroupItem>\n            ))}\n          </ToggleGroup>\n        </div>\n\n        <div className=\"mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3\">\n          {visible.map((useCase) => (\n            <Card key={useCase.title} className=\"group\">\n              <CardContent className=\"flex h-full flex-col p-6\">\n                <useCase.icon className=\"text-muted-foreground size-5\" aria-hidden=\"true\" />\n                <p className=\"text-muted-foreground mt-4 font-mono text-xs tracking-[0.14em] uppercase\">\n                  {useCase.segment}\n                </p>\n                <h3 className=\"mt-2 text-base leading-snug font-semibold\">{useCase.title}</h3>\n                <p className=\"text-muted-foreground mt-2 text-sm leading-relaxed\">{useCase.body}</p>\n\n                <div className=\"border-border mt-auto flex items-center justify-between gap-3 border-t pt-4\">\n                  <span className=\"text-sm font-medium\">{useCase.metric}</span>\n                  <Button variant=\"ghost\" size=\"sm\" className=\"h-auto px-2 py-1\">\n                    Read\n                    <ArrowUpRight\n                      className=\"ml-1 size-3.5 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                      aria-hidden=\"true\"\n                    />\n                  </Button>\n                </div>\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/UseCasesIndustryGrid.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "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/toggle-group.json"
  ],
  "description": "Filterable industry use-case grid: segment chips narrow a six-card grid in place, each card carrying an icon, industry label, outcome headline, proof metric, and a quiet read-more link.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "use-cases"
}