/**
 * Live demo for ui-design-system/ui/alchemy-ui-component-library.
 *
 * The gallery: every atom and molecule the barrel exports, with its variants
 * and states, grouped into eight frames and titled with its export name. A
 * port of the sections of Labs' DesignSystemDemo.tsx (fd8558f, lines 199 to
 * 832) without the page chrome (sticky header, theme toggle, FloatingScrollNav,
 * the radial gradient). Swatch values are read from @prima-modules/tokens, the
 * way the page reads `brand` from virtual:tailwind-brand.
 *
 * Not rendered: AZSymbol and GlobalBackground (agency brand atoms; a customer
 * deletes the two export lines), AlchemyPageLoader (a fixed full-screen
 * overlay) and FloatingScrollNav (fixed to the viewport edge); each is named in
 * the frame that would hold it.
 */
import React, { useState } from 'react';
import { Rocket, Shield, Sparkles } from 'lucide-react';
import { defineStates } from '@prima-modules/demo';
import { brand } from '@prima-modules/tokens';
import {
  Button,
  Input,
  Heading,
  Text,
  Textarea,
  Select,
  MultiSelect,
  SmartSelect,
  Radio,
  RadioGroup,
  Checkbox,
  CheckboxGroup,
  Toggle,
  Badge,
  StatusBadge,
  SelectCards,
  MultiSelectCards,
  Avatar,
  AvatarGroup,
  Spinner,
  Skeleton,
  SkeletonCard,
  SkeletonListItem,
  SkeletonProfile,
  SkeletonTable,
  SkeletonForm,
  SkeletonArticle,
  Divider,
  AlchemyLoader,
  AlchemyInlineLoader,
  Card,
  CardHeader,
  CardContent,
  CardFooter,
  InputField,
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHeadCell,
  TableCell,
  DataTable,
  ScrollNav,
  ToastProvider,
  useToast,
  ThemeProvider,
} from '@prima-modules/alchemy-ui';

/* ---- sample data (literal, nothing real) ---------------------------- */

const people = [
  { id: 1, name: 'Mira Keller', email: 'mira@example.com', status: 'active', role: 'Admin' },
  { id: 2, name: 'Jonas Weber', email: 'jonas@example.com', status: 'pending', role: 'Member' },
  { id: 3, name: 'Lea Frei', email: 'lea@example.com', status: 'inactive', role: 'Member' },
  { id: 4, name: 'Noah Brunner', email: 'noah@example.com', status: 'active', role: 'Editor' },
];
type Person = (typeof people)[number];

const frameworks = [
  { value: 'react', label: 'React' },
  { value: 'vue', label: 'Vue' },
  { value: 'astro', label: 'Astro' },
  { value: 'svelte', label: 'Svelte' },
];

const countries = [
  { value: 'ch', label: 'Switzerland', description: 'Europe' },
  { value: 'de', label: 'Germany', description: 'Europe' },
  { value: 'at', label: 'Austria', description: 'Europe' },
  { value: 'jp', label: 'Japan', description: 'Asia' },
  { value: 'ca', label: 'Canada', description: 'North America' },
];

const channels = [
  { value: 'email', label: 'E-mail notifications' },
  { value: 'sms', label: 'SMS notifications' },
  { value: 'push', label: 'Push notifications' },
];

/* ---- the contract ------------------------------------------------- */

export type Section =
  | 'foundations'
  | 'buttons'
  | 'inputs'
  | 'selection'
  | 'badges-avatars'
  | 'loaders'
  | 'tables-cards'
  | 'navigation-toasts';

export interface Props {
  section: Section;
}

export const states = defineStates<Props>({
  foundations: { label: 'Foundations: spacing, radius, colours, Heading, Text, Divider', props: { section: 'foundations' }, height: 1500 },
  buttons: { label: 'Button', props: { section: 'buttons' }, height: 520 },
  inputs: { label: 'Input, InputField, Textarea', props: { section: 'inputs' }, height: 760 },
  selection: { label: 'Select, MultiSelect, SmartSelect, Radio, Checkbox, Toggle, SelectCards', props: { section: 'selection' }, height: 1500 },
  'badges-avatars': { label: 'Badge, StatusBadge, Avatar, AvatarGroup', props: { section: 'badges-avatars' }, height: 760 },
  loaders: { label: 'Spinner, Skeleton, AlchemyLoader', props: { section: 'loaders' }, height: 1500 },
  'tables-cards': { label: 'Table, DataTable, Card', props: { section: 'tables-cards' }, height: 1100 },
  'navigation-toasts': { label: 'ScrollNav, ToastProvider and useToast', props: { section: 'navigation-toasts' }, height: 520 },
});

