---
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/navigation/Navbar.astro';
import Footer from '../components/navigation/Footer.astro';
import Section from '../components/content/Section.astro';
import Container from '../components/layout/Container.astro';
import Grid from '../components/layout/Grid.astro';
import Flex from '../components/layout/Flex.astro';
import Card from '../components/ui/Card.astro';
import Button from '../components/ui/Button.astro';
import Heading from '../components/typography/Heading.astro';
import Text from '../components/typography/Text.astro';
import Badge from '../components/ui/Badge.astro';
import Image from '../components/ui/Image.astro';
import HeroSection from '../components/content/HeroSection.astro';
import ImageTextSection from '../components/content/ImageTextSection.astro';
import PricingCard from '../components/pricing/PricingCard.astro';
import { Icon } from 'astro-icon/components';

// Sample data for components
const samplePricingPlan = {
  name: 'Professional',
  price: 29,
  interval: 'month',
  mana: 5000,
  features: [
    'Alle KI-Tools',
    'Priority Support',
    'API-Zugang',
    'Team-Features'
  ],
  popular: true
};
---

<Layout title="Design System - Mana">
  <Navbar />
  
  <!-- Sticky Design System Navigation -->
  <div class="sticky top-16 z-40 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm">
    <Container>
      <div class="flex items-center justify-between py-4">
        <nav class="flex items-center gap-6 overflow-x-auto scrollbar-hide">
          <a href="#typography" class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors">Typography</a>
          <a href="#colors" class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors">Colors</a>
          <a href="#buttons" class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors">Buttons</a>
          <a href="#cards" class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors">Cards</a>
          <a href="#layout" class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors">Layout</a>
          <a href="#sections" class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors">Sections</a>
          <a href="#pricing" class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors">Pricing</a>
          <a href="#navigation" class="text-sm font-medium hover:text-mana-blue whitespace-nowrap transition-colors">Navigation</a>
        </nav>
        
        <!-- Wireframe Toggle -->
        <div class="flex items-center gap-2 ml-4 flex-shrink-0">
          <label class="text-sm font-medium">Wireframes</label>
          <button 
            id="wireframe-toggle"
            class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-gray-700 transition-colors"
            onclick="toggleWireframes()"
          >
            <span class="sr-only">Toggle wireframes</span>
            <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
          </button>
        </div>
      </div>
    </Container>
  </div>

  <!-- Hero -->
  <HeroSection
    title="Mana Design System"
    subtitle="Alle UI-Komponenten und Patterns im Überblick"
    minHeight="small"
    background="gradient"
    titleSize="2"
    containerClass="pt-16 pb-8"
  />

  <!-- Typography Section -->
  <Section spacing="xlarge" id="typography">
    <Container>
      <Heading as="h2" size="3" class="mb-8">Typography</Heading>
      
      <Grid cols={2} gap="large">
        <Card padding="large" variant="bordered">
          <Heading as="h3" size="5" class="mb-4">Headings</Heading>
          <div class="space-y-4">
            <Heading as="h1" size="1">Heading Size 1</Heading>
            <Heading as="h2" size="2">Heading Size 2</Heading>
            <Heading as="h3" size="3">Heading Size 3</Heading>
            <Heading as="h4" size="4">Heading Size 4</Heading>
            <Heading as="h5" size="5">Heading Size 5</Heading>
            <Heading as="h6" size="6">Heading Size 6</Heading>
          </div>
        </Card>
        
        <Card padding="large" variant="bordered">
          <Heading as="h3" size="5" class="mb-4">Text Variants</Heading>
          <div class="space-y-4">
            <Text size="xs">Extra Small Text (xs)</Text>
            <Text size="sm">Small Text (sm)</Text>
            <Text size="base">Base Text (base)</Text>
            <Text size="lg">Large Text (lg)</Text>
            <Text size="xl">Extra Large Text (xl)</Text>
            <Text size="2xl">2X Large Text (2xl)</Text>
            <div class="pt-4 border-t">
              <Text weight="light">Light Weight</Text>
              <Text weight="normal">Normal Weight</Text>
              <Text weight="medium">Medium Weight</Text>
              <Text weight="semibold">Semibold Weight</Text>
              <Text weight="bold">Bold Weight</Text>
            </div>
          </div>
        </Card>
      </Grid>
    </Container>
  </Section>

  <!-- Colors Section -->
  <Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900" id="colors">
    <Container>
      <Heading as="h2" size="3" class="mb-8">Colors</Heading>
      
      <Grid cols={4} gap="medium">
        <Card padding="large" variant="bordered">
          <div class="h-24 bg-mana-blue rounded-lg mb-4"></div>
          <Text weight="semibold">Mana Blue</Text>
          <Text size="sm" color="muted">#3B82F6</Text>
        </Card>
        
        <Card padding="large" variant="bordered">
          <div class="h-24 bg-gray-900 dark:bg-gray-100 rounded-lg mb-4"></div>
          <Text weight="semibold">Text Primary</Text>
          <Text size="sm" color="muted">gray-900 / gray-100</Text>
        </Card>
        
        <Card padding="large" variant="bordered">
          <div class="h-24 bg-gray-600 dark:bg-gray-400 rounded-lg mb-4"></div>
          <Text weight="semibold">Text Muted</Text>
          <Text size="sm" color="muted">gray-600 / gray-400</Text>
        </Card>
        
        <Card padding="large" variant="bordered">
          <div class="h-24 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20 rounded-lg mb-4"></div>
          <Text weight="semibold">Gradient</Text>
          <Text size="sm" color="muted">Blue to Purple</Text>
        </Card>
      </Grid>
    </Container>
  </Section>

  <!-- Buttons Section -->
  <Section spacing="xlarge" id="buttons">
    <Container>
      <Heading as="h2" size="3" class="mb-8">Buttons</Heading>
      
      <div class="space-y-8">
        <!-- Button Variants -->
        <Card padding="large" variant="bordered">
          <Heading as="h3" size="5" class="mb-6">Variants</Heading>
          <Flex gap="medium" wrap class="mb-4">
            <Button variant="primary">Primary Button</Button>
            <Button variant="secondary">Secondary Button</Button>
            <Button variant="outline">Outline Button</Button>
            <Button variant="ghost">Ghost Button</Button>
            <Button variant="danger">Danger Button</Button>
          </Flex>
        </Card>

        <!-- Button Sizes -->
        <Card padding="large" variant="bordered">
          <Heading as="h3" size="5" class="mb-6">Sizes</Heading>
          <Flex gap="medium" align="center" wrap>
            <Button size="small">Small</Button>
            <Button size="medium">Medium</Button>
            <Button size="large">Large</Button>
          </Flex>
        </Card>

        <!-- Button States -->
        <Card padding="large" variant="bordered">
          <Heading as="h3" size="5" class="mb-6">States</Heading>
          <Flex gap="medium" wrap>
            <Button>Normal</Button>
            <Button disabled>Disabled</Button>
            <Button class="animate-pulse">Loading...</Button>
          </Flex>
        </Card>

        <!-- Icon Buttons -->
        <Card padding="large" variant="bordered">
          <Heading as="h3" size="5" class="mb-6">With Icons</Heading>
          <Flex gap="medium" wrap>
            <Button>
              <Icon name="mdi:arrow-left" class="w-4 h-4 mr-2" />
              Back
            </Button>
            <Button>
              Next
              <Icon name="mdi:arrow-right" class="w-4 h-4 ml-2" />
            </Button>
            <Button variant="outline">
              <Icon name="mdi:download" class="w-4 h-4 mr-2" />
              Download
            </Button>
          </Flex>
        </Card>
      </div>
    </Container>
  </Section>

  <!-- Cards Section -->
  <Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900" id="cards">
    <Container>
      <Heading as="h2" size="3" class="mb-8">Cards</Heading>
      
      <Grid cols={3} gap="large">
        <Card variant="flat" padding="large">
          <Heading as="h3" size="5" class="mb-2">Flat Card</Heading>
          <Text color="muted">This is a flat card variant with no shadow or border.</Text>
        </Card>
        
        <Card variant="bordered" padding="large">
          <Heading as="h3" size="5" class="mb-2">Bordered Card</Heading>
          <Text color="muted">This card has a border around it.</Text>
        </Card>
        
        <Card variant="elevated" padding="large">
          <Heading as="h3" size="5" class="mb-2">Elevated Card</Heading>
          <Text color="muted">This card has a shadow effect for elevation.</Text>
        </Card>
      </Grid>

      <div class="mt-8">
        <Heading as="h3" size="5" class="mb-6">Card Padding Options</Heading>
        <Grid cols={4} gap="medium">
          <Card variant="bordered" padding="none">
            <div class="p-4 bg-gray-100 dark:bg-gray-800">
              <Text size="sm">No Padding</Text>
            </div>
          </Card>
          <Card variant="bordered" padding="small">
            <Text size="sm">Small Padding</Text>
          </Card>
          <Card variant="bordered" padding="medium">
            <Text size="sm">Medium Padding</Text>
          </Card>
          <Card variant="bordered" padding="large">
            <Text size="sm">Large Padding</Text>
          </Card>
        </Grid>
      </div>
    </Container>
  </Section>

  <!-- Layout Components -->
  <Section spacing="xlarge" id="layout">
    <Container>
      <Heading as="h2" size="3" class="mb-8">Layout Components</Heading>
      
      <!-- Grid Examples -->
      <div class="space-y-8">
        <Card padding="large" variant="bordered">
          <Heading as="h3" size="5" class="mb-6">Grid System</Heading>
          
          <div class="space-y-6">
            <div>
              <Text size="sm" weight="semibold" class="mb-3">2 Columns</Text>
              <Grid cols={2} gap="medium">
                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">Col 1</div>
                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">Col 2</div>
              </Grid>
            </div>
            
            <div>
              <Text size="sm" weight="semibold" class="mb-3">3 Columns</Text>
              <Grid cols={3} gap="medium">
                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">Col 1</div>
                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">Col 2</div>
                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">Col 3</div>
              </Grid>
            </div>
            
            <div>
              <Text size="sm" weight="semibold" class="mb-3">4 Columns</Text>
              <Grid cols={4} gap="medium">
                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">1</div>
                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">2</div>
                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">3</div>
                <div class="bg-gray-100 dark:bg-gray-800 p-4 rounded">4</div>
              </Grid>
            </div>
          </div>
        </Card>

        <!-- Flex Examples -->
        <Card padding="large" variant="bordered">
          <Heading as="h3" size="5" class="mb-6">Flex Layouts</Heading>
          
          <div class="space-y-6">
            <div>
              <Text size="sm" weight="semibold" class="mb-3">Justify Options</Text>
              <div class="space-y-3">
                <Flex justify="start" class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
                  <div class="bg-mana-blue text-white px-3 py-1 rounded">Start</div>
                </Flex>
                <Flex justify="center" class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
                  <div class="bg-mana-blue text-white px-3 py-1 rounded">Center</div>
                </Flex>
                <Flex justify="end" class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
                  <div class="bg-mana-blue text-white px-3 py-1 rounded">End</div>
                </Flex>
              </div>
            </div>
            
            <div>
              <Text size="sm" weight="semibold" class="mb-3">Gap Options</Text>
              <Flex gap="small" class="bg-gray-100 dark:bg-gray-800 p-4 rounded">
                <div class="bg-mana-blue text-white px-3 py-1 rounded">Small</div>
                <div class="bg-mana-blue text-white px-3 py-1 rounded">Gap</div>
              </Flex>
              <Flex gap="medium" class="bg-gray-100 dark:bg-gray-800 p-4 rounded mt-2">
                <div class="bg-mana-blue text-white px-3 py-1 rounded">Medium</div>
                <div class="bg-mana-blue text-white px-3 py-1 rounded">Gap</div>
              </Flex>
              <Flex gap="large" class="bg-gray-100 dark:bg-gray-800 p-4 rounded mt-2">
                <div class="bg-mana-blue text-white px-3 py-1 rounded">Large</div>
                <div class="bg-mana-blue text-white px-3 py-1 rounded">Gap</div>
              </Flex>
            </div>
          </div>
        </Card>
      </div>
    </Container>
  </Section>

  <!-- Section Components -->
  <Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900" id="sections">
    <Container>
      <Heading as="h2" size="3" class="mb-8">Section Components</Heading>
      
      <div class="space-y-8">
        <!-- Hero Section Example -->
        <Card padding="none" variant="bordered" class="overflow-hidden">
          <HeroSection
            title="Hero Section Example"
            subtitle="This is how a hero section looks with different options"
            minHeight="medium"
            background="gradient"
            titleSize="3"
            sideImage={true}
            imageSrc="/images/Mana_River_Manacore_AI_Credits.jpg"
            imageAlt="Hero Example"
          >
            <Flex gap="medium" justify="center">
              <Button>Primary CTA</Button>
              <Button variant="outline">Secondary CTA</Button>
            </Flex>
          </HeroSection>
        </Card>

        <!-- Image Text Section -->
        <Card padding="none" variant="bordered" class="overflow-hidden">
          <ImageTextSection
            title="Image Text Section"
            content="This component displays content alongside an image. Perfect for feature explanations."
            imagePosition="left"
            imageSrc="/images/Mana_Drop_Manacore_AI_Credits.jpg"
            imageAlt="Feature Example"
          />
        </Card>
      </div>
    </Container>
  </Section>

  <!-- Pricing Components -->
  <Section spacing="xlarge" id="pricing">
    <Container>
      <Heading as="h2" size="3" class="mb-8">Pricing Components</Heading>
      
      <Grid cols={3} gap="large">
        <PricingCard 
          plan={{
            name: "Starter",
            price: 0,
            interval: "month",
            mana: 500,
            features: ["Basic Features", "Email Support", "5 Projects"],
            popular: false
          }}
          type="subscription"
          billingPeriod="monthly"
        />
        
        <PricingCard 
          plan={samplePricingPlan}
          type="subscription"
          billingPeriod="monthly"
        />
        
        <PricingCard 
          plan={{
            name: "Enterprise",
            price: 99,
            interval: "month",
            mana: 20000,
            features: ["All Features", "Priority Support", "Unlimited Projects", "Custom Integration"],
            popular: false
          }}
          type="subscription"
          billingPeriod="monthly"
        />
      </Grid>
    </Container>
  </Section>

  <!-- UI Elements -->
  <Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900" id="navigation">
    <Container>
      <Heading as="h2" size="3" class="mb-8">UI Elements</Heading>
      
      <Grid cols={2} gap="large">
        <!-- Badges -->
        <Card padding="large" variant="bordered">
          <Heading as="h3" size="5" class="mb-6">Badges</Heading>
          <Flex gap="medium" wrap>
            <Badge>Default</Badge>
            <Badge variant="success">Success</Badge>
            <Badge variant="warning">Warning</Badge>
            <Badge variant="danger">Danger</Badge>
            <Badge variant="info">Info</Badge>
          </Flex>
        </Card>

        <!-- Icons -->
        <Card padding="large" variant="bordered">
          <Heading as="h3" size="5" class="mb-6">Icons</Heading>
          <Flex gap="large" wrap>
            <Icon name="mdi:home" class="w-6 h-6" />
            <Icon name="mdi:cog" class="w-6 h-6" />
            <Icon name="mdi:account" class="w-6 h-6" />
            <Icon name="mdi:bell" class="w-6 h-6" />
            <Icon name="mdi:heart" class="w-6 h-6" />
            <Icon name="mdi:star" class="w-6 h-6" />
          </Flex>
        </Card>
      </Grid>

      <!-- Images -->
      <Card padding="large" variant="bordered" class="mt-8">
        <Heading as="h3" size="5" class="mb-6">Image Component</Heading>
        <Grid cols={3} gap="medium">
          <div>
            <Text size="sm" weight="semibold" class="mb-2">Default</Text>
            <Image placeholder="feature" alt="Default Image" width={300} height={200} />
          </div>
          <div>
            <Text size="sm" weight="semibold" class="mb-2">Rounded</Text>
            <Image placeholder="team" alt="Rounded Image" width={300} height={200} rounded />
          </div>
          <div>
            <Text size="sm" weight="semibold" class="mb-2">With Shadow</Text>
            <Image placeholder="dashboard" alt="Shadow Image" width={300} height={200} class="shadow-lg" />
          </div>
        </Grid>
      </Card>
    </Container>
  </Section>

  <Footer />

  <script>
    function toggleWireframes() {
      const toggle = document.getElementById('wireframe-toggle');
      const toggleSpan = toggle?.querySelector('span:last-child');
      const body = document.body;
      
      if (body.classList.contains('wireframe-mode')) {
        body.classList.remove('wireframe-mode');
        toggleSpan?.classList.remove('translate-x-5');
        toggleSpan?.classList.add('translate-x-1');
        toggle?.classList.remove('bg-mana-blue');
        toggle?.classList.add('bg-gray-200', 'dark:bg-gray-700');
      } else {
        body.classList.add('wireframe-mode');
        toggleSpan?.classList.remove('translate-x-1');
        toggleSpan?.classList.add('translate-x-5');
        toggle?.classList.remove('bg-gray-200', 'dark:bg-gray-700');
        toggle?.classList.add('bg-mana-blue');
      }
    }

    // Smooth scroll for navigation links
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
          target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        }
      });
    });
  </script>

  <style>
    /* Hide scrollbar for navigation */
    .scrollbar-hide {
      -ms-overflow-style: none;  /* IE and Edge */
      scrollbar-width: none;  /* Firefox */
    }
    
    .scrollbar-hide::-webkit-scrollbar {
      display: none;  /* Chrome, Safari and Opera */
    }
    
    /* Wireframe Mode Styles */
    .wireframe-mode * {
      color: #333 !important;
      background-color: transparent !important;
      background-image: none !important;
    }
    
    .wireframe-mode [class*="bg-"] {
      background-color: transparent !important;
      border: 2px dashed #999 !important;
    }
    
    .wireframe-mode img,
    .wireframe-mode [class*="Image"] {
      opacity: 0.1;
      border: 2px dashed #999;
    }
    
    .wireframe-mode button,
    .wireframe-mode a[class*="Button"] {
      background-color: transparent !important;
      border: 2px solid #666 !important;
      color: #666 !important;
    }
    
    .wireframe-mode [class*="Card"] {
      background-color: transparent !important;
      border: 2px dashed #999 !important;
      box-shadow: none !important;
    }
    
    .wireframe-mode [class*="text-mana-blue"],
    .wireframe-mode [class*="text-blue"],
    .wireframe-mode [class*="text-green"],
    .wireframe-mode [class*="text-red"],
    .wireframe-mode [class*="text-yellow"] {
      color: #666 !important;
    }
    
    .wireframe-mode [class*="from-"],
    .wireframe-mode [class*="to-"],
    .wireframe-mode [class*="via-"] {
      background: transparent !important;
    }
    
    /* Keep the toggle visible */
    .wireframe-mode #wireframe-toggle {
      background-color: #3B82F6 !important;
      border: none !important;
    }
    
    .wireframe-mode #wireframe-toggle span {
      background-color: white !important;
    }
  </style>
</Layout>