---
import BaseLayout from '../layouts/BaseLayout.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
---

<BaseLayout title={`Contact | ${SITE_TITLE}`} description="Get in touch for collaboration or inquiries.">
	<section class="container mx-auto px-6 lg:px-12">
		<div class="mb-16">
			<h1 class="text-6xl md:text-8xl font-bold uppercase text-white mb-4 tracking-tighter">
				Let's <span class="text-transparent bg-clip-text bg-gradient-to-tr from-brand-accent to-white">Talk</span>
			</h1>
			<p class="text-slate-400 font-mono">/// GET IN TOUCH</p>
		</div>

		<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-24">
			<!-- Contact Form -->
			<div class="lg:col-span-8">
				<form class="space-y-6" action="#" method="POST">
					<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
						<div class="space-y-2">
							<label for="name" class="text-xs font-bold uppercase tracking-widest text-slate-500">Name</label>
							<input
								type="text"
								id="name"
								name="name"
								placeholder="Your Name"
								class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600"
								required
							/>
						</div>
						<div class="space-y-2">
							<label for="email" class="text-xs font-bold uppercase tracking-widest text-slate-500">Email</label>
							<input
								type="email"
								id="email"
								name="email"
								placeholder="name@example.com"
								class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600"
								required
							/>
						</div>
					</div>

					<div class="space-y-2">
						<label for="subject" class="text-xs font-bold uppercase tracking-widest text-slate-500">Subject</label>
						<select
							id="subject"
							name="subject"
							class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors appearance-none"
						>
							<option value="general" class="bg-brand-dark">General Inquiry</option>
							<option value="project" class="bg-brand-dark">Project Collaboration</option>
							<option value="freelance" class="bg-brand-dark">Freelance Availability</option>
							<option value="other" class="bg-brand-dark">Other</option>
						</select>
					</div>

					<div class="space-y-2">
						<label for="message" class="text-xs font-bold uppercase tracking-widest text-slate-500">Message</label>
						<textarea
							id="message"
							name="message"
							rows="6"
							placeholder="Tell me about your project..."
							class="w-full bg-white/5 border border-slate-700 text-white px-4 py-4 focus:border-brand-accent focus:outline-none transition-colors placeholder:text-slate-600 resize-none"
							required
						></textarea>
					</div>

					<div class="pt-4">
						<button type="submit" class="btn-primary group relative overflow-hidden">
							<span class="relative z-10">Send Message</span>
							<div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-20 transition-opacity"></div>
						</button>
					</div>
				</form>
			</div>

			<!-- Sidebar Info -->
			<div class="lg:col-span-4 space-y-12">
				<div>
					<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Contact Info</h3>
					<ul class="space-y-4">
						<li>
							<a href="mailto:nicholai@nicholai.work" class="text-xl text-white hover:text-brand-accent transition-colors font-mono block">
								nicholai@nicholai.work
							</a>
						</li>
						<li>
							<a href="tel:7196604281" class="text-xl text-white hover:text-brand-accent transition-colors font-mono block">
								719 660 4281
							</a>
						</li>
					</ul>
				</div>

				<div>
					<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Location</h3>
					<p class="text-lg text-slate-300">
						Colorado Springs, CO<br/>
						Mountain Standard Time (MST)
					</p>
				</div>

				<div class="pt-8 border-t border-white/10">
					<h3 class="text-xs font-bold uppercase tracking-widest text-slate-500 mb-6">Availability</h3>
					<div class="flex items-center gap-3">
						<span class="relative flex h-3 w-3">
						  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-brand-accent opacity-75"></span>
						  <span class="relative inline-flex rounded-full h-3 w-3 bg-brand-accent"></span>
						</span>
						<span class="text-sm font-bold text-brand-accent uppercase tracking-wide">Open to opportunities</span>
					</div>
					<p class="mt-4 text-slate-400 text-sm leading-relaxed">
						Currently accepting new projects for Q3 2026. Reach out to schedule a discovery call.
					</p>
				</div>
			</div>
		</div>
	</section>
</BaseLayout>