/* ---- scaffolding ---------------------------------------------------- */

/** One specimen block, titled with the export name it shows. */
function Specimen({ name, note, children }: { name: string; note?: string; children: React.ReactNode }) {
  return (
    <section className="space-y-4">
      <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
        <Heading level={3} className="!tracking-normal">
          <code className="font-mono text-[0.9em]">{name}</code>
        </Heading>
        {note && (
          <Text size="sm" muted>
            {note}
          </Text>
        )}
      </div>
      <Card variant="glass" padding="lg">
        {children}
      </Card>
    </section>
  );
}

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div>
      <Text weight="semibold" className="mb-3">
        {label}
      </Text>
      <div className="flex flex-wrap items-center gap-4">{children}</div>
    </div>
  );
}

/* ---- the eight frames ---------------------------------------------- */

function Foundations() {
  return (
    <>
      <Specimen name="spacing" note="the 4 px scale, as Tailwind emits it">
        <div className="space-y-3">
          {[
            { key: '1', value: '0.25rem', px: '4px' },
            { key: '2', value: '0.5rem', px: '8px' },
            { key: '3', value: '0.75rem', px: '12px' },
            { key: '4', value: '1rem', px: '16px' },
            { key: '6', value: '1.5rem', px: '24px' },
            { key: '8', value: '2rem', px: '32px' },
            { key: '12', value: '3rem', px: '48px' },
            { key: '16', value: '4rem', px: '64px' },
          ].map((item) => (
            <div key={item.key} className="flex items-center gap-4">
              <div className="w-12 text-sm font-mono text-stone-500">{item.key}</div>
              <div className="h-6 bg-brand-purple rounded" style={{ width: item.value }} />
              <div className="text-sm font-mono text-zinc-700">
                {item.value} <span className="text-stone-500">({item.px})</span>
              </div>
            </div>
          ))}
        </div>
      </Specimen>

      <Specimen name="borderRadius" note="the steps, plus `pill` from the config">
        <div className="flex flex-wrap gap-6">
          {[
            { key: 'sm', value: '0.125rem' },
            { key: 'md', value: '0.375rem' },
            { key: 'lg', value: '0.5rem' },
            { key: 'xl', value: '0.75rem' },
            { key: '2xl', value: '1rem' },
            { key: '3xl', value: '1.5rem' },
            { key: 'pill', value: '9999px' },
          ].map((item) => (
            <div key={item.key} className="flex flex-col items-center gap-2">
              <div className="w-16 h-16 bg-brand-purple" style={{ borderRadius: item.value }} />
              <Text size="xs" muted>
                {item.key}
              </Text>
            </div>
          ))}
        </div>
      </Specimen>

      <Specimen name="colors" note="brand values read from @prima-modules/tokens">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          {(
            [
              ['brand.purple', 'bg-brand-purple', brand.purple],
              ['brand.orange', 'bg-brand-orange', brand.orange],
              ['brand.cream', 'bg-brand-cream border border-line', brand.cream],
              ['brand.beige', 'bg-brand-beige border border-line', brand.beige],
            ] as const
          ).map(([name, cls, hex]) => (
            <div key={name} className="space-y-2">
              <div className={`h-20 rounded-xl ${cls}`} />
              <Text size="sm" weight="medium">
                {name}
              </Text>
              <Text size="xs" muted>
                {hex}
              </Text>
            </div>
          ))}
        </div>
        <Divider className="my-6" />
        <Text weight="semibold" className="mb-4">
          Shell tokens
        </Text>
        <div className="grid grid-cols-3 md:grid-cols-6 gap-4">
          {(
            [
              ['ink', 'bg-ink'],
              ['ink-60', 'bg-ink-60'],
              ['ink-40', 'bg-ink-40'],
              ['paper', 'bg-paper border border-line'],
              ['line', 'bg-line'],
              ['purple-100', 'bg-purple-100'],
            ] as const
          ).map(([name, cls]) => (
            <div key={name} className="space-y-2">
              <div className={`h-12 rounded-lg ${cls}`} />
              <Text size="xs" muted>
                {name}
              </Text>
            </div>
          ))}
        </div>
        <Divider className="my-6" />
        <Text weight="semibold" className="mb-4">
          Semantic
        </Text>
        <div className="grid grid-cols-4 gap-4">
          {(
            [
              ['success', 'bg-success'],
              ['warning', 'bg-warning'],
              ['error', 'bg-error'],
              ['info', 'bg-info'],
            ] as const
          ).map(([name, cls]) => (
            <div key={name} className="space-y-2">
              <div className={`h-12 rounded-lg ${cls}`} />
              <Text size="xs" muted>
                {name}
              </Text>
            </div>
          ))}
        </div>
      </Specimen>

      <Specimen name="Heading" note="level 1 to 4">
        <div className="space-y-2">
          <Heading level={1}>Heading 1</Heading>
          <Heading level={2}>Heading 2</Heading>
          <Heading level={3}>Heading 3</Heading>
          <Heading level={4}>Heading 4</Heading>
        </div>
      </Specimen>

      <Specimen name="Text" note="size, weight, muted">
        <div className="space-y-3">
          <Text size="lg">Large text, for introductions</Text>
          <Text>Regular text, default body copy</Text>
          <Text size="sm">Small text, secondary information</Text>
          <Text size="xs">Extra small, captions and labels</Text>
          <Divider />
          <Text weight="normal">Normal weight (400)</Text>
          <Text weight="medium">Medium weight (500)</Text>
          <Text weight="semibold">Semibold weight (600)</Text>
          <Text weight="bold">Bold weight (700)</Text>
          <Divider />
          <Text>Default text colour</Text>
          <Text muted>Muted text colour</Text>
          <Text className="text-brand-purple">Primary colour text</Text>
        </div>
      </Specimen>

      <Specimen name="Divider" note="variant, label, orientation, contrast">
        <div className="space-y-4">
          <Divider />
          <Divider variant="dashed" />
          <Divider variant="dotted" />
          <Divider label="OR" />
          <Divider contrast="high" />
          <div className="flex items-center gap-4 h-12">
            <span>Left</span>
            <Divider orientation="vertical" />
            <span>Right</span>
          </div>
        </div>
      </Specimen>
    </>
  );
}

