---
import { CONTACT_EMAIL, CONTACT_PHONE, SOCIAL_LINKS } from '../consts';
---

<!-- Footer / Contact -->
<footer class="container mx-auto px-6 lg:px-12 py-32 relative overflow-hidden border-t border-slate-800 mt-24">
	<div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
		<div>
			<h2 class="text-6xl md:text-8xl font-bold uppercase leading-none tracking-tighter mb-8 text-white group cursor-pointer">
				Let's<br>
				<span class="text-stroke group-hover:text-brand-accent transition-colors duration-300">Build</span><br>
				Reality.
			</h2>
			<div class="flex flex-wrap gap-6 mt-12">
				<a href={`mailto:${CONTACT_EMAIL}`} class="btn-primary">{CONTACT_EMAIL}</a>
				<a href={`tel:${CONTACT_PHONE.replace(/\s/g, '')}`} class="btn-ghost">{CONTACT_PHONE}</a>
			</div>
		</div>

		<div class="md:text-right">
			<div class="mb-12">
				<p class="text-xs font-bold uppercase text-slate-500 mb-4 tracking-widest">Social Uplink</p>
				<ul class="space-y-2">
					<li>
						<a href={SOCIAL_LINKS.website} class="text-white hover:text-brand-accent text-lg font-mono transition-colors">
							{SOCIAL_LINKS.website.replace('https://', '')}
						</a>
					</li>
					<li>
						<a href={`https://instagram.com/${SOCIAL_LINKS.instagram.replace('@', '')}`} class="text-white hover:text-brand-accent text-lg font-mono transition-colors">
							{SOCIAL_LINKS.instagram}
						</a>
					</li>
					<li>
						<a href={SOCIAL_LINKS.linkedin} class="text-white hover:text-brand-accent text-lg font-mono transition-colors">
							LinkedIn
						</a>
					</li>
				</ul>
			</div>
			<div class="flex justify-end items-end gap-2 text-[10px] text-slate-600 font-mono uppercase">
				<span>© 2025 Nicholai Vogel</span>
				<span>/</span>
				<span>V7 SYSTEM</span>
			</div>
		</div>
	</div>

	<!-- Decorative huge text bg -->
	<div class="absolute -bottom-10 left-0 w-full text-center pointer-events-none opacity-5">
		<span class="text-[15rem] font-bold text-white uppercase leading-none whitespace-nowrap">VOGEL</span>
	</div>
</footer>