{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-segmented-compare",
  "title": "Features — Segmented Compare",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/feature-segmented-compare/FeatureSegmentedCompare.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Check, TriangleAlert } from 'lucide-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'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\nconst modes = [\n  {\n    id: 'live',\n    label: 'Live query',\n    summary: 'Every read hits the warehouse at request time.',\n    capabilities: [\n      'Always current, to the second',\n      'No storage footprint on our side',\n      'Row-level scope applied per query',\n    ],\n    constraints: ['Latency follows your warehouse', 'Each read is billable compute'],\n    recommendation: 'Use for exploratory analysis and anything finance signs off on.',\n  },\n  {\n    id: 'materialised',\n    label: 'Materialised',\n    summary: 'Aggregates are computed on a schedule you set.',\n    capabilities: [\n      'Sub-100ms reads at any concurrency',\n      'Warehouse cost bounded by the schedule',\n      'Freshness stamp shown with every figure',\n    ],\n    constraints: ['Stale between runs, by design', 'Backfills reprocess the window'],\n    recommendation: 'Use for dashboards opened dozens of times an hour.',\n  },\n]\n\nexport function FeatureSegmentedCompare() {\n  const [active, setActive] = useState(modes[0].id)\n  const current = modes.find((mode) => mode.id === active) ?? modes[0]\n\n  return (\n    <section data-slot=\"feature-segmented-compare\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <div className=\"flex flex-wrap items-end justify-between gap-6\">\n          <div className=\"max-w-xl\">\n            <Badge variant=\"secondary\">Execution modes</Badge>\n            <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">\n              Pick per metric, not per platform\n            </h2>\n          </div>\n\n          <ToggleGroup\n            value={active}\n            type=\"single\"\n            variant=\"outline\"\n            size=\"sm\"\n            aria-label=\"Choose an execution mode\"\n            onValueChange={(value: string) => value && setActive(value)}\n          >\n            {modes.map((mode) => (\n              <ToggleGroupItem key={mode.id} value={mode.id}>\n                {mode.label}\n              </ToggleGroupItem>\n            ))}\n          </ToggleGroup>\n        </div>\n\n        {/* min-h keeps the card from resizing between modes with different list\n            lengths, which would otherwise shift the page on every toggle. */}\n        <Card className=\"mt-8\">\n          <CardContent className=\"min-h-[22rem] p-6\">\n            <p className=\"text-lg leading-snug font-medium text-balance\">{current.summary}</p>\n\n            <Separator className=\"my-6\" />\n\n            <div className=\"grid gap-8 sm:grid-cols-2\">\n              <div>\n                <p className=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">What you get</p>\n                <ul className=\"mt-3 space-y-2.5\">\n                  {current.capabilities.map((capability) => (\n                    <li key={capability} className=\"flex items-start gap-2.5 text-sm\">\n                      <Check className=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                      <span>{capability}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n\n              <div>\n                <p className=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">What it costs you</p>\n                <ul className=\"mt-3 space-y-2.5\">\n                  {current.constraints.map((constraint) => (\n                    <li key={constraint} className=\"flex items-start gap-2.5 text-sm\">\n                      <TriangleAlert className=\"text-muted-foreground mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                      <span className=\"text-muted-foreground\">{constraint}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            </div>\n\n            <Separator className=\"my-6\" />\n\n            <p className=\"text-sm\">\n              <span className=\"font-medium\">Recommendation. </span>\n              <span className=\"text-muted-foreground\">{current.recommendation}</span>\n            </p>\n          </CardContent>\n        </Card>\n\n        <Button variant=\"ghost\" className=\"mt-6\">\n          Read how the planner chooses\n        </Button>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/FeatureSegmentedCompare.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/separator.json",
    "https://uipkge.dev/r/react/toggle-group.json"
  ],
  "description": "Segmented control switching one feature section between two operating modes, with the capability list, constraints, and a recommendation line changing per mode.",
  "categories": [
    "marketing"
  ]
}