Crussell/frontend/src/routes/+page.svelte

<script lang="ts">
	import { goto } from '$app/navigation';
	import { resolve } from '$app/paths';
	import { Button } from '$lib/components/ui/button';
	import PortfolioCarousel from '$lib/components/layout/PortfolioCarousel.svelte';
	import BusinessHours from '$lib/components/layout/BusinessHours.svelte';
	import { authStore } from '$lib/stores/auth.svelte';
	import { Skeleton } from '$lib/components/ui/skeleton';

	// Redirect admins to /today (their homepage)
	$effect(() => {
		if (!authStore.isLoading && authStore.currentUser?.role === 'admin') {
			// eslint-disable-next-line svelte/no-navigation-without-resolve
			goto('/today', { replaceState: true });
		}
	});

	const returningGreetings = [
		(name: string) => `Welcome back, ${name}!`,
		(name: string) => `Great to see you again, ${name}!`,
		(name: string) => `Good to have you back, ${name}!`,
		(name: string) => `Hey, you're back, ${name}!`,
		(name: string) => `Lovely to see you again, ${name}!`,
		(name: string) => `We missed you, ${name}!`,
		(name: string) => `${name}, it's so good to see you!`,
		(name: string) => `${name}, welcome back to Crussell Nails!`,
		(name: string) => `Always a pleasure, ${name}!`,
		(name: string) => `${name}, you're a sight for sore eyes!`,
		(name: string) => `So happy you're back, ${name}!`,
		(name: string) => `You're back! Great to see you, ${name}!`,
		(name: string) => `${name}, you've been missed!`,
		(name: string) => `Ready for some pampering, ${name}?`,
		(name: string) => `${name}, lovely to have you back with us!`,
		(name: string) => `Great to have you back, ${name}!`,
		(name: string) => `Back for more, ${name}?`,
		(name: string) => `Ah, ${name}! Right on time!`,
		(name: string) => `Welcome home, ${name}!`,
		(name: string) => `${name}, we've been looking forward to seeing you!`,
		(name: string) => `It's always a good day when ${name} walks in!`,
		(name: string) => `${name}, your favourite nail artist is waiting!`,
		(name: string) => `How wonderful to see you, ${name}!`,
		(name: string) => `${name}, you're as welcome as ever!`,
		(name: string) => `Another visit, ${name}? You spoil us!`,
		(name: string) => `${name}, you always brighten up our day!`,
		(name: string) => `Great timing, ${name} — let's get started!`,
		(name: string) => `${name}, you deserve every bit of this!`,
		(name: string) => `So glad you're here again, ${name}!`,
		(name: string) => `Look who it is — the wonderful ${name}!`
	];

	const unverifiedGreetings = [
		(name: string) => `Welcome, ${name}!`,
		(name: string) => `Hi, ${name}! Great to meet you!`,
		(name: string) => `Hey ${name}, welcome aboard!`,
		(name: string) => `Hello, ${name}! Lovely to have you here!`,
		(name: string) => `Good to meet you, ${name}!`,
		(name: string) => `${name}, welcome to Crussell Nails!`,
		(name: string) => `Hi ${name}, we're so glad you're here!`,
		(name: string) => `Welcome in, ${name}!`,
		(name: string) => `${name}, it's great to have you with us!`,
		(name: string) => `Hello ${name}, glad you found us!`,
		(name: string) => `${name}, welcome — you're going to love it here!`,
		(name: string) => `Nice to meet you, ${name}!`,
		(name: string) => `${name}, welcome to the family!`,
		(name: string) => `Hey ${name}, so happy to have you here!`,
		(name: string) => `${name}, you've come to the right place!`,
		(name: string) => `Welcome, ${name} — we're thrilled to have you!`,
		(name: string) => `${name}, let's get you pampered!`,
		(name: string) => `Great to have you here, ${name}!`,
		(name: string) => `${name}, welcome — something beautiful awaits!`,
		(name: string) => `${name}, your journey to great nails starts here!`,
		(name: string) => `So excited to have you here, ${name}!`,
		(name: string) => `${name}, we can't wait to show you what we do!`,
		(name: string) => `A big welcome to you, ${name}!`,
		(name: string) => `${name}, we're so glad you chose Crussell Nails!`,
		(name: string) => `Hi ${name}, you're in great hands here!`,
		(name: string) => `${name}, this is the beginning of something beautiful!`,
		(name: string) => `Welcome ${name} — you picked the perfect place!`,
		(name: string) => `${name}, we love meeting new faces!`,
		(name: string) => `${name}, we're delighted to have you with us!`,
		(name: string) => `Hello ${name}, great things are ahead!`,
		(name: string) => `${name}, we're already excited to look after you!`,
		(name: string) => `Welcome ${name} — you're going to fit right in!`,
		(name: string) => `So glad you're here, ${name}!`,
		(name: string) => `${name}, you've made an excellent choice today!`,
		(name: string) => `Welcome to the club, ${name}!`
	];

	function getRandomGreeting(name: string, isReturning: boolean): string {
		const greetings = isReturning ? returningGreetings : unverifiedGreetings;
		const randomIndex = Math.floor(Math.random() * greetings.length);
		return greetings[randomIndex](name);
	}
