<script lang="ts">
	const currentYear = new Date().getFullYear();

	const footerLinks = {
		services: [
			{ label: 'Our Services', href: '/services' },
			{ label: 'Our Standard', href: '/standard' },
			{ label: 'Pricing', href: '/pricing' }
		],
		company: [
			{ label: 'About', href: '/about' },
			{ label: 'Contact', href: '/contact' },
			{ label: 'Terms of Use', href: '/terms' },
			{ label: 'Privacy Policy', href: '/privacy' }
		]
	};
</script>

<footer class="border-t border-theme bg-theme-card">
	<div class="mx-auto w-full max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
		<div class="grid grid-cols-1 gap-8 sm:grid-cols-3">
			<!-- Brand -->
			<div>
				<a href="/" class="text-xl font-bold text-theme">Nexus Cleaning</a>
				<p class="mt-2 text-sm text-theme-muted">
					Dependable commercial cleaning services for businesses that demand excellence.
				</p>
			</div>

			<!-- Services -->
			<div>
				<h3 class="text-sm font-semibold tracking-wider text-theme uppercase">Services</h3>
				<ul class="mt-4 space-y-2">
					{#each footerLinks.services as link (link.href)}
						<li>
							<a
								href={link.href}
								class="text-sm text-theme-secondary transition-colors hover:text-theme"
							>
								{link.label}
							</a>
						</li>
					{/each}
				</ul>
			</div>

			<!-- Company -->
			<div>
				<h3 class="text-sm font-semibold tracking-wider text-theme uppercase">Company</h3>
				<ul class="mt-4 space-y-2">
					{#each footerLinks.company as link (link.href)}
						<li>
							<a
								href={link.href}
								class="text-sm text-theme-secondary transition-colors hover:text-theme"
							>
								{link.label}
							</a>
						</li>
					{/each}
				</ul>
			</div>
		</div>

		<!-- Bottom bar -->
		<div class="mt-12 border-t border-theme pt-8 text-center">
			<p class="text-sm text-theme-muted">
				&copy; {currentYear} Corellon Digital. All rights reserved.
			</p>
		</div>
	</div>
</footer>
