Questionnaire

TSX
"use client";

import * as React from "react";

import { Button } from "@/components/ui/button";
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire";

const answers = [
  { value: "found-it", label: "Yes, first try" },
  { value: "after-refining", label: "Yes, after refining my search" },
  { value: "partially", label: "Only partially" },
  { value: "not-found", label: "No, I gave up" },
];

export default function Questionnaire01() {
  const [answer, setAnswer] = React.useState<string | null>(null);

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setAnswer(String(data.get("search-result")));
  }

  if (answer) {
    const label = answers.find((item) => item.value === answer)?.label;
    return (
      <div
        className="flex w-full max-w-sm flex-col items-start gap-3"
        aria-live="polite"
      >
        <p className="text-base font-medium">Thanks, that helps.</p>
        <p className="text-sm text-muted-foreground">
          You answered{" "}
          <span className="font-medium text-foreground">{label}</span>. We use
          this to tune search ranking for everyone on your team.
        </p>
        <Button
          variant="ghost"
          size="sm"
          className="-ms-2.5"
          onClick={() => setAnswer(null)}
        >
          Change answer
        </Button>
      </div>
    );
  }

  return (
    <Questionnaire onSubmit={handleSubmit} className="max-w-sm">
      <QuestionnaireItem name="search-result" required>
        <QuestionnaireTitle>
          Did you find what you were looking for?
        </QuestionnaireTitle>
        <QuestionnaireDescription>
          Your last search was &ldquo;invoice template&rdquo;.
        </QuestionnaireDescription>
        <QuestionnaireChoices>
          {answers.map((item) => (
            <QuestionnaireChoice key={item.value} value={item.value}>
              {item.label}
            </QuestionnaireChoice>
          ))}
        </QuestionnaireChoices>
        <QuestionnaireError />
      </QuestionnaireItem>
      <QuestionnaireActions>
        <QuestionnaireSubmit>Send feedback</QuestionnaireSubmit>
      </QuestionnaireActions>
    </Questionnaire>
  );
}

TSX
"use client";

import * as React from "react";
import {
  BriefcaseIcon,
  CodeIcon,
  GraduationCapIcon,
  PaletteIcon,
  RocketIcon,
  UserIcon,
  UsersIcon,
} from "lucide-react";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoiceDescription,
  QuestionnaireChoices,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire";

const useCases = [
  {
    value: "product",
    icon: RocketIcon,
    label: "Ship a product",
    description: "Roadmaps, sprints, and release notes",
  },
  {
    value: "design",
    icon: PaletteIcon,
    label: "Run design reviews",
    description: "Share files and collect feedback",
  },
  {
    value: "engineering",
    icon: CodeIcon,
    label: "Track engineering work",
    description: "Issues, pull requests, and incidents",
  },
  {
    value: "school",
    icon: GraduationCapIcon,
    label: "Organize coursework",
    description: "Assignments, notes, and group projects",
  },
];

const teamSizes = [
  { value: "solo", icon: UserIcon, label: "Just me", description: "A personal workspace" },
  { value: "small", icon: UsersIcon, label: "2–10 people", description: "A small team" },
  {
    value: "company",
    icon: BriefcaseIcon,
    label: "11 or more",
    description: "Several teams under one company",
  },
];

type Option = (typeof useCases)[number];

function IconChoice({ option }: { option: Option }) {
  const Icon = option.icon;
  return (
    <QuestionnaireChoice value={option.value}>
      <span className="flex items-center gap-2 font-medium">
        <Icon aria-hidden="true" className="size-4 text-muted-foreground" />
        {option.label}
      </span>
      <QuestionnaireChoiceDescription className="ps-6">
        {option.description}
      </QuestionnaireChoiceDescription>
    </QuestionnaireChoice>
  );
}

export default function Questionnaire02() {
  const [done, setDone] = React.useState(false);

  return (
    <Card className="w-full max-w-md">
      <CardHeader>
        <CardTitle>Set up your workspace</CardTitle>
        <CardDescription>
          Two quick questions so we can load the right templates. Press a letter
          key to pick an answer.
        </CardDescription>
      </CardHeader>
      <CardContent>
        {done ? (
          <p className="rounded-lg bg-muted px-3 py-2.5 text-sm" aria-live="polite">
            Templates are ready in your sidebar.
          </p>
        ) : (
          <Questionnaire
            shortcuts="letters"
            onSubmit={(event) => {
              event.preventDefault();
              setDone(true);
            }}
          >
            <QuestionnaireProgress />
            <QuestionnaireItem name="use-case" required>
              <QuestionnaireTitle>What will you use the workspace for?</QuestionnaireTitle>
              <QuestionnaireChoices>
                {useCases.map((option) => (
                  <IconChoice key={option.value} option={option} />
                ))}
              </QuestionnaireChoices>
              <QuestionnaireError />
            </QuestionnaireItem>
            <QuestionnaireItem name="team-size" required>
              <QuestionnaireTitle>How many people will join?</QuestionnaireTitle>
              <QuestionnaireChoices>
                {teamSizes.map((option) => (
                  <IconChoice key={option.value} option={option} />
                ))}
              </QuestionnaireChoices>
              <QuestionnaireError />
            </QuestionnaireItem>
            <QuestionnaireActions>
              <QuestionnairePrevious>Back</QuestionnairePrevious>
              <QuestionnaireNext>Continue</QuestionnaireNext>
              <QuestionnaireSubmit>Create workspace</QuestionnaireSubmit>
            </QuestionnaireActions>
          </Questionnaire>
        )}
      </CardContent>
    </Card>
  );
}

TSX
"use client";

import * as React from "react";

import { Badge } from "@/components/ui/badge";
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire";

const MAX_TOPICS = 3;

const topics = [
  { value: "ai", label: "AI and machine learning" },
  { value: "design-systems", label: "Design systems" },
  { value: "frontend", label: "Frontend performance" },
  { value: "security", label: "Security advisories" },
  { value: "databases", label: "Databases" },
  { value: "devops", label: "DevOps and CI" },
];

