---
import LandingLayout from '@/layouts/LandingLayout.astro';
// Form Components
import Button from '@/components/ui/form/Button/Button.astro';
import Input from '@/components/ui/form/Input/Input.astro';
import Textarea from '@/components/ui/form/Textarea/Textarea.astro';
import Select from '@/components/ui/form/Select/Select.astro';
import Checkbox from '@/components/ui/form/Checkbox/Checkbox.astro';
import Radio from '@/components/ui/form/Radio/Radio.astro';
import Switch from '@/components/ui/form/Switch/Switch.astro';
// Data Display Components
import Card from '@/components/ui/data-display/Card/Card.astro';
import Badge from '@/components/ui/data-display/Badge/Badge.astro';
import Avatar from '@/components/ui/data-display/Avatar/Avatar.astro';
import AvatarGroup from '@/components/ui/data-display/AvatarGroup/AvatarGroup.astro';
import Table from '@/components/ui/data-display/Table/Table.astro';
import Pagination from '@/components/ui/data-display/Pagination/Pagination.astro';
import Progress from '@/components/ui/data-display/Progress/Progress.astro';
import Skeleton from '@/components/ui/data-display/Skeleton/Skeleton.astro';
// Feedback Components
import Alert from '@/components/ui/feedback/Alert/Alert.astro';
import { ToastDemo } from '@/components/ui/feedback/Toast';
import Tooltip from '@/components/ui/feedback/Tooltip/Tooltip.astro';
// Overlay Components
import Dialog from '@/components/ui/overlay/Dialog/Dialog.astro';
import Dropdown from '@/components/ui/overlay/Dropdown/Dropdown.astro';
import Tabs from '@/components/ui/overlay/Tabs/Tabs.astro';
import VerticalTabs from '@/components/ui/overlay/VerticalTabs/VerticalTabs.astro';
import Accordion from '@/components/ui/overlay/Accordion/Accordion.astro';
// Layout Components
import Separator from '@/components/ui/layout/Separator/Separator.astro';
// Primitives
import Icon from '@/components/ui/primitives/Icon/Icon.astro';
// Marketing Components
import CTA from '@/components/ui/marketing/CTA/CTA.astro';
import SocialProof from '@/components/ui/marketing/SocialProof/SocialProof.astro';
// Other Components
import { Hero } from '@/components/hero';
import Header from '@/components/layout/Header.astro';
import Footer from '@/components/layout/Footer.astro';
import SearchInput from '@/components/patterns/SearchInput.astro';
import PasswordInput from '@/components/patterns/PasswordInput.astro';
import StatCard from '@/components/patterns/StatCard.astro';
import EmptyState from '@/components/patterns/EmptyState.astro';

// Component categories for navigation
const categories = [
  { id: 'hero', label: 'Hero', icon: 'star' },
  { id: 'layout', label: 'Layout', icon: 'layout' },
  { id: 'buttons', label: 'Buttons', icon: 'box' },
  { id: 'inputs', label: 'Form Inputs', icon: 'terminal' },
  { id: 'feedback', label: 'Feedback', icon: 'alert-circle' },
  { id: 'overlays', label: 'Overlays', icon: 'layers' },
  { id: 'navigation', label: 'Navigation', icon: 'menu' },
  { id: 'data', label: 'Data Display', icon: 'layers' },
  { id: 'loading', label: 'Loading', icon: 'loader' },
  { id: 'toggles', label: 'Toggles', icon: 'toggle-left' },
  { id: 'patterns', label: 'Patterns', icon: 'layers' },
];
---

<LandingLayout
  title="Component Showcase"
  description="Explore Astro Rocket's comprehensive UI component library. Production-ready, accessible, and beautifully designed."
  noindex={true}
