Book Your Appointment

Professional beauty treatments in a calm and friendly environment

{#if currentStep === 1} Choose Your Services Select one or more treatments for your appointment {#if selectedServices.length > 0}

Selected Services

{#each selectedServices as service (service.id)}

{service.name} {service.duration_minutes} mins • £{service.price}

{/each}

Estimated Duration: {formattedTotalDuration}

Total Cost: £{getTotalPrice()}

{/if} {/if} {#if currentStep === 2} Choose Date & Time {selectedServices.map((s) => s.name).join(', ')} • {formattedTotalDuration} total • £{getTotalPrice()} {#if loadingWorkingHours}

Loading available dates...

{:else} { selectedDate = newDate; selectedTime = null; }} onPlaceholderChange={(newPlaceholder) => { placeholder = newPlaceholder; }} /> {/if} {#if loadingAvailableHours}

Loading times...

{:else} { selectedTime = time; }} lunchProtectionStatus={lunchProtectionStatus()} /> {/if}

{#if selectedDate && selectedTime} Appointment for {selectedDate.toDate(getLocalTimeZone()).toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' })}
at {selectedTime} {:else} Select a date and time {/if}

{#if selectedDate && selectedTime} Appointment for {selectedDate.toDate(getLocalTimeZone()).toLocaleDateString('en-US', { weekday: 'long', day: 'numeric', month: 'short' })} at {selectedTime} {:else} Select a date and time {/if}

{/if} {#if currentStep === 3} Your Details Please confirm your contact information {#if !authStore.isAuthenticated}

You are checking out as a guest, so you will miss out on a loyalty stamp. Please login for full membership benefits.

First Name *

Last Name *

Email *

Phone Number *

{/if}

Special Requests (Optional)

</div>

<div class="text-sm text-gray-600">
					{#if !authStore.isAuthenticated}
						<p>* Required fields</p>
					{/if}
					<p class="mt-2">
						By booking, you agree to our Terms & Conditions and Privacy Policy. We'll send you
						appointment reminders via email and/or SMS.
					</p>
				</div>
			</Card.Content>
			<Card.Footer class="flex justify-between">
				<Button variant="outline" onclick={prevStep}>Back</Button>
				<Button
					disabled={!canProceedStep3}
					onclick={nextStep}
					class="bg-primary text-primary-foreground"
				>
					Next: Payment
				</Button>
			</Card.Footer>
		</Card.Root>
	{/if}

{#if currentStep === 4}
		<Card.Root>
			<Card.Header>
				<Card.Title>Payment Confirmation</Card.Title>
				<Card.Description>Review and complete your booking</Card.Description>
			</Card.Header>
			<Card.Content class="space-y-6">
				<BookingSummary
					services={selectedServices}
					date={selectedDate}
					time={selectedTime}
					customer={authStore.isAuthenticated
						? {
								firstName: authStore.currentUser?.firstName ?? '',
								lastName: authStore.currentUser?.lastName ?? '',
								email: authStore.currentUser?.email ?? '',
								phone: authStore.currentUser?.phone ?? '',
								specialRequests: customerInfo.specialRequests
							}
						: customerInfo}
					showCustomer={true}
				/>

<div class="rounded-lg bg-white p-6">
					<h2 class="mb-4 text-2xl font-semibold">Payment</h2>
					<p class="text-gray-600">Square payment integration will be added here.</p>
				</div>
			</Card.Content>
			<Card.Footer class="flex justify-between">
				<Button variant="outline" onclick={prevStep}>Back</Button>
				<Button
					disabled={!canProceedStep3 || isSubmitting}
					onclick={submitBooking}
					class="bg-primary text-primary-foreground"
				>
					{isSubmitting ? 'Processing...' : 'Complete Booking'}
				</Button>
			</Card.Footer>
		</Card.Root>
	{/if}
</div>