const frequencies = [
  { value: "daily", label: "Every morning" },
  { value: "weekly", label: "Monday digest" },
  { value: "monthly", label: "First of the month" },
];

export default function Questionnaire03() {
  const [selected, setSelected] = React.useState<string[]>(["design-systems"]);
  const [summary, setSummary] = React.useState<string | null>(null);
  const atLimit = selected.length >= MAX_TOPICS;

  function toggle(value: string, checked: boolean) {
    setSelected((current) =>
      checked ? [...current, value] : current.filter((item) => item !== value),
    );
  }

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const frequency = frequencies.find((item) => item.value === data.get("frequency"));
    setSummary(`${data.getAll("topics").length} topics, ${frequency?.label.toLowerCase()}`);
  }

  return (
    <div className="flex w-full max-w-lg flex-col gap-4">
      <Questionnaire onSubmit={handleSubmit}>
        <QuestionnaireProgress />
        <QuestionnaireItem name="topics" multiple required>
          <QuestionnaireTitle>What should your digest cover?</QuestionnaireTitle>
          <QuestionnaireDescription className="flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
            <span>Pick up to {MAX_TOPICS}. You can change them later in settings.</span>
            <Badge
              variant={atLimit ? "default" : "secondary"}
              className="tabular-nums"
              aria-live="polite"
            >
              {selected.length} of {MAX_TOPICS} picked
            </Badge>
          </QuestionnaireDescription>
          <QuestionnaireChoices className="sm:grid-cols-2">
            {topics.map((topic) => {
              const checked = selected.includes(topic.value);
              return (
                <QuestionnaireChoice
                  key={topic.value}
                  value={topic.value}
                  checked={checked}
                  disabled={atLimit && !checked}
                  onChange={(event) => toggle(topic.value, event.target.checked)}
                >
                  {topic.label}
                </QuestionnaireChoice>
              );
            })}
          </QuestionnaireChoices>
          <QuestionnaireError>Pick at least one topic to continue.</QuestionnaireError>
        </QuestionnaireItem>
        <QuestionnaireItem name="frequency" required>
          <QuestionnaireTitle>How often should it arrive?</QuestionnaireTitle>
          <QuestionnaireChoices>
            {frequencies.map((frequency) => (
              <QuestionnaireChoice
                key={frequency.value}
                value={frequency.value}
                defaultChecked={frequency.value === "weekly"}
              >
                {frequency.label}
              </QuestionnaireChoice>
            ))}
          </QuestionnaireChoices>
          <QuestionnaireError />
        </QuestionnaireItem>
        <QuestionnaireActions>
          <QuestionnairePrevious />
          <QuestionnaireNext />
          <QuestionnaireSubmit>Save digest</QuestionnaireSubmit>
        </QuestionnaireActions>
      </Questionnaire>
      {summary ? (
        <p className="text-sm text-muted-foreground" aria-live="polite">
          Saved: {summary}.
        </p>
      ) : null}
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { CircleCheckIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire";

const questions = [
  {
    name: "area",
    title: "Where did the bug happen?",
    required: true,
    choices: [
      { value: "editor", label: "Editor" },
      { value: "comments", label: "Comments" },
      { value: "export", label: "Export to PDF" },
      { value: "billing", label: "Billing" },
    ],
  },
  {
    name: "severity",
    title: "How much is it blocking you?",
    required: true,
    choices: [
      { value: "blocker", label: "I can't work at all" },
      { value: "major", label: "I have a slow workaround" },
      { value: "minor", label: "It's annoying but fine" },
    ],
  },
  {
    name: "frequency",
    title: "Can you reproduce it?",
    required: false,
    choices: [
      { value: "always", label: "Every time" },
      { value: "sometimes", label: "Sometimes" },
      { value: "once", label: "It happened once" },
    ],
  },
];

// Compact density: shorter rows, smaller type, and small action buttons.
const compactChoice = "min-h-9 py-2 text-[0.8125rem]";

export default function Questionnaire04() {
  const [sent, setSent] = React.useState(false);

  if (sent) {
    return (
      <div
        className="flex w-full max-w-sm flex-col items-start gap-3 rounded-xl bg-muted/50 p-4 text-sm"
        aria-live="polite"
      >
        <CircleCheckIcon aria-hidden="true" className="size-5 text-success" />
        <div className="flex flex-col gap-1">
          <p className="font-medium">Report sent</p>
          <p className="text-[0.8125rem] text-muted-foreground">
            We&apos;ll reply by email once someone on the team reproduces it.
          </p>
        </div>
        <Button size="sm" variant="ghost" className="-ms-2.5" onClick={() => setSent(false)}>
          Report another bug
        </Button>
      </div>
    );
  }

  return (
    <div className="w-full max-w-sm rounded-xl bg-muted/50 p-4">
      <Questionnaire
        shortcuts="numbers"
        className="gap-3"
        onSubmit={(event) => {
          event.preventDefault();
          setSent(true);
        }}
      >
        <QuestionnaireProgress
          className="w-full"
          render={(props, state) => (
            <div {...props}>
              <div className="flex items-center justify-between">
                <span>Bug report</span>
                <span>
                  {state.current}/{state.total}
                </span>
              </div>
              <div aria-hidden="true" className="mt-2 flex gap-1">
                {Array.from({ length: state.total }, (_, index) => (
                  <span
                    // biome-ignore lint/suspicious/noArrayIndexKey: segments are positional
                    key={index}
                    data-filled={index < state.current ? "" : undefined}
                    className="h-1 flex-1 rounded-full bg-border transition-colors duration-300 data-filled:bg-primary"
                  />
                ))}
              </div>
            </div>
          )}
        />
        {questions.map((question) => (
          <QuestionnaireItem
            key={question.name}
            name={question.name}
            required={question.required}
            className="gap-3"
          >
            <QuestionnaireTitle className="text-sm [&:not(:has(~[data-slot=questionnaire-description]))]:mb-1">
              {question.title}
            </QuestionnaireTitle>
            <QuestionnaireChoices className="gap-1.5">
              {question.choices.map((choice) => (
                <QuestionnaireChoice
                  key={choice.value}
                  value={choice.value}
                  className={compactChoice}
                >
                  {choice.label}
                </QuestionnaireChoice>
              ))}
            </QuestionnaireChoices>
            <QuestionnaireError className="mt-0 text-xs" />
          </QuestionnaireItem>
        ))}
        <QuestionnaireActions>
          <QuestionnairePrevious size="sm" variant="ghost" />
          <QuestionnaireSkip size="sm" variant="ghost" />
          <QuestionnaireNext size="sm" />
          <QuestionnaireSubmit size="sm">Send report</QuestionnaireSubmit>
        </QuestionnaireActions>
      </Questionnaire>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { CircleAlertIcon, CircleCheckIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoiceDescription,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire";

const FREE_EMAIL_DOMAINS = [
  "gmail.com",
  "yahoo.com",
  "outlook.com",
  "hotmail.com",
  "icloud.com",
];

function isPersonalEmail(value: string) {
  const domain = value.split("@")[1]?.trim().toLowerCase();
  return domain ? FREE_EMAIL_DOMAINS.includes(domain) : false;
}

// The questionnaire skips native constraint validation, so check the format here.
function isEmailAddress(value: string) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
}

function ErrorMessage({ children }: { children?: React.ReactNode }) {
  return (
    <QuestionnaireError className="flex items-center gap-1.5">
      <CircleAlertIcon aria-hidden="true" className="size-4 shrink-0" />
      {children}
    </QuestionnaireError>
  );
}

export default function Questionnaire05() {
  const [email, setEmail] = React.useState("");
  const [submittedEmail, setSubmittedEmail] = React.useState<string | null>(null);
  const [checked, setChecked] = React.useState(false);
  const personal = isPersonalEmail(email);
  const malformed = email.trim() !== "" && !isEmailAddress(email);

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (malformed) {
      setChecked(true);
      return;
    }
    if (personal) return;
    setSubmittedEmail(email.trim());
  }

  if (submittedEmail) {
    return (
      <div
        className="flex w-full max-w-md flex-col items-start gap-3 rounded-xl border p-6"
        aria-live="polite"
      >
        <CircleCheckIcon aria-hidden="true" className="size-5 text-success" />
        <div className="flex flex-col gap-1">
          <p className="font-medium">You&apos;re on the list</p>
          <p className="text-sm text-muted-foreground">
            We&apos;ll email <span className="text-foreground">{submittedEmail}</span> when a
            beta seat opens for your team, usually within 5 business days.
          </p>
        </div>
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            setSubmittedEmail(null);
            setEmail("");
            setChecked(false);
          }}
        >
          Submit another request
        </Button>
      </div>
    );
  }

  return (
    <Questionnaire
      onSubmit={handleSubmit}
      className="max-w-md rounded-xl border p-6"
    >
      <QuestionnaireProgress />
      <QuestionnaireItem name="deployment" required>
        <QuestionnaireTitle>Where would you deploy the beta?</QuestionnaireTitle>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="cloud">
            Hosted cloud
            <QuestionnaireChoiceDescription>
              Available in US and EU regions
            </QuestionnaireChoiceDescription>
          </QuestionnaireChoice>
          <QuestionnaireChoice value="vpc">
            Your own VPC
            <QuestionnaireChoiceDescription>AWS and GCP only</QuestionnaireChoiceDescription>
          </QuestionnaireChoice>
          <QuestionnaireChoice value="on-prem" disabled>
            On-premises
            <QuestionnaireChoiceDescription>Not part of this beta</QuestionnaireChoiceDescription>
          </QuestionnaireChoice>
        </QuestionnaireChoices>
        <ErrorMessage>Pick a deployment target to continue.</ErrorMessage>
      </QuestionnaireItem>
      <QuestionnaireItem name="email" required invalid={personal || (checked && malformed)}>
        <QuestionnaireTitle>What&apos;s your work email?</QuestionnaireTitle>
        <QuestionnaireDescription>
          Beta seats are issued per company domain.
        </QuestionnaireDescription>
        <QuestionnaireInput
          type="email"
          aria-label="Work email"
          autoComplete="email"
          placeholder="name@company.com"
          value={email}
          onChange={(event) => setEmail(event.target.value)}
          onBlur={() => setChecked(true)}
        />
        <ErrorMessage>
          {personal
            ? "Use your company address. Personal domains can't claim a team seat."
            : checked && malformed
              ? "Enter a full email address, like name@company.com."
              : "Enter your work email to request access."}
        </ErrorMessage>
      </QuestionnaireItem>
      <QuestionnaireActions>
        <QuestionnairePrevious />
        <QuestionnaireNext />
        <QuestionnaireSubmit>Request access</QuestionnaireSubmit>
      </QuestionnaireActions>
    </Questionnaire>
  );
}

TSX
"use client";

import * as React from "react";
import { CircleCheckIcon, CircleXIcon, ShieldCheckIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire";

const PASSING_SCORE = 2;

const questions = [
  {
    name: "phishing",
    title:
      "An email from “IT Support” asks you to confirm your password through a link. What do you do?",
    multiple: false,
    correct: ["report"],
    explanation:
      "IT never asks for your password. Reporting it warns the security team and pulls the email from other inboxes.",
    choices: [
      { value: "confirm", label: "Open the link and confirm it" },
      { value: "reply", label: "Reply and ask if it's real" },
      { value: "report", label: "Use Report phishing in your mail app" },
      { value: "ignore", label: "Delete it and move on" },
    ],
  },
  {
    name: "password",
    title: "Which of these passwords is hardest to crack?",
    multiple: false,
    correct: ["passphrase"],
    explanation:
      "Length beats symbol swaps. Four random words are longer and far less predictable than a dictionary word with a year.",
    choices: [
      { value: "season", label: "Summer2026!" },
      { value: "passphrase", label: "lantern-orbit-velvet-quarry" },
      { value: "leet", label: "P@ssw0rd123" },
    ],
  },
  {
    name: "ai-paste",
    title: "Which of these are fine to paste into a public AI chatbot?",
    description: "Select every answer that applies.",
    multiple: true,
    correct: ["blog-draft", "stack-trace"],
    explanation:
      "Public drafts and errors from open-source libraries are fine. Customer data and credentials never leave approved tools.",
    choices: [
      { value: "blog-draft", label: "A draft of an already public blog post" },
      { value: "customer-list", label: "A CSV export of customer emails" },
      {
        value: "stack-trace",
        label: "A stack trace from an open-source library",
      },
      { value: "api-key", label: "A production API key, to debug a request" },
    ],
  },
];

type Result = { name: string; correct: boolean };

function grade(data: FormData): Result[] {
  return questions.map((question) => {
    const picked = data.getAll(question.name).map(String).sort();
    const expected = [...question.correct].sort();
    return {
      name: question.name,
      correct:
        picked.length === expected.length &&
        picked.every((value, index) => value === expected[index]),
    };
  });
}

export default function Questionnaire06() {
  const [results, setResults] = React.useState<Result[] | null>(null);

  if (results) {
    const score = results.filter((result) => result.correct).length;
    const passed = score >= PASSING_SCORE;
    return (
      <div className="flex w-full max-w-md flex-col gap-5 rounded-xl border bg-card p-6 text-card-foreground">
        <div className="flex flex-col gap-2" aria-live="polite">
          <div className="flex items-center justify-between gap-3">
            <p className="text-2xl font-semibold tabular-nums">
              {score} of {questions.length} correct
            </p>
            <Badge variant={passed ? "secondary" : "destructive"}>
              {passed ? "Passed" : "Not passed"}
            </Badge>
          </div>
          <p className="text-sm text-pretty text-muted-foreground">
            {passed
              ? "Your Q3 security refresher is complete. We logged it on your training record."
              : `You need ${PASSING_SCORE} correct answers to pass. Read the notes below and try again.`}
          </p>
        </div>
        <ol className="flex flex-col gap-4 border-t pt-4">
          {questions.map((question, index) => {
            const correct = results[index]?.correct;
            const Icon = correct ? CircleCheckIcon : CircleXIcon;
            return (
              <li key={question.name} className="flex gap-3 text-sm">
                <Icon
                  aria-hidden="true"
                  className={
                    correct
                      ? "mt-0.5 size-4 shrink-0 text-success"
                      : "mt-0.5 size-4 shrink-0 text-destructive"
                  }
                />
                <div className="flex min-w-0 flex-col gap-1">
                  <p className="font-medium text-pretty">
                    <span className="sr-only">
                      {correct ? "Correct: " : "Incorrect: "}
                    </span>
                    {question.title}
                  </p>
                  <p className="text-pretty text-muted-foreground">
                    {question.explanation}
                  </p>
                </div>
              </li>
            );
          })}
        </ol>
        <Button
          variant={passed ? "outline" : "default"}
          className="w-fit"
          onClick={() => setResults(null)}
        >
          {passed ? "Review questions" : "Retake quiz"}
        </Button>
      </div>
    );
  }

  return (
    <div className="flex w-full max-w-md flex-col gap-5 rounded-xl border bg-card p-6 text-card-foreground">
      <div className="flex items-start gap-3">
        <span className="flex size-9 shrink-0 items-center justify-center rounded-md bg-muted">
          <ShieldCheckIcon
            aria-hidden="true"
            className="size-4 text-muted-foreground"
          />
        </span>
        <div className="flex min-w-0 flex-col gap-0.5">
          <h3 className="text-sm font-medium">Q3 security refresher</h3>
          <p className="text-xs text-muted-foreground">
            3 questions · pass with {PASSING_SCORE} correct · about 2 minutes
          </p>
        </div>
      </div>
      <Questionnaire
        onSubmit={(event) => {
          event.preventDefault();
          setResults(grade(new FormData(event.currentTarget)));
        }}
      >
        <QuestionnaireProgress />
        {questions.map((question) => (
          <QuestionnaireItem
            key={question.name}
            name={question.name}
            multiple={question.multiple}
            required
          >
            <QuestionnaireTitle>{question.title}</QuestionnaireTitle>
            {question.description ? (
              <QuestionnaireDescription>
                {question.description}
              </QuestionnaireDescription>
            ) : null}
            <QuestionnaireChoices>
              {question.choices.map((choice) => (
                <QuestionnaireChoice key={choice.value} value={choice.value}>
                  {choice.label}
                </QuestionnaireChoice>
              ))}
            </QuestionnaireChoices>
            <QuestionnaireError>Choose an answer to continue.</QuestionnaireError>
          </QuestionnaireItem>
        ))}
        <QuestionnaireActions>
          <QuestionnairePrevious />
          <QuestionnaireNext />
          <QuestionnaireSubmit>Check answers</QuestionnaireSubmit>
        </QuestionnaireActions>
      </Questionnaire>
    </div>
  );
}

TSX
"use client";

import * as React from "react";
import { ArrowLeftIcon, ArrowRightIcon, SparklesIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoiceDescription,
  QuestionnaireChoices,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire";
import { Spinner } from "@/components/ui/spinner";

const questions = [
  {
    name: "seats",
    title: "How many people need an account?",
    choices: [
      { value: "1", label: "Only me", description: "Personal projects", points: 0 },
      { value: "10", label: "Up to 10", description: "One product team", points: 1 },
      { value: "50", label: "More than 10", description: "Multiple teams", points: 2 },
    ],
  },
  {
    name: "storage",
    title: "How much do you upload each month?",
    choices: [
      { value: "light", label: "Under 5 GB", description: "Docs and screenshots", points: 0 },
      { value: "medium", label: "5 to 100 GB", description: "Design files and recordings", points: 1 },
      { value: "heavy", label: "Over 100 GB", description: "Raw video or datasets", points: 2 },
    ],
  },
  {
    name: "security",
    title: "Which security features are must-haves?",
    choices: [
      { value: "none", label: "Nothing special", description: "Two-factor login is enough", points: 0 },
      { value: "sso", label: "Single sign-on", description: "Google or Okta login", points: 1 },
      { value: "audit", label: "SSO and audit logs", description: "Required by compliance", points: 2 },
    ],
  },
];

const plans = [
  { name: "Starter", price: "$0", note: "Free forever for one seat and 5 GB." },
  { name: "Team", price: "$12", note: "Per seat per month, 1 TB shared storage and SSO." },
  { name: "Business", price: "$24", note: "Per seat per month, unlimited storage and audit logs." },
];

// Each step fades and rises in when it becomes the active item.
const enter =
  "transition-[opacity,translate] duration-300 ease-out starting:translate-y-2 starting:opacity-0 motion-reduce:transition-none";

function recommend(data: FormData) {
  const total = questions.reduce((sum, question) => {
    const choice = question.choices.find((item) => item.value === data.get(question.name));
    return sum + (choice?.points ?? 0);
  }, 0);
  return plans[total >= 4 ? 2 : total >= 2 ? 1 : 0];
}

export default function Questionnaire07() {
  const [pending, setPending] = React.useState(false);
  const [plan, setPlan] = React.useState<(typeof plans)[number] | null>(null);
  const [trialStarted, setTrialStarted] = React.useState(false);
  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);

  React.useEffect(() => {
    return () => {
      if (timer.current) clearTimeout(timer.current);
    };
  }, []);

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const result = recommend(new FormData(event.currentTarget));
    setPending(true);
    // Stand-in for a pricing API call.
    timer.current = setTimeout(() => {
      setPending(false);
      setPlan(result);
    }, 900);
  }

  if (plan) {
    return (
      <div
        className={`flex w-full max-w-md flex-col gap-4 rounded-xl border bg-card p-6 text-card-foreground ${enter}`}
        aria-live="polite"
      >
        <Badge variant="secondary">
          <SparklesIcon data-icon="inline-start" aria-hidden="true" />
          Recommended for you
        </Badge>
        <div className="flex items-baseline gap-2">
          <p className="text-2xl font-semibold">{plan.name}</p>
          <p className="text-sm text-muted-foreground tabular-nums">{plan.price}</p>
        </div>
        <p className="text-sm text-muted-foreground">{plan.note}</p>
        <div className="flex flex-wrap gap-2">
          <Button disabled={trialStarted} onClick={() => setTrialStarted(true)}>
            {trialStarted ? "Trial started" : "Start 14-day trial"}
          </Button>
          <Button
            variant="ghost"
            onClick={() => {
              setPlan(null);
              setTrialStarted(false);
            }}
          >
            Retake quiz
          </Button>
        </div>
      </div>
    );
  }

  return (
    <Questionnaire
      aria-busy={pending || undefined}
      // Lock the whole form while the plan loads. Disabling the choices instead
      // makes the item read as unanswered and flashes its error.
      inert={pending}
      onSubmit={handleSubmit}
      className="max-w-md rounded-xl border bg-card p-6 text-card-foreground"
    >
      <QuestionnaireProgress
        className="w-full"
        render={(props, state) => (
          <div {...props}>
            <span className="text-xs">
              Step {state.current} of {state.total}
            </span>
            <span aria-hidden="true" className="mt-2 block h-1 overflow-hidden rounded-full bg-muted">
              <span
                className="block h-full rounded-full bg-primary transition-[width] duration-500 ease-out motion-reduce:transition-none"
                style={{ width: `${state.total ? (state.current / state.total) * 100 : 0}%` }}
              />
            </span>
          </div>
        )}
      />
      {questions.map((question) => (
        <QuestionnaireItem key={question.name} name={question.name} required className={enter}>
          <QuestionnaireTitle>{question.title}</QuestionnaireTitle>
          <QuestionnaireChoices>
            {question.choices.map((choice) => (
              <QuestionnaireChoice
                key={choice.value}
                value={choice.value}
                className="transition-[background-color,border-color,scale] duration-150 active:scale-[0.99] motion-reduce:transition-none"
              >
                {choice.label}
                <QuestionnaireChoiceDescription>{choice.description}</QuestionnaireChoiceDescription>
              </QuestionnaireChoice>
            ))}
          </QuestionnaireChoices>
          <QuestionnaireError />
        </QuestionnaireItem>
      ))}
      <QuestionnaireActions>
        <QuestionnairePrevious variant="ghost" disabled={pending}>
          <ArrowLeftIcon data-icon="inline-start" aria-hidden="true" />
          Back
        </QuestionnairePrevious>
        <QuestionnaireNext>
          Next
          <ArrowRightIcon data-icon="inline-end" aria-hidden="true" />
        </QuestionnaireNext>
        <QuestionnaireSubmit disabled={pending}>
          {pending ? (
            <>
              <Spinner data-icon="inline-start" aria-hidden="true" />
              Finding your plan
            </>
          ) : (
            "See my plan"
          )}
        </QuestionnaireSubmit>
      </QuestionnaireActions>
    </Questionnaire>
  );
}

TSX
"use client";

import { HeartHandshakeIcon, XIcon } from "lucide-react";
import { type FormEvent, useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire";

const scores = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];

function followUpFor(score: number | null) {
  if (score === null) return "Tell us more about your score";
  if (score <= 6) return "What's the one thing we should fix first?";
  if (score <= 8) return "What would make Lumen a 10 for you?";
  return "What do you rely on Lumen for most?";
}

export default function Questionnaire08() {
  const [open, setOpen] = useState(true);
  const [score, setScore] = useState<number | null>(null);
  const [sent, setSent] = useState(false);

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSent(true);
  }

  function restart() {
    setScore(null);
    setSent(false);
    setOpen(true);
  }

  if (!open) {
    return (
      <div className="flex w-full max-w-sm flex-col items-start gap-3 text-sm">
        <p className="text-muted-foreground">
          Survey dismissed. We won't ask again for 90 days.
        </p>
        <Button variant="outline" size="sm" onClick={restart}>
          Show survey again
        </Button>
      </div>
    );
  }

  return (
    <section
      aria-labelledby="questionnaire-08-heading"
      className="relative w-full max-w-sm rounded-xl border bg-popover p-4 text-popover-foreground shadow-lg"
    >
      <div className="mb-3 flex items-center justify-between gap-2">
        <h3
          id="questionnaire-08-heading"
          className="text-xs font-medium text-muted-foreground"
        >
          Quick feedback · 30 seconds
        </h3>
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label="Dismiss survey"
          onClick={() => setOpen(false)}
          className="-me-1.5"
        >
          <XIcon aria-hidden="true" />
        </Button>
      </div>
      {sent ? (
        <div className="flex flex-col items-start gap-3 py-2">
          <HeartHandshakeIcon
            aria-hidden="true"
            className="size-5 text-muted-foreground"
          />
          <p className="font-medium">Thanks, that helps a lot.</p>
          <p className="text-sm text-muted-foreground">
            Your score of {score} was shared with the Lumen product team.
          </p>
          <Button variant="outline" size="sm" onClick={() => setOpen(false)}>
            Close
          </Button>
        </div>
      ) : (
        <Questionnaire onSubmit={handleSubmit}>
          <QuestionnaireItem name="score" required>
            <QuestionnaireTitle>
              How likely are you to recommend Lumen to a colleague?
            </QuestionnaireTitle>
            <QuestionnaireChoices className="grid-cols-6 gap-1.5 sm:grid-cols-11 sm:gap-1">
              {scores.map((value) => (
                <QuestionnaireChoice
                  key={value}
                  value={value}
                  onChange={(event) => setScore(Number(event.target.value))}
                  className="min-h-10 items-center justify-center px-0 py-0 text-center font-medium tabular-nums data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary [&>[data-slot=questionnaire-choice-indicator]]:hidden [&_[data-slot=questionnaire-choice-label]]:items-center"
                >
                  {value}
                  <span className="sr-only"> out of 10</span>
                </QuestionnaireChoice>
              ))}
            </QuestionnaireChoices>
            <div
              aria-hidden="true"
              className="-mt-2 flex justify-between text-xs text-muted-foreground"
            >
              <span>Not likely</span>
              <span>Very likely</span>
            </div>
            <QuestionnaireError>Pick a score from 0 to 10.</QuestionnaireError>
          </QuestionnaireItem>
          <QuestionnaireItem name="reason">
            <QuestionnaireTitle>{followUpFor(score)}</QuestionnaireTitle>
            <QuestionnaireDescription>
              Optional. Skip it and we'll still record your score.
            </QuestionnaireDescription>
            <QuestionnaireInput
              aria-label="Reason for your score"
              placeholder="e.g. Faster funnel reports"
            />
            <QuestionnaireError>
              Add a few words, or choose Skip &amp; send.
            </QuestionnaireError>
          </QuestionnaireItem>
          <QuestionnaireActions>
            <QuestionnairePrevious size="sm" variant="ghost">
              Back
            </QuestionnairePrevious>
            <QuestionnaireSkip size="sm" variant="ghost">
              Skip &amp; send
            </QuestionnaireSkip>
            <QuestionnaireNext size="sm" />
            <QuestionnaireSubmit size="sm">Send feedback</QuestionnaireSubmit>
          </QuestionnaireActions>
        </Questionnaire>
      )}
    </section>
  );
}

