---
// Footer component

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

const links = {
	product: [
		{ name: 'Funktionen', href: '#features' },
		{ name: 'Preise', href: '#pricing' },
		{ name: 'Changelog', href: '/changelog' },
		{ name: 'Roadmap', href: '/roadmap' },
	],
	legal: [
		{ name: 'Impressum', href: '/impressum' },
		{ name: 'Datenschutz', href: '/datenschutz' },
		{ name: 'AGB', href: '/agb' },
	],
	support: [
		{ name: 'FAQ', href: '/faq' },
		{ name: 'Kontakt', href: '/kontakt' },
		{ name: 'Status', href: '/status' },
	],
};
---

<footer class="border-t border-dark-border bg-dark-bg py-12">
	<div class="container">
		<div class="grid gap-8 md:grid-cols-4">
			<!-- Brand -->
			<div class="md:col-span-1">
				<div class="mb-4 flex items-center gap-2">
					<svg
						class="h-8 w-8 text-primary-500"
						fill="none"
						stroke="currentColor"
						viewBox="0 0 24 24"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
					</svg>
					<span class="text-xl font-bold">Clock</span>
				</div>
				<p class="text-sm text-gray-500">Time Tracking & Focus fur bessere Produktivitat.</p>
			</div>

			<!-- Links -->
			<div>
				<h4 class="mb-4 font-semibold">Produkt</h4>
				<ul class="space-y-2 text-sm text-gray-400">
					{
						links.product.map((link) => (
							<li>
								<a href={link.href} class="transition-colors hover:text-white">
									{link.name}
								</a>
							</li>
						))
					}
				</ul>
			</div>

			<div>
				<h4 class="mb-4 font-semibold">Rechtliches</h4>
				<ul class="space-y-2 text-sm text-gray-400">
					{
						links.legal.map((link) => (
							<li>
								<a href={link.href} class="transition-colors hover:text-white">
									{link.name}
								</a>
							</li>
						))
					}
				</ul>
			</div>

			<div>
				<h4 class="mb-4 font-semibold">Support</h4>
				<ul class="space-y-2 text-sm text-gray-400">
					{
						links.support.map((link) => (
							<li>
								<a href={link.href} class="transition-colors hover:text-white">
									{link.name}
								</a>
							</li>
						))
					}
				</ul>
			</div>
		</div>

		<!-- Bottom bar -->
		<div
			class="mt-12 flex flex-col items-center justify-between gap-4 border-t border-dark-border pt-8 md:flex-row"
		>
			<p class="text-sm text-gray-500">
				&copy; {currentYear} Clock. Alle Rechte vorbehalten.
			</p>
			<p class="text-sm text-gray-500">
				Ein <a href="https://mana.how" class="text-primary-400 hover:underline">Manacore</a> Produkt
			</p>
		</div>
	</div>
</footer>
