path: root/src/routes/+page.svelte

<script>
	import { resolveRoute } from '$app/paths';
	import { carouselImages } from '$lib/data/images';
	import { onMount } from 'svelte';

	const images = [
		{ src: carouselImages[0], alt: 'Glass office door with the Misty Mountains Therapy logo' },
		{ src: carouselImages[1], alt: 'Entry hall with a bench for waiting patients' },
		{ src: carouselImages[2], alt: 'Office room with a rustic lamp and comfortable couch' },
		{ src: carouselImages[3], alt: 'Welcoming therapy office interior' },
		{ src: carouselImages[4], alt: 'Misty mountain landscape' }
	];

	let currentIndex = 0;
	let intervalId;

	function nextSlide() {
		currentIndex = (currentIndex + 1) % images.length;
	}

	function prevSlide() {
		currentIndex = (currentIndex - 1 + images.length) % images.length;
	}

	function goToSlide(index) {
		currentIndex = index;
	}

	onMount(() => {
		intervalId = setInterval(nextSlide, 5000);
		return () => clearInterval(intervalId);
	});

	function pauseAutoplay() {
		clearInterval(intervalId);
	}

	function resumeAutoplay() {
		clearInterval(intervalId);
		intervalId = setInterval(nextSlide, 5000);
	}
</script>

<section class="hero">
	<div
		class="carousel"
		role="region"
		aria-label="Office photos"
		aria-roledescription="carousel"
		on:mouseenter={pauseAutoplay}
		on:mouseleave={resumeAutoplay}
		on:focusin={pauseAutoplay}
		on:focusout={resumeAutoplay}
	>
		<div class="carousel__track" style="transform: translateX(-{currentIndex * 100}%)">
			{#each images as image, i (image.src)}
				<div
					class="carousel__slide"
					role="group"
					aria-roledescription="slide"
					aria-label="{i + 1} of {images.length}"
					aria-hidden={i !== currentIndex}
				>
					<img
						class="carousel__image"
						src={image.src}
						alt={image.alt}
						loading={i === 0 ? 'eager' : 'lazy'}
						decoding="async"
					/>
				</div>
			{/each}
		</div>

		<button
			class="carousel__btn carousel__btn--prev"
			type="button"
			aria-label="Previous slide"
			on:click={prevSlide}
		>
			<i class="bi bi-chevron-left" aria-hidden="true"></i>
		</button>
		<button
			class="carousel__btn carousel__btn--next"
			type="button"
			aria-label="Next slide"
			on:click={nextSlide}
		>
			<i class="bi bi-chevron-right" aria-hidden="true"></i>
		</button>

		<div class="carousel__dots" role="tablist" aria-label="Slide controls">
			{#each images as _, i (i)}
				<button
					class="carousel__dot"
					class:carousel__dot--active={i === currentIndex}
					type="button"
					role="tab"
					aria-selected={i === currentIndex}
					aria-label="Go to slide {i + 1}"
					on:click={() => goToSlide(i)}
				></button>
			{/each}
		</div>
	</div>

	<div class="hero__content">
		<h1>Helping you conquer Mount Doom.</h1>
		<a href={resolveRoute('/contact')} class="button button--primary">
			Free 15 Minute Consultation
		</a>
	</div>
</section>

<section class="card home-intro">
	<blockquote>
		"Darkness must pass, a new day will come, and when the sun shines, it will shine out the clearer."
		<footer>Samwise Gamgee</footer>
	</blockquote>

	<p>
		Misty Mountains Therapy is a privately owned, high quality, specialty therapy clinic,
		founded in January 2020 by Jefferson Hunt. We are dedicated to providing comprehensive
		therapy evaluation and treatment services to children and adults for a wide variety of
		disorders in the most efficient and effective manner possible in the Rexburg area. We
		believe that therapy should be fun, engaging, and most importantly, useful to our clients.
	</p>
	<p>
		<strong>We are currently accepting new clients and offer a variety of services to help you live the
		life you desire</strong>.
    </p>
    <p>
        To find the right fit for you, schedule a <a href={resolveRoute('/contact')}
			>free 15-minute consultation</a
		>.
	</p>

	<aside class="notice notice--warn" aria-label="Crisis information">
		<p style="margin: 0">
			We do not have a crisis line. If you or someone you know is in danger please call 911, visit your
			nearest emergency room, call the National Suicide Prevention Lifeline for free crisis counseling at
			<a href="tel:18002738255">(800)273-TALK</a> (8255), or text HELLO to 741-741.
		</p>
	</aside>
</section>

<style>
	.hero {
		display: grid;
		gap: var(--space-5);
		margin-bottom: var(--space-5);
	}

	@media (min-width: 768px) {
		.hero {
			grid-template-columns: 1.4fr 1fr;
			align-items: center;
		}
	}

	/* Carousel */
	.carousel {
		position: relative;
		border-radius: var(--radius-sm);
		overflow: hidden;
		box-shadow: var(--shadow-sm);
	}

	.carousel__track {
		display: flex;
		transition: transform 400ms ease;
	}

	.carousel__slide {
		flex: 0 0 100%;
		min-width: 0;
	}

	.carousel__image {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}

	.carousel__btn {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		background: rgba(255, 255, 255, 0.85);
		border: none;
		border-radius: 50%;
		width: 2.5rem;
		height: 2.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		opacity: 0;
		transition: opacity 150ms ease, background 150ms ease;
		font-size: 1.1rem;
		color: var(--color-ink);
	}

	.carousel:hover .carousel__btn,
	.carousel:focus-within .carousel__btn {
		opacity: 1;
	}

	.carousel__btn:hover {
		background: white;
	}

	.carousel__btn--prev {
		left: var(--space-3);
	}

	.carousel__btn--next {
		right: var(--space-3);
	}

	.carousel__dots {
		position: absolute;
		bottom: var(--space-3);
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: var(--space-2);
	}

	.carousel__dot {
		width: 0.5rem;
		height: 0.5rem;
		border-radius: 50%;
		border: none;
		background: rgba(255, 255, 255, 0.5);
		cursor: pointer;
		padding: 0;
		transition: background 150ms ease, transform 150ms ease;
	}

	.carousel__dot:hover {
		background: rgba(255, 255, 255, 0.8);
	}

	.carousel__dot--active {
		background: white;
		transform: scale(1.25);
	}

	/* Hero content */
	.hero__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
	}

	.hero__content h1 {
		margin: 0;
	}

	/* Intro card - removed max-width for wider feel */
	.home-intro .notice {
		margin-top: var(--space-5);
		margin-bottom: 0;
	}
</style>