</script>

<svelte:head>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
	<link
		href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap"
		rel="stylesheet"
	/>
</svelte:head>

<section class="py-20 text-center">
	{#if authStore.isLoading}
		<div class="m-2 mb-4">
			<Skeleton class="mx-auto h-10 w-80 max-w-full" />
		</div>
		<div class="mb-8">
			<Skeleton class="mx-auto h-6 w-96 max-w-full" />
		</div>
		<Skeleton class="mx-auto h-12 w-48" />
	{:else}
		<h1 class="m-2 mb-4 font-['Playfair_Display'] text-4xl font-bold">
			{#if !authStore.isAuthenticated}
				Welcome to Crussell Nails
			{:else if authStore.currentUser?.role === 'unverified_email'}
				{getRandomGreeting(authStore.currentUser?.firstName || '', false)}
			{:else}
				{getRandomGreeting(authStore.currentUser?.firstName || '', true)}
			{/if}
		</h1>
		<p class="mb-8 text-lg text-gray-600">
			Professional beauty treatments in a calm and friendly environment.
		</p>

		{#if authStore.currentUser?.role === 'admin'}
			<Button href={resolve('/today')} class="px-6 py-3 text-lg">View your day</Button>
		{:else}
			<Button href={resolve('/book')} class="px-6 py-3 text-lg">Book an Appointment</Button>
		{/if}
	{/if}
</section>

<section class="bg-gray-50">
	<div class="mx-auto max-w-4xl px-6 py-16">
		<h2 class="mb-8 text-center font-['Playfair_Display'] text-2xl font-semibold">Our Services</h2>
		<div class="grid grid-cols-1 gap-8 md:grid-cols-4">
			<div class="rounded-lg border p-6">
				<h3 class="mb-2 text-lg font-semibold">Hands</h3>
				<p class="text-gray-600">
					Gel polish, nail art, and natural nail care — finished with a soothing hand massage.
				</p>
			</div>
			<div class="rounded-lg border p-6">
				<h3 class="mb-2 text-lg font-semibold">Feet</h3>
				<p class="text-gray-600">
					Luxurious pedicures with exfoliation, cuticle care, and a long-lasting polish finish.
				</p>
			</div>
			<div class="rounded-lg border p-6">
				<h3 class="mb-2 text-lg font-semibold">Brows</h3>
				<p class="text-gray-600">
					Expert shaping, tinting, and lamination for brows that frame your face perfectly.
				</p>
			</div>
			<div class="rounded-lg border p-6">
				<h3 class="mb-2 text-lg font-semibold">Wax</h3>
				<p class="text-gray-600">
					Gentle waxing for face, body, and brows — smooth results with minimal discomfort.
				</p>
			</div>
		</div>
	</div>
</section>

<PortfolioCarousel />

<section class="bg-gray-50">
	<div class="mx-auto max-w-4xl px-6 py-16">
		<h2 class="mb-8 text-center font-['Playfair_Display'] text-2xl font-semibold">Opening Hours</h2>
		<BusinessHours />
	</div>
</section>

<section class="py-20 text-center">
	<h2 class="mb-4 font-['Playfair_Display'] text-2xl font-semibold">Ready to Treat Yourself?</h2>
	<Button href={resolve('/prices')} class="px-6 py-3 text-lg">View Price List</Button>
</section>