---
import Layout from '../layouts/Layout.astro';
import Button from '../components/Button/Button.astro';
import Card from '../components/Card/Card.astro';
---

<Layout title="KSK Core - Design System Demo">
  <main>
    <div class="section-grid">
      <div class="col-full">
        <div class="hero-section" style="text-align: center; padding: 4rem 0;">
          <h1>🎨 KSK Core Design System</h1>
          <p class="hero-subtitle" style="font-size: 1.25rem; margin: 1rem 0 2rem;">
            Explore the complete Kickstart component library and design system.
          </p>
          
          <div style="display: flex; gap: 1rem; justify-content: center; margin-bottom: 3rem;">
            <Button variant="primary" href="/demo/homepage-demo">
              View All Components
            </Button>
            <Button variant="outline" href="/demo/colors">
              Design Tokens
            </Button>
          </div>
        </div>

        <div class="demo-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem;">
          <Card variant="elevated">
            <h3>🧭 <a href="/demo/navigation">Navigation</a></h3>
            <p>Standard and mega navigation components with responsive mobile menus.</p>
          </Card>
          
          <Card variant="elevated">
            <h3>📋 <a href="/demo/button">Form Components</a></h3>
            <p>Buttons, inputs, selects, checkboxes, and all form controls.</p>
          </Card>
          
          <Card variant="elevated">
            <h3>🃏 <a href="/demo/card">Layout Components</a></h3>
            <p>Cards, heroes, fifty-fifty sections, and layout building blocks.</p>
          </Card>

          <Card variant="elevated">
            <h3>🎨 <a href="/demo/colors">Design System</a></h3>
            <p>Colors, typography, spacing tokens, and design foundations.</p>
          </Card>

          <Card variant="elevated">
            <h3>📐 <a href="/demo/grid">Grid System</a></h3>
            <p>Responsive 12-column grid with breakpoint utilities.</p>
          </Card>

          <Card variant="elevated">
            <h3>🔤 <a href="/demo/icons">Icon System</a></h3>
            <p>Custom icon font with scalable vector icons.</p>
          </Card>
        </div>

        <div class="getting-started" style="margin-top: 3rem; padding: 2rem; background: var(--color-surface-secondary); border-radius: 8px;">
          <h2>Getting Started with KSK Core</h2>
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 1rem;">
            <div>
              <h3>📦 Installation</h3>
              <pre style="background: var(--color-surface-primary); padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>npm install @kickstart/ksk-core</code></pre>
            </div>
            
            <div>
              <h3>🎯 Import Components</h3>
              <pre style="background: var(--color-surface-primary); padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>import Button from '@kickstart/ksk-core/components/Button/Button.astro';</code></pre>
            </div>
            
            <div>
              <h3>🎨 Import Styles</h3>
              <pre style="background: var(--color-surface-primary); padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>@use '@kickstart/ksk-core/styles' as ksk;</code></pre>
            </div>
            
            <div>
              <h3>⚡ Initialize JS</h3>
              <pre style="background: var(--color-surface-primary); padding: 1rem; border-radius: 4px; overflow-x: auto;"><code>import '@kickstart/ksk-core';</code></pre>
            </div>
          </div>
        </div>

        <div class="resources-section" style="margin-top: 3rem;">
          <h2>Component Categories</h2>
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem;">
            <div>
              <h4>📝 Form Controls</h4>
              <ul>
                <li><a href="/demo/button">Buttons</a></li>
                <li><a href="/demo/inputs">Text Inputs</a></li>
                <li><a href="/demo/select">Selects</a></li>
                <li><a href="/demo/checkbox">Checkboxes</a></li>
                <li><a href="/demo/textarea">Textareas</a></li>
              </ul>
            </div>
            
            <div>
              <h4>🧩 UI Components</h4>
              <ul>
                <li><a href="/demo/card">Cards</a></li>
                <li><a href="/demo/alert">Alerts</a></li>
                <li><a href="/demo/dialog">Dialogs</a></li>
                <li><a href="/demo/accordion">Accordions</a></li>
                <li><a href="/demo/tabs">Tabs</a></li>
              </ul>
            </div>
            
            <div>
              <h4>🏗️ Layout</h4>
              <ul>
                <li><a href="/demo/hero">Hero Sections</a></li>
                <li><a href="/demo/fifty-fifty">Fifty-Fifty</a></li>
                <li><a href="/demo/footer">Footers</a></li>
                <li><a href="/demo/grid">Grid System</a></li>
              </ul>
            </div>
            
            <div>
              <h4>🎨 Design</h4>
              <ul>
                <li><a href="/demo/colors">Color System</a></li>
                <li><a href="/demo/typography">Typography</a></li>
                <li><a href="/demo/spacing">Spacing</a></li>
                <li><a href="/demo/icons">Icons</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</Layout>

<script>
  // Initialize Kickstart components
  import '../assets/main.js';
</script>