function Buttons() {
  return (
    <Specimen name="Button" note="variant x size x state; radius is a fixed ratio of height">
      <div className="space-y-8">
        <Row label="Variants">
          <Button variant="primary">Primary</Button>
          <Button variant="secondary">Secondary</Button>
          <Button variant="outline">Outline</Button>
          <Button variant="ghost">Ghost</Button>
        </Row>
        <Row label="Sizes (40, 48, 64 px high; 16, 20, 26 px radius)">
          <Button size="sm">Small</Button>
          <Button size="md">Medium</Button>
          <Button size="lg">Large</Button>
        </Row>
        <Row label="States">
          <Button>Default</Button>
          <Button loading>Loading</Button>
          <Button disabled>Disabled</Button>
        </Row>
        <Row label="fullWidth">
          <Button fullWidth>Continue</Button>
        </Row>
      </div>
    </Specimen>
  );
}

function Inputs() {
  return (
    <div className="max-w-md space-y-10">
      <Specimen name="Input" note="inputSize, error, disabled">
        <div className="space-y-4">
          <Input placeholder="Small input" inputSize="sm" />
          <Input placeholder="Medium input" inputSize="md" />
          <Input placeholder="Large input" inputSize="lg" />
          <Input placeholder="Invalid input" error="This field is required" />
          <Input placeholder="Disabled input" disabled />
        </div>
      </Specimen>
      <Specimen name="InputField" note="label, helperText, required, error around Input">
        <div className="space-y-4">
          <InputField label="E-mail address" placeholder="you@example.com" type="email" helperText="Never shared" required />
          <InputField label="Workspace name" placeholder="My workspace" error="Already taken" />
        </div>
      </Specimen>
      <Specimen name="Textarea" note="resize, inputSize">
        <div className="space-y-4">
          <Textarea placeholder="Write your message here" />
          <Textarea placeholder="Non-resizable" resize="none" inputSize="sm" />
        </div>
      </Specimen>
    </div>
  );
}