TSX
"use client";

import {
  ChevronLeftIcon,
  DumbbellIcon,
  FlameIcon,
  FootprintsIcon,
  HeartPulseIcon,
  SparklesIcon,
} from "lucide-react";
import { type FormEvent, useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoiceDescription,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire";

const goals = [
  { value: "endurance", label: "Build endurance", icon: FootprintsIcon },
  { value: "strength", label: "Get stronger", icon: DumbbellIcon },
  { value: "weight", label: "Lose weight", icon: FlameIcon },
  { value: "health", label: "Feel healthier", icon: HeartPulseIcon },
];

const levels = [
  {
    value: "new",
    label: "Just starting",
    description: "I work out less than once a week.",
  },
  {
    value: "returning",
    label: "Getting back into it",
    description: "I used to train and want to rebuild the habit.",
  },
  {
    value: "regular",
    label: "Training regularly",
    description: "Three or more sessions most weeks.",
  },
];

const days = [
  { value: "mon", short: "M", label: "Monday" },
  { value: "tue", short: "T", label: "Tuesday" },
  { value: "wed", short: "W", label: "Wednesday" },
  { value: "thu", short: "T", label: "Thursday" },
  { value: "fri", short: "F", label: "Friday" },
  { value: "sat", short: "S", label: "Saturday" },
  { value: "sun", short: "S", label: "Sunday" },
];

const tileClassName =
  "min-h-24 items-stretch p-3 [&_[data-slot=questionnaire-choice-label]]:gap-3 [&>[data-slot=questionnaire-choice-indicator]]:absolute [&>[data-slot=questionnaire-choice-indicator]]:end-3 [&>[data-slot=questionnaire-choice-indicator]]:top-3";

const dayClassName =
  "min-h-11 items-center justify-center rounded-full px-0 py-0 font-medium data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary [&>[data-slot=questionnaire-choice-indicator]]:hidden [&_[data-slot=questionnaire-choice-label]]:items-center";

type Plan = { goal: string; days: string[] };

export default function Questionnaire09() {
  const [plan, setPlan] = useState<Plan | null>(null);
  const [showWeek, setShowWeek] = useState(false);

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const goal = goals.find((item) => item.value === data.get("goal"));
    setPlan({
      goal: goal?.label ?? "Your goal",
      days: days
        .filter((day) => data.getAll("days").includes(day.value))
        .map((day) => day.label),
    });
    setShowWeek(false);
  }

  return (
    <div className="mx-auto flex h-[560px] w-full max-w-[360px] flex-col overflow-hidden rounded-[2rem] border-4 border-muted bg-background shadow-lg">
      <div className="flex h-6 shrink-0 items-center justify-center">
        <span aria-hidden="true" className="h-1 w-12 rounded-full bg-muted" />
      </div>
      {plan ? (
        <div className="flex min-h-0 flex-1 flex-col justify-between gap-6 p-5">
          <div className="flex min-h-0 flex-col gap-3 overflow-y-auto pt-10">
            <SparklesIcon aria-hidden="true" className="size-6 text-primary" />
            <h3 className="cn-font-heading text-2xl font-semibold text-balance">
              Your 4-week plan is ready
            </h3>
            <p className="text-sm text-pretty text-muted-foreground">
              {plan.goal}, {plan.days.length}{" "}
              {plan.days.length === 1 ? "session" : "sessions"} a week. Your
              first workout unlocks tomorrow at 7:00 AM.
            </p>
            {showWeek ? (
              <ol className="flex flex-col divide-y rounded-lg border text-sm">
                {plan.days.map((day, index) => (
                  <li
                    key={day}
                    className="flex items-center justify-between gap-3 px-3 py-2.5"
                  >
                    <span className="font-medium">{day}</span>
                    <span className="text-muted-foreground">
                      Session {index + 1} · 25 min
                    </span>
                  </li>
                ))}
              </ol>
            ) : null}
          </div>
          <div className="flex flex-col gap-2">
            <Button
              size="lg"
              className="h-11 w-full"
              aria-expanded={showWeek}
              onClick={() => setShowWeek((value) => !value)}
            >
              {showWeek ? "Hide my first week" : "See my first week"}
            </Button>
            <Button
              size="lg"
              variant="ghost"
              className="h-11 w-full"
              onClick={() => setPlan(null)}
            >
              Change answers
            </Button>
          </div>
        </div>
      ) : (
        <Questionnaire
          onSubmit={handleSubmit}
          className="min-h-0 flex-1 gap-0"
        >
          <div className="flex shrink-0 items-center gap-2 px-3 pb-2">
            <div className="size-9 shrink-0">
              <QuestionnairePrevious
                variant="ghost"
                size="icon-lg"
                aria-label="Previous question"
                className="min-h-0"
              >
                <ChevronLeftIcon aria-hidden="true" />
              </QuestionnairePrevious>
            </div>
            <QuestionnaireProgress
              className="min-w-0 flex-1"
              render={(props, state) => (
                <div {...props}>
                  <div aria-hidden="true" className="flex gap-1">
                    {Array.from({ length: state.total }, (_, index) => (
                      <span
                        // biome-ignore lint/suspicious/noArrayIndexKey: segments are positional
                        key={index}
                        data-done={index < state.current ? "" : undefined}
                        className="h-1 flex-1 rounded-full bg-muted transition-colors duration-300 data-done:bg-primary"
                      />
                    ))}
                  </div>
                </div>
              )}
            />
            <div className="size-9 shrink-0" />
          </div>
          <div className="min-h-0 flex-1 overflow-y-auto px-5 pt-4">
            <QuestionnaireItem name="goal" required>
              <QuestionnaireTitle className="text-xl font-semibold">
                What's your main goal?
              </QuestionnaireTitle>
              <QuestionnaireDescription>
                We'll shape every workout around it.
              </QuestionnaireDescription>
              <QuestionnaireChoices className="grid-cols-2">
                {goals.map((goal) => (
                  <QuestionnaireChoice
                    key={goal.value}
                    value={goal.value}
                    className={tileClassName}
                  >
                    <goal.icon
                      aria-hidden="true"
                      className="size-5 text-muted-foreground group-data-checked/questionnaire-choice:text-primary"
                    />
                    <span className="mt-auto font-medium">{goal.label}</span>
                  </QuestionnaireChoice>
                ))}
              </QuestionnaireChoices>
              <QuestionnaireError>Pick the goal that fits best.</QuestionnaireError>
            </QuestionnaireItem>
            <QuestionnaireItem name="level" required>
              <QuestionnaireTitle className="text-xl font-semibold">
                How active are you right now?
              </QuestionnaireTitle>
              <QuestionnaireDescription>
                Be honest. We start easy and adjust every week.
              </QuestionnaireDescription>
              <QuestionnaireChoices>
                {levels.map((level) => (
                  <QuestionnaireChoice
                    key={level.value}
                    value={level.value}
                    className="py-3.5"
                  >
                    <span className="font-medium">{level.label}</span>
                    <QuestionnaireChoiceDescription>
                      {level.description}
                    </QuestionnaireChoiceDescription>
                  </QuestionnaireChoice>
                ))}
              </QuestionnaireChoices>
              <QuestionnaireError />
            </QuestionnaireItem>
            <QuestionnaireItem name="days" multiple required>
              <QuestionnaireTitle className="text-xl font-semibold">
                Which days can you train?
              </QuestionnaireTitle>
              <QuestionnaireDescription>
                Most people stick with 3 days. You can change this anytime.
              </QuestionnaireDescription>
              <QuestionnaireChoices className="grid-cols-7 gap-1">
                {days.map((day) => (
                  <QuestionnaireChoice
                    key={day.value}
                    value={day.value}
                    className={dayClassName}
                  >
                    <span aria-hidden="true">{day.short}</span>
                    <span className="sr-only">{day.label}</span>
                  </QuestionnaireChoice>
                ))}
              </QuestionnaireChoices>
              <QuestionnaireError>Pick at least one day.</QuestionnaireError>
            </QuestionnaireItem>
          </div>
          <QuestionnaireActions className="shrink-0 grid-cols-1 p-5 pt-3">
            <QuestionnaireNext size="lg" className="col-start-1 h-11 w-full">
              Continue
            </QuestionnaireNext>
            <QuestionnaireSubmit size="lg" className="col-start-1 h-11 w-full">
              Build my plan
            </QuestionnaireSubmit>
          </QuestionnaireActions>
        </Questionnaire>
      )}
    </div>
  );
}

