import { StudioNav } from "@/components/ui/studio-nav";

export default function ContactPage() {
	return (
		<main className="bg-parchment/80 text-coffee">
			<div className="mx-auto flex max-w-4xl flex-col gap-12 px-6 py-12 sm:px-10 lg:px-0">
				<header className="rounded-[36px] border border-brass/50 bg-stucco/85 px-6 py-8 shadow-[0_25px_80px_rgba(148,74,39,0.2)] sm:px-10">
					<StudioNav className="border-b border-brass/40 pb-6" />
					<div className="pt-8">
						<p className="text-sm uppercase tracking-[0.3em] text-brass">Contact</p>
						<h1 className="mt-2 font-display text-4xl text-coffee">Book, collaborate, or drop a love note.</h1>
						<p className="mt-4 text-coffee/90">
							Form styling mirrors the UI inspiration board—cream inputs, coffee borders, and terracotta submit button.
						</p>
					</div>
				</header>
				<section className="grid gap-8 rounded-[34px] border border-brass/40 bg-stucco/70 p-6 shadow-[0_30px_90px_rgba(26,26,26,0.1)] lg:grid-cols-2">
					<form className="space-y-4">
						<label className="block text-sm">
							<span className="text-xs uppercase tracking-[0.3em] text-brass">Name</span>
							<input className="mt-1 w-full rounded-2xl border border-coffee/40 bg-parchment px-4 py-3 font-ui" placeholder="Amari" />
						</label>
						<label className="block text-sm">
							<span className="text-xs uppercase tracking-[0.3em] text-brass">Email</span>
							<input className="mt-1 w-full rounded-2xl border border-coffee/40 bg-parchment px-4 py-3 font-ui" placeholder="hola@grimmtattoo.com" />
						</label>
						<label className="block text-sm">
							<span className="text-xs uppercase tracking-[0.3em] text-brass">Message</span>
							<textarea className="mt-1 h-32 w-full rounded-2xl border border-coffee/40 bg-parchment px-4 py-3 font-ui" placeholder="Tell me about the flash, music, or recipe you loved." />
						</label>
						<button type="button" className="w-full rounded-full bg-terracotta px-6 py-3 font-ui text-sm uppercase tracking-[0.3em] text-stucco shadow-[0_12px_35px_rgba(196,106,74,0.35)]">
							Send Message
						</button>
						<p className="text-center text-xs uppercase tracking-[0.3em] text-coffee/70">Form posts to Cloudflare Worker (todo)</p>
					</form>
					<div className="space-y-6">
						<div className="rounded-[24px] border border-brass/50 bg-parchment p-5">
							<p className="font-display text-2xl text-coffee">Studio Hours</p>
							<ul className="mt-3 text-sm text-coffee/80">
								<li>Wed–Fri: 11a – 7p</li>
								<li>Sat: 10a – 4p</li>
								<li>Sun–Tue: design + admin</li>
							</ul>
						</div>
						<div className="rounded-[24px] border border-brass/50 bg-terracotta/85 p-5 text-parchment">
							<p className="font-display text-2xl">Casa Azul</p>
							<p className="mt-2 text-sm">
								Hidden page for the secret love letter. Password field + fade-in animation launching soon.
							</p>
						</div>
					</div>
				</section>
			</div>
		</main>
	);
}