function Selection() {
  const [selectValue, setSelectValue] = useState('');
  const [multiValue, setMultiValue] = useState<string[]>(['react']);
  const [smartValue, setSmartValue] = useState('');
  const [radioValue, setRadioValue] = useState('option1');
  const [checkboxValues, setCheckboxValues] = useState<string[]>(['email']);
  const [toggleValue, setToggleValue] = useState(true);
  const [cardValue, setCardValue] = useState('pro');
  const [chipValue, setChipValue] = useState<string[]>(['react', 'astro']);

  return (
    <>
      <Specimen name="Select" note="single value; the list is a portal">
        <div className="max-w-md space-y-4">
          <Select options={frameworks} value={selectValue} onChange={setSelectValue} placeholder="Choose a framework" />
          <Select options={frameworks} value="vue" placeholder="Disabled" disabled />
          <Select options={frameworks} value="" placeholder="With error" error="Pick one" />
        </div>
      </Specimen>
      <Specimen name="MultiSelect" note="value: string[]">
        <div className="max-w-md">
          <MultiSelect options={frameworks} value={multiValue} onChange={setMultiValue} placeholder="Select frameworks" />
        </div>
      </Specimen>
      <Specimen name="SmartSelect" note="searchable, clearable, loading">
        <div className="max-w-md space-y-4">
          <SmartSelect
            options={countries}
            value={smartValue}
            onChange={(v) => setSmartValue(v as string)}
            placeholder="Search for a country"
            searchable
            clearable
          />
          <SmartSelect options={countries} value="" onChange={() => {}} placeholder="Loading" loading />
        </div>
      </Specimen>
      <Specimen name="Radio, RadioGroup" note="RadioGroup takes options; Radio is the single control">
        <div className="grid md:grid-cols-2 gap-8">
          <RadioGroup
            name="demo-radio"
            options={[
              { value: 'option1', label: 'Option 1', description: 'The first option' },
              { value: 'option2', label: 'Option 2', description: 'The second option' },
              { value: 'option3', label: 'Option 3', description: 'Disabled', disabled: true },
            ]}
            value={radioValue}
            onChange={setRadioValue}
          />
          <div className="space-y-3">
            <Radio name="single" label="Small" size="sm" defaultChecked />
            <Radio name="single" label="Medium" size="md" />
            <Radio name="single" label="Large" size="lg" />
          </div>
        </div>
      </Specimen>
      <Specimen name="Checkbox, CheckboxGroup" note="indeterminate, description, error">
        <div className="grid md:grid-cols-2 gap-8">
          <CheckboxGroup options={channels} value={checkboxValues} onChange={setCheckboxValues} />
          <div className="space-y-4">
            <Checkbox label="I agree to the terms" description="By ticking this box you accept the terms" />
            <Checkbox
              label="Select all"
              indeterminate={checkboxValues.length > 0 && checkboxValues.length < channels.length}
              checked={checkboxValues.length === channels.length}
              onChange={(checked) => setCheckboxValues(checked ? channels.map((o) => o.value) : [])}
            />
            <Checkbox label="With error" error="Required" />
          </div>
        </div>
      </Specimen>
      <Specimen name="Toggle" note="size, description">
        <div className="flex flex-wrap gap-8">
          <Toggle label="Notifications" description="Receive e-mail notifications" checked={toggleValue} onChange={setToggleValue} />
          <Toggle label="Small" size="sm" />
          <Toggle label="Large" size="lg" defaultChecked />
          <Toggle label="Disabled" disabled />
        </div>
      </Specimen>
      <Specimen name="SelectCards, MultiSelectCards" note="variant: cards | chips | list">
        <div className="space-y-10">
          <SelectCards
            options={[
              { value: 'starter', label: 'Starter', description: 'For small projects', icon: <Sparkles className="w-5 h-5" /> },
              { value: 'pro', label: 'Professional', description: 'For growing businesses', icon: <Rocket className="w-5 h-5" /> },
              { value: 'enterprise', label: 'Enterprise', description: 'Advanced features', icon: <Shield className="w-5 h-5" /> },
            ]}
            value={cardValue}
            onChange={setCardValue}
            variant="cards"
            columns={3}
          />
          <MultiSelectCards options={[...frameworks, { value: 'next', label: 'Next.js' }]} value={chipValue} onChange={setChipValue} variant="chips" />
          <div className="max-w-md">
            <SelectCards
              options={[
                { value: 'email', label: 'E-mail', description: 'Get updates by e-mail' },
                { value: 'sms', label: 'SMS', description: 'Receive text messages' },
                { value: 'push', label: 'Push', description: 'Browser notifications' },
              ]}
              value="sms"
              onChange={() => {}}
              variant="list"
            />
          </div>
        </div>
      </Specimen>
    </>
  );
}