TSX
"use client";

import { ChevronUpIcon, MinusIcon, TicketIcon } from "lucide-react";
import { type FormEvent, useState } from "react";

import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Bubble, BubbleContent, BubbleGroup } from "@/components/ui/bubble";
import { Button } from "@/components/ui/button";
import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoiceDescription,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire";

const topics = [
  { value: "billing", label: "Billing or invoices" },
  { value: "bug", label: "Something isn't working" },
  { value: "access", label: "I can't sign in" },
  { value: "other", label: "Something else" },
];

const urgencies = [
  {
    value: "blocked",
    label: "My team is blocked",
    description: "Routed to on-call. Reply within 1 hour.",
  },
  {
    value: "degraded",
    label: "It's slowing us down",
    description: "Reply within 4 business hours.",
  },
  {
    value: "question",
    label: "Just a question",
    description: "Reply within 1 business day.",
  },
];

type Ticket = { topic: string; urgency: string; reference: string };

export default function Questionnaire10() {
  const [ticket, setTicket] = useState<Ticket | null>(null);
  const [minimized, setMinimized] = useState(false);

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setTicket({
      topic:
        topics.find((topic) => topic.value === data.get("topic"))?.label ?? "",
      urgency:
        urgencies.find((urgency) => urgency.value === data.get("urgency"))
          ?.description ?? "",
      reference: String(data.get("reference") ?? ""),
    });
  }

  return (
    <div
      className={`flex w-full max-w-sm flex-col overflow-hidden rounded-2xl border bg-background shadow-lg ${
        minimized ? "" : "h-[600px] sm:h-[520px]"
      }`}
    >
      <header
        className={`flex items-center gap-3 px-4 py-3 ${minimized ? "" : "border-b"}`}
      >
        <Avatar>
          <AvatarFallback>AS</AvatarFallback>
        </Avatar>
        <div className="flex min-w-0 flex-1 flex-col">
          <h3 className="truncate text-sm font-medium">Acorn Support</h3>
          <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
            <span aria-hidden="true" className="size-1.5 rounded-full bg-success" />
            Typically replies in under 2 hours
          </p>
        </div>
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label={minimized ? "Expand chat" : "Minimize chat"}
          aria-expanded={!minimized}
          onClick={() => setMinimized((value) => !value)}
        >
          {minimized ? (
            <ChevronUpIcon aria-hidden="true" />
          ) : (
            <MinusIcon aria-hidden="true" />
          )}
        </Button>
      </header>
      <div
        hidden={minimized}
        role="log"
        aria-label="Support conversation"
        className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-4"
      >
        <BubbleGroup>
          <Bubble variant="muted">
            <BubbleContent>
              Hi Sam! Three quick questions and I'll route you to the right
              person.
            </BubbleContent>
          </Bubble>
        </BubbleGroup>
        {ticket ? (
          <>
            <BubbleGroup>
              <Bubble align="end">
                <BubbleContent>
                  {ticket.topic} · {ticket.reference}
                </BubbleContent>
              </Bubble>
            </BubbleGroup>
            <div className="flex flex-col gap-2 rounded-xl border bg-card p-3 text-sm text-card-foreground">
              <p className="flex items-center gap-2 font-medium">
                <TicketIcon aria-hidden="true" className="size-4 text-muted-foreground" />
                Ticket ACR-4821 opened
              </p>
              <p className="text-muted-foreground">{ticket.urgency}</p>
              <Button
                variant="outline"
                size="sm"
                className="w-fit"
                onClick={() => setTicket(null)}
              >
                Edit request
              </Button>
            </div>
          </>
        ) : (
          <Questionnaire
            shortcuts="numbers"
            onSubmit={handleSubmit}
            className="shrink-0 gap-3 rounded-xl border bg-card p-3 text-card-foreground"
          >
            <QuestionnaireProgress className="text-[0.6875rem]" />
            <QuestionnaireItem name="topic" required className="gap-3">
              <QuestionnaireTitle className="text-sm">
                What do you need help with?
              </QuestionnaireTitle>
              <QuestionnaireChoices className="gap-1.5">
                {topics.map((topic) => (
                  <QuestionnaireChoice
                    key={topic.value}
                    value={topic.value}
                    className="min-h-10 py-2"
                  >
                    {topic.label}
                  </QuestionnaireChoice>
                ))}
              </QuestionnaireChoices>
              <QuestionnaireError className="mt-0" />
            </QuestionnaireItem>
            <QuestionnaireItem name="urgency" required className="gap-3">
              <QuestionnaireTitle className="text-sm">
                How much is this affecting you?
              </QuestionnaireTitle>
              <QuestionnaireChoices className="gap-1.5">
                {urgencies.map((urgency) => (
                  <QuestionnaireChoice
                    key={urgency.value}
                    value={urgency.value}
                    className="py-2"
                  >
                    {urgency.label}
                    <QuestionnaireChoiceDescription className="text-xs">
                      {urgency.description}
                    </QuestionnaireChoiceDescription>
                  </QuestionnaireChoice>
                ))}
              </QuestionnaireChoices>
              <QuestionnaireError className="mt-0" />
            </QuestionnaireItem>
            <QuestionnaireItem name="reference" required className="gap-3">
              <QuestionnaireTitle className="text-sm">
                Which workspace is this about?
              </QuestionnaireTitle>
              <QuestionnaireDescription className="mt-1 text-xs">
                Find it under Settings → General.
              </QuestionnaireDescription>
              <QuestionnaireInput
                aria-label="Workspace URL"
                placeholder="acorn.app/northwind"
                autoComplete="off"
              />
              <QuestionnaireError className="mt-0">
                Add the workspace URL so we can look it up.
              </QuestionnaireError>
            </QuestionnaireItem>
            <QuestionnaireActions className="sm:min-h-7">
              <QuestionnairePrevious size="sm" variant="ghost">
                Back
              </QuestionnairePrevious>
              <QuestionnaireNext size="sm" />
              <QuestionnaireSubmit size="sm">Open ticket</QuestionnaireSubmit>
            </QuestionnaireActions>
          </Questionnaire>
        )}
      </div>
    </div>
  );
}