>

  <!-- Hero Section -->
  <Hero layout="split" size="lg">
    <Badge slot="badge" variant="brand" pill>50+ production components</Badge>

    <h1 slot="title">
      Component <span class="text-brand-500">Library</span>
    </h1>

    <p slot="description">
      Production-ready UI primitives built with accessibility and performance in mind.
      Copy, paste, and customize to match your brand.
    </p>

    <Fragment slot="actions">
      <Button href="#hero" class="hero-btn-brand">
        Browse Components
        <Icon name="arrow-right" size="sm" />
      </Button>
      <Button href="https://github.com/hansmartens68/Astro-Rocket" target="_blank" class="hero-btn-learn">
        <Icon name="github" size="sm" />
        View Source
      </Button>
    </Fragment>
  </Hero>

  <!-- Category Navigation -->
  <nav class="sticky top-16 z-40 bg-background/95 backdrop-blur-md border-y border-border">
    <div class="mx-auto max-w-6xl px-6">
      <div class="flex items-center gap-1 py-3 overflow-x-auto scrollbar-hide">
        {categories.map((cat) => (
          <a
            href={`#${cat.id}`}
            class="flex items-center gap-2 px-4 py-2 text-sm font-medium text-foreground-muted hover:text-foreground hover:bg-secondary rounded-md transition-all whitespace-nowrap group"
          >
            <Icon name={cat.icon} size="sm" class="text-foreground-subtle group-hover:text-brand-500 transition-colors" />
            {cat.label}
          </a>
        ))}
      </div>
    </div>
  </nav>

  <!-- Components Showcase -->
  <div class="mx-auto max-w-6xl px-6 py-20 space-y-32">

    <!-- Hero Section -->
    <section id="hero" class="scroll-mt-32 flex flex-col gap-10">
      <div class="flex items-start gap-5">
        <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 shrink-0">
          <Icon name="star" size="lg" />
        </div>
        <div>
          <h2 class="font-display text-2xl font-bold text-foreground">Hero</h2>
          <p class="text-foreground-muted mt-1">Flexible hero sections with multiple layouts, backgrounds, and slot-based content injection.</p>
        </div>
      </div>

      <div class="space-y-6">
        <!-- Hero - Split Layout -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Split Layout</span>
            <span class="showcase-hint">Two-column with aside slot</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <Hero layout="split" size="md" class="!pt-12 !pb-12">
              <Badge slot="badge" variant="brand" pill>New release</Badge>

              <h2 slot="title">
                Build faster with <span class="text-brand-500">Astro Rocket</span>
              </h2>

              <p slot="description">
                A modern starter kit for production websites.
              </p>

              <Fragment slot="actions">
                <Button size="sm">Get Started</Button>
                <Button size="sm" variant="outline">Learn More</Button>
              </Fragment>

              <div slot="aside" class="bg-background-secondary border border-border rounded-lg p-6 text-center">
                <Icon name="code" size="lg" class="text-brand-500 mx-auto mb-2" />
                <p class="text-sm text-foreground-muted">Aside content slot</p>
              </div>

              <SocialProof
                class="mt-[var(--space-stack-lg)]"
                text="Trusted by developers"
                avatars={[
                  'https://i.pravatar.cc/150?img=12',
                  'https://i.pravatar.cc/150?img=33',
                  'https://i.pravatar.cc/150?img=47',
                ]}
              />
            </Hero>
          </div>
        </div>

        <!-- Hero - Centered Layout -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Centered Layout</span>
            <span class="showcase-hint">Single column, center-aligned</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <Hero layout="centered" size="md" class="!pt-12 !pb-12">
              <Badge slot="badge" variant="brand" pill>About us</Badge>

              <h2 slot="title">
                We're on a <span class="text-brand-500">mission</span>
              </h2>

              <p slot="description">
                Building the tools developers love to use. Our team is dedicated to creating exceptional experiences.
              </p>

              <Fragment slot="actions">
                <Button size="sm">Meet the Team</Button>
                <Button size="sm" variant="ghost">Our Story</Button>
              </Fragment>
            </Hero>
          </div>
        </div>

        <!-- Hero Backgrounds Grid -->
        <div class="grid gap-6 lg:grid-cols-2">
          <!-- Secondary Background -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Secondary Background</span>
            </div>
            <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
              <Hero layout="split" size="sm" class="!pt-8 !pb-8 bg-surface-secondary">
                <h2 slot="title">Secondary Background</h2>
                <p slot="description">Subtle elevation from the default background.</p>
              </Hero>
            </div>
          </div>

          <!-- Gradient Background -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Gradient Background</span>
            </div>
            <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
              <Hero layout="split" size="sm" class="!pt-8 !pb-8 bg-gradient-to-br from-background via-background to-background-secondary">
                <h2 slot="title">Gradient Background</h2>
                <p slot="description">Smooth gradient transition effect.</p>
              </Hero>
            </div>
          </div>
        </div>

        <!-- Inverted Background (Full Width) -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Inverted Background</span>
            <span class="showcase-hint">Always dark, regardless of theme</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <Hero layout="centered" size="sm" class="invert-section !pt-10 !pb-10 bg-background">
              <h2 slot="title">
                <span class="text-foreground">Dark mode </span><span class="text-brand-400">always</span>
              </h2>

              <p slot="description" class="text-foreground-secondary">
                Perfect for CTAs and sections that need to stand out.
              </p>

              <Fragment slot="actions">
                <Button size="sm">Primary Action</Button>
                <Button size="sm" variant="outline">
                  Secondary
                </Button>
              </Fragment>

              <SocialProof
                class="mt-[var(--space-stack-lg)]"
                text="Join thousands of users"
                avatars={[
                  'https://i.pravatar.cc/150?img=5',
                  'https://i.pravatar.cc/150?img=8',
                  'https://i.pravatar.cc/150?img=11',
                ]}
              />
            </Hero>
          </div>
        </div>

        <!-- Size Variations -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Size Variations</span>
            <span class="showcase-hint">sm, md, lg, xl padding options</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              {(['sm', 'md', 'lg', 'xl'] as const).map((size) => (
                <div class="border border-border rounded-lg overflow-hidden">
                  <div class="bg-background-secondary px-3 py-1.5 border-b border-border">
                    <span class="text-xs font-mono text-foreground-muted">size="{size}"</span>
                  </div>
                  <div class="bg-background text-center py-2">
                    <span class="text-xs text-foreground-subtle">
                      {size === 'sm' && 'Compact padding'}
                      {size === 'md' && 'Default padding'}
                      {size === 'lg' && 'Large padding'}
                      {size === 'xl' && 'Extra-large padding'}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <!-- Props Reference -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Available Props</span>
            <span class="showcase-hint">Simplified API (composition-first)</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-4 sm:grid-cols-2 text-sm">
              <div>
                <h4 class="font-semibold text-foreground mb-2">Props</h4>
                <ul class="space-y-1 text-foreground-muted">
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">layout</code> centered | split</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">size</code> sm | md | lg | xl</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">showGrid</code> boolean</li>
                </ul>
              </div>
              <div>
                <h4 class="font-semibold text-foreground mb-2">Slots</h4>
                <ul class="space-y-1 text-foreground-muted">
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">badge</code> Use Badge component</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">title</code> Use h1/h2 directly</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">description</code> Use p directly</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">actions</code> CTA buttons</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">aside</code> Side content (split only)</li>
                </ul>
              </div>
            </div>
            <p class="text-xs text-foreground-subtle mt-4">
              <strong>Backgrounds:</strong> Use CSS classes for custom backgrounds (e.g., <code class="bg-secondary px-1 rounded">class="bg-surface-invert"</code>)
            </p>
          </div>
        </div>
      </div>
    </section>

    <!-- Layout Section (Header & Footer) -->
    <section id="layout" class="scroll-mt-32 flex flex-col gap-10">
      <div class="flex items-start gap-5">
        <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 shrink-0">
          <Icon name="layout" size="lg" />
        </div>
        <div>
          <h2 class="font-display text-2xl font-bold text-foreground">Layout</h2>
          <p class="text-foreground-muted mt-1">Header and Footer components for consistent page structure. Variant-based with full customization via design tokens.</p>
        </div>
      </div>

      <div class="space-y-6">
        <!-- Header Default Layout -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Default Layout</span>
            <span class="showcase-hint">Logo left, nav + actions right-aligned</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <Header
              position="static"
              showMobileMenu={false}
              showCta
              cta={{ label: 'Get Started', href: '#' }}
              nav={[{ label: 'Features', href: '#' }, { label: 'Pricing', href: '#' }, { label: 'Docs', href: '#' }, { label: 'Blog', href: '#' }]}
              actions={[{ icon: 'github', href: '#', label: 'GitHub', iconOnly: true }]}
            />
          </div>
        </div>

        <!-- Minimal Layout -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Minimal Layout</span>
            <span class="showcase-hint">Logo + CTA only, no navigation</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <Header
              layout="minimal"
              position="static"
              showMobileMenu={false}
              showCta
              cta={{ label: 'Sign In', href: '#' }}
            />
          </div>
        </div>

        <!-- Nav-only (no actions) -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Nav Only</span>
            <span class="showcase-hint">No CTA, no actions, just navigation</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <Header
              position="static"
              showMobileMenu={false}
              showThemeToggle={false}
              showCta={false}
              nav={[{ label: 'Home', href: '#' }, { label: 'About', href: '#' }, { label: 'Services', href: '#' }, { label: 'Contact', href: '#' }]}
            />
          </div>
        </div>

        <!-- Header Size Variants -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Size Variants</span>
            <span class="showcase-hint">sm (48px), md (56px), lg (64px)</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <div class="divide-y divide-border">
              {(['sm', 'md', 'lg'] as const).map((size) => (
                <div>
                  <div class="bg-background-secondary/50 px-4 py-2 border-b border-border flex items-center justify-between">
                    <span class="text-xs font-mono text-foreground-muted">size="{size}"</span>
                    <span class="text-xs text-foreground-subtle">
                      {size === 'sm' && 'h-12 (48px) — compact'}
                      {size === 'md' && 'h-14 (56px) — default'}
                      {size === 'lg' && 'h-16 (64px) — spacious'}
                    </span>
                  </div>
                  <Header
                    position="static"
                    size={size}
                    showMobileMenu={false}
                    nav={[{ label: 'Features', href: '#' }, { label: 'Pricing', href: '#' }, { label: 'Docs', href: '#' }]}
                    showCta
                    cta={{ label: 'Get Started', href: '#' }}
                  />
                </div>
              ))}
            </div>
          </div>
        </div>

        <!-- Header Background Variants -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Background Variants</span>
            <span class="showcase-hint">default, solid, transparent</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <div class="divide-y divide-border">
              <!-- Default with blur -->
              <div class="relative">
                <div class="absolute inset-0 bg-gradient-to-r from-brand-100 to-brand-200 dark:from-brand-900/30 dark:to-brand-800/30"></div>
                <div class="relative">
                  <div class="bg-background/80 backdrop-blur-sm px-4 py-2 border-b border-border">
                    <span class="text-xs font-mono text-foreground-muted">variant="default"</span>
                    <span class="text-xs text-foreground-subtle ml-2">— backdrop blur + transparency</span>
                  </div>
                  <Header position="static" size="sm" variant="default" showMobileMenu={false} nav={[{ label: 'Home', href: '#' }, { label: 'About', href: '#' }]} />
                </div>
              </div>
              <!-- Solid -->
              <div>
                <div class="bg-background-secondary/50 px-4 py-2 border-b border-border">
                  <span class="text-xs font-mono text-foreground-muted">variant="solid"</span>
                  <span class="text-xs text-foreground-subtle ml-2">— opaque background</span>
                </div>
                <Header position="static" size="sm" variant="solid" showMobileMenu={false} nav={[{ label: 'Home', href: '#' }, { label: 'About', href: '#' }]} />
              </div>
              <!-- Transparent on light image -->
              <div class="relative overflow-hidden">
                <div
                  class="absolute inset-0 bg-cover bg-center grayscale brightness-150 opacity-60"
                  style="background-image: url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200&h=200&fit=crop&q=80');"
                ></div>
                <div class="absolute inset-0 bg-white/20"></div>
                <div class="relative">
                  <div class="bg-white/60 backdrop-blur-sm px-4 py-2 border-b border-black/10">
                    <span class="text-xs font-mono text-black/70">variant="transparent"</span>
                    <span class="text-xs text-black/50 ml-2">— light background, dark text</span>
                  </div>
                  <Header
                    position="static"
                    size="md"
                    variant="transparent"
                    showMobileMenu={false}
                    showCta
                    cta={{ label: 'Explore', href: '#' }}
                    nav={[{ label: 'Home', href: '#' }, { label: 'Gallery', href: '#' }, { label: 'Contact', href: '#' }]}
                  />
                </div>
              </div>
              <!-- Transparent on dark (inverted colors) -->
              <div
                class="relative bg-cover bg-center"
                style="background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1200&h=200&fit=crop&q=80');"
              >
                <div class="absolute inset-0 bg-black/40"></div>
                <div class="relative">
                  <div class="bg-black/30 backdrop-blur-sm px-4 py-2 border-b border-white/10">
                    <span class="text-xs font-mono text-white/90">variant="transparent" colorScheme="invert"</span>
                    <span class="text-xs text-white/70 ml-2">— for dark backgrounds</span>
                  </div>
                  <Header
                    position="static"
                    size="md"
                    variant="transparent"
                    colorScheme="invert"
                    showMobileMenu={false}
                    showCta
                    cta={{ label: 'Explore', href: '#' }}
                    nav={[{ label: 'Home', href: '#' }, { label: 'Gallery', href: '#' }, { label: 'Contact', href: '#' }]}
                  />
                </div>
              </div>
            </div>
          </div>
        </div>


        <!-- Header Props Reference -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Header Props</span>
            <span class="showcase-hint">Full API reference</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 text-sm">
              <div>
                <h4 class="font-semibold text-foreground mb-2">Layout & Position</h4>
                <ul class="space-y-1 text-foreground-muted">
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">layout</code> default | centered | minimal</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">position</code> fixed | sticky | static</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">size</code> sm | md | lg</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">variant</code> default | solid | transparent</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">colorScheme</code> default | invert</li>
                </ul>
              </div>
              <div>
                <h4 class="font-semibold text-foreground mb-2">Navigation</h4>
                <ul class="space-y-1 text-foreground-muted">
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">nav</code> NavItem[] (overrides routes)</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">extraNav</code> NavItem[] (adds to routes)</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">showActiveState</code> boolean</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">showMobileMenu</code> boolean</li>
                </ul>
              </div>
              <div>
                <h4 class="font-semibold text-foreground mb-2">Actions</h4>
                <ul class="space-y-1 text-foreground-muted">
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">showCta</code> boolean</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">cta</code> {'{ label, href }'}</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">actions</code> HeaderAction[]</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">showThemeToggle</code> boolean</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- Footer Component -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Footer - Simple Layout</span>
            <span class="showcase-hint">Single row with logo, nav, optional social</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <Footer
              layout="simple"
              background="secondary"
              showCopyright={false}
              socialLinks={[
                { platform: 'github', href: '#' },
                { platform: 'twitter', href: '#' },
              ]}
            />
          </div>
        </div>

        <!-- Footer Minimal Layout -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Minimal Layout</span>
            <span class="showcase-hint">Copyright only — perfect for simple sites</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <Footer
              layout="minimal"
              copyright="© {year} {siteName}"
            />
          </div>
        </div>

        <!-- Footer Stacked Layout -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Stacked Layout</span>
            <span class="showcase-hint">Vertically stacked, centered — great for landing pages</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <Footer
              layout="stacked"
              tagline="Build faster, ship with confidence"
              socialLinks={[
                { platform: 'github', href: '#' },
                { platform: 'twitter', href: '#' },
              ]}
              legalLinks={[
                { label: 'Privacy', href: '#' },
                { label: 'Terms', href: '#' },
              ]}
            />
          </div>
        </div>

        <!-- Footer Columns Layout -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Columns Layout</span>
            <span class="showcase-hint">Multi-column with link groups</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <Footer
              layout="columns"
              columns={4}
              tagline="Modern starter kit for production websites"
              socialLinks={[
                { platform: 'github', href: '#' },
                { platform: 'twitter', href: '#' },
              ]}
              linkGroups={[
                {
                  title: 'Product',
                  links: [
                    { label: 'Features', href: '#' },
                    { label: 'Pricing', href: '#' },
                    { label: 'Docs', href: '#' },
                  ],
                },
                {
                  title: 'Company',
                  links: [
                    { label: 'About', href: '#' },
                    { label: 'Blog', href: '#' },
                    { label: 'Careers', href: '#' },
                  ],
                },
                {
                  title: 'Legal',
                  links: [
                    { label: 'Privacy', href: '#' },
                    { label: 'Terms', href: '#' },
                  ],
                },
              ]}
              legalLinks={[
                { label: 'Privacy Policy', href: '#' },
                { label: 'Terms of Service', href: '#' },
              ]}
            />
          </div>
        </div>

        <!-- Footer Props Reference -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Footer Props</span>
            <span class="showcase-hint">Full API reference</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 text-sm">
              <div>
                <h4 class="font-semibold text-foreground mb-2">Layout</h4>
                <ul class="space-y-1 text-foreground-muted">
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">layout</code> simple | columns | minimal | stacked</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">columns</code> 2 | 3 | 4</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">background</code> default | secondary | invert</li>
                </ul>
              </div>
              <div>
                <h4 class="font-semibold text-foreground mb-2">Content</h4>
                <ul class="space-y-1 text-foreground-muted">
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">nav</code> NavItem[]</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">linkGroups</code> FooterLinkGroup[]</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">socialLinks</code> SocialLink[]</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">tagline</code> string</li>
                </ul>
              </div>
              <div>
                <h4 class="font-semibold text-foreground mb-2">Copyright & Legal</h4>
                <ul class="space-y-1 text-foreground-muted">
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">showCopyright</code> boolean</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">copyright</code> string (supports {'{year}'}, {'{siteName}'})</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">legalLinks</code> LegalLink[]</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- Design Tokens -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Navigation Design Tokens</span>
            <span class="showcase-hint">Customize via CSS custom properties</span>
          </div>
          <div class="showcase-content">
            <div class="bg-background-secondary rounded-lg p-4 font-mono text-xs space-y-1 text-foreground-muted overflow-x-auto">
              <p class="text-foreground-subtle">/* Customize nav link states in global.css */</p>
              <p>--nav-link-color: var(--foreground-muted);</p>
              <p>--nav-link-hover-color: var(--foreground);</p>
              <p>--nav-link-hover-bg: var(--secondary);</p>
              <p>--nav-link-active-color: var(--foreground);</p>
              <p>--nav-link-active-bg: var(--secondary);</p>
              <p>--nav-link-active-font-weight: 600;</p>
            </div>
          </div>
        </div>

        <!-- CTA Default Variant -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">CTA - Default Variant</span>
            <span class="showcase-hint">Light background with heading, description, and action buttons</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <CTA variant="default" size="md" maxWidth="lg">
              <h2 slot="heading">
                Stop configuring. <span class="text-brand-500">Start building.</span>
              </h2>
              <p slot="description">
                Join the developers building faster, better websites with Astro Rocket.
              </p>
              <Fragment slot="actions">
                <Button size="lg">Get Started</Button>
                <Button variant="outline" size="lg">Learn More</Button>
              </Fragment>
            </CTA>
          </div>
        </div>

        <!-- CTA Invert Variant -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">CTA - Invert Variant</span>
            <span class="showcase-hint">Dark background with inverted color scheme</span>
          </div>
          <div class="showcase-content !p-0 overflow-hidden rounded-b-xl">
            <CTA variant="invert" size="md" maxWidth="md">
              <h2 slot="heading">Ready to build?</h2>
              <p slot="description">
                These components are just the beginning. Clone Astro Rocket and start shipping faster.
              </p>
              <Fragment slot="actions">
                <Button>
                  <Icon name="github" size="sm" />
                  Clone Repository
                </Button>
                <Button variant="outline">Read Documentation</Button>
              </Fragment>
            </CTA>
          </div>
        </div>

        <!-- CTA Size Variants -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">CTA - Size Variants</span>
            <span class="showcase-hint">sm, md, lg, xl padding options</span>
          </div>
          <div class="showcase-content">
            <div class="bg-background-secondary rounded-lg p-4 font-mono text-xs space-y-1 text-foreground-muted overflow-x-auto">
              <p class="text-foreground-subtle">/* Size variants control vertical padding */</p>
              <p>sm: 'py-16 md:py-20'</p>
              <p>md: 'py-20 md:py-24'</p>
              <p>lg: 'py-24 md:py-32' (default)</p>
              <p>xl: 'py-32 md:py-40'</p>
              <p class="mt-2 text-foreground-subtle">/* MaxWidth variants control content width */</p>
              <p>sm: 'max-w-xl' | md: 'max-w-2xl' | lg: 'max-w-3xl' | xl: 'max-w-4xl'</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Buttons Section -->
    <section id="buttons" class="scroll-mt-32 flex flex-col gap-10">
      <div class="flex items-start gap-5">
        <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 shrink-0">
          <Icon name="box" size="lg" />
        </div>
        <div>
          <h2 class="font-display text-2xl font-bold text-foreground">Buttons</h2>
          <p class="text-foreground-muted mt-1">Interactive elements for actions and navigation. All variants support icons, loading states, and full accessibility.</p>
        </div>
      </div>

      <div class="space-y-6">
        <!-- Button Variants -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Variants</span>
            <span class="showcase-hint">6 styles for different contexts</span>
          </div>
          <div class="showcase-content">
            <div class="flex flex-wrap items-center gap-3">
              <Button variant="primary">Primary</Button>
              <Button variant="secondary">Secondary</Button>
              <Button variant="outline">Outline</Button>
              <Button variant="ghost">Ghost</Button>
              <Button variant="link">Link</Button>
              <Button variant="destructive">Destructive</Button>
            </div>
          </div>
        </div>

        <!-- Button Sizes -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Sizes</span>
            <span class="showcase-hint">Responsive scaling</span>
          </div>
          <div class="showcase-content">
            <div class="flex flex-wrap items-end gap-3">
              <Button size="sm">Small</Button>
              <Button size="md">Medium</Button>
              <Button size="lg">Large</Button>
            </div>
          </div>
        </div>

        <!-- Button States & Icons -->
        <div class="grid gap-6 lg:grid-cols-2">
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">States</span>
            </div>
            <div class="showcase-content">
              <div class="flex flex-wrap items-center gap-3">
                <Button>Default</Button>
                <Button loading>Loading</Button>
                <Button disabled>Disabled</Button>
                <Button icon><Icon name="plus" /></Button>
              </div>
            </div>
          </div>

          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">With Icons</span>
            </div>
            <div class="showcase-content">
              <div class="flex flex-wrap items-center gap-3">
                <Button><Icon name="mail" size="sm" /> Send</Button>
                <Button variant="outline"><Icon name="download" size="sm" /> Export</Button>
                <Button variant="ghost"><Icon name="star" size="sm" /> Star</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Form Inputs Section -->
    <section id="inputs" class="scroll-mt-32 flex flex-col gap-10">
      <div class="flex items-start gap-5">
        <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 shrink-0">
          <Icon name="terminal" size="lg" />
        </div>
        <div>
          <h2 class="font-display text-2xl font-bold text-foreground">Form Inputs</h2>
          <p class="text-foreground-muted mt-1">Text fields, selects, checkboxes, and more. Built with native validation and ARIA support.</p>
        </div>
      </div>

      <div class="space-y-6">
        <div class="grid gap-6 lg:grid-cols-2">
          <!-- Text Input -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Text Input</span>
              <span class="showcase-hint">With labels & validation</span>
            </div>
            <div class="showcase-content space-y-5">
              <Input label="Email address" type="email" placeholder="you@example.com" />
              <Input label="Password" type="password" placeholder="••••••••" hint="Must be at least 8 characters" />
              <Input label="Disabled" placeholder="Cannot edit" disabled />
            </div>
          </div>

          <!-- Input with Icons -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Input with Icons</span>
              <span class="showcase-hint">Leading & trailing icons</span>
            </div>
            <div class="showcase-content space-y-5">
              <Input label="Search" placeholder="Search..." leadingIcon="search" />
              <Input label="Email" type="email" placeholder="you@example.com" leadingIcon="mail" />
              <Input label="Website" placeholder="https://example.com" leadingIcon="globe" trailingIcon="external-link" />
            </div>
          </div>

          <!-- Textarea -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Textarea</span>
              <span class="showcase-hint">Multi-line text input</span>
            </div>
            <div class="showcase-content">
              <Textarea label="Message" placeholder="Write your message here..." rows={5} hint="Supports markdown formatting" />
            </div>
          </div>

          <!-- Select -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Select</span>
              <span class="showcase-hint">Native dropdown</span>
            </div>
            <div class="showcase-content">
              <Select label="Country" options={[
                { value: '', label: 'Select a country...' },
                { value: 'us', label: 'United States' },
                { value: 'uk', label: 'United Kingdom' },
                { value: 'ca', label: 'Canada' },
                { value: 'de', label: 'Germany' },
                { value: 'fr', label: 'France' },
              ]} />
            </div>
          </div>

          <!-- Checkboxes -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Checkboxes</span>
              <span class="showcase-hint">Custom styled controls</span>
            </div>
            <div class="showcase-content space-y-4">
              <Checkbox label="I agree to the terms of service" />
              <Checkbox label="Send me product updates" checked />
              <Checkbox label="Enable notifications" description="Receive alerts for important updates" />
              <Checkbox label="Disabled checkbox" disabled />
            </div>
          </div>

          <!-- Radio Buttons -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Radio Buttons</span>
              <span class="showcase-hint">Single-select controls</span>
            </div>
            <div class="showcase-content space-y-4">
              <Radio name="notify-default" value="all" label="All notifications" checked />
              <Radio name="notify-default" value="important" label="Important only" description="Only critical updates" />
              <Radio name="notify-default" value="none" label="None" />
            </div>
          </div>
        </div>

        <!-- Radio Cards - Full width -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Plan Selection</span>
            <span class="showcase-hint">Card-style radio options</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-4 sm:grid-cols-3">
              <Radio variant="card" name="plan-cards" value="free" label="Free" description="Basic features for personal projects" checked />
              <Radio variant="card" name="plan-cards" value="pro" label="Pro" description="Advanced tools for professionals" />
              <Radio variant="card" name="plan-cards" value="team" label="Team" description="Collaboration features for teams" />
            </div>
          </div>
        </div>

        <!-- Switch -->
        <div class="grid gap-6 lg:grid-cols-2">
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Switch</span>
              <span class="showcase-hint">Toggle on/off states</span>
            </div>
            <div class="showcase-content space-y-5">
              <Switch label="Email notifications" description="Receive email alerts for important updates" checked />
              <Switch label="Marketing emails" description="Get product news and feature announcements" />
              <Switch label="SMS alerts" description="Receive text messages for critical events" />
            </div>
          </div>

          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Switch Sizes & States</span>
              <span class="showcase-hint">sm, md, lg + disabled</span>
            </div>
            <div class="showcase-content space-y-5">
              <Switch size="sm" label="Small switch" checked />
              <Switch size="md" label="Medium switch (default)" checked />
              <Switch size="lg" label="Large switch" checked />
              <Switch label="Disabled off" disabled />
              <Switch label="Disabled on" disabled checked />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Feedback Section -->
    <section id="feedback" class="scroll-mt-32 flex flex-col gap-10">
      <div class="flex items-start gap-5">
        <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 shrink-0">
          <Icon name="alert-circle" size="lg" />
        </div>
        <div>
          <h2 class="font-display text-2xl font-bold text-foreground">Feedback</h2>
          <p class="text-foreground-muted mt-1">Badges, alerts, and status indicators to communicate state and guide user actions.</p>
        </div>
      </div>

      <div class="space-y-6">
        <!-- Badges -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Badges</span>
            <span class="showcase-hint">Status indicators</span>
          </div>
          <div class="showcase-content">
            <div class="flex flex-wrap items-center gap-3">
              <Badge>Default</Badge>
              <Badge variant="success">
                <Icon name="check" size="xs" />
                Success
              </Badge>
              <Badge variant="warning">
                <Icon name="alert-triangle" size="xs" />
                Warning
              </Badge>
              <Badge variant="error">
                <Icon name="x-circle" size="xs" />
                Error
              </Badge>
              <Badge variant="info">
                <Icon name="info" size="xs" />
                Info
              </Badge>
            </div>
          </div>
        </div>

        <!-- Alerts -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Alerts</span>
            <span class="showcase-hint">Contextual messages</span>
          </div>
          <div class="showcase-content space-y-4">
            <Alert variant="info" title="Tip">
              Use keyboard shortcuts to navigate faster. Press <kbd class="px-1.5 py-0.5 text-xs font-mono bg-background-secondary rounded border border-border">⌘K</kbd> to open the command palette.
            </Alert>
            <Alert variant="success" title="Deployment successful">
              Your changes are now live at <span class="underline underline-offset-2">your-app.vercel.app</span>
            </Alert>
            <Alert variant="warning" title="Approaching limit">
              You've used 80% of your monthly API quota. Consider upgrading your plan.
            </Alert>
            <Alert variant="error" title="Build failed" dismissible>
              Error in <code class="text-xs font-mono">src/components/Button.tsx</code> — missing required prop "variant"
            </Alert>
          </div>
        </div>

        <!-- Toast -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Toast Notifications</span>
            <span class="showcase-hint">Click buttons to trigger toasts</span>
          </div>
          <div class="showcase-content">
            <ToastDemo client:load />
          </div>
        </div>
      </div>
    </section>

    <!-- Overlays Section -->
    <section id="overlays" class="scroll-mt-32 flex flex-col gap-10">
      <div class="flex items-start gap-5">
        <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 shrink-0">
          <Icon name="layers" size="lg" />
        </div>
        <div>
          <h2 class="font-display text-2xl font-bold text-foreground">Overlays</h2>
          <p class="text-foreground-muted mt-1">Dialogs, dropdowns, tooltips, and tabs. Full keyboard navigation and focus management.</p>
        </div>
      </div>

      <div class="grid gap-6 lg:grid-cols-2">
        <!-- Dialog -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Dialog</span>
            <span class="showcase-hint">Modal overlay</span>
          </div>
          <div class="showcase-content">
            <Button onclick="openDialog('demo-dialog')">
              <Icon name="external-link" size="sm" />
              Open Dialog
            </Button>

            <Dialog id="demo-dialog" title="Delete project?" description="This action cannot be undone.">
              <p class="text-foreground-muted text-sm">
                Are you sure you want to delete <strong class="text-foreground">astro-rocket-demo</strong>? All files, deployments, and analytics data will be permanently removed.
              </p>
              <div class="flex justify-end gap-3 pt-6">
                <Button variant="outline" onclick="closeDialog('demo-dialog')">Cancel</Button>
                <Button variant="destructive" onclick="closeDialog('demo-dialog')">
                  <Icon name="x" size="sm" />
                  Delete Project
                </Button>
              </div>
            </Dialog>
          </div>
        </div>

        <!-- Dropdown -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Dropdown</span>
            <span class="showcase-hint">Action menu</span>
          </div>
          <div class="showcase-content">
            <Dropdown
              items={[
                { label: 'Edit', href: '#', icon: 'edit' },
                { label: 'Duplicate', href: '#', icon: 'copy' },
                { label: 'Share', href: '#', icon: 'share' },
                { separator: true, label: '' },
                { label: 'Archive', href: '#', icon: 'archive' },
                { label: 'Delete', href: '#', disabled: true, icon: 'trash' },
              ]}
            >
              <Button variant="outline" slot="trigger">
                Actions
                <Icon name="chevron-down" size="sm" />
              </Button>
            </Dropdown>
          </div>
        </div>

        <!-- Tooltips -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Tooltips</span>
            <span class="showcase-hint">Contextual hints</span>
          </div>
          <div class="showcase-content">
            <div class="flex flex-wrap items-center gap-4">
              <Tooltip content="Tooltip on top" position="top">
                <Button variant="outline" size="sm">Top</Button>
              </Tooltip>
              <Tooltip content="Tooltip on bottom" position="bottom">
                <Button variant="outline" size="sm">Bottom</Button>
              </Tooltip>
              <Tooltip content="Tooltip on left" position="left">
                <Button variant="outline" size="sm">Left</Button>
              </Tooltip>
              <Tooltip content="Tooltip on right" position="right">
                <Button variant="outline" size="sm">Right</Button>
              </Tooltip>
            </div>
          </div>
        </div>

        <!-- Tabs -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Tabs</span>
            <span class="showcase-hint">Content organization</span>
          </div>
          <div class="showcase-content">
            <Tabs
              tabs={[
                { id: 'overview', label: 'Overview' },
                { id: 'analytics', label: 'Analytics' },
                { id: 'settings', label: 'Settings' },
              ]}
            >
              <div data-tab-content="overview" class="text-sm text-foreground-muted">
                <p>Project overview with key metrics and recent activity. Tabs support full keyboard navigation.</p>
              </div>
              <div data-tab-content="analytics" class="text-sm text-foreground-muted">
                <p>Analytics data with charts and performance insights. Press arrow keys to navigate between tabs.</p>
              </div>
              <div data-tab-content="settings" class="text-sm text-foreground-muted">
                <p>Configure your project settings. Use Home/End to jump to first/last tab.</p>
              </div>
            </Tabs>
          </div>
        </div>
      </div>
    </section>

    <!-- Navigation Section -->
    <section id="navigation" class="scroll-mt-32 flex flex-col gap-10">
      <div class="flex items-start gap-5">
        <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 shrink-0">
          <Icon name="menu" size="lg" />
        </div>
        <div>
          <h2 class="font-display text-2xl font-bold text-foreground">Navigation</h2>
          <p class="text-foreground-muted mt-1">Vertical tabs and navigation patterns with responsive mobile behavior.</p>
        </div>
      </div>

      <div class="space-y-6">
        <!-- Vertical Tabs - Basic -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Vertical Tabs</span>
            <span class="showcase-hint">Responsive: dropdown on mobile, sidebar on desktop</span>
          </div>
          <div class="showcase-content">
            <VerticalTabs
              tabs={[
                { id: 'account', label: 'Account', description: 'Manage your profile' },
                { id: 'security', label: 'Security', description: 'Password & 2FA settings' },
                { id: 'notifications', label: 'Notifications', description: 'Email & push preferences' },
              ]}
            >
              <div data-tab-content="account" class="text-sm text-foreground-muted">
                <p class="mb-2"><strong class="text-foreground">Account Settings</strong></p>
                <p>Update your profile information, email address, and personal details. Changes are saved automatically.</p>
              </div>
              <div data-tab-content="security" class="text-sm text-foreground-muted">
                <p class="mb-2"><strong class="text-foreground">Security Settings</strong></p>
                <p>Configure password requirements, enable two-factor authentication, and manage active sessions.</p>
              </div>
              <div data-tab-content="notifications" class="text-sm text-foreground-muted">
                <p class="mb-2"><strong class="text-foreground">Notification Preferences</strong></p>
                <p>Choose which notifications you receive via email, push, or in-app. You can also set quiet hours.</p>
              </div>
            </VerticalTabs>
          </div>
        </div>

        <!-- Vertical Tabs - With Icons -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">With Icons</span>
            <span class="showcase-hint">Enhanced visual hierarchy</span>
          </div>
          <div class="showcase-content">
            <VerticalTabs
              tabs={[
                { id: 'overview', label: 'Overview', description: 'Project summary', icon: 'layout' },
                { id: 'analytics', label: 'Analytics', description: 'Traffic & insights', icon: 'zap' },
                { id: 'settings', label: 'Settings', description: 'Configuration', icon: 'settings' },
              ]}
            >
              <div data-tab-content="overview" class="text-sm text-foreground-muted">
                <div class="grid gap-4 sm:grid-cols-3">
                  <Card variant="solid" padding="sm">
                    <p class="text-xs text-foreground-subtle uppercase tracking-wider">Total Views</p>
                    <p class="text-2xl font-bold text-foreground mt-1">24,521</p>
                  </Card>
                  <Card variant="solid" padding="sm">
                    <p class="text-xs text-foreground-subtle uppercase tracking-wider">Avg. Time</p>
                    <p class="text-2xl font-bold text-foreground mt-1">3m 42s</p>
                  </Card>
                  <Card variant="solid" padding="sm">
                    <p class="text-xs text-foreground-subtle uppercase tracking-wider">Bounce Rate</p>
                    <p class="text-2xl font-bold text-foreground mt-1">32.4%</p>
                  </Card>
                </div>
              </div>
              <div data-tab-content="analytics" class="text-sm text-foreground-muted">
                <p>Detailed analytics with charts, traffic sources, and user behavior insights. Real-time data updates every minute.</p>
              </div>
              <div data-tab-content="settings" class="text-sm text-foreground-muted">
                <p>Configure project settings including domain, team permissions, and deployment preferences.</p>
              </div>
            </VerticalTabs>
          </div>
        </div>

        <!-- Vertical Tabs - Bottom Sheet Variant -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Bottom Sheet (Mobile)</span>
            <span class="showcase-hint">Alternative mobile UX with mobileVariant="sheet"</span>
          </div>
          <div class="showcase-content">
            <VerticalTabs
              mobileVariant="sheet"
              tabs={[
                { id: 'general', label: 'General', description: 'Basic preferences', icon: 'settings' },
                { id: 'privacy', label: 'Privacy', description: 'Data & permissions', icon: 'shield' },
                { id: 'billing', label: 'Billing', description: 'Payment methods', icon: 'wallet' },
              ]}
            >
              <div data-tab-content="general" class="text-sm text-foreground-muted">
                <p class="mb-2"><strong class="text-foreground">General Settings</strong></p>
                <p>Configure your basic preferences including language, timezone, and display options. Changes are saved automatically.</p>
              </div>
              <div data-tab-content="privacy" class="text-sm text-foreground-muted">
                <p class="mb-2"><strong class="text-foreground">Privacy Controls</strong></p>
                <p>Manage data sharing, third-party access, and communication preferences. Your privacy matters to us.</p>
              </div>
              <div data-tab-content="billing" class="text-sm text-foreground-muted">
                <p class="mb-2"><strong class="text-foreground">Billing Information</strong></p>
                <p>View invoices, update payment methods, and manage your subscription plan. All payments are securely processed.</p>
              </div>
            </VerticalTabs>
          </div>
        </div>

        <!-- Props Reference -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Available Props</span>
            <span class="showcase-hint">VerticalTabs API</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 text-sm">
              <div>
                <h4 class="font-semibold text-foreground mb-2">Core Props</h4>
                <ul class="space-y-1 text-foreground-muted">
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">tabs</code> Tab[] (required)</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">defaultValue</code> string</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">mobileVariant</code> 'dropdown' | 'sheet'</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">class</code> string</li>
                </ul>
              </div>
              <div>
                <h4 class="font-semibold text-foreground mb-2">Tab Interface</h4>
                <ul class="space-y-1 text-foreground-muted">
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">id</code> string (required)</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">label</code> string (required)</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">description</code> string</li>
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">icon</code> string (Icon name)</li>
                </ul>
              </div>
              <div>
                <h4 class="font-semibold text-foreground mb-2">Content Panels</h4>
                <ul class="space-y-1 text-foreground-muted">
                  <li><code class="text-xs bg-secondary px-1.5 py-0.5 rounded">data-tab-content</code></li>
                  <li class="text-xs">Match tab id for each panel</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- Pagination -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Pagination</span>
            <span class="showcase-hint">Page navigation with ellipsis</span>
          </div>
          <div class="showcase-content space-y-6">
            <div>
              <p class="text-xs text-foreground-muted mb-3 font-mono">Page 1 of 10</p>
              <Pagination currentPage={1} totalPages={10} />
            </div>
            <div>
              <p class="text-xs text-foreground-muted mb-3 font-mono">Page 5 of 10</p>
              <Pagination currentPage={5} totalPages={10} />
            </div>
            <div>
              <p class="text-xs text-foreground-muted mb-3 font-mono">Page 10 of 10</p>
              <Pagination currentPage={10} totalPages={10} />
            </div>
          </div>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Few Pages</span>
              <span class="showcase-hint">No ellipsis needed</span>
            </div>
            <div class="showcase-content">
              <Pagination currentPage={2} totalPages={4} />
            </div>
          </div>

          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Size Variants</span>
              <span class="showcase-hint">sm, md, lg</span>
            </div>
            <div class="showcase-content space-y-4">
              <Pagination currentPage={3} totalPages={8} size="sm" />
              <Pagination currentPage={3} totalPages={8} size="md" />
              <Pagination currentPage={3} totalPages={8} size="lg" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Data Display Section -->
    <section id="data" class="scroll-mt-32 flex flex-col gap-10">
      <div class="flex items-start gap-5">
        <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 shrink-0">
          <Icon name="layout" size="lg" />
        </div>
        <div>
          <h2 class="font-display text-2xl font-bold text-foreground">Data Display</h2>
          <p class="text-foreground-muted mt-1">Cards, avatars, and icons for presenting content and user information.</p>
        </div>
      </div>

      <div class="space-y-6">
        <!-- Card Variants -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Card Variants</span>
            <span class="showcase-hint">5 visual styles</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
              <Card variant="default" padding="sm">
                <p class="text-sm font-medium text-foreground">Default</p>
                <p class="text-xs text-foreground-muted mt-1">Standard bordered card</p>
              </Card>
              <Card variant="solid" padding="sm">
                <p class="text-sm font-medium text-foreground">Solid</p>
                <p class="text-xs text-foreground-muted mt-1">Filled background</p>
              </Card>
              <Card variant="outline" padding="sm">
                <p class="text-sm font-medium text-foreground">Outline</p>
                <p class="text-xs text-foreground-muted mt-1">Thick border, no fill</p>
              </Card>
              <Card variant="ghost" padding="sm">
                <p class="text-sm font-medium text-foreground">Ghost</p>
                <p class="text-xs text-foreground-muted mt-1">Transparent container</p>
              </Card>
              <Card variant="elevated" padding="sm">
                <p class="text-sm font-medium text-foreground">Elevated</p>
                <p class="text-xs text-foreground-muted mt-1">With shadow depth</p>
              </Card>
            </div>
          </div>
        </div>

        <!-- Cards with Icon -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Cards with Icons</span>
            <span class="showcase-hint">Compose your own layout with icon, title, description</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
              <Card hover>
                <div class="flex items-start gap-4">
                  <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center text-brand-500 shrink-0">
                    <Icon name="zap" size="md" />
                  </div>
                  <div class="flex-1 min-w-0">
                    <h3 class="text-base font-semibold text-foreground">Performance</h3>
                    <p class="text-xs text-foreground-subtle mt-0.5 font-medium">100/100 Lighthouse</p>
                  </div>
                </div>
                <p class="text-sm text-foreground-muted leading-relaxed mt-4">
                  Zero JavaScript by default. Islands architecture with selective hydration for optimal speed.
                </p>
              </Card>

              <Card hover>
                <div class="flex items-start gap-4">
                  <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center text-brand-500 shrink-0">
                    <Icon name="shield" size="md" />
                  </div>
                  <div class="flex-1 min-w-0">
                    <h3 class="text-base font-semibold text-foreground">Type-Safe</h3>
                    <p class="text-xs text-foreground-subtle mt-0.5 font-medium">Full TypeScript</p>
                  </div>
                </div>
                <p class="text-sm text-foreground-muted leading-relaxed mt-4">
                  Strict types throughout with IDE autocompletion and compile-time error checking.
                </p>
              </Card>

              <Card hover>
                <div class="flex items-start gap-4">
                  <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500/20 to-brand-500/5 flex items-center justify-center text-brand-500 shrink-0">
                    <Icon name="globe" size="md" />
                  </div>
                  <div class="flex-1 min-w-0">
                    <h3 class="text-base font-semibold text-foreground">i18n Ready</h3>
                    <p class="text-xs text-foreground-subtle mt-0.5 font-medium">Multi-language</p>
                  </div>
                </div>
                <p class="text-sm text-foreground-muted leading-relaxed mt-4">
                  Built-in translation system with SEO-friendly URLs and automatic locale detection.
                </p>
              </Card>
            </div>
          </div>
        </div>

        <!-- Simple Cards -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Simple Cards</span>
            <span class="showcase-hint">Title and description only</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
              <Card hover>
                <h3 class="text-base font-semibold text-foreground">Getting Started</h3>
                <p class="text-sm text-foreground-muted leading-relaxed mt-2">
                  Quick setup guide to get your project running in minutes.
                </p>
              </Card>

              <Card hover>
                <h3 class="text-base font-semibold text-foreground">Documentation</h3>
                <p class="text-sm text-foreground-muted leading-relaxed mt-2">
                  Comprehensive API reference and usage examples.
                </p>
              </Card>

              <Card hover>
                <h3 class="text-base font-semibold text-foreground">Community</h3>
                <p class="text-sm text-foreground-muted leading-relaxed mt-2">
                  Join our Discord server and connect with other developers.
                </p>
              </Card>
            </div>
          </div>
        </div>

        <!-- Custom Content Cards -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Custom Layouts</span>
            <span class="showcase-hint">Stats, profiles, actions</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
              <!-- Stats Card -->
              <Card>
                <div class="text-center">
                  <p class="text-xs font-medium text-foreground-subtle uppercase tracking-wider">Total Revenue</p>
                  <p class="text-3xl font-bold text-foreground mt-1">$45,231</p>
                  <p class="text-xs text-success mt-2 flex items-center justify-center gap-1">
                    <Icon name="arrow-right" size="xs" class="rotate-[-45deg]" />
                    +12.5% from last month
                  </p>
                </div>
              </Card>

              <!-- User Profile Card -->
              <Card>
                <div class="flex items-center gap-4">
                  <Avatar size="lg" src="https://i.pravatar.cc/150?img=32" alt="Sarah Chen" />
                  <div class="flex-1 min-w-0">
                    <h3 class="text-sm font-semibold text-foreground">Sarah Chen</h3>
                    <p class="text-xs text-foreground-muted">Product Designer</p>
                    <div class="flex items-center gap-2 mt-2">
                      <Badge variant="success" class="text-[10px] px-1.5 py-0.5">Pro</Badge>
                      <span class="text-xs text-foreground-subtle">San Francisco, CA</span>
                    </div>
                  </div>
                </div>
              </Card>

              <!-- Action Card -->
              <Card>
                <div class="flex items-start justify-between gap-4">
                  <div>
                    <h3 class="text-sm font-semibold text-foreground">astro-rocket-app</h3>
                    <p class="text-xs text-foreground-muted mt-0.5">Production deployment</p>
                  </div>
                  <Badge variant="success">Live</Badge>
                </div>
                <div class="flex items-center gap-2 mt-4 pt-4 border-t border-border">
                  <Button size="sm" variant="outline" class="flex-1">
                    <Icon name="eye" size="xs" />
                    View
                  </Button>
                  <Button size="sm" variant="outline" class="flex-1">
                    <Icon name="settings" size="xs" />
                    Settings
                  </Button>
                </div>
              </Card>
            </div>
          </div>
        </div>

        <!-- Avatars -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Avatars</span>
            <span class="showcase-hint">User representations</span>
          </div>
          <div class="showcase-content">
            <div class="flex flex-wrap items-end gap-4">
              <div class="text-center">
                <Avatar size="xs" alt="John Doe" />
                <span class="text-xs text-foreground-muted mt-2 block">xs</span>
              </div>
              <div class="text-center">
                <Avatar size="sm" alt="Jane Smith" />
                <span class="text-xs text-foreground-muted mt-2 block">sm</span>
              </div>
              <div class="text-center">
                <Avatar size="md" alt="Alex Johnson" />
                <span class="text-xs text-foreground-muted mt-2 block">md</span>
              </div>
              <div class="text-center">
                <Avatar size="lg" alt="Sam Wilson" />
                <span class="text-xs text-foreground-muted mt-2 block">lg</span>
              </div>
              <div class="text-center">
                <Avatar size="xl" alt="Chris Lee" />
                <span class="text-xs text-foreground-muted mt-2 block">xl</span>
              </div>
              <div class="pl-4 border-l border-border">
                <div class="flex -space-x-3">
                  <Avatar size="md" src="https://i.pravatar.cc/150?img=12" alt="User 1" class="ring-2 ring-background" />
                  <Avatar size="md" src="https://i.pravatar.cc/150?img=33" alt="User 2" class="ring-2 ring-background" />
                  <Avatar size="md" src="https://i.pravatar.cc/150?img=47" alt="User 3" class="ring-2 ring-background" />
                  <div class="w-10 h-10 rounded-full bg-secondary flex items-center justify-center text-xs font-medium ring-2 ring-background">+5</div>
                </div>
                <span class="text-xs text-foreground-muted mt-2 block">Stacked</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Icons -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Icons</span>
            <span class="showcase-hint">Lucide icon set — 24 included</span>
          </div>
          <div class="showcase-content">
            <div class="grid grid-cols-6 sm:grid-cols-8 md:grid-cols-10 lg:grid-cols-12 gap-2">
              {['menu', 'x', 'chevron-down', 'arrow-right', 'search', 'plus', 'check', 'mail', 'phone', 'github', 'twitter', 'linkedin', 'sun', 'moon', 'zap', 'globe', 'shield', 'code', 'heart', 'star', 'alert-circle', 'check-circle', 'info', 'loader'].map((icon) => (
                <Tooltip content={icon} position="top">
                  <div class="flex items-center justify-center w-10 h-10 rounded-lg border border-border bg-background hover:bg-secondary hover:border-border-strong transition-all cursor-pointer group">
                    <Icon name={icon} size="md" class="text-foreground-muted group-hover:text-foreground transition-colors" />
                  </div>
                </Tooltip>
              ))}
            </div>
          </div>
        </div>

        <!-- Separator -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Separator</span>
            <span class="showcase-hint">Horizontal, vertical, and with labels</span>
          </div>
          <div class="showcase-content space-y-6">
            <div>
              <p class="text-sm text-foreground-muted mb-3">Horizontal (default)</p>
              <Separator />
            </div>
            <div>
              <p class="text-sm text-foreground-muted mb-3">With label</p>
              <Separator label="OR" />
            </div>
            <div>
              <p class="text-sm text-foreground-muted mb-3">With label text</p>
              <Separator label="Continue with" />
            </div>
            <div>
              <p class="text-sm text-foreground-muted mb-3">Vertical (in flex container)</p>
              <div class="flex items-center gap-4 h-8">
                <span class="text-sm text-foreground-muted">Item 1</span>
                <Separator orientation="vertical" />
                <span class="text-sm text-foreground-muted">Item 2</span>
                <Separator orientation="vertical" />
                <span class="text-sm text-foreground-muted">Item 3</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Table -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Table</span>
            <span class="showcase-hint">Styled data table with hover and striping</span>
          </div>
          <div class="showcase-content">
            <Table
              columns={[
                { key: 'name', label: 'Name' },
                { key: 'email', label: 'Email' },
                { key: 'role', label: 'Role' },
                { key: 'status', label: 'Status', align: 'center' },
              ]}
              rows={[
                { name: 'Sarah Chen', email: 'sarah@example.com', role: 'Admin', status: 'Active' },
                { name: 'Alex Johnson', email: 'alex@example.com', role: 'Editor', status: 'Active' },
                { name: 'Sam Wilson', email: 'sam@example.com', role: 'Viewer', status: 'Inactive' },
              ]}
            />
          </div>
        </div>

        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Striped & Compact Table</span>
            <span class="showcase-hint">Alternating rows with reduced padding</span>
          </div>
          <div class="showcase-content">
            <Table
              striped
              compact
              columns={[
                { key: 'id', label: 'ID', align: 'center' },
                { key: 'product', label: 'Product' },
                { key: 'price', label: 'Price', align: 'right' },
                { key: 'stock', label: 'Stock', align: 'right' },
              ]}
              rows={[
                { id: '001', product: 'Astro Rocket Pro', price: '$49', stock: '120' },
                { id: '002', product: 'Astro Rocket Team', price: '$99', stock: '85' },
                { id: '003', product: 'Astro Rocket Enterprise', price: '$249', stock: '42' },
                { id: '004', product: 'Astro Rocket Starter', price: 'Free', stock: '∞' },
              ]}
            />
          </div>
        </div>

        <!-- AvatarGroup -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Avatar Group</span>
            <span class="showcase-hint">Stacked avatars with overflow</span>
          </div>
          <div class="showcase-content space-y-6">
            <div>
              <p class="text-xs text-foreground-muted mb-3 font-mono">max=4, 6 avatars</p>
              <AvatarGroup
                max={4}
                avatars={[
                  { src: 'https://i.pravatar.cc/150?img=12', alt: 'User 1' },
                  { src: 'https://i.pravatar.cc/150?img=33', alt: 'User 2' },
                  { src: 'https://i.pravatar.cc/150?img=47', alt: 'User 3' },
                  { src: 'https://i.pravatar.cc/150?img=5', alt: 'User 4' },
                  { src: 'https://i.pravatar.cc/150?img=8', alt: 'User 5' },
                  { src: 'https://i.pravatar.cc/150?img=11', alt: 'User 6' },
                ]}
              />
            </div>
            <div class="flex flex-wrap items-end gap-8">
              {(['xs', 'sm', 'md', 'lg'] as const).map((size) => (
                <div>
                  <p class="text-xs text-foreground-muted mb-2 font-mono">size="{size}"</p>
                  <AvatarGroup
                    size={size}
                    max={3}
                    avatars={[
                      { src: 'https://i.pravatar.cc/150?img=12', alt: 'User 1' },
                      { src: 'https://i.pravatar.cc/150?img=33', alt: 'User 2' },
                      { src: 'https://i.pravatar.cc/150?img=47', alt: 'User 3' },
                      { src: 'https://i.pravatar.cc/150?img=5', alt: 'User 4' },
                    ]}
                  />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Loading Section -->
    <section id="loading" class="scroll-mt-32 flex flex-col gap-10">
      <div class="flex items-start gap-5">
        <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 shrink-0">
          <Icon name="loader" size="lg" />
        </div>
        <div>
          <h2 class="font-display text-2xl font-bold text-foreground">Loading</h2>
          <p class="text-foreground-muted mt-1">Skeleton loaders for perceived performance while content is being fetched.</p>
        </div>
      </div>

      <div class="grid gap-6 lg:grid-cols-2">
        <!-- Skeleton Variants -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Skeleton Types</span>
            <span class="showcase-hint">Text, circular, rectangular</span>
          </div>
          <div class="showcase-content space-y-6">
            <div class="flex items-center gap-4">
              <Skeleton variant="circular" width="48px" height="48px" />
              <div class="flex-1 space-y-2">
                <Skeleton variant="text" width="140px" />
                <Skeleton variant="text" width="100px" />
              </div>
            </div>
            <Skeleton variant="default" height="120px" />
          </div>
        </div>

        <!-- Card Loading -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Card Skeleton</span>
            <span class="showcase-hint">Composite loading state</span>
          </div>
          <div class="showcase-content">
            <div class="p-5 rounded-lg border border-border bg-background">
              <div class="flex items-center gap-4 mb-5">
                <Skeleton variant="circular" width="40px" height="40px" />
                <div class="flex-1 space-y-2">
                  <Skeleton variant="text" width="50%" />
                  <Skeleton variant="text" width="30%" />
                </div>
              </div>
              <Skeleton variant="default" height="80px" class="mb-4" />
              <div class="flex gap-3">
                <Skeleton variant="default" width="80px" height="36px" />
                <Skeleton variant="default" width="80px" height="36px" />
              </div>
            </div>
          </div>
        </div>

        <!-- Progress Determinate -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Progress Bar</span>
            <span class="showcase-hint">Determinate progress indicators</span>
          </div>
          <div class="showcase-content space-y-5">
            <div>
              <p class="text-xs text-foreground-muted mb-2 font-mono">25% — default</p>
              <Progress value={25} />
            </div>
            <div>
              <p class="text-xs text-foreground-muted mb-2 font-mono">60% — brand</p>
              <Progress value={60} variant="brand" />
            </div>
            <div>
              <p class="text-xs text-foreground-muted mb-2 font-mono">90% — success</p>
              <Progress value={90} variant="success" />
            </div>
          </div>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
          <!-- Color Variants -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Color Variants</span>
              <span class="showcase-hint">All 5 at 70%</span>
            </div>
            <div class="showcase-content space-y-4">
              <Progress value={70} variant="default" />
              <Progress value={70} variant="brand" />
              <Progress value={70} variant="success" />
              <Progress value={70} variant="warning" />
              <Progress value={70} variant="error" />
            </div>
          </div>

          <!-- Sizes -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Size Variants</span>
              <span class="showcase-hint">sm, md, lg + indeterminate</span>
            </div>
            <div class="showcase-content space-y-5">
              <div>
                <p class="text-xs text-foreground-muted mb-2 font-mono">size="sm"</p>
                <Progress value={50} size="sm" variant="brand" />
              </div>
              <div>
                <p class="text-xs text-foreground-muted mb-2 font-mono">size="md"</p>
                <Progress value={50} size="md" variant="brand" />
              </div>
              <div>
                <p class="text-xs text-foreground-muted mb-2 font-mono">size="lg"</p>
                <Progress value={50} size="lg" variant="brand" />
              </div>
              <div>
                <p class="text-xs text-foreground-muted mb-2 font-mono">Indeterminate</p>
                <Progress variant="brand" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Toggles Section -->
    <section id="toggles" class="scroll-mt-32 flex flex-col gap-10">
      <div class="flex items-start gap-5">
        <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 shrink-0">
          <Icon name="toggle-left" size="lg" />
        </div>
        <div>
          <h2 class="font-display text-2xl font-bold text-foreground">Toggles</h2>
          <p class="text-foreground-muted mt-1">Accordion and expandable content patterns with native HTML details/summary.</p>
        </div>
      </div>

      <div class="space-y-6">
        <!-- Accordion Default -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Accordion - Default</span>
            <span class="showcase-hint">Collapsible FAQ sections</span>
          </div>
          <div class="showcase-content">
            <Accordion
              items={[
                { title: 'What is Astro Rocket?', content: 'Astro Rocket is a modern Astro starter template with Tailwind CSS v4, React islands, and a comprehensive component library. It includes everything you need to build production-ready websites.' },
                { title: 'Is it free to use?', content: 'Yes! Astro Rocket is open source and completely free. You can use it for personal and commercial projects without any restrictions.' },
                { title: 'How do I customize the theme?', content: 'Astro Rocket uses CSS custom properties (design tokens) for theming. Edit the token files in src/styles/tokens/ to customize colors, spacing, typography, and more.' },
              ]}
            />
          </div>
        </div>

        <div class="grid gap-6 lg:grid-cols-2">
          <!-- Accordion Card Variant -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Card Variant</span>
              <span class="showcase-hint">With one item open by default</span>
            </div>
            <div class="showcase-content">
              <Accordion
                variant="card"
                items={[
                  { title: 'Getting Started', content: 'Run the CLI scaffolding command to create a new project. Customize with flags like --demo, --components, and --i18n.', defaultOpen: true },
                  { title: 'Deployment', content: 'Deploy to Vercel, Netlify, or any static host. The build output is optimized for performance out of the box.' },
                  { title: 'Support', content: 'Join our GitHub discussions or file an issue for bugs and feature requests.' },
                ]}
              />
            </div>
          </div>

          <!-- Accordion Exclusive -->
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Exclusive Mode</span>
              <span class="showcase-hint">Only one item open at a time</span>
            </div>
            <div class="showcase-content">
              <Accordion
                exclusive
                items={[
                  { title: 'Free Plan', content: 'Perfect for personal projects and learning. Includes all core components and basic templates.' },
                  { title: 'Pro Plan', content: 'Advanced components, premium templates, priority support, and commercial license.' },
                  { title: 'Enterprise', content: 'Custom development, dedicated support, SLA guarantees, and team training workshops.' },
                ]}
              />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Patterns Section -->
    <section id="patterns" class="scroll-mt-32 flex flex-col gap-10">
      <div class="flex items-start gap-5">
        <div class="flex items-center justify-center w-12 h-12 rounded-xl bg-brand-500/10 text-brand-500 shrink-0">
          <Icon name="layers" size="lg" />
        </div>
        <div>
          <h2 class="font-display text-2xl font-bold text-foreground">Patterns</h2>
          <p class="text-foreground-muted mt-1">Pre-composed component patterns for common UI needs — search, passwords, stats, and empty states.</p>
        </div>
      </div>

      <div class="space-y-6">
        <!-- SearchInput -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Search Input</span>
            <span class="showcase-hint">Input with search icon, multiple sizes</span>
          </div>
          <div class="showcase-content space-y-5">
            <SearchInput size="sm" placeholder="Search files..." />
            <SearchInput placeholder="Search components..." />
            <SearchInput size="lg" placeholder="Search documentation..." />
          </div>
        </div>

        <!-- PasswordInput -->
        <div class="grid gap-6 lg:grid-cols-2">
          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Password Input</span>
              <span class="showcase-hint">With show/hide toggle</span>
            </div>
            <div class="showcase-content space-y-5">
              <PasswordInput label="Password" hint="Must be at least 8 characters" />
              <PasswordInput label="Confirm Password" placeholder="Re-enter password" />
            </div>
          </div>

          <div class="component-showcase">
            <div class="showcase-header">
              <span class="showcase-label">Password Sizes</span>
              <span class="showcase-hint">sm, md, lg</span>
            </div>
            <div class="showcase-content space-y-5">
              <PasswordInput size="sm" label="Small" />
              <PasswordInput size="md" label="Medium (default)" />
              <PasswordInput size="lg" label="Large" />
            </div>
          </div>
        </div>

        <!-- StatCard -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Stat Cards</span>
            <span class="showcase-hint">Metric display with trend indicators</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
              <StatCard label="Total Revenue" value="$45,231" trend="up" trendText="+12.5% from last month" icon="trending-up" />
              <StatCard label="Active Users" value="2,338" trend="up" trendText="+8.2% from last week" icon="users" />
              <StatCard label="Bounce Rate" value="24.3%" trend="down" trendText="-3.1% from last month" icon="trending-down" />
              <StatCard label="Avg. Session" value="3m 42s" trend="neutral" trendText="No change" icon="loader" />
            </div>
          </div>
        </div>

        <!-- EmptyState -->
        <div class="component-showcase">
          <div class="showcase-header">
            <span class="showcase-label">Empty State</span>
            <span class="showcase-hint">Placeholder for empty data views</span>
          </div>
          <div class="showcase-content">
            <div class="grid gap-6 lg:grid-cols-2">
              <EmptyState
                icon="inbox"
                title="No messages yet"
                description="When you receive messages, they'll appear here. Start a conversation to get going."
                actionLabel="New Message"
                actionHref="#"
              />
              <EmptyState
                icon="search"
                title="No results found"
                description="Try adjusting your search or filters to find what you're looking for."
              />
            </div>
          </div>
        </div>
      </div>
    </section>

  </div>

  <!-- CTA Section -->
  <CTA variant="invert" size="md" maxWidth="md">
    <h2 slot="heading">Ready to build?</h2>
    <p slot="description">
      These components are just the beginning. Clone Astro Rocket and start shipping faster.
    </p>
    <Fragment slot="actions">
      <Button href="https://github.com/hansmartens68/Astro-Rocket" target="_blank" class="hero-btn-brand">
        <Icon name="github" size="sm" />
        Clone Repository
      </Button>
      <Button variant="outline" href="/blog">
        Read Documentation
      </Button>
    </Fragment>
  </CTA>

</LandingLayout>

<style>
  /* Showcase card styling */
  .component-showcase {
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background-color: var(--card);
    overflow: visible;
  }

  .showcase-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    background-color: color-mix(in oklch, var(--background-secondary) 50%, transparent);
    border-radius: 0.75rem 0.75rem 0 0;
  }

  .showcase-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--foreground-muted);
  }

  .showcase-hint {
    font-size: 0.75rem;
    color: var(--foreground-subtle);
  }

  .showcase-content {
    padding: 1.25rem;
    border-radius: 0 0 0.75rem 0.75rem;
    background-color: var(--card);
  }

  /* Hide scrollbar but keep functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Keyboard styling */
  kbd {
    font-family: var(--font-mono);
  }

</style>
