/**
 * Design System Overview
 * @generated 2025-12-12T07:15:27.637235
 */
export default {
  title: 'Overview',
  tags: ['autodocs'],
  parameters: {
    docs: {
      description: {
        component: 'DSS Design System - Token documentation and component library'
      }
    }
  }
};

const styles = `
  .overview { max-width: 800px; font-family: system-ui, sans-serif; }
  .overview h1 { font-size: 2rem; margin-bottom: 0.5rem; }
  .overview .subtitle { color: #6b7280; margin-bottom: 2rem; }
  .overview h2 { font-size: 1.25rem; margin-top: 2rem; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; }
  .overview ul { padding-left: 1.5rem; }
  .overview li { margin: 0.5rem 0; }
  .overview code { background: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.875rem; }
  .layer { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: #f9fafb; border-radius: 8px; margin: 0.5rem 0; }
  .layer-num { width: 24px; height: 24px; background: #18181b; color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
  .stats { display: flex; gap: 1rem; margin: 1rem 0; }
  .stat { background: #f9fafb; padding: 1rem; border-radius: 8px; text-align: center; }
  .stat-value { font-size: 2rem; font-weight: 700; color: #18181b; }
  .stat-label { font-size: 0.75rem; color: #6b7280; }
`;

export const Introduction = {
  render: () => `
    <style>${styles}</style>
    <div class="overview">
      <h1>DSS Design System</h1>
      <p class="subtitle">Token-driven design system with 3-layer architecture</p>

      <div class="stats">
        <div class="stat">
          <div class="stat-value">22</div>
          <div class="stat-label">Color Scales</div>
        </div>
        <div class="stat">
          <div class="stat-value">59</div>
          <div class="stat-label">Components</div>
        </div>
        <div class="stat">
          <div class="stat-value">6</div>
          <div class="stat-label">Categories</div>
        </div>
      </div>

      <h2>Architecture</h2>
      <div class="layer">
        <span class="layer-num">1</span>
        <strong>Core Primitives</strong> - Raw Tailwind values (colors, spacing, fonts)
      </div>
      <div class="layer">
        <span class="layer-num">2</span>
        <strong>Skin</strong> - Semantic mapping (primary, secondary, etc.)
      </div>
      <div class="layer">
        <span class="layer-num">3</span>
        <strong>Theme</strong> - Brand overrides
      </div>

      <h2>Navigation</h2>
      <ul>
        <li><strong>Foundation</strong> - Core primitives (colors, spacing, typography, radius, shadows)</li>
        <li><strong>Tokens</strong> - Semantic design tokens from skin</li>
        <li><strong>Components</strong> - 59 shadcn/ui components organized by category</li>
      </ul>

      <h2>Component Categories</h2>
      <ul>
        <li><strong>Form</strong> - Button, Input, Select, Checkbox, etc.</li>
        <li><strong>Data Display</strong> - Table, Badge, Avatar, Chart, etc.</li>
        <li><strong>Feedback</strong> - Alert, Toast, Progress, Spinner, etc.</li>
        <li><strong>Navigation</strong> - Tabs, Breadcrumb, Sidebar, etc.</li>
        <li><strong>Overlay</strong> - Dialog, Sheet, Dropdown, Tooltip, etc.</li>
        <li><strong>Layout</strong> - Card, Separator, Scroll Area, etc.</li>
      </ul>

      <h2>Usage</h2>
      <p>Import tokens CSS in your project:</p>
      <pre><code>import '.dss/data/_system/themes/tokens.css';</code></pre>
      <p>Use CSS variables in your styles:</p>
      <pre><code>color: var(--color-primary);
background: var(--color-background);</code></pre>
    </div>
  `
};