---
import Layout from "../layouts/Layout.astro";

import Button from "../components/Button/button.astro";
import Badge from "../components/Badge/badge.astro";
import Avatar from "../components/Avatar/avatar.astro";
import Toggle from "../components/Toggle/toggle.astro";
import Checkbox from "../components/Checkbox/checkbox.astro";
import Radio from "../components/Radio/radio.astro";
import TextField from "../components/textField/textField.astro";
import Select from "../components/Select/select.astro";
import SelectOption from "../components/Select/selectOption.astro";
import NumericStepper from "../components/numericStepper/numericStepper.astro";
import Tab from "../components/Tabs/tab.astro";
import TabItem from "../components/Tabs/tabItem.astro";
import TabContent from "../components/Tabs/tabContent.astro";
import Link from "../components/Link/link.astro";
import Breadcrumb from "../components/Breadcrumb/breadcrumb.astro";
import BreadcrumbItem from "../components/Breadcrumb/breadcrumbItem.astro";
import Pagination from "../components/pagination/pagination.astro";
import PaginationNumber from "../components/pagination/paginationNumber.astro";
import Navbar from "../components/Navbar/navbar.astro";
import Sidebar from "../components/Sidebar/sidebar.astro";
import SidebarItem from "../components/Sidebar/sidebarItem.astro";
import Card from "../components/Card/card.astro";
import ListItem from "../components/ListItem/listItem.astro";
import ListItemTitle from "../components/ListItem/listItemTitle.astro";
import ListItemSubtitle from "../components/ListItem/listItemSubtitle.astro";
import Notification from "../components/Notifications/notification.astro";
import LoadingBar from "../components/LoadingBar/loadingBar.astro";
import Tooltip from "../components/Tooltip/tooltip.astro";
import Modal from "../components/Modal/modal.astro";

import {
  Arrow2Icon,
  BinIcon,
  BurgerIcon,
  CalendarIcon,
  CheckIcon,
  CloseIcon,
  CodeIcon,
  CubeIcon,
  DownloadIcon,
  FilterIcon,
  HelpIcon,
  HomeIcon,
  LinkIcon,
  MinusIcon,
  MoreIcon,
  OverviewIcon,
  PlusIcon,
  ProfileIcon,
  SearchIcon,
  SettingsIcon,
  ShareIcon,
  ShieldIcon,
  SortIcon,
  StatsIcon,
  UploadIcon,
} from "../components/Icons/index.ts";

const tones = [
  "primary",
  "neutral",
  "success",
  "warning",
  "error",
  "info",
] as const;
const btnTypes = ["primary", "secondary", "ghost", "danger"] as const;
const sizes = ["sm", "md", "lg"] as const;
const notifTypes = ["info", "success", "warning", "error"] as const;
const notifMessages: Record<string, string> = {
  info: "Information about the operation.",
  success: "The operation completed successfully.",
  warning: "A warning occurred. Please check the details.",
  error: "An error occurred. Please try again.",
};
const tooltipPositions = ["top", "bottom", "left", "right"] as const;
const iconLib = [
  { name: "Arrow2", Icon: Arrow2Icon },
  { name: "Bin", Icon: BinIcon },
  { name: "Burger", Icon: BurgerIcon },
  { name: "Calendar", Icon: CalendarIcon },
  { name: "Check", Icon: CheckIcon },
  { name: "Close", Icon: CloseIcon },
  { name: "Code", Icon: CodeIcon },
  { name: "Cube", Icon: CubeIcon },
  { name: "Download", Icon: DownloadIcon },
  { name: "Filter", Icon: FilterIcon },
  { name: "Help", Icon: HelpIcon },
  { name: "Home", Icon: HomeIcon },
  { name: "Link", Icon: LinkIcon },
  { name: "Minus", Icon: MinusIcon },
  { name: "More", Icon: MoreIcon },
  { name: "Overview", Icon: OverviewIcon },
  { name: "Plus", Icon: PlusIcon },
  { name: "Profile", Icon: ProfileIcon },
  { name: "Search", Icon: SearchIcon },
  { name: "Settings", Icon: SettingsIcon },
  { name: "Share", Icon: ShareIcon },
  { name: "Shield", Icon: ShieldIcon },
  { name: "Sort", Icon: SortIcon },
  { name: "Stats", Icon: StatsIcon },
  { name: "Upload", Icon: UploadIcon },
] as const;

