---
import Container from '../layout/Container.astro';

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

const footerLinks = [
	{ label: 'Apps', href: '/apps' },
	{ label: 'Preise', href: '/pricing' },
	{ label: 'Mission', href: '/mission' },
	{ label: 'Datenschutz', href: '/privacy' },
	{ label: 'Impressum', href: '/impressum' },
];
---

<footer class="footer">
	<div class="footer-overlay"></div>

	<Container class="relative z-10">
		<div class="footer-content">
			<!-- Links -->
			<nav class="footer-nav">
				{
					footerLinks.map((link) => (
						<a href={link.href} class="footer-link">
							{link.label}
						</a>
					))
				}
			</nav>

			<!-- Copyright -->
			<div class="footer-copyright">
				© {currentYear} Manacore Verein
			</div>
		</div>
	</Container>
</footer>

<style>
	.footer {
		position: relative;
		overflow: hidden;
		background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
		border-top: 1px solid rgba(248, 250, 252, 0.05);
	}

	.footer-overlay {
		position: absolute;
		inset: 0;
		background:
			radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
			radial-gradient(circle at 80% 50%, rgba(37, 99, 235, 0.04) 0%, transparent 50%);
		pointer-events: none;
	}

	.footer-content {
		padding: 2rem 0 1.5rem;
	}

	.footer-nav {
		margin-bottom: 1.5rem;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 2rem;
		justify-content: center;
	}

	.footer-link {
		font-size: 0.8125rem;
		color: #94a3b8;
		text-decoration: none;
		transition: color 0.3s ease;
		white-space: nowrap;
	}

	.footer-link:hover {
		color: #3b82f6;
	}

	.footer-copyright {
		text-align: center;
		font-size: 0.75rem;
		color: #475569;
		padding-top: 1.5rem;
		border-top: 1px solid rgba(248, 250, 252, 0.05);
	}

	/* Mobile */
	@media (max-width: 640px) {
		.footer-content {
			padding: 1.5rem 0 1rem;
		}

		.footer-nav {
			gap: 0.375rem 1.25rem;
			margin-bottom: 1rem;
		}

		.footer-link {
			font-size: 0.75rem;
		}

		.footer-copyright {
			padding-top: 1rem;
			font-size: 0.6875rem;
		}
	}
</style>
