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

const pageTitle = `Contact | ${SITE_TITLE}`;
---

<BaseLayout title={pageTitle} description="Get in touch">
	<div class="container mx-auto px-6 py-20 max-w-2xl">
		<h1 class="text-6xl font-bold mb-6">Contact</h1>
		<p class="text-xl text-[var(--theme-text-muted)] mb-12">Get in touch</p>

		<form class="space-y-6">
			<div>
				<label for="name" class="block text-sm font-mono text-[var(--theme-text-muted)] mb-2">Name</label>
				<input
					type="text"
					id="name"
					name="name"
					class="w-full bg-transparent border border-[var(--theme-border-strong)] px-4 py-3 text-[var(--theme-text-primary)] focus:outline-none focus:border-brand-accent transition-colors"
					required
				/>
			</div>

			<div>
				<label for="email" class="block text-sm font-mono text-[var(--theme-text-muted)] mb-2">Email</label>
				<input
					type="email"
					id="email"
					name="email"
					class="w-full bg-transparent border border-[var(--theme-border-strong)] px-4 py-3 text-[var(--theme-text-primary)] focus:outline-none focus:border-brand-accent transition-colors"
					required
				/>
			</div>

			<div>
				<label for="message" class="block text-sm font-mono text-[var(--theme-text-muted)] mb-2">Message</label>
				<textarea
					id="message"
					name="message"
					rows="6"
					class="w-full bg-transparent border border-[var(--theme-border-strong)] px-4 py-3 text-[var(--theme-text-primary)] focus:outline-none focus:border-brand-accent transition-colors resize-none"
					required
				></textarea>
			</div>

			<button
				type="submit"
				class="border border-brand-accent px-6 py-3 text-sm font-bold uppercase tracking-wider text-brand-accent hover:bg-brand-accent hover:text-brand-dark transition-all"
			>
				Send Message
			</button>
		</form>

		<div class="mt-12 pt-12 border-t border-[var(--theme-border-primary)]">
			<p class="text-sm text-[var(--theme-text-muted)]">
				Or email directly: <a href="mailto:example@email.com" class="text-brand-accent hover:underline">example@email.com</a>
			</p>
		</div>
	</div>
</BaseLayout>