function BadgesAvatars() {
  return (
    <>
      <Specimen name="Badge" note="variant, dot, size">
        <div className="space-y-6">
          <Row label="Variants">
            <Badge>Default</Badge>
            <Badge variant="primary">Primary</Badge>
            <Badge variant="secondary">Secondary</Badge>
            <Badge variant="success">Success</Badge>
            <Badge variant="warning">Warning</Badge>
            <Badge variant="error">Error</Badge>
            <Badge variant="info">Info</Badge>
            <Badge variant="outline">Outline</Badge>
          </Row>
          <Row label="With dot">
            <Badge variant="success" dot>
              Online
            </Badge>
            <Badge variant="warning" dot>
              Away
            </Badge>
            <Badge variant="error" dot>
              Offline
            </Badge>
          </Row>
          <Row label="Sizes">
            <Badge size="sm">Small</Badge>
            <Badge size="md">Medium</Badge>
            <Badge size="lg">Large</Badge>
          </Row>
        </div>
      </Specimen>
      <Specimen name="StatusBadge" note="one per status">
        <div className="flex flex-wrap items-center gap-3">
          {(['active', 'inactive', 'pending', 'completed', 'failed', 'draft', 'published', 'archived'] as const).map((s) => (
            <StatusBadge key={s} status={s} />
          ))}
        </div>
      </Specimen>
      <Specimen name="Avatar, AvatarGroup" note="size, status, shape, max">
        <div className="space-y-6">
          <Row label="Sizes">
            {(['xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const).map((s) => (
              <Avatar key={s} name="Mira Keller" size={s} />
            ))}
          </Row>
          <Row label="Status and shape">
            <Avatar name="Online" status="online" size="lg" />
            <Avatar name="Away" status="away" size="lg" />
            <Avatar name="Busy" status="busy" size="lg" />
            <Avatar name="Offline" status="offline" size="lg" />
            <Avatar name="Square" shape="square" size="lg" />
          </Row>
          <Row label="AvatarGroup, max 4 of 6">
            <AvatarGroup avatars={people.map((p) => ({ name: p.name })).concat([{ name: 'Sara Meier' }, { name: 'Tim Huber' }])} max={4} size="md" />
          </Row>
        </div>
      </Specimen>
    </>
  );
}

