// Design System — internal reference. Not part of product IA.

function DesignSystemPage() {
  return (
    <main className="main" data-screen-label="99 Design system">
      <div className="page-header-row">
        <div>
          <h1 className="greeting">Design system</h1>
          <div className="date-line">
            My Geni foundation · <b>Core 2.0 palette · WorkForge structure</b> · v0.3
          </div>
        </div>
        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn btn-white btn-sm">
            <Icon name="paperclip" size={15} strokeWidth={1.75} />
            <span>Download tokens</span>
          </button>
        </div>
      </div>

      <div className="ds-shell">
        <aside className="ds-side">
          <div className="group-label">Foundations</div>
          <a href="#colors">Colors</a>
          <a href="#typography">Typography</a>
          <a href="#spacing">Spacing</a>
          <a href="#radius">Radius</a>
          <a href="#shadows">Shadows</a>
          <div className="group-label">Components</div>
          <a href="#buttons">Buttons</a>
          <a href="#labels">Chips / Status</a>
          <a href="#inputs">Inputs</a>
          <a href="#tabs">Tabs</a>
          <a href="#avatars">Avatars</a>
          <a href="#rings">Rings &amp; progress</a>
          <a href="#dataviz">Data viz</a>
          <a href="#cards">Cards</a>
          <a href="#doc-previews">File / Doc previews</a>
          <a href="#navigation">Navigation</a>
          <a href="#surface">Modal / Drawer</a>
          <a href="#tables">Tables</a>
          <div className="group-label">Patterns</div>
          <a href="#empty-states">Empty states</a>
          <a href="#illustrations">Illustrations</a>
          <a href="#chips-contract-client">Contract &amp; Client chips</a>
        </aside>

        <div className="ds-content">
          <ColorSection />
          <TypographySection />
          <SpacingSection />
          <RadiusSection />
          <ShadowsSection />
          <ButtonsSection />
          <LabelsSection />
          <InputsSection />
          <TabsSection />
          <AvatarsSection />
          <RingsSection />
          <DataVizSection />
          <CardsSection />
          <DocPreviewsSection />
          <NavigationSection />
          <SurfaceSection />
          <TablesSection />
          <EmptyStatesSection />
          <IllustrationsSection />
          <ChipsContractClientSection />
        </div>
      </div>
    </main>
  );
}

// ============ Foundations ============

function Swatch({ name, token, hex, style }) {
  return (
    <div className="swatch">
      <div className="swatch-chip" style={{ background: hex, ...style }} />
      <div className="name">{name}</div>
      <div className="token">{token}</div>
      <div className="hex">{hex}</div>
    </div>
  );
}

