---
import { getCollection, getEntry } 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 Button from '../../components/ui/Button.astro';
import { Icon } from 'astro-icon/components';

export async function getStaticPaths() {
	const missionEntries = await getCollection('mission');
	const germanMissionEntries = missionEntries.filter((entry) => entry.slug.startsWith('de/'));
	return germanMissionEntries.map((entry) => ({
		params: { slug: entry.slug.replace('de/', '') },
		props: { entry },
	}));
}

const { entry } = Astro.props;
const { Content } = await entry.render();

// Get other mission articles
const allMissionArticles = await getCollection('mission');
const germanMissionArticles = allMissionArticles.filter((article) =>
	article.slug.startsWith('de/')
);
const otherArticles = germanMissionArticles
	.filter((article) => article.slug !== entry.slug)
	.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={`${entry.data.title} | Mana`}>
	<Navbar />

	<Section spacing="large" class="pt-32">
		<Container>
			<div class="max-w-4xl mx-auto">
				<!-- Back Link -->
				<a
					href="/mission"
					class="inline-flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-mana-blue transition-colors mb-8"
				>
					<Icon name="mdi:arrow-left" class="w-5 h-5" />
					<span>Zurück zur Übersicht</span>
				</a>

				<!-- Header -->
				<div class="mb-12 text-center">
					<div
						class="w-20 h-20 bg-mana-blue/10 rounded-2xl flex items-center justify-center mx-auto mb-6"
					>
						<Icon name={categoryIcons[entry.data.category]} class="w-10 h-10 text-mana-blue" />
					</div>

					<Heading as="h1" size="1" class="mb-4">
						{entry.data.title}
					</Heading>

					<Text size="xl" color="muted" class="max-w-2xl mx-auto">
						{entry.data.description}
					</Text>
				</div>

				<!-- Content -->
				<div class="prose prose-lg dark:prose-invert max-w-none mb-16">
					<Content />
				</div>

				<!-- Other Articles -->
				{
					otherArticles.length > 0 && (
						<div class="border-t border-gray-200 dark:border-gray-700 pt-12">
							<Heading as="h3" size="4" class="mb-6">
								Weitere Artikel
							</Heading>

							<div class="space-y-4">
								{otherArticles.map((article) => (
									<a href={`/mission/${article.slug.replace('de/', '')}`} class="block group">
										<Card
											variant="bordered"
											padding="large"
											class="hover:border-mana-blue transition-all"
										>
											<div class="flex items-center justify-between">
												<div class="flex items-center gap-4">
													<div class="w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-xl flex items-center justify-center group-hover:bg-mana-blue/10 transition-colors">
														<Icon
															name={categoryIcons[article.data.category]}
															class="w-6 h-6 text-mana-blue"
														/>
													</div>
													<div>
														<Text
															weight="semibold"
															class="group-hover:text-mana-blue transition-colors"
														>
															{article.data.title}
														</Text>
														<Text size="sm" color="muted">
															{article.data.description}
														</Text>
													</div>
												</div>
												<Icon
													name="mdi:arrow-right"
													class="w-5 h-5 text-gray-400 group-hover:text-mana-blue transition-colors"
												/>
											</div>
										</Card>
									</a>
								))}
							</div>
						</div>
					)
				}

				<!-- CTA -->
				<Card
					variant="elevated"
					padding="xlarge"
					class="mt-12 bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20"
				>
					<div class="text-center">
						<Heading as="h3" size="4" class="mb-4">
							Bereit, Teil unserer Mission zu werden?
						</Heading>
						<Text color="muted" class="mb-6 max-w-xl mx-auto">
							Starten Sie noch heute mit Mana und erleben Sie die Zukunft der KI-Nutzung.
						</Text>
						<Button
							href="/start"
							variant="primary"
							size="large"
							class="bg-mana-orange hover:bg-orange-600"
						>
							Kostenlos testen
						</Button>
					</div>
				</Card>
			</div>
		</Container>
	</Section>

	<Footer />
</Layout>

<style>
	.prose h2 {
		@apply text-2xl font-bold mt-8 mb-4;
	}

	.prose h3 {
		@apply text-xl font-semibold mt-6 mb-3;
	}

	.prose p {
		@apply mb-4 leading-relaxed;
	}

	.prose ul {
		@apply space-y-2 mb-4;
	}

	.prose li {
		@apply ml-6 list-disc;
	}

	.prose strong {
		@apply font-semibold text-gray-900 dark:text-gray-100;
	}

	.prose blockquote {
		@apply border-l-4 border-mana-blue pl-4 italic my-6;
	}
</style>
