---
const footerLinks = {
	product: [
		{ href: '#features', label: 'Features' },
		{ href: '/pricing', label: 'Preise' },
		{ href: '#faq', label: 'FAQ' },
	],
	legal: [
		{ href: '/privacy', label: 'Datenschutz' },
		{ href: '/terms', label: 'AGB' },
		{ href: '/cookies', label: 'Cookies' },
		{ href: '/imprint', label: 'Impressum' },
	],
};

const currentYear = new Date().getFullYear();
---

<footer class="bg-background-card border-t border-border">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
		<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
			<!-- Brand -->
			<div class="col-span-1 md:col-span-2">
				<a href="/" class="flex items-center gap-2 mb-4">
					<svg
						class="w-8 h-8 text-primary"
						viewBox="0 0 24 24"
						fill="none"
						stroke="currentColor"
						stroke-width="1.5"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z"
						></path>
					</svg>
					<span class="font-bold text-xl text-text-primary">ManaChat</span>
				</a>
				<p class="text-text-secondary text-sm max-w-md">
					Dein intelligenter KI-Chat-Assistent. Chatte mit GPT-4o, GPT-4o-Mini und mehr - alles in
					einer einfachen, eleganten Oberfläche.
				</p>
			</div>

			<!-- Product Links -->
			<div>
				<h3 class="font-semibold text-text-primary mb-4">Produkt</h3>
				<ul class="space-y-2">
					{
						footerLinks.product.map((link) => (
							<li>
								<a
									href={link.href}
									class="text-text-secondary hover:text-text-primary transition-colors text-sm"
								>
									{link.label}
								</a>
							</li>
						))
					}
				</ul>
			</div>

			<!-- Legal Links -->
			<div>
				<h3 class="font-semibold text-text-primary mb-4">Rechtliches</h3>
				<ul class="space-y-2">
					{
						footerLinks.legal.map((link) => (
							<li>
								<a
									href={link.href}
									class="text-text-secondary hover:text-text-primary transition-colors text-sm"
								>
									{link.label}
								</a>
							</li>
						))
					}
				</ul>
			</div>
		</div>

		<!-- Bottom -->
		<div
			class="mt-12 pt-8 border-t border-border flex flex-col sm:flex-row justify-between items-center gap-4"
		>
			<p class="text-text-muted text-sm">
				&copy; {currentYear} ManaChat. Alle Rechte vorbehalten.
			</p>
			<p class="text-text-muted text-sm">Made with 💙 in Germany</p>
		</div>
	</div>
</footer>