function Loaders() {
  return (
    <>
      <Specimen name="Spinner" note="size, color, label">
        <div className="flex items-center gap-6">
          <Spinner size="xs" />
          <Spinner size="sm" />
          <Spinner size="md" />
          <Spinner size="lg" />
          <Spinner size="xl" />
          <Spinner size="md" label="Loading" />
          <span className="bg-ink rounded-lg p-3">
            <Spinner size="md" color="white" />
          </span>
        </div>
      </Specimen>
      <Specimen name="AlchemyLoader, AlchemyInlineLoader" note="AlchemyPageLoader is the same loader as a fixed full-screen overlay and is not rendered here">
        <div className="space-y-8">
          <div className="flex items-end gap-8">
            <AlchemyLoader size="sm" label="Small" />
            <AlchemyLoader size="md" label="Medium" />
            <AlchemyLoader size="lg" label="Large" />
            <AlchemyLoader size="xl" label="Extra large" />
          </div>
          <Divider contrast="high" />
          <div className="flex items-end gap-8">
            <AlchemyLoader size="md" variant="bubble" label="Bubble" />
            <AlchemyLoader size="md" variant="pulse" label="Pulse" />
            <AlchemyLoader size="md" variant="bounce" label="Bounce" />
            <AlchemyLoader size="md" variant="spin" label="Spin" />
          </div>
          <Divider contrast="high" />
          <div className="flex items-center gap-6">
            <AlchemyInlineLoader size="xs" />
            <AlchemyInlineLoader size="sm" />
            <AlchemyInlineLoader size="md" />
          </div>
        </div>
      </Specimen>
      <Specimen name="Skeleton" note="variant text | circular | rectangular | rounded; lines">
        <div className="space-y-4 max-w-md">
          <div className="flex items-center gap-4">
            <Skeleton variant="circular" width={48} height={48} />
            <div className="flex-1 space-y-2">
              <Skeleton variant="text" width="60%" />
              <Skeleton variant="text" width="40%" />
            </div>
          </div>
          <Skeleton variant="rectangular" height={60} />
          <Skeleton variant="rounded" height={100} />
          <Skeleton variant="text" lines={3} />
        </div>
      </Specimen>
      <Specimen name="SkeletonCard, SkeletonProfile, SkeletonListItem, SkeletonForm, SkeletonTable, SkeletonArticle">
        <div className="grid md:grid-cols-2 gap-6">
          <div>
            <Text size="sm" muted className="mb-2">
              SkeletonCard
            </Text>
            <SkeletonCard />
          </div>
          <div>
            <Text size="sm" muted className="mb-2">
              SkeletonProfile
            </Text>
            <SkeletonProfile />
          </div>
          <div>
            <Text size="sm" muted className="mb-2">
              SkeletonListItem
            </Text>
            <div className="border border-stone-200 rounded-xl">
              <SkeletonListItem />
              <SkeletonListItem />
              <SkeletonListItem />
            </div>
          </div>
          <div>
            <Text size="sm" muted className="mb-2">
              SkeletonForm
            </Text>
            <SkeletonForm fields={2} />
          </div>
          <div className="md:col-span-2">
            <Text size="sm" muted className="mb-2">
              SkeletonTable
            </Text>
            <SkeletonTable rows={3} />
          </div>
          <div className="md:col-span-2">
            <Text size="sm" muted className="mb-2">
              SkeletonArticle
            </Text>
            <SkeletonArticle />
          </div>
        </div>
      </Specimen>
    </>
  );
}