const tokenColors = [
  "text",
  "neutral",
  "background",
  "surface",
  "surface-2",
  "border",
  "primary",
  "secondary",
  "accent",
  "primary-soft",
  "success-medium",
  "warning-medium",
  "error-medium",
  "info-medium",
];
const spacingScale = [
  ["3xs", "2"],
  ["2xs", "4"],
  ["xs", "8"],
  ["sm", "12"],
  ["md", "16"],
  ["lg", "24"],
  ["xl", "32"],
  ["2xl", "48"],
  ["3xl", "64"],
];
const radiusScale = ["xs", "sm", "md", "lg", "xl", "2xl", "full"];
---

<Layout title="Nova Design System — Gallery">
  <div class="g-page">
    <header class="g-topbar">
      <div class="g-brand">
        <span class="g-mark"></span>
        <span class="g-name">Nova Design System</span>
        <Badge type="primary" variant="soft">v0.06</Badge>
      </div>
      <Button type="secondary" size="sm" id="theme-btn">Toggle theme</Button>
    </header>

    <div class="g-layout">
      <nav class="g-rail">
        <p class="g-rail__head">Nova DS</p>
        <a href="#foundations">Foundations</a>
        <a href="#buttons">Button</a>
        <a href="#badges">Badge</a>
        <a href="#controls">Toggle · Check · Radio</a>
        <a href="#textfield">TextField</a>
        <a href="#select">Select</a>
        <a href="#stepper">Numeric stepper</a>
        <a href="#avatar">Avatar</a>
        <a href="#loading">Loading bar</a>
        <a href="#listitem">List item</a>
        <a href="#link">Link</a>
        <a href="#tabs">Tabs</a>
        <a href="#breadcrumb">Breadcrumb</a>
        <a href="#pagination">Pagination</a>
        <a href="#notification">Notification</a>
        <a href="#tooltip">Tooltip</a>
        <a href="#card">Card</a>
        <a href="#chrome">Navbar · Sidebar</a>
        <a href="#modal">Modal</a>
        <a href="#icons">Icons</a>
      </nav>

      <main class="g-content">
        <!-- ── FOUNDATIONS ── -->
        <section id="foundations" class="blk">
          <h2>Foundations</h2>
          <p class="blk__desc">
            Design tokens — type, color, spacing, radius, elevation.
          </p>

          <div class="vg">
            <span class="vg__lbl"
              >Type scale — Intel One Mono (display) · Geist (UI)</span
            >
            <div class="vg__body type-scale">
              <div class="type-row">
                <span class="type-tag">text-5xl</span><span class="disp t5xl"
                  >Nova 52px</span>
              </div>
              <div class="type-row">
                <span class="type-tag">text-4xl</span><span class="disp t4xl"
                  >Nova 40px</span>
              </div>
              <div class="type-row">
                <span class="type-tag">text-3xl</span><span class="disp t3xl"
                  >Nova 30px</span>
              </div>
              <div class="type-row">
                <span class="type-tag">text-2xl</span><span class="disp t2xl"
                  >Nova 22px</span>
              </div>
              <div class="type-row">
                <span class="type-tag">text-xl</span><span class="disp txl"
                  >Nova 18px</span>
              </div>
              <div class="type-row">
                <span class="type-tag">text-lg</span><span class="sans tlg"
                  >Nova 16px</span>
              </div>
              <div class="type-row">
                <span class="type-tag">text-base</span><span class="sans tbase"
                  >Nova 14px</span>
              </div>
              <div class="type-row">
                <span class="type-tag">text-label</span><span
                  class="sans tlabel">Nova 13px 600</span>
              </div>
              <div class="type-row">
                <span class="type-tag">text-sm</span><span class="sans tsm"
                  >Nova 12px</span>
              </div>
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl">Color tokens (adapt to theme)</span>
            <div class="vg__body swatch-row">
              {
                tokenColors.map((t) => (
                  <div class="swatch">
                    <div
                      class="swatch-chip"
                      style={`background:var(--nds-${t})`}
                    />
                    <span class="swatch-name">{t}</span>
                  </div>
                ))
              }
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl">Spacing scale</span>
            <div
              class="vg__body"
              style="flex-direction:column;align-items:flex-start;gap:8px;"
            >
              {
                spacingScale.map(([n, px]) => (
                  <div class="sp-row">
                    <span class="sp-label">
                      spacing-{n} · {px}px
                    </span>
                    <div class="sp-bar" style={`width:${px}px`} />
                  </div>
                ))
              }
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl">Radius scale</span>
            <div class="vg__body">
              {
                radiusScale.map((n) => (
                  <div
                    class="rad-chip"
                    style={`border-radius:var(--nds-radius-${n})`}
                  >
                    <span>{n}</span>
                  </div>
                ))
              }
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl">Elevation</span>
            <div class="vg__body">
              {
                (["sm", "md", "lg"] as const).map((n) => (
                  <div
                    class="elev-chip"
                    style={`box-shadow:var(--nds-shadow-${n})`}
                  >
                    shadow-{n}
                  </div>
                ))
              }
            </div>
          </div>
        </section>

        <!-- ── BUTTON ── -->
        <section id="buttons" class="blk">
          <h2>Button</h2>
          <p class="blk__desc">Variants, sizes, icon and disabled states.</p>

          <div class="vg">
            <span class="vg__lbl">Variants × md</span>
            <div class="vg__body">
              {
                btnTypes.map((t) => (
                  <Button type={t} size="md">
                    {t[0].toUpperCase() + t.slice(1)}
                  </Button>
                ))
              }
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl">Sizes (primary)</span>
            <div class="vg__body">
              {
                sizes.map((s) => (
                  <Button type="primary" size={s}>
                    Size {s}
                  </Button>
                ))
              }
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl">With icon · icon-only</span>
            <div class="vg__body">
              <Button type="primary" size="md"
                ><PlusIcon slot="icon-left" size={16} />New service</Button
              >
              <Button type="secondary" size="md"
                >Filter<FilterIcon slot="icon-right" size={16} /></Button
              >
              <Button type="ghost" size="md" icon={true}
                ><MoreIcon size={18} /></Button
              >
              <Button type="primary" size="md" icon={true}
                ><DownloadIcon size={18} /></Button
              >
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl">Disabled</span>
            <div class="vg__body">
              {
                btnTypes.map((t) => (
                  <Button type={t} size="md" disabled>
                    {t}
                  </Button>
                ))
              }
            </div>
          </div>
        </section>

        <!-- ── BADGE ── -->
        <section id="badges" class="blk">
          <h2>Badge</h2>
          <p class="blk__desc">Tones × soft / solid.</p>

          <div class="vg">
            <span class="vg__lbl">Soft</span>
            <div class="vg__body">
              {
                tones.map((t) => (
                  <Badge type={t} variant="soft">
                    {t}
                  </Badge>
                ))
              }
            </div>
          </div>
          <div class="vg">
            <span class="vg__lbl">Solid</span>
            <div class="vg__body">
              {
                tones.map((t) => (
                  <Badge type={t} variant="solid">
                    {t}
                  </Badge>
                ))
              }
            </div>
          </div>
        </section>

        <!-- ── CONTROLS ── -->
        <section id="controls" class="blk">
          <h2>Toggle · Checkbox · Radio</h2>
          <p class="blk__desc">Selection controls in every state.</p>

          <div class="vg">
            <span class="vg__lbl">Toggle — off / on</span>
            <div class="vg__body">
              <Toggle id="tg-off" />
              <Toggle id="tg-on" data-checked={true} />
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl"
              >Checkbox — unchecked / checked / disabled</span
            >
            <div class="vg__body">
              <Checkbox id="cb1">Unchecked</Checkbox>
              <Checkbox id="cb2" checked>Checked</Checkbox>
              <Checkbox id="cb3" checked disabled>Disabled</Checkbox>
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl">Radio group</span>
            <div
              class="vg__body"
              style="flex-direction:column;align-items:flex-start;"
            >
              <Radio id="rb1" name="plan" checked>On-demand</Radio>
              <Radio id="rb2" name="plan">Reserved</Radio>
              <Radio id="rb3" name="plan" disabled>Spot</Radio>
            </div>
          </div>
        </section>

        <!-- ── TEXTFIELD ── -->
        <section id="textfield" class="blk">
          <h2>TextField</h2>
          <p class="blk__desc">Text, email, password, textarea.</p>

          <div class="vg">
            <span class="vg__lbl">Fields</span>
            <div
              class="vg__body"
              style="flex-direction:column;align-items:stretch;max-width:380px;"
            >
              <TextField label="Service name" placeholder="api-gateway" />
              <TextField
                label="Email"
                type="email"
                placeholder="you@nova.dev"
              />
              <TextField
                label="Password"
                type="password"
                placeholder="••••••••"
              />
              <TextField
                label="Message"
                type="textarea"
                placeholder="Type here…"
                max={120}
              />
            </div>
          </div>
        </section>

        <!-- ── SELECT ── -->
        <section id="select" class="blk">
          <h2>Select</h2>
          <p class="blk__desc">Default and disabled.</p>

          <div class="vg">
            <span class="vg__lbl">Select</span>
            <div class="vg__body">
              <Select default="option3">
                <SelectOption value="option1">Option 1</SelectOption>
                <SelectOption value="option2">Option 2</SelectOption>
                <SelectOption value="option3">Option 3</SelectOption>
                <SelectOption value="option4">Option 4</SelectOption>
                <SelectOption value="option5" disabled>Option 5</SelectOption>
              </Select>
              <Select disabled>
                <SelectOption value="d">Disabled</SelectOption>
              </Select>
            </div>
          </div>
        </section>

        <!-- ── NUMERIC STEPPER ── -->
        <section id="stepper" class="blk">
          <h2>Numeric stepper</h2>
          <p class="blk__desc">Increment / decrement control.</p>

          <div class="vg">
            <span class="vg__lbl">Stepper</span>
            <div class="vg__body">
              <NumericStepper min={-15} max={10} value={5} step={5} id="ns1" />
            </div>
          </div>
        </section>

        <!-- ── AVATAR ── -->
        <section id="avatar" class="blk">
          <h2>Avatar</h2>
          <p class="blk__desc">Photo and initials.</p>

          <div class="vg">
            <span class="vg__lbl">Types</span>
            <div class="vg__body">
              <Avatar
                type="photo"
                name="John Doe"
                image="https://i.pravatar.cc/80?img=12"
              />
              <Avatar type="initials" name="Ava Stone" />
              <Avatar type="initials" name="Jane Smith" />
            </div>
          </div>
        </section>

        <!-- ── LOADING BAR ── -->
        <section id="loading" class="blk">
          <h2>Loading bar</h2>
          <p class="blk__desc">Determinate and indeterminate.</p>

          <div class="vg">
            <span class="vg__lbl">Known 75% · indeterminate</span>
            <div
              class="vg__body"
              style="flex-direction:column;align-items:stretch;width:100%"
            >
              <LoadingBar type="known" percentage={75} width="100%" />
              <LoadingBar type="unknown" width="100%" />
            </div>
          </div>
        </section>

        <!-- ── LIST ITEM ── -->
        <section id="listitem" class="blk">
          <h2>List item</h2>
          <p class="blk__desc">Title and subtitle rows.</p>

          <div class="vg">
            <span class="vg__lbl">List</span>
            <div
              class="vg__body"
              style="flex-direction:column;align-items:stretch;padding:0;gap:0;"
            >
              <ListItem>
                <ListItemTitle>api-gateway</ListItemTitle>
                <ListItemSubtitle>Edge routing · eu-west-1</ListItemSubtitle>
              </ListItem>
              <ListItem>
                <ListItemTitle>postgres-main</ListItemTitle>
                <ListItemSubtitle>Database · eu-west-1</ListItemSubtitle>
              </ListItem>
              <ListItem>
                <ListItemTitle>redis-cache</ListItemTitle>
                <ListItemSubtitle>Cache · eu-west-1</ListItemSubtitle>
              </ListItem>
            </div>
          </div>
        </section>

        <!-- ── LINK ── -->
        <section id="link" class="blk">
          <h2>Link</h2>
          <p class="blk__desc">Inline and external.</p>

          <div class="vg">
            <span class="vg__lbl">Links</span>
            <div class="vg__body">
              <Link url="https://example.com">Documentation</Link>
              <Link url="https://example.com" blank={true}
                >Open dashboard ↗</Link
              >
            </div>
          </div>
        </section>

        <!-- ── TABS ── -->
        <section id="tabs" class="blk">
          <h2>Tabs</h2>
          <p class="blk__desc">Underline tabs with panels (interactive).</p>

          <div class="vg">
            <span class="vg__lbl">Tabs + content</span>
            <div
              class="vg__body"
              style="flex-direction:column;align-items:stretch;"
            >
              <Tab id="g-tab" defaultActive="images">
                <TabItem id="images">Images</TabItem>
                <TabItem id="videos">Videos</TabItem>
                <TabItem id="docs">Documents</TabItem>
              </Tab>
              <TabContent id="g-tab" itemId="images"
                ><p>🖼️ Image gallery content.</p></TabContent
              >
              <TabContent id="g-tab" itemId="videos"
                ><p>🎬 Video player here.</p></TabContent
              >
              <TabContent id="g-tab" itemId="docs"
                ><p>📄 Document list here.</p></TabContent
              >
            </div>
          </div>
        </section>

        <!-- ── BREADCRUMB ── -->
        <section id="breadcrumb" class="blk">
          <h2>Breadcrumb</h2>
          <p class="blk__desc">Hierarchical navigation.</p>

          <div class="vg">
            <span class="vg__lbl">Breadcrumb</span>
            <div class="vg__body">
              <Breadcrumb>
                <BreadcrumbItem href="/">Home</BreadcrumbItem>
                <BreadcrumbItem href="/services">Services</BreadcrumbItem>
                <BreadcrumbItem current>api-gateway</BreadcrumbItem>
              </Breadcrumb>
            </div>
          </div>
        </section>

        <!-- ── PAGINATION ── -->
        <section id="pagination" class="blk">
          <h2>Pagination</h2>
          <p class="blk__desc">Page numbers with disabled edges.</p>

          <div class="vg">
            <span class="vg__lbl">Pagination</span>
            <div class="vg__body">
              <Pagination defaultPage={3}>
                <PaginationNumber>1</PaginationNumber>
                <PaginationNumber>2</PaginationNumber>
                <PaginationNumber>3</PaginationNumber>
                <PaginationNumber>4</PaginationNumber>
                <PaginationNumber disabled>5</PaginationNumber>
              </Pagination>
            </div>
          </div>
        </section>

        <!-- ── NOTIFICATION ── -->
        <section id="notification" class="blk">
          <h2>Notification</h2>
          <p class="blk__desc">Info, success, warning and error.</p>

          <div class="vg">
            <span class="vg__lbl">All types</span>
            <div
              class="vg__body"
              style="flex-direction:column;align-items:stretch;max-width:460px;"
            >
              {
                notifTypes.map((t) => (
                  <Notification type={t}>{notifMessages[t]}</Notification>
                ))
              }
            </div>
          </div>
        </section>

        <!-- ── TOOLTIP ── -->
        <section id="tooltip" class="blk">
          <h2>Tooltip</h2>
          <p class="blk__desc">Four positions — hover the buttons.</p>

          <div class="vg">
            <span class="vg__lbl">Positions</span>
            <div class="vg__body">
              {
                tooltipPositions.map((pos) => (
                  <Tooltip label={`Tooltip ${pos}`} position={pos}>
                    <Button type="secondary" size="md">
                      {pos[0].toUpperCase() + pos.slice(1)}
                    </Button>
                  </Tooltip>
                ))
              }
            </div>
          </div>
        </section>

        <!-- ── CARD ── -->
        <section id="card" class="blk">
          <h2>Card</h2>
          <p class="blk__desc">With cover, plain and with footer actions.</p>

          <div class="vg">
            <span class="vg__lbl">Cover · plain · with footer</span>
            <div class="vg__body" style="align-items:flex-start;">
              <Card
                title="api-gateway"
                subtitle="Edge routing · 99.98% uptime"
                cover="/peak.jpg"
              >
                <div slot="footer">
                  <Badge type="success" variant="soft">Live</Badge>
                </div>
              </Card>
              <Card
                title="Quick note"
                subtitle="A plain card without a cover image."
              />
              <Card title="Deploy" subtitle="Ship build 4821 to production.">
                <div slot="footer" style="display:flex;gap:8px;">
                  <Button type="ghost" size="sm">Cancel</Button>
                  <Button type="primary" size="sm">Deploy</Button>
                </div>
              </Card>
            </div>
          </div>
        </section>

        <!-- ── APP CHROME ── -->
        <section id="chrome" class="blk">
          <h2>Navbar · Sidebar</h2>
          <p class="blk__desc">App chrome.</p>

          <div class="vg">
            <span class="vg__lbl">Navbar</span>
            <div class="vg__body" style="align-items:stretch;padding:0;">
              <Navbar brand="Nova">
                <a class="navbar__link navbar__link--active" href="#"
                  >Services</a
                >
                <a class="navbar__link" href="#">Incidents</a>
                <a class="navbar__link" href="#">Settings</a>
                <Avatar slot="right" type="initials" name="Ava Stone" />
              </Navbar>
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl">Sidebar</span>
            <div class="vg__body">
              <Sidebar header="Nova">
                <SidebarItem href="#" active
                  ><OverviewIcon slot="icon" size={18} />Overview</SidebarItem
                >
                <SidebarItem href="#"
                  ><StatsIcon slot="icon" size={18} />Metrics</SidebarItem
                >
                <SidebarItem href="#"
                  ><ShieldIcon slot="icon" size={18} />Security</SidebarItem
                >
                <SidebarItem href="#"
                  ><SettingsIcon slot="icon" size={18} />Settings</SidebarItem
                >
              </Sidebar>
            </div>
          </div>
        </section>

        <!-- ── MODAL ── -->
        <section id="modal" class="blk">
          <h2>Modal</h2>
          <p class="blk__desc">
            Overlay dialog — click to open, Escape or overlay to close.
          </p>

          <div class="vg">
            <span class="vg__lbl">Dialog</span>
            <div class="vg__body">
              <Button type="primary" size="md" data-modal-open="gallery-modal"
                >Open modal</Button
              >
            </div>
          </div>

          <Modal id="gallery-modal" title="Confirm deploy">
            Ship build 4821 to production? This rolls out to all edge regions.
            <Fragment slot="footer">
              <Button type="ghost" size="md" data-modal-close>Cancel</Button>
              <Button type="primary" size="md" data-modal-close>Deploy</Button>
            </Fragment>
          </Modal>
        </section>

        <!-- ── ICONS ── -->
        <section id="icons" class="blk">
          <h2>Icons</h2>
          <p class="blk__desc">25 line icons at 16 / 24 / 32 px.</p>

          <div class="vg">
            <span class="vg__lbl">Arrow2 — orientations × 16 / 24 / 32</span>
            <div class="vg__body">
              {
                ([16, 24, 32] as const).map((s) => (
                  <span class="icon-line">
                    <Arrow2Icon size={s} orientation="up" />
                    <Arrow2Icon size={s} orientation="right" />
                    <Arrow2Icon size={s} orientation="down" />
                    <Arrow2Icon size={s} orientation="left" />
                  </span>
                ))
              }
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl">Library — 25 icons at 24px</span>
            <div class="vg__body" style="display:block;">
              <div class="icon-grid">
                {
                  iconLib.map(({ name, Icon }) => (
                    <div class="icon-cell">
                      <Icon size={24} />
                      <span>{name}</span>
                    </div>
                  ))
                }
              </div>
            </div>
          </div>

          <div class="vg">
            <span class="vg__lbl">Sizes — 16 / 24 / 32</span>
            <div class="vg__body">
              {
                [SearchIcon, SettingsIcon, ShareIcon, DownloadIcon].map(
                  (Icon) => (
                    <span class="icon-line">
                      <>
                        <Icon size={16} />
                        <Icon size={24} />
                        <Icon size={32} />
                      </>
                    </span>
                  ),
                )
              }
            </div>
          </div>
        </section>
      </main>
    </div>
  </div>