function ColorSection() {
  return (
    <section className="ds-section" id="colors">
      <h2>Colors</h2>
      <p className="desc">
        The palette is extracted verbatim from Core 2.0 and organized into semantic tokens.
        Never consume raw shades directly — always reference the semantic token so we can
        theme without touching component code.
      </p>

      <h3 style={{ margin: '18px 0 10px', fontSize: 14, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-tertiary)' }}>Shade ramp</h3>
      <div className="ds-grid cols-5">
        <Swatch name="shade-01" token="--shade-01" hex="#141414" style={{ borderColor: 'transparent' }} />
        <Swatch name="shade-02" token="--shade-02 · text-primary" hex="#101010" />
        <Swatch name="shade-03" token="--shade-03" hex="#191919" />
        <Swatch name="shade-04" token="--shade-04" hex="#222222" />
        <Swatch name="shade-05" token="--shade-05" hex="#4C4C4C" />
        <Swatch name="shade-06" token="--shade-06 · text-secondary" hex="#727272" />
        <Swatch name="shade-07" token="--shade-07 · text-tertiary" hex="#7B7B7B" />
        <Swatch name="shade-08" token="--shade-08 · stroke2" hex="#E2E2E2" />
        <Swatch name="shade-09" token="--shade-09 · bg-app" hex="#F1F1F1" />
        <Swatch name="shade-10" token="--shade-10 · bg-surface" hex="#FDFDFD" />
      </div>

      <h3 style={{ margin: '20px 0 10px', fontSize: 14, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-tertiary)' }}>Brand &amp; states</h3>
      <div className="ds-grid cols-5">
        <Swatch name="Primary" token="--primary-01" hex="#2A85FF" />
        <Swatch name="Success" token="--primary-02" hex="#00A656" />
        <Swatch name="Danger"  token="--primary-03" hex="#FF381C" />
        <Swatch name="Purple"  token="--primary-04" hex="#7F5FFF" />
        <Swatch name="Warning" token="--primary-05" hex="#FF9D34" />
      </div>

      <h3 style={{ margin: '20px 0 10px', fontSize: 14, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-tertiary)' }}>Secondary tints — used for kind squares &amp; visual richness</h3>
      <div className="ds-grid cols-5">
        <Swatch name="Peach"    token="--secondary-01" hex="#FFBC99" />
        <Swatch name="Lavender" token="--secondary-02" hex="#CABDFF" />
        <Swatch name="Sky"      token="--secondary-03" hex="#B1E5FC" />
        <Swatch name="Mint"     token="--secondary-04" hex="#B5E4CA" />
        <Swatch name="Cream"    token="--secondary-05" hex="#FFD88D" />
      </div>

      <h3 style={{ margin: '20px 0 10px', fontSize: 14, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--text-tertiary)' }}>Accent</h3>
      <div className="ds-grid cols-5">
        <Swatch name="Accent"   token="--accent" hex="#F52495" />
      </div>
    </section>
  );
}

function TypographySection() {
  return (
    <section className="ds-section" id="typography">
      <h2>Typography</h2>
      <p className="desc">
        Inter across all weights. Tight negative letter-spacing throughout for a
        controlled editorial feel. Numbers use <code style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>tabular-nums</code>.
      </p>

      {[
        { name: 'Page title',  cls: 't-h4',      meta: '30 / 1.2 · 600 · +0.003em',                 preview: 'Projects Overview' },
        { name: 'Section',     cls: 't-h5',      meta: '24 / 1.35 · 500 · −0.01em',                 preview: 'My Geni — Product Operating System, v2' },
        { name: 'Card title',  cls: 't-h6',      meta: '20 / 1.4 · 600 · −0.01em',                  preview: 'Recent Research & Files' },
        { name: 'Subtitle 1',  cls: 't-sub-1',   meta: '16 · 600 · −0.015em',                       preview: 'Adopt SLM-first inference' },
        { name: 'Subtitle 2',  cls: 't-sub-2',   meta: '14 · 700 · −0.015em',                       preview: 'ATTENTION SHIFTING NEXT' },
        { name: 'Body 1',      cls: 't-body-1',  meta: '15 / 1.55 · 400 · −0.015em',                preview: 'The re-ranker model is trained and shipped.' },
        { name: 'Body 2',      cls: 't-body-2',  meta: '14 / 1.5 · 400 · −0.025em',                 preview: 'Ali moved AI weekly digest to Review.' },
        { name: 'Caption',     cls: 't-caption', meta: '12 / 1.6 · 500 · −0.02em',                  preview: 'Renews in 118 days · Founding partner' },
        { name: 'Overline',    cls: 't-overline',meta: '10 · 500 · +0.02em · UPPERCASE',            preview: 'ALSO ON YOUR DESK' },
      ].map((r) => (
        <div className="type-row" key={r.name}>
          <div className="meta">
            <b>{r.name}</b><br />
            {r.meta}
          </div>
          <div className={r.cls}>{r.preview}</div>
        </div>
      ))}
    </section>
  );
}

function SpacingSection() {
  const steps = [4, 8, 12, 16, 20, 24, 32, 40, 48, 64];
  return (
    <section className="ds-section" id="spacing">
      <h2>Spacing</h2>
      <p className="desc">4-based scale. Card padding is 12–24 · page padding 20 · card-to-card gap 12.</p>
      <div className="space-ruler">
        {steps.map((s) => (
          <div className="r" key={s}>
            <div className="r-box" style={{ height: s + 'px' }} />
            <div className="r-label">{s}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function RadiusSection() {
  const items = [
    { name: 'sm', val: 8 }, { name: 'md', val: 12 }, { name: 'lg', val: 16 },
    { name: 'xl', val: 20 }, { name: '2xl', val: 24 }, { name: '3xl', val: 28 }, { name: '4xl', val: 32 },
  ];
  return (
    <section className="ds-section" id="radius">
      <h2>Radius</h2>
      <p className="desc">Very generous — the Core 2.0 signature. <b>4xl (32px)</b> for main cards, <b>md (12px)</b> for controls.</p>
      <div className="ds-grid cols-4">
        {items.map((r) => (
          <div key={r.name}>
            <div className="radius-sample" style={{ borderRadius: r.val + 'px' }}>{r.val}px</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-tertiary)', marginTop: 6 }}>--r-{r.name}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function ShadowsSection() {
  const items = [
    { name: 'shadow-widget',   token: 'card widgets, buttons rest state',  cls: { boxShadow: 'var(--shadow-widget)' } },
    { name: 'shadow-menu',     token: 'active nav plug',                    cls: { boxShadow: 'var(--shadow-menu)' } },
    { name: 'shadow-depth',    token: 'primary card elevation',             cls: { boxShadow: 'var(--shadow-depth)' } },
    { name: 'shadow-toggle',   token: 'toggle rings',                       cls: { boxShadow: 'var(--shadow-toggle)' } },
    { name: 'shadow-dropdown', token: 'menus, modals',                      cls: { boxShadow: 'var(--shadow-dropdown)' } },
    { name: 'focus-ring',      token: 'focus-visible',                      cls: { boxShadow: 'var(--focus-ring)' } },
  ];
  return (
    <section className="ds-section" id="shadows">
      <h2>Shadows &amp; depth</h2>
      <p className="desc">The <b>signature</b> is a multi-layer combination that includes a very tight top micro-highlight — this is what gives the material its dimensional feel.</p>
      <div className="ds-grid cols-3">
        {items.map((s) => (
          <div key={s.name}>
            <div className="shadow-sample" style={s.cls}>{s.token}</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--text-tertiary)', marginTop: 6 }}>--{s.name}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ Components ============

function ButtonsSection() {
  return (
    <section className="ds-section" id="buttons">
      <h2>Buttons</h2>
      <p className="desc">Primary is the Core 2.0 dark gradient with an inset white highlight and top-fading white border overlay. Brand blue is reserved for informational actions.</p>
      <div className="ds-slot">
        <button className="btn btn-primary">Primary action</button>
        <button className="btn btn-brand">Informational</button>
        <button className="btn btn-white">White</button>
        <button className="btn btn-stroke">Stroke</button>
        <button className="btn btn-primary btn-sm"><Icon name="plus" size={14} strokeWidth={2}/><span>Small</span></button>
        <button className="btn btn-white btn-sm"><Icon name="filter" size={14} strokeWidth={1.75}/><span>Filter</span></button>
        <button className="btn btn-white btn-circle" aria-label="More"><Icon name="moreH" size={16} strokeWidth={2}/></button>
      </div>
    </section>
  );
}

function LabelsSection() {
  return (
    <section className="ds-section" id="labels">
      <h2>Chips &amp; status labels</h2>
      <p className="desc">Core 2.0 formula: 1.5px border at 15%, background at 5%, text at solid color. Subtle, editorial, never neon.</p>
      <div className="ds-slot">
        <Label tone="green"  dot>Active</Label>
        <Label tone="blue"   dot>In review</Label>
        <Label tone="yellow" dot>Renewal due</Label>
        <Label tone="orange" dot>Building</Label>
        <Label tone="red"    dot>At risk</Label>
        <Label tone="purple" dot>Design</Label>
        <Label tone="gray"   dot>Draft</Label>
      </div>
      <div className="ds-slot" style={{ marginTop: 8 }}>
        <Label tone="green"  dot size="sm">Small</Label>
        <Label tone="blue"   dot size="sm">Small</Label>
        <Label tone="red"    dot size="sm">Small</Label>
      </div>
    </section>
  );
}

function InputsSection() {
  return (
    <section className="ds-section" id="inputs">
      <h2>Inputs &amp; selects</h2>
      <p className="desc">Rest state uses widget shadow; focus draws an inset 1.5px brand border in addition to the shadow.</p>
      <div className="ds-slot">
        <Input placeholder="Search projects…" leadIcon={<Icon name="search" size={16} strokeWidth={1.75} />} />
        <Input placeholder="Type a name…" trailIcon={<Icon name="check" size={16} strokeWidth={2} style={{ color: 'var(--success-solid)' }} />} />
        <Select label="Sort" value="Recently updated" />
        <Select value="All owners" />
      </div>
    </section>
  );
}

function TabsSection() {
  const [t, setT] = React.useState('all');
  return (
    <section className="ds-section" id="tabs">
      <h2>Tabs</h2>
      <p className="desc">Segmented pill control; supports counts + semantic tone tints on counts.</p>
      <div className="ds-slot">
        <Tabs
          value={t}
          onChange={setT}
          items={[
            { key: 'all',      label: 'All',        count: 24 },
            { key: 'flight',   label: 'In flight',  count: 12, tone: 'blue' },
            { key: 'risk',     label: 'At risk',    count:  3, tone: 'red' },
            { key: 'launch',   label: 'Launching',  count:  2, tone: 'green' },
          ]}
        />
      </div>
    </section>
  );
}

function AvatarsSection() {
  return (
    <section className="ds-section" id="avatars">
      <h2>Avatars</h2>
      <p className="desc">Initials-based, seeded from name. Sizes align with density: XS in dense lists, MD default, LG for prominent identity.</p>
      <div className="ds-slot">
        <Avatar name="Alireza Izadi" size="xs" />
        <Avatar name="Alireza Izadi" size="sm" />
        <Avatar name="Alireza Izadi" size="md" />
        <Avatar name="Alireza Izadi" size="lg" />
        <Avatar name="Alireza Izadi" size="xl" />
        <span style={{ width: 24 }} />
        <AvatarStack names={['Alireza Izadi','Ali','Ali','Keyvan','Hesam']} max={3} size="sm" />
      </div>
    </section>
  );
}

function RingsSection() {
  return (
    <section className="ds-section" id="rings">
      <h2>Rings &amp; progress</h2>
      <p className="desc">Ring for hero contexts, bar for row density. Colors match semantic status.</p>
      <div className="ds-slot">
        <Ring percent={72} color="var(--success-solid)" />
        <Ring percent={38} color="var(--primary-01)" />
        <Ring percent={62} color="var(--warning-solid)" />
        <Ring percent={18} color="var(--danger-solid)" />
        <div style={{ flex: 1, minWidth: 220, display: 'flex', flexDirection: 'column', gap: 6 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-secondary)' }}><span>Semantic search v2</span><span>62%</span></div>
          <ProgressBar value={62} tone="red" />
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-secondary)' }}><span>Roadmap public view</span><span>78%</span></div>
          <ProgressBar value={78} tone="blue" />
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-secondary)' }}><span>Onboarding wave 2</span><span>55%</span></div>
          <ProgressBar value={55} tone="green" />
        </div>
      </div>
    </section>
  );
}

function DataVizSection() {
  return (
    <section className="ds-section" id="dataviz">
      <h2>Small data visualization</h2>
      <p className="desc">Sparklines for trend; mini bars for activity bursts. Restrained; never fills a card by itself.</p>
      <div className="ds-slot" style={{ justifyContent: 'space-around' }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <Sparkline points={[2,4,3,5,7,6,9,8,10,11,9,12]} color="var(--success-solid)" width={140} height={40} />
          <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Momentum (success)</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <Sparkline points={[8,6,7,5,4,4,3,4,3,3,2,3]} color="var(--danger-solid)" width={140} height={40} />
          <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Decline (danger)</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <MiniBars points={[3,4,5,4,6,7,5,8,6,7,8,9]} color="var(--primary-01)" width={140} height={40} />
          <div style={{ fontSize: 11, color: 'var(--text-tertiary)' }}>Activity bursts</div>
        </div>
      </div>
    </section>
  );
}

function CardsSection() {
  return (
    <section className="ds-section" id="cards">
      <h2>Cards</h2>
      <p className="desc">Cards are the primary container — 32px radius, signature depth shadow, 12px inner padding.</p>
      <div className="ds-grid cols-2">
        <Card>
          <CardHead title="Standard card" right={<a className="link">Action</a>} />
          <div style={{ padding: '4px 14px 12px', color: 'var(--text-secondary)', fontSize: 14 }}>
            Primary content container. Use for lists, metrics, and grouped controls.
          </div>
        </Card>
        <div className="hi-card">
          <div className="hi-rail blue" />
          <div className="hi-head">
            <div className="hi-title-block">
              <div className="lbl" style={{ color: 'var(--primary-01)' }}>Highlight card</div>
              <div className="num">3</div>
              <div className="sub">Left-rail accent · KPI-scale number</div>
            </div>
            <div className="hi-glyph blue"><Icon name="bolt" size={22} strokeWidth={1.75} /></div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DocPreviewsSection() {
  return (
    <section className="ds-section" id="doc-previews">
      <h2>File &amp; document previews</h2>
      <p className="desc">Never a grey rectangle. Every kind gets a tinted radial backdrop + kind-specific mock visual + dark overlay badge.</p>
      <div className="ds-grid cols-4">
        <DocThumb kind="contract" title="Founding partner engagement" meta="GS-2026-041 · template" />
        <DocThumb kind="diagram"  title="Semantic search v2 — architecture" meta="Ali · 2h" />
        <DocThumb kind="chart"    title="Beta wave 1 — activation" meta="Growth · live" />
        <DocThumb kind="doc"      title="Enterprise onboarding — findings" meta="Hesam · 24 pages" />
      </div>
    </section>
  );
}

function NavigationSection() {
  return (
    <section className="ds-section" id="navigation">
      <h2>Navigation</h2>
      <p className="desc">Sidebar items are text links; active state uses a gradient shell with an inset white plug (the embossed "pop"). Counters use the secondary palette.</p>
      <div className="ds-slot" style={{ background: 'var(--bg-app)', flexDirection: 'column', alignItems: 'stretch', padding: 12, gap: 2 }}>
        <a className="side-item active"><Icon name="projects" size={20} className="side-icon" /> <span>Projects</span><span className="side-badge sky">12</span></a>
        <a className="side-item"><Icon name="work" size={20} className="side-icon" /> <span>Work</span><span className="side-badge">48</span></a>
        <a className="side-item"><Icon name="decisions" size={20} className="side-icon" /> <span>Decisions</span><span className="side-badge">4</span></a>
        <a className="side-item"><Icon name="contracts" size={20} className="side-icon" /> <span>Contracts</span><span className="side-badge mint">6</span></a>
      </div>
    </section>
  );
}

function SurfaceSection() {
  return (
    <section className="ds-section" id="surface">
      <h2>Modal &amp; drawer</h2>
      <p className="desc">Both share the surface material and dropdown shadow. Drawer slides in from the right (visual only in this ref).</p>
      <div className="ds-slot" style={{ background: 'var(--bg-app)' }}>
        <div className="modal" style={{ boxShadow: 'var(--shadow-dropdown)' }}>
          <div className="modal-title">Confirm decision</div>
          <div className="modal-body">Approving this will finalize the SLM-first inference decision and notify Search Platform.</div>
          <div className="modal-actions">
            <button className="btn btn-stroke btn-sm">Cancel</button>
            <button className="btn btn-primary btn-sm">Approve</button>
          </div>
        </div>
      </div>
    </section>
  );
}

function TablesSection() {
  return (
    <section className="ds-section" id="tables">
      <h2>Tables</h2>
      <p className="desc">Used sparingly. Cards remain the primary pattern for scannable lists.</p>
      <div style={{ padding: 4 }}>
        <table className="table">
          <thead>
            <tr>
              <th>Contract</th><th>Client</th><th>Value</th><th>Status</th><th>Expires</th>
            </tr>
          </thead>
          <tbody>
            <tr><td>GS-2026-041 — Founding partner engagement</td><td>Founding partner</td><td>$180K</td><td><Label tone="blue" dot size="sm">Template</Label></td><td>Jan 11, 2027</td></tr>
            <tr><td>GS-2026-057 — Northwind retainer</td><td>Northwind Labs</td><td>$46K/mo</td><td><Label tone="yellow" dot size="sm">Renewal due</Label></td><td>Sep 30, 2026</td></tr>
            <tr><td>GS-2026-063 — Vantage SOW</td><td>Vantage Freight</td><td>$220K</td><td><Label tone="green" dot size="sm">Active</Label></td><td>Mar 3, 2027</td></tr>
          </tbody>
        </table>
      </div>
    </section>
  );
}

// ============ Patterns ============

function EmptyStatesSection() {
  return (
    <section className="ds-section" id="empty-states">
      <h2>Empty states</h2>
      <p className="desc">Every empty state has an illustration, a warm title, a helpful body line, and a single primary action.</p>
      <div className="ds-grid cols-3">
        <div style={{ background: 'var(--bg-app)', borderRadius: 20 }}>
          <EmptyState
            illustration={<NoResultsIllus size={120} />}
            title="No results"
            body="Try a different search term or clear the filters."
            action={<button className="btn btn-white btn-sm">Clear filters</button>}
          />
        </div>
        <div style={{ background: 'var(--bg-app)', borderRadius: 20 }}>
          <EmptyState
            illustration={<ContractReminderIllus size={120} />}
            title="Nothing expiring soon"
            body="Contracts renewing more than 30 days out are hidden here."
          />
        </div>
        <div style={{ background: 'var(--bg-app)', borderRadius: 20 }}>
          <EmptyState
            illustration={<EmptyDocIllus size={120} />}
            title="No files yet"
            body="Drag a file, or start a document. Your team will see it in Files."
            action={<button className="btn btn-primary btn-sm"><Icon name="plus" size={14} strokeWidth={2} /><span>New doc</span></button>}
          />
        </div>
      </div>
    </section>
  );
}

function IllustrationsSection() {
  return (
    <section className="ds-section" id="illustrations">
      <h2>Illustrations &amp; motion concepts</h2>
      <p className="desc">Motion-ready SVGs for special states. Named element groups (<code style={{ fontFamily: 'var(--font-mono)', fontSize: 12 }}>data-anim</code>) mark the parts intended for later animation — halos pulse, gates lift, hands rotate.</p>
      <div className="ds-grid cols-5">
        <div className="illus-tile"><AtRiskIllus  size={120} /><div className="name">At risk</div></div>
        <div className="illus-tile"><BlockedIllus size={120} /><div className="name">Blocked</div></div>
        <div className="illus-tile"><ContractReminderIllus size={120} /><div className="name">Contract reminder</div></div>
        <div className="illus-tile"><ResearchHighlightIllus size={120} /><div className="name">Research highlight</div></div>
        <div className="illus-tile"><NoResultsIllus size={120} /><div className="name">No results</div></div>
      </div>
    </section>
  );
}

function ChipsContractClientSection() {
  const client = { name: 'Founding Design Partner', short: 'FP', color: '#B5E4CA' };
  return (
    <section className="ds-section" id="chips-contract-client">
      <h2>Contract &amp; Client chips</h2>
      <p className="desc">Two specialized chips that identify relationships from any row.</p>
      <div className="ds-slot">
        <ContractChip id="GS-2026-041" />
        <ContractChip id="GS-2026-057" tone="warn" />
        <ContractChip id="GS-2026-088" tone="gray" />
        <span style={{ width: 20 }} />
        <ClientChip client={client} />
        <ClientChip client={{ name: 'Northwind Labs', short: 'NL', color: '#CABDFF' }} />
        <ClientChip client={{ name: 'Vantage Freight', short: 'VF', color: '#FFBC99' }} />
      </div>
    </section>
  );
}

Object.assign(window, { DesignSystemPage });