---
import { getCollection } from 'astro:content';
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 Heading from '../../components/typography/Heading.astro';
import Text from '../../components/typography/Text.astro';
import Card from '../../components/ui/Card.astro';
import Grid from '../../components/layout/Grid.astro';
import HeroSection from '../../components/content/HeroSection.astro';
import { Icon } from 'astro-icon/components';

const legalDocs = await getCollection('legal');
const sortedDocs = legalDocs.sort((a, b) => a.data.order - b.data.order);
---

<Layout title="Rechtliches - AGB, Datenschutz & mehr | Mana">
  <Navbar />
  
  <!-- Hero Section -->
  <HeroSection
    title="Rechtliche Informationen"
    subtitle="Transparenz ist uns wichtig. Hier finden Sie alle rechtlichen Dokumente und Informationen zu unseren Services."
    background="gradient"
    minHeight="medium"
    icon="mdi:scale-balance"
    containerClass=""
    debug={true}
  />
  
  <!-- Legal Documents -->
  <Section spacing="xlarge">
    <Container>
      <Grid cols={1} gap="large" class="max-w-4xl mx-auto">
        {sortedDocs.map((doc) => (
          <a href={`/legal/${doc.slug}`} class="block group">
            <Card variant="bordered" padding="large" class="hover:border-mana-blue transition-all hover:shadow-lg">
              <div class="flex items-start justify-between">
                <div class="flex-1">
                  <div class="flex items-center gap-3 mb-3">
                    <Icon name="mdi:file-document" class="w-6 h-6 text-gray-400" />
                    <Heading as="h3" size="4" class="group-hover:text-mana-blue transition-colors">
                      {doc.data.title}
                    </Heading>
                  </div>
                  
                  <Text color="muted" class="mb-4">
                    {doc.data.description}
                  </Text>
                  
                  <div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
                    <span>
                      Stand: {new Date(doc.data.lastUpdated).toLocaleDateString('de-DE', {
                        year: 'numeric',
                        month: 'long',
                        day: 'numeric'
                      })}
                    </span>
                  </div>
                </div>
                
                <Icon name="mdi:arrow-right" class="w-6 h-6 text-gray-400 group-hover:text-mana-blue transition-colors flex-shrink-0" />
              </div>
            </Card>
          </a>
        ))}
      </Grid>
    </Container>
  </Section>
  
  <!-- Additional Resources -->
  <Section spacing="xlarge" class="bg-gray-50 dark:bg-gray-900">
    <Container>
      <div class="text-center mb-12">
        <Heading as="h2" size="3" class="mb-4">
          Weitere wichtige Informationen
        </Heading>
      </div>
      
      <Grid cols={3} gap="large" class="max-w-4xl mx-auto">
        <Card variant="bordered" padding="large" class="text-center">
          <div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center mx-auto mb-4">
            <Icon name="mdi:shield-check" class="w-6 h-6" />
          </div>
          <Heading as="h3" size="6" class="mb-2">
            Datenschutz-Center
          </Heading>
          <Text size="sm" color="muted" class="mb-4">
            Detaillierte Informationen zu DSGVO und KI-Ethik
          </Text>
          <a href="/privacy" class="text-mana-blue hover:underline text-sm font-medium">
            Zum Datenschutz-Center →
          </a>
        </Card>
        
        <Card variant="bordered" padding="large" class="text-center">
          <div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center mx-auto mb-4">
            <Icon name="mdi:headset" class="w-6 h-6" />
          </div>
          <Heading as="h3" size="6" class="mb-2">
            Support
          </Heading>
          <Text size="sm" color="muted" class="mb-4">
            Hilfe und Antworten auf Ihre Fragen
          </Text>
          <a href="/support" class="text-mana-blue hover:underline text-sm font-medium">
            Zum Support →
          </a>
        </Card>
        
        <Card variant="bordered" padding="large" class="text-center">
          <div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center mx-auto mb-4">
            <Icon name="mdi:information" class="w-6 h-6" />
          </div>
          <Heading as="h3" size="6" class="mb-2">
            Impressum
          </Heading>
          <Text size="sm" color="muted" class="mb-4">
            Angaben gemäß § 5 TMG
          </Text>
          <a href="/impressum" class="text-mana-blue hover:underline text-sm font-medium">
            Zum Impressum →
          </a>
        </Card>
      </Grid>
    </Container>
  </Section>
  
  <!-- Contact -->
  <Section spacing="xlarge">
    <Container>
      <Card variant="elevated" padding="xlarge" class="max-w-4xl mx-auto bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20">
        <div class="text-center">
          <Icon name="mdi:email" class="w-12 h-12 text-mana-blue mx-auto mb-4" />
          
          <Heading as="h2" size="3" class="mb-4">
            Rechtliche Fragen?
          </Heading>
          
          <Text size="lg" color="muted" class="mb-6 max-w-2xl mx-auto">
            Unsere Rechtsabteilung steht Ihnen für alle Fragen zu unseren 
            Bedingungen und rechtlichen Dokumenten zur Verfügung.
          </Text>
          
          <div class="flex flex-col sm:flex-row gap-4 justify-center">
            <a href="mailto:legal@mana.ai" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-mana-blue text-white rounded-lg hover:bg-blue-600 transition-colors">
              <Icon name="mdi:email" class="w-5 h-5" />
              legal@mana.ai
            </a>
            <a href="tel:+4912345678" class="inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-gray-300 dark:border-gray-600 rounded-lg hover:border-mana-blue transition-colors">
              <Icon name="mdi:phone" class="w-5 h-5" />
              +49 123 456 78
            </a>
          </div>
        </div>
      </Card>
    </Container>
  </Section>
  
  <Footer />
</Layout>