---
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: '/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">
					<span class="text-2xl">🥗</span>
					<span class="font-bold text-xl text-text-primary">Nutriphi</span>
				</a>
				<p class="text-text-secondary text-sm max-w-md">
					Dein KI-gestützter Ernährungs-Tracker. Fotografiere deine Mahlzeiten und erhalte sofort
					detaillierte Nährwertinformationen.
				</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} Nutriphi. Teil des Mana Core Ökosystems.
			</p>
			<p class="text-text-muted text-sm">Made with 💚 in Germany</p>
		</div>
	</div>
</footer>