feat: wire slot reservation into all booking flows

Customer flow: reservation fires on Date/Time → Details transition with
re-validation on time slot tap and on 'Next' click to prevent simultaneous
bookings. 5-step flow: Service → Date/Time → Reserve → Details (countdown)
→ Payment & Review → Confirm. Guest users redirected to home on success.

Admin call-in: reserve slot before final submission (60min TTL).
Admin walk-in: reserve slot on modal open (5min TTL).

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

frontend/src/lib/components/admin/WalkInBooking.svelte

@@ -5,6 +5,7 @@
 	import { CalendarDate } from '@internationalized/date';
 	import { SvelteDate } from 'svelte/reactivity';
 	import { onMount } from 'svelte';
+	import { toast } from 'svelte-sonner';
 
 	import type { AvailableHoursDay } from '$lib/types/booking';
 
@@ -14,12 +15,18 @@
 		waitMinutes?: number;
 		durationMinutes: number;
 		startTime?: string;
-		slotEndMinutes?: number; // Store for live countdown
+		slotEndMinutes?: number;
 	} | null>(null);
 	let loading = $state(true);
 	let noSlotsToday = $state(false);
 	let currentTime = $state(new Date());
 
+	// Reservation state for walk-in
+	let reservationId = $state<string | null>(null);
+	let reservationExpiresAt = $state<Date | null>(null);
+	let reservationCountdown = $state<string>('');
+	let isReserving = $state(false);
+
 	onMount(() => {
 		calculateSlotAvailability();
 
@@ -153,6 +160,119 @@
 		const displayHours = hours % 12 || 12;
 		return `${displayHours}:${minutes.toString().padStart(2, '0')} ${period}`;
 	}
+
+	async function reserveWalkInSlot(startTime: string): Promise<boolean> {
+		isReserving = true;
+
+		try {
+			const now = new SvelteDate();
+			const [hours, minutes] = startTime.split(':').map(Number);
+			const start = new SvelteDate(
+				now.getFullYear(),
+				now.getMonth(),
+				now.getDate(),
+				hours,
+				minutes,
+				0,
+				0
+			);
+			const startTimeISO = start.toISOString();
+
+			const response = await fetch('/api/admin/bookings/reserve', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					Authorization: `Bearer ${authStore.currentToken}`
+				},
+				body: JSON.stringify({
+					user_id: null,
+					start_time: startTimeISO,
+					service_ids: [],
+					service_overrides: [],
+					ttl_minutes: 5
+				})
+			});
+
+			if (response.ok) {
+				const data = await response.json();
+				reservationId = data.id;
+				reservationExpiresAt = new Date(data.expires_at);
+				startWalkInCountdown();
+				return true;
+			} else if (response.status === 409) {
+				toast.error('Slot no longer available, please try again');
+				calculateSlotAvailability();
+				return false;
+			} else {
+				const errorText = await response.text();
+				toast.error(`Failed to reserve slot: ${errorText}`);
+				return false;
+			}
+		} catch (err) {
+			console.error('Reservation error:', err);
+			toast.error('Failed to reserve slot');
+			return false;
+		} finally {
+			isReserving = false;
+		}
+	}
+
+	function startWalkInCountdown() {
+		if ((window as any).__walkInCountdownInterval) {
+			clearInterval((window as any).__walkInCountdownInterval);
+		}
+
+		const updateCountdown = () => {
+			if (!reservationExpiresAt) {
+				reservationCountdown = '';
+				return;
+			}
+
+			const now = new Date();
+			const diff = reservationExpiresAt.getTime() - now.getTime();
+
+			if (diff <= 0) {
+				reservationCountdown = 'Expired';
+				reservationId = null;
+				reservationExpiresAt = null;
+				toast.error('Slot released — please re-check availability');
+				if ((window as any).__walkInCountdownInterval) {
+					clearInterval((window as any).__walkInCountdownInterval);
+				}
+				showCreateModal = false;
+				return;
+			}
+
+			const minutes = Math.floor(diff / 60000);
+			const seconds = Math.floor((diff % 60000) / 1000);
+			reservationCountdown = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+		};
+
+		updateCountdown();
+		(window as any).__walkInCountdownInterval = setInterval(updateCountdown, 1000);
+	}
+
+	function handleStartWalkIn() {
+		if (slotInfo?.isAvailableNow) {
+			showCreateModal = true;
+		} else if (slotInfo?.startTime) {
+			reserveWalkInSlot(slotInfo.startTime).then((reserved) => {
+				if (reserved) {
+					showCreateModal = true;
+				}
+			});
+		}
+	}
+
+	function handleModalClose() {
+		showCreateModal = false;
+		reservationId = null;
+		reservationExpiresAt = null;
+		reservationCountdown = '';
+		if ((window as any).__walkInCountdownInterval) {
+			clearInterval((window as any).__walkInCountdownInterval);
+		}
+	}
 </script>
 
 <div class="rounded-lg border border-gray-200 bg-white p-4">
@@ -194,10 +314,10 @@
 
 	<div class="flex items-center gap-3">
 		<Button
-			onclick={() => (showCreateModal = true)}
-			disabled={noSlotsToday || (slotInfo?.isAvailableNow && (getLiveRemainingMinutes() ?? 0) <= 0)}
+			onclick={handleStartWalkIn}
+			disabled={noSlotsToday || isReserving || (slotInfo?.isAvailableNow && (getLiveRemainingMinutes() ?? 0) <= 0)}
 		>
-			Start Walk-In Session
+			{isReserving ? 'Reserving...' : 'Start Walk-In Session'}
 		</Button>
 	</div>
 </div>
@@ -207,5 +327,7 @@
 		bind:open={showCreateModal}
 		maxSlotDuration={slotInfo?.durationMinutes ?? 0}
 		availableStartTime={slotInfo?.isAvailableNow ? undefined : slotInfo?.startTime}
+		reservationExpiresAt={reservationExpiresAt}
+		onclose={handleModalClose}
 	/>
 {/if}