---
import Layout from '../../layouts/Layout.astro';
import Navbar from '../../components/navigation/Navbar.astro';
import Footer from '../../components/navigation/Footer.astro';
import HeroSection from '../../components/content/HeroSection.astro';
import Section from '../../components/content/Section.astro';
import Container from '../../components/layout/Container.astro';
import Grid from '../../components/layout/Grid.astro';
import Card from '../../components/ui/Card.astro';
import Heading from '../../components/typography/Heading.astro';
import Text from '../../components/typography/Text.astro';
import Button from '../../components/ui/Button.astro';
import { getCollection } from 'astro:content';
import { Icon } from 'astro-icon/components';

const contextPages = await getCollection('context');
const sortedPages = contextPages.sort((a, b) => a.data.order - b.data.order);
---

<Layout title="Kontext - Alles über Mana">
	<Navbar />

	<HeroSection
		title="Verstehen Sie Mana"
		subtitle="Detaillierte Informationen und Antworten auf alle Ihre Fragen"
		background="gradient"
		minHeight="small"
		titleSize="2"
		containerClass="pt-16 pb-8"
	/>

	<Section spacing="xlarge">
		<Container>
			<div class="max-w-4xl mx-auto">
				<Grid cols={1} gap="large">
					{
						sortedPages.map((page) => (
							<Card
								variant="bordered"
								padding="large"
								class="hover:border-mana-blue transition-colors"
							>
								<a href={`/context/${page.slug}`} class="block">
									<div class="flex items-start gap-4">
										{page.data.icon && (
											<div class="flex-shrink-0">
												<div class="w-12 h-12 bg-mana-blue/10 rounded-lg flex items-center justify-center">
													<Icon name={page.data.icon} class="w-6 h-6 text-mana-blue" />
												</div>
											</div>
										)}
										<div class="flex-1">
											<Heading
												as="h2"
												size="4"
												class="mb-2 group-hover:text-mana-blue transition-colors"
											>
												{page.data.title}
											</Heading>
											<Text color="muted" class="mb-4">
												{page.data.description}
											</Text>
											<div class="flex items-center justify-between">
												<div class="flex items-center gap-4 text-sm text-gray-500">
													{page.data.publishedAt && (
														<span>
															Veröffentlicht:{' '}
															{new Date(page.data.publishedAt).toLocaleDateString('de-DE')}
														</span>
													)}
													{page.data.updatedAt && (
														<span>
															Aktualisiert:{' '}
															{new Date(page.data.updatedAt).toLocaleDateString('de-DE')}
														</span>
													)}
												</div>
												<Button variant="ghost" size="small">
													Weiterlesen
													<Icon name="mdi:arrow-right" class="w-4 h-4 ml-1" />
												</Button>
											</div>
										</div>
									</div>
								</a>
							</Card>
						))
					}
				</Grid>

				<div class="mt-12 text-center">
					<Card
						variant="elevated"
						padding="large"
						class="bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20"
					>
						<Icon name="mdi:help-circle" class="w-12 h-12 text-mana-blue mx-auto mb-4" />
						<Heading as="h3" size="4" class="mb-2">Noch Fragen?</Heading>
						<Text color="muted" class="mb-6"> Unser Support-Team hilft Ihnen gerne weiter </Text>
						<Button href="/kontakt" variant="primary"> Kontakt aufnehmen </Button>
					</Card>
				</div>
			</div>
		</Container>
	</Section>

	<Footer />
</Layout>