</Layout>

<script>
  // Persisted theme toggle
  const KEY = "nova-theme";
  const saved = localStorage.getItem(KEY);
  if (saved) document.documentElement.setAttribute("data-theme", saved);
  document.getElementById("theme-btn")?.addEventListener("click", () => {
    const dark = document.documentElement.getAttribute("data-theme") === "dark";
    const next = dark ? "light" : "dark";
    document.documentElement.setAttribute("data-theme", next);
    localStorage.setItem(KEY, next);
  });

  // Smooth rail nav
  document.querySelectorAll(".g-rail a").forEach((a) => {
    a.addEventListener("click", (e) => {
      e.preventDefault();
      const target = document.querySelector(
        (a as HTMLAnchorElement).getAttribute("href")!,
      );
      target?.scrollIntoView({ behavior: "smooth", block: "start" });
    });
  });
</script>

<style lang="scss">
  @use "../styles/tokens/typography" as *;

  .g-page {
    min-height: 100vh;
    background-color: var(--nds-background);
    color: var(--nds-text);
  }

  // ── Topbar ──
  .g-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nds-spacing-md);
    padding: 12px var(--nds-spacing-lg);
    border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
    background: color-mix(in srgb, var(--nds-background) 85%, transparent);
    backdrop-filter: blur(10px);
  }
  .g-brand {
    display: flex;
    align-items: center;
    gap: var(--nds-spacing-xs);
  }
  .g-mark {
    width: 26px;
    height: 26px;
    border-radius: var(--nds-radius-md);
    background: linear-gradient(135deg, var(--nds-primary), var(--nds-accent));
  }
  .g-name {
    @include text-xl;
  }

  // ── Layout ──
  .g-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
  }

  // ── Rail ──
  .g-rail {
    position: sticky;
    top: 53px;
    align-self: start;
    height: calc(100vh - 53px);
    overflow-y: auto;
    padding: var(--nds-spacing-md) var(--nds-spacing-sm);
    border-right: var(--nds-border-width-thin) solid var(--nds-border);
    background: var(--nds-surface);
    &__head {
      @include text-label;
      color: var(--nds-text);
      padding: var(--nds-spacing-xs) var(--nds-spacing-xs) var(--nds-spacing-md);
      margin: 0;
    }
    a {
      display: block;
      padding: 5px var(--nds-spacing-xs);
      border-radius: var(--nds-radius-sm);
      color: var(--nds-neutral);
      text-decoration: none;
      @include text-sm;
      transition:
        background-color 120ms ease,
        color 120ms ease;
      &:hover {
        background: var(--nds-surface-hover);
        color: var(--nds-text);
      }
    }
  }

  // ── Content ──
  .g-content {
    padding: var(--nds-spacing-2xl) var(--nds-spacing-2xl)
      var(--nds-spacing-3xl);
    max-width: 880px;
  }

  // ── Block ──
  .blk {
    margin-bottom: var(--nds-spacing-2xl);
    scroll-margin-top: var(--nds-spacing-lg);
    > h2 {
      @include text-2xl;
      margin: 0 0 var(--nds-spacing-3xs);
    }
    &__desc {
      @include text-base;
      color: var(--nds-neutral);
      margin: 0 0 var(--nds-spacing-lg);
    }
  }

  // ── Variant group ──
  .vg {
    border: var(--nds-border-width-thin) solid var(--nds-border);
    border-radius: var(--nds-radius-lg);
    overflow: hidden;
    background: var(--nds-surface);
    & + & {
      margin-top: var(--nds-spacing-md);
    }

    &__lbl {
      display: block;
      @include text-sm;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--nds-neutral);
      padding: var(--nds-spacing-xs) var(--nds-spacing-md);
      border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
      background: color-mix(in srgb, var(--nds-text) 2.5%, var(--nds-surface));
    }
    &__body {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--nds-spacing-md);
      padding: var(--nds-spacing-lg) var(--nds-spacing-md);
    }
  }

  // ── Foundations specimens ──
  .type-scale {
    flex-direction: column;
    align-items: stretch;
    padding: 0 !important;
    gap: 0 !important;
  }
  .type-row {
    display: flex;
    align-items: baseline;
    gap: var(--nds-spacing-md);
    padding: var(--nds-spacing-sm) var(--nds-spacing-md);
    border-bottom: var(--nds-border-width-thin) solid var(--nds-border);
    &:last-child {
      border-bottom: none;
    }
  }
  .type-tag {
    @include text-sm;
    font-family: var(--nds-font-mono);
    color: var(--nds-neutral);
    width: 80px;
    flex-shrink: 0;
  }
  .disp {
    font-family: var(--nds-font-mono);
    font-weight: 700;
  }
  .sans {
    font-family: var(--nds-font-sans);
  }
  .t5xl {
    font-size: 52px;
  }
  .t4xl {
    font-size: 40px;
  }
  .t3xl {
    font-size: 30px;
  }
  .t2xl {
    font-size: 22px;
  }
  .txl {
    font-size: 18px;
  }
  .tlg {
    font-size: 16px;
    font-weight: 600;
  }
  .tbase {
    font-size: 14px;
  }
  .tlabel {
    font-size: 13px;
    font-weight: 600;
  }
  .tsm {
    font-size: 12px;
  }

  .swatch-row {
    gap: var(--nds-spacing-sm) !important;
    flex-wrap: wrap;
  }
  .swatch {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .swatch-chip {
    width: 80px;
    height: 44px;
    border-radius: var(--nds-radius-md);
    border: var(--nds-border-width-thin) solid var(--nds-border);
  }
  .swatch-name {
    @include text-sm;
    color: var(--nds-neutral);
    font-family: var(--nds-font-mono);
  }

  .sp-row {
    display: flex;
    align-items: center;
    gap: var(--nds-spacing-md);
  }
  .sp-label {
    @include text-sm;
    color: var(--nds-neutral);
    font-family: var(--nds-font-mono);
    width: 160px;
    flex-shrink: 0;
  }
  .sp-bar {
    height: 14px;
    background: var(--nds-primary);
    border-radius: 2px;
  }

  .rad-chip {
    width: 72px;
    height: 72px;
    background: var(--nds-primary-soft);
    border: var(--nds-border-width-thin) solid var(--nds-primary);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 6px;
    span {
      @include text-sm;
      color: var(--nds-primary);
    }
  }
  .elev-chip {
    width: 130px;
    height: 72px;
    background: var(--nds-surface);
    border: var(--nds-border-width-thin) solid var(--nds-border);
    border-radius: var(--nds-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    @include text-sm;
    color: var(--nds-neutral);
    font-family: var(--nds-font-mono);
  }

  // ── Icons ──
  .icon-line {
    display: inline-flex;
    align-items: center;
    gap: var(--nds-spacing-md);
    color: var(--nds-text);
  }
  .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: var(--nds-spacing-xs);
    width: 100%;
  }
  .icon-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--nds-spacing-xs);
    padding: var(--nds-spacing-md) var(--nds-spacing-xs);
    border: var(--nds-border-width-thin) solid var(--nds-border);
    border-radius: var(--nds-radius-md);
    color: var(--nds-text);
    span {
      @include text-sm;
      color: var(--nds-neutral);
      font-family: var(--nds-font-mono);
    }
  }
</style>