{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "survey-6",
  "title": "Branching Qualification Survey",
  "description": "Branching sales qualification survey in a two-column split where the first answer disables questions that no longer apply, tracked by a path rail.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "questionnaire",
    "sonner"
  ],
  "files": [
    {
      "path": "registry/blocks/survey/6/survey-block.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\nimport { cn } from \"@/lib/utils\"\nimport {\n  Questionnaire,\n  QuestionnaireActions,\n  QuestionnaireChoice,\n  QuestionnaireChoiceDescription,\n  QuestionnaireChoices,\n  QuestionnaireDescription,\n  QuestionnaireError,\n  QuestionnaireInput,\n  QuestionnaireItem,\n  QuestionnaireNext,\n  QuestionnairePrevious,\n  QuestionnaireProgress,\n  QuestionnaireSkip,\n  QuestionnaireSubmit,\n  QuestionnaireTitle,\n} from \"@/components/ui/questionnaire\"\nimport { Toaster } from \"@/components/ui/sonner\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype Status = \"unanswered\" | \"answered\" | \"skipped\"\n\nconst STEPS = [\n  { name: \"intent\", label: \"What You Need\" },\n  { name: \"seats\", label: \"Team Size\" },\n  { name: \"timeline\", label: \"Timeline\" },\n  { name: \"contact\", label: \"Where To Reply\" },\n]\n\nconst INTENTS = [\n  {\n    value: \"personal\",\n    label: \"Just For Me\",\n    description: \"A single workspace, no one else to invite.\",\n  },\n  {\n    value: \"team\",\n    label: \"For My Team\",\n    description: \"A shared workspace with roles and permissions.\",\n  },\n  {\n    value: \"enterprise\",\n    label: \"For The Whole Company\",\n    description: \"Single sign on, audit logs, and a signed agreement.\",\n  },\n]\n\nconst SEATS = [\n  { value: \"2-10\", label: \"Two To Ten\" },\n  { value: \"11-50\", label: \"Eleven To Fifty\" },\n  { value: \"51-200\", label: \"Fifty One To Two Hundred\" },\n  { value: \"200+\", label: \"More Than Two Hundred\" },\n]\n\nconst TIMELINES = [\n  { value: \"now\", label: \"This Month\" },\n  { value: \"quarter\", label: \"This Quarter\" },\n  { value: \"later\", label: \"Still Deciding\" },\n]\n\nexport default function SurveyBlock() {\n  const [intent, setIntent] = React.useState<string | null>(null)\n  const [statuses, setStatuses] = React.useState<Record<string, Status>>({})\n\n  // A personal workspace has no seat count and no rollout date to agree on.\n  const teamOnly = intent !== null && intent !== \"personal\"\n  const skipTeamQuestions = intent === \"personal\"\n\n  const items = React.useMemo(\n    () => [\n      { name: \"intent\", required: true, choices: INTENTS },\n      { name: \"seats\", required: teamOnly, disabled: skipTeamQuestions },\n      { name: \"timeline\", disabled: skipTeamQuestions },\n      { name: \"contact\", required: true },\n    ],\n    [teamOnly, skipTeamQuestions]\n  )\n\n  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {\n    event.preventDefault()\n    const answers = new FormData(event.currentTarget)\n    const label =\n      INTENTS.find((option) => option.value === answers.get(\"intent\"))?.label ??\n      \"your answers\"\n\n    toast.success(\"We Have What We Need\", {\n      description: `Based on \"${label}\", the right specialist replies within one business day.`,\n    })\n  }\n\n  return (\n    <section className=\"w-full bg-background px-4 py-12 text-foreground sm:px-6 sm:py-16\">\n      <Questionnaire\n        items={items}\n        onSubmit={handleSubmit}\n        className=\"mx-auto max-w-5xl gap-8\"\n      >\n        <div className=\"grid gap-10 md:grid-cols-[minmax(0,14rem)_minmax(0,1fr)] md:gap-14\">\n          <PathRail\n            statuses={statuses}\n            disabled={skipTeamQuestions ? [\"seats\", \"timeline\"] : []}\n          />\n\n          <div className=\"flex min-w-0 flex-col gap-6\">\n            <div className=\"flex items-center justify-between gap-4\">\n              <p className=\"text-xs font-medium text-muted-foreground\">\n                Talk To Sales\n              </p>\n              <QuestionnaireProgress />\n            </div>\n\n            {/* Floored to the tallest question so the actions row stays put. */}\n            <div className=\"min-h-72\">\n              <QuestionnaireItem\n                name=\"intent\"\n                required\n                onStatusChange={(status) =>\n                  setStatuses((current) => ({ ...current, intent: status }))\n                }\n              >\n                <QuestionnaireTitle className=\"text-lg\">\n                  What Brings You To Acme?\n                </QuestionnaireTitle>\n                <QuestionnaireDescription>\n                  Your answer decides which questions come next.\n                </QuestionnaireDescription>\n                <QuestionnaireChoices>\n                  {INTENTS.map((option) => (\n                    <QuestionnaireChoice\n                      key={option.value}\n                      value={option.value}\n                      onChange={() => setIntent(option.value)}\n                    >\n                      <span className=\"font-medium\">{option.label}</span>\n                      <QuestionnaireChoiceDescription>\n                        {option.description}\n                      </QuestionnaireChoiceDescription>\n                    </QuestionnaireChoice>\n                  ))}\n                </QuestionnaireChoices>\n                <QuestionnaireError />\n              </QuestionnaireItem>\n\n              <QuestionnaireItem\n                name=\"seats\"\n                required={teamOnly}\n                disabled={skipTeamQuestions}\n                onStatusChange={(status) =>\n                  setStatuses((current) => ({ ...current, seats: status }))\n                }\n              >\n                <QuestionnaireTitle className=\"text-lg\">\n                  How Many People Need A Seat?\n                </QuestionnaireTitle>\n                <QuestionnaireDescription>\n                  A rough number is fine. It sets the pricing band.\n                </QuestionnaireDescription>\n                <QuestionnaireChoices>\n                  {SEATS.map((option) => (\n                    <QuestionnaireChoice\n                      key={option.value}\n                      value={option.value}\n                    >\n                      <span className=\"font-medium\">{option.label}</span>\n                    </QuestionnaireChoice>\n                  ))}\n                </QuestionnaireChoices>\n                <QuestionnaireError />\n              </QuestionnaireItem>\n\n              <QuestionnaireItem\n                name=\"timeline\"\n                disabled={skipTeamQuestions}\n                onStatusChange={(status) =>\n                  setStatuses((current) => ({ ...current, timeline: status }))\n                }\n              >\n                <QuestionnaireTitle className=\"text-lg\">\n                  When Do You Want To Start?\n                </QuestionnaireTitle>\n                <QuestionnaireDescription>\n                  Optional. Skip it if the date is not settled.\n                </QuestionnaireDescription>\n                <QuestionnaireChoices>\n                  {TIMELINES.map((option) => (\n                    <QuestionnaireChoice\n                      key={option.value}\n                      value={option.value}\n                    >\n                      <span className=\"font-medium\">{option.label}</span>\n                    </QuestionnaireChoice>\n                  ))}\n                </QuestionnaireChoices>\n                <QuestionnaireError />\n              </QuestionnaireItem>\n\n              <QuestionnaireItem\n                name=\"contact\"\n                required\n                onStatusChange={(status) =>\n                  setStatuses((current) => ({ ...current, contact: status }))\n                }\n              >\n                <QuestionnaireTitle className=\"text-lg\">\n                  Where Should We Send The Details?\n                </QuestionnaireTitle>\n                <QuestionnaireDescription>\n                  We reply once, with the plan that matches your answers.\n                </QuestionnaireDescription>\n                <QuestionnaireChoices>\n                  <QuestionnaireInput\n                    type=\"email\"\n                    aria-label=\"Work email address\"\n                    placeholder=\"you@company.com\"\n                  />\n                </QuestionnaireChoices>\n                <QuestionnaireError />\n              </QuestionnaireItem>\n            </div>\n\n            <QuestionnaireActions>\n              <QuestionnairePrevious />\n              <QuestionnaireSkip variant=\"ghost\" />\n              <QuestionnaireNext />\n              <QuestionnaireSubmit>Send</QuestionnaireSubmit>\n            </QuestionnaireActions>\n          </div>\n        </div>\n      </Questionnaire>\n      <Toaster />\n    </section>\n  )\n}\n\nfunction PathRail({\n  statuses,\n  disabled,\n}: {\n  statuses: Record<string, Status>\n  disabled: string[]\n}) {\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <p className=\"text-xs font-medium text-muted-foreground\">Your Path</p>\n      <ol className=\"flex flex-col gap-3\">\n        {STEPS.map((step) => {\n          const isOff = disabled.includes(step.name)\n          const isDone = !isOff && statuses[step.name] === \"answered\"\n          const isSkipped = !isOff && statuses[step.name] === \"skipped\"\n\n          return (\n            <li\n              key={step.name}\n              className={cn(\n                \"flex items-center gap-2.5 text-sm\",\n                isOff && \"text-muted-foreground/60 line-through\",\n                !isOff && !isDone && \"text-muted-foreground\"\n              )}\n            >\n              <span\n                aria-hidden=\"true\"\n                className={cn(\n                  \"flex size-4 shrink-0 items-center justify-center rounded-full border border-border\",\n                  isDone && \"border-primary bg-primary text-primary-foreground\"\n                )}\n              >\n                {isDone ? (\n                  <IconPlaceholder\n                    lucide=\"Check\"\n                    tabler=\"IconCheck\"\n                    hugeicons=\"Tick02Icon\"\n                    phosphor=\"Check\"\n                    remixicon=\"RiCheckLine\"\n                    className=\"size-3\"\n                  />\n                ) : null}\n              </span>\n              <span className={cn(isDone && \"text-foreground\")}>\n                {step.label}\n              </span>\n              {isOff ? (\n                <span className=\"ms-auto text-xs no-underline\">Not Needed</span>\n              ) : isSkipped ? (\n                <span className=\"ms-auto text-xs text-muted-foreground\">\n                  Skipped\n                </span>\n              ) : null}\n            </li>\n          )\n        })}\n      </ol>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/survey-6.tsx"
    }
  ],
  "meta": {
    "height": "520px",
    "tier": "free"
  },
  "categories": [
    "survey"
  ],
  "type": "registry:block"
}