---
import { localizePath } from '../i18n';
import { t } from '../i18n';

interface Props {
	title: string;
}

const { title } = Astro.props;
---

<div class="min-h-screen bg-dark-bg py-24">
	<div class="container mx-auto max-w-4xl px-4">
		<!-- Back Button -->
		<a
			href={localizePath('/')}
			class="mb-8 inline-flex items-center gap-2 text-primary transition-colors hover:text-primary-400"
		>
			<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"
				></path>
			</svg>
			<span>{t('legal.back_home')}</span>
		</a>

		<!-- Page Header -->
		<div class="mb-12">
			<h1 class="mb-4 text-4xl font-bold text-white md:text-5xl">{title}</h1>
			<p class="text-gray-400">{t('legal.last_updated')}: {new Date().toLocaleDateString()}</p>
		</div>

		<!-- Content -->
		<div class="prose-primary prose prose-invert max-w-none">
			<div class="rounded-2xl border border-dark-border bg-dark-surface p-8 md:p-12">
				<slot />
			</div>
		</div>
	</div>
</div>

<style>
	:global(.prose) {
		color: #e5e7eb;
	}

	:global(.prose h2) {
		@apply mb-4 mt-8 text-2xl font-bold text-white;
	}

	:global(.prose h3) {
		@apply mb-3 mt-6 text-xl font-semibold text-white;
	}

	:global(.prose p) {
		@apply mb-4 leading-relaxed text-gray-300;
	}

	:global(.prose ul) {
		@apply mb-4 list-disc space-y-2 pl-6;
	}

	:global(.prose ol) {
		@apply mb-4 list-decimal space-y-2 pl-6;
	}

	:global(.prose li) {
		@apply text-gray-300;
	}

	:global(.prose a) {
		@apply text-primary transition-colors hover:text-primary-400;
	}

	:global(.prose strong) {
		@apply font-semibold text-white;
	}
</style>
