---
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';

import { getLangFromUrl } from '../../lib/i18n/config';

const lang = getLangFromUrl(Astro.url);
const missionArticles = await getCollection('mission', ({ id }) => {
  return id.startsWith(`${lang}/`);
});
const sortedArticles = missionArticles.sort((a, b) => a.data.order - b.data.order);

const categoryIcons = {
  vision: 'mdi:eye-outline',
  values: 'mdi:heart-outline',
  approach: 'mdi:lightbulb-outline',
  team: 'mdi:account-group-outline',
  future: 'mdi:rocket-launch-outline',
};
---

<Layout title="Unsere Mission | Mana">
  <Navbar />
  
  <!-- Hero Section -->
  <HeroSection
    title="Unsere Mission"
    subtitle="Wir demokratisieren den Zugang zu KI-Technologie. Erfahren Sie mehr über unsere Vision, Werte und die Menschen, die Mana zu dem machen, was es ist."
    background="gradient"
    minHeight="large"
    sideImage={true}
    imageSrc="/images/Mana_Sea_Sun_Manacore_AI_Credits.jpg"
    imageAlt="Mana Nautilus - Evolution der KI-Nutzung"
    containerClass=""
    debug={false}
  />
  
  <!-- Mission Articles -->
  <Section spacing="xlarge">
    <Container>
      <Grid cols={1} gap="xlarge" class="max-w-5xl mx-auto">
        {sortedArticles.map((article, index) => (
          <a href={`/mission/${article.slug}`} class="block group">
            <Card variant={article.data.featured ? "elevated" : "bordered"} padding="xlarge" 
                  class="hover:border-mana-blue transition-all hover:shadow-xl">
              <div class="flex flex-col md:flex-row gap-8">
                {/* Icon */}
                <div class="flex-shrink-0">
                  <div class="w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-2xl flex items-center justify-center group-hover:bg-mana-blue/10 transition-colors">
                    <Icon name={categoryIcons[article.data.category]} class="w-10 h-10 text-mana-blue" />
                  </div>
                </div>
                
                {/* Content */}
                <div class="flex-1">
                  <Heading as="h2" size="3" class="mb-3 group-hover:text-mana-blue transition-colors">
                    {article.data.title}
                  </Heading>
                  
                  <Text size="lg" color="muted" class="mb-4">
                    {article.data.description}
                  </Text>
                  
                  {/* Read more link */}
                  <div class="flex items-center gap-2 text-mana-blue font-medium">
                    <span>Mehr erfahren</span>
                    <Icon name="mdi:arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform" />
                  </div>
                </div>
              </div>
            </Card>
          </a>
        ))}
      </Grid>
    </Container>
  </Section>
  
  <!-- Call to Action -->
  <Section spacing="xlarge" class="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20">
    <Container>
      <Card variant="elevated" padding="xlarge" class="max-w-4xl mx-auto text-center">
        <Icon name="mdi:handshake" class="w-16 h-16 text-mana-blue mx-auto mb-6" />
        
        <Heading as="h2" size="2" class="mb-4">
          Werden Sie Teil unserer Mission
        </Heading>
        
        <Text size="lg" class="mb-8 text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
          Ob als Kunde, Partner oder Teammitglied - es gibt viele Wege, 
          Teil der Mana-Revolution zu werden.
        </Text>
        
        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <a href="/start" class="inline-flex items-center justify-center gap-2 px-6 py-3 bg-mana-orange text-white rounded-lg hover:bg-orange-600 transition-colors">
            <Icon name="mdi:rocket-launch" class="w-5 h-5" />
            Jetzt starten
          </a>
          <a href="/careers" 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:briefcase" class="w-5 h-5" />
            Karriere bei Mana
          </a>
        </div>
      </Card>
    </Container>
  </Section>
  
  <Footer />
</Layout>