<script lang="ts">
	import ContentContainer from '$lib/components/layout/ContentContainer.svelte';
	import PublicBackLink from '$lib/components/PublicBackLink.svelte';
	import { enhance } from '$app/forms';
	import type { SubmitFunction } from '@sveltejs/kit';

	let submitting = $state(false);
	let submitStatus = $state<'idle' | 'success' | 'error'>('idle');
	let errorMessage = $state('');

	const handleSubmit: SubmitFunction = () => {
		submitting = true;
		submitStatus = 'idle';
		return async ({ result, update }) => {
			submitting = false;
			if (result.type === 'success') {
				submitStatus = 'success';
				await update({ reset: true });
			} else if (result.type === 'failure') {
				submitStatus = 'error';
				const data = result.data as { error?: string } | undefined;
				errorMessage = data?.error || 'Failed to send message.';
			}
		};
	};
</script>

<svelte:head>
	<title>Contact Us - Nexus</title>
	<meta
		name="description"
		content="Get in touch with Acme Services. We'd love to hear from you."
	/>
</svelte:head>

<!-- Hero Section -->
<section class="py-20 md:py-28">
	<ContentContainer>
		<PublicBackLink class="mb-6" />
		<div class="max-w-3xl">
			<h1 class="text-4xl font-bold tracking-tight text-theme md:text-5xl">Get in Touch</h1>
			<p class="mt-6 text-xl text-theme-secondary">
				Have a question, feedback, or just want to say hello? We'd love to hear from you. Fill out
				the form below and we'll get back to you as soon as possible.
			</p>
		</div>
	</ContentContainer>
</section>

<!-- Contact Form Section -->
<section class="pb-20">
	<ContentContainer>
		<div class="grid gap-12 lg:grid-cols-3">
			<!-- Contact Info -->
			<div class="space-y-8 lg:col-span-1">
				<div>
					<h3 class="mb-2 text-lg font-semibold text-theme">Phone</h3>
					<a href="tel:+15864058925" class="text-primary-600 hover:underline dark:text-primary-400">
						(586) 405-8925
					</a>
				</div>

				<div>
					<h3 class="mb-2 text-lg font-semibold text-theme">Email</h3>
					<a
						href="mailto:service@Nexusclean.net"
						class="text-primary-600 hover:underline dark:text-primary-400"
					>
						service@Nexusclean.net
					</a>
				</div>

				<div>
					<h3 class="mb-2 text-lg font-semibold text-theme">Hours</h3>
					<div class="space-y-3">
						<div>
							<p class="font-medium text-theme">Office Hours</p>
							<p class="text-sm text-theme-secondary">9:00 AM - 5:00 PM<br />By appointment only</p>
						</div>
						<div>
							<p class="font-medium text-theme">Overnight Dispatch</p>
							<p class="text-sm text-theme-secondary">
								6:00 PM - 2:00 AM<br />Emergency service available
							</p>
						</div>
					</div>
				</div>
			</div>

			<!-- Form -->
			<div class="lg:col-span-2">
				<form
					method="POST"
					use:enhance={handleSubmit}
					class="rounded-2xl border border-theme bg-theme-card p-6 md:p-8"
				>
					<div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
						<label class="block">
							<span class="mb-2 block text-sm font-medium text-theme">Name</span>
							<input
								type="text"
								name="name"
								required
								class="w-full rounded-lg border border-transparent bg-black/5 px-4 py-3 text-theme transition-all duration-150 outline-none placeholder:text-theme-muted focus:border-primary-500 focus:bg-theme-card dark:bg-white/10"
								placeholder="Your name"
							/>
						</label>

						<label class="block">
							<span class="mb-2 block text-sm font-medium text-theme">Email</span>
							<input
								type="email"
								name="email"
								required
								class="w-full rounded-lg border border-transparent bg-black/5 px-4 py-3 text-theme transition-all duration-150 outline-none placeholder:text-theme-muted focus:border-primary-500 focus:bg-theme-card dark:bg-white/10"
								placeholder="you@example.com"
							/>
						</label>
					</div>

					<label class="mt-6 block">
						<span class="mb-2 block text-sm font-medium text-theme">Subject</span>
						<input
							type="text"
							name="subject"
							required
							class="w-full rounded-lg border border-transparent bg-black/5 px-4 py-3 text-theme transition-all duration-150 outline-none placeholder:text-theme-muted focus:border-primary-500 focus:bg-theme-card dark:bg-white/10"
							placeholder="How can we help?"
						/>
					</label>

					<label class="mt-6 block">
						<span class="mb-2 block text-sm font-medium text-theme">Message</span>
						<textarea
							name="message"
							required
							rows="5"
							class="w-full resize-none rounded-lg border border-transparent bg-black/5 px-4 py-3 text-theme transition-all duration-150 outline-none placeholder:text-theme-muted focus:border-primary-500 focus:bg-theme-card dark:bg-white/10"
							placeholder="Your message..."
						></textarea>
					</label>

					<div class="mt-8 flex flex-col gap-4 sm:flex-row sm:items-center">
						<button
							type="submit"
							disabled={submitting}
							class="w-full rounded-lg bg-primary-600 px-8 py-3 font-medium text-white transition-colors hover:bg-primary-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto"
						>
							{submitting ? 'Sending...' : 'Send Message'}
						</button>

						{#if submitStatus === 'success'}
							<p class="text-sm font-medium text-success">Thank you! Your message has been sent.</p>
						{:else if submitStatus === 'error'}
							<p class="text-sm font-medium text-danger">
								{errorMessage}
							</p>
						{/if}
					</div>
				</form>
			</div>
		</div>
	</ContentContainer>
</section>