function TablesCards() {
  const [sort, setSort] = useState<'asc' | 'desc' | null>('asc');
  const rows = [...people].sort((a, b) => (sort === 'desc' ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name)));
  return (
    <>
      <Specimen name="DataTable" note="columns with render, striped, hoverable, getRowKey, emptyMessage">
        <div className="space-y-6" data-gallery-focus="true">
          <DataTable<Person>
            data={people}
            columns={[
              { key: 'name', header: 'Name', sortable: true },
              { key: 'email', header: 'E-mail', sortable: true },
              { key: 'status', header: 'Status', render: (p) => <StatusBadge status={p.status as 'active' | 'pending' | 'inactive'} /> },
              { key: 'role', header: 'Role', align: 'right' },
            ]}
            striped
            hoverable
            getRowKey={(p) => p.id}
          />
          <DataTable<Person> data={[]} columns={[{ key: 'name', header: 'Name' }]} emptyMessage="No people yet" />
        </div>
      </Specimen>
      <Specimen name="Table, TableHeader, TableBody, TableRow, TableHeadCell, TableCell" note="the composable half; size sm, selected row, sortable head">
        <Table size="sm" hoverable>
          <TableHeader>
            <TableRow>
              <TableHeadCell sortable sortDirection={sort} onSort={() => setSort(sort === 'asc' ? 'desc' : 'asc')}>
                Name
              </TableHeadCell>
              <TableHeadCell>Role</TableHeadCell>
              <TableHeadCell align="right" width={120}>
                Status
              </TableHeadCell>
            </TableRow>
          </TableHeader>
          <TableBody>
            {rows.map((p, i) => (
              <TableRow key={p.id} selected={i === 0}>
                <TableCell>{p.name}</TableCell>
                <TableCell>{p.role}</TableCell>
                <TableCell align="right">
                  <StatusBadge status={p.status as 'active' | 'pending' | 'inactive'} size="sm" />
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </Specimen>
      <Specimen name="Card, CardHeader, CardContent, CardFooter" note="variant default | glass; padding none to xl">
        <div className="grid md:grid-cols-2 gap-6">
          <Card variant="glass" padding="xl">
            <CardHeader title="Welcome back" subtitle="Sign in to your account" />
            <CardContent className="mt-6">
              <div className="space-y-4">
                <Input placeholder="E-mail" type="email" />
                <Input placeholder="Password" type="password" />
              </div>
            </CardContent>
            <CardFooter className="mt-6">
              <Button fullWidth>Continue</Button>
            </CardFooter>
          </Card>
          <Card variant="default" padding="lg">
            <Heading level={4} className="mb-4">
              Default variant
            </Heading>
            <Text muted className="mb-6">
              Solid card without the glass finish. Good for high-contrast content.
            </Text>
            <Button variant="outline">Learn more</Button>
          </Card>
          <Card variant="default" padding="none" className="md:col-span-2">
            <CardHeader title="padding none" subtitle="the content brings its own" centered className="p-4" />
          </Card>
        </div>
      </Specimen>
    </>
  );
}

function ToastButtons() {
  const toast = useToast();
  return (
    <div className="flex flex-wrap gap-3">
      <Button size="sm" onClick={() => toast.success('Saved')}>
        success
      </Button>
      <Button size="sm" variant="outline" onClick={() => toast.error('Could not save', { duration: 6000 })}>
        error
      </Button>
      <Button size="sm" variant="ghost" onClick={() => toast.info('Three items exported')}>
        info
      </Button>
      <Button size="sm" variant="secondary" onClick={() => toast.showToast('Sticky until dismissed', 'info', { duration: 0 })}>
        sticky
      </Button>
    </div>
  );
}

function NavigationToasts() {
  return (
    <>
      <Specimen name="ScrollNav" note="FloatingScrollNav is the same list fixed to the viewport edge and is not rendered here">
        <div className="space-y-4">
          <ScrollNav
            items={[
              { id: 'demo-a', label: 'Overview' },
              { id: 'demo-b', label: 'Details' },
              { id: 'demo-c', label: 'History' },
            ]}
          />
          <div className="grid grid-cols-3 gap-3">
            {['demo-a', 'demo-b', 'demo-c'].map((id) => (
              <div key={id} id={id} className="rounded-xl border border-line bg-white p-4">
                <Text size="sm" muted>
                  #{id}
                </Text>
              </div>
            ))}
          </div>
        </div>
      </Specimen>
      <Specimen name="ToastProvider, useToast" note="the toasts stack at the bottom right of the viewport; error toasts stay 6 s, the rest 4 s, 0 is sticky">
        <ToastProvider>
          <ToastButtons />
        </ToastProvider>
      </Specimen>
    </>
  );
}

/* ---- the component -------------------------------------------------- */

export default function Demo({ section }: Props) {
  return (
    <ThemeProvider>
      <div className="min-h-full bg-stone-100 text-ink font-sans">
        <div className="max-w-5xl mx-auto px-6 py-8 space-y-12">
          {section === 'foundations' && <Foundations />}
          {section === 'buttons' && <Buttons />}
          {section === 'inputs' && <Inputs />}
          {section === 'selection' && <Selection />}
          {section === 'badges-avatars' && <BadgesAvatars />}
          {section === 'loaders' && <Loaders />}
          {section === 'tables-cards' && <TablesCards />}
          {section === 'navigation-toasts' && <NavigationToasts />}
        </div>
      </div>
    </ThemeProvider>
  );
}

<Route /design-system> (public, no PrivateRoute, App.tsx line 216)
  DesignSystemDemo
    div.min-h-screen.bg-stone-100 (fixed radial-gradient overlay in brand purple)
    FloatingScrollNav (position=right, one dot per section id)
    header.sticky (Heading level=3 "Alchemy UI", Text "Design System", theme toggle: no-op)
    main.max-w-5xl
      section#hero        Heading level=1, Text, Button primary + outline
      section#spacing     the 4 px scale, one bar per step
      section#radius      the radius steps
      section#colors      swatches read from `brand` (virtual:tailwind-brand)
      section#typography  Heading levels 1 to 4, Text sizes
      section#buttons     Button x variants (primary, secondary, outline, ghost) x sizes (sm, md, lg) x loading
      section#inputs      Input, InputField (label, help, error)
      section#textarea    Textarea
      section#selects     Select, MultiSelect, SmartSelect
      section#radio-checkbox  RadioGroup, Checkbox, CheckboxGroup
      section#toggle      Toggle
      section#select-cards    SelectCards, MultiSelectCards
      section#badges      Badge, StatusBadge
      section#avatars     Avatar, AvatarGroup
      section#loaders     Spinner, Skeleton x 6 variants, AlchemyLoader
      section#dividers    Divider
      section#tables      DataTable
      section#cards       Card > CardHeader, CardContent, CardFooter