---
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 { Icon } from 'astro-icon/components';

export async function getStaticPaths() {
	const legalEntries = await getCollection('legal');
	return legalEntries.map((entry) => ({
		params: { slug: entry.slug },
		props: { entry },
	}));
}

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

// Get other legal documents
const allLegalDocs = await getCollection('legal');
const otherDocs = allLegalDocs
	.filter((doc) => doc.slug !== entry.slug)
	.sort((a, b) => a.data.order - b.data.order);

// Format date
const lastUpdated = new Date(entry.data.lastUpdated).toLocaleDateString('de-DE', {
	year: 'numeric',
	month: 'long',
	day: 'numeric',
});
---

<Layout title={`${entry.data.title} | Mana`}>
	<Navbar />

	<Section spacing="large" class="pt-32">
		<Container>
			<div class="max-w-4xl mx-auto">
				<!-- Header -->
				<div class="mb-12">
					<Heading as="h1" size="1" class="mb-4">
						{entry.data.title}
					</Heading>

					<Text size="xl" color="muted" class="mb-6">
						{entry.data.description}
					</Text>

					<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-400">
						<span>Stand: {lastUpdated}</span>
					</div>
				</div>

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

				<!-- Navigation -->
				{
					otherDocs.length > 0 && (
						<Card variant="bordered" padding="large" class="mt-16">
							<Heading as="h3" size="5" class="mb-4">
								Weitere rechtliche Dokumente
							</Heading>

							<div class="space-y-3">
								{otherDocs.map((doc) => (
									<a
										href={`/legal/${doc.slug}`}
										class="flex items-center justify-between p-3 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors group"
									>
										<div>
											<Text weight="semibold" class="group-hover:text-mana-blue transition-colors">
												{doc.data.title}
											</Text>
											<Text size="sm" color="muted">
												{doc.data.description}
											</Text>
										</div>
										<Icon
											name="mdi:arrow-right"
											class="w-5 h-5 text-gray-400 group-hover:text-mana-blue transition-colors"
										/>
									</a>
								))}
							</div>
						</Card>
					)
				}

				<!-- Contact -->
				<Card
					variant="elevated"
					padding="large"
					class="mt-8 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="5" class="mb-3"> Haben Sie Fragen? </Heading>
						<Text color="muted" class="mb-6">
							Unser Rechtsabteilung steht Ihnen gerne zur Verfügung.
						</Text>
						<a
							href="mailto:legal@mana.ai"
							class="inline-flex items-center gap-2 text-mana-blue hover:underline"
						>
							<Icon name="mdi:email" class="w-5 h-5" />
							legal@mana.ai
						</a>
					</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;
	}
</style>
