descrybe/apps/web/src/lib/components/site/HowItWorksSection.svelte

<script lang="ts">
	import { DEMO_BOOKING_URL } from "$lib/site";
	import { PROCESS_STEPS } from "./data";
	import { i18n } from "$lib/i18n";

	let {
		id = "how-it-works"
	}: {
		id?: string;
		sectionTitle?: string;
		sectionDescription?: string;
	} = $props();

	const stepKeys = [
		{
			title: "home.how.step1.title",
			desc: "home.how.step1.desc",
			features: ["home.how.step1.f1", "home.how.step1.f2", "home.how.step1.f3"]
		},
		{
			title: "home.how.step2.title",
			desc: "home.how.step2.desc",
			features: ["home.how.step2.f1", "home.how.step2.f2", "home.how.step2.f3"]
		},
		{
			title: "home.how.step3.title",
			desc: "home.how.step3.desc",
			features: ["home.how.step3.f1", "home.how.step3.f2", "home.how.step3.f3"]
		},
		{
			title: "home.how.step4.title",
			desc: "home.how.step4.desc",
			features: ["home.how.step4.f1", "home.how.step4.f2", "home.how.step4.f3"]
		}
	] as const;
</script>

<section {id} class="w-full bg-muted py-8 md:py-12 lg:pt-8 lg:pb-32">
	<div class="container mx-auto max-w-[1216px] px-4 md:px-6">
		<div class="mb-16 flex flex-col items-center text-center">
			<h2 class="h2-responsive max-w-3xl font-bold tracking-tight text-text">
				{i18n.t("home.how.title")}
			</h2>
			<p class="body-responsive mt-4 max-w-2xl text-text-muted">
				{i18n.t("home.how.lead")}
			</p>
		</div>

		<div class="space-y-24">
			{#each PROCESS_STEPS as step, stepIndex}
				{@const keys = stepKeys[stepIndex]}
				<div class="grid grid-cols-1 items-center gap-8 lg:grid-cols-2 lg:gap-16">
					<div class={step.number % 2 === 1 ? "order-2 lg:order-1" : "order-2 lg:order-2"}>
						<div
							class="relative flex h-[320px] w-full items-center justify-center overflow-hidden md:h-[420px] lg:h-[480px]"
						>
							<img
								src={step.image}
								alt={keys ? i18n.t(keys.title) : step.title}
								width="800"
								height="600"
								class="max-h-full max-w-full object-contain"
							/>
						</div>
					</div>

					<div class={step.number % 2 === 1 ? "order-1 lg:order-2" : "order-1 lg:order-1"}>
						<div class={`space-y-8 ${step.number % 2 === 0 ? "text-left lg:text-right" : ""}`}>
							<div class="space-y-4">
								<div
									class={`mb-2 inline-flex h-10 w-10 items-center justify-center rounded-full bg-accent text-primary ${step.number % 2 === 0 ? "lg:ml-auto" : ""}`}
								>
									<span class="font-bold">{step.number}</span>
								</div>
								<h3 class="h3-responsive font-bold tracking-tight text-text">
									{keys ? i18n.t(keys.title) : step.title}
								</h3>
								<p class="body-responsive text-text-muted">
									{keys ? i18n.t(keys.desc) : step.description}
								</p>
							</div>

							<ul class="space-y-4">
								{#each step.features as feature, fi}
									<li
										class={`flex items-start ${step.number % 2 === 0 ? "lg:flex-row-reverse" : ""}`}
									>
										<svg
											class={`h-6 w-6 flex-shrink-0 text-primary ${step.number % 2 === 0 ? "lg:ml-2" : "mr-2"}`}
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
											aria-hidden="true"
										>
											<path
												stroke-linecap="round"
												stroke-linejoin="round"
												stroke-width="2"
												d="M5 13l4 4L19 7"
											/>
										</svg>
										<span class="body-responsive text-text/80">
											{keys?.features[fi] ? i18n.t(keys.features[fi]) : feature.text}
										</span>
									</li>
								{/each}
							</ul>
						</div>
					</div>
				</div>
			{/each}
		</div>

		<div class="mt-24 text-center">
			<a
				href={DEMO_BOOKING_URL}
				target="_blank"
				rel="noopener noreferrer"
				class="inline-flex items-center rounded-md bg-primary px-5 py-3 text-sm font-semibold text-primary-foreground shadow-sm transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
			>
				{i18n.t("home.how.apply")}
				<svg
					class="ml-2 h-4 w-4"
					fill="none"
					viewBox="0 0 24 24"
					stroke="currentColor"
					aria-hidden="true"
				>
					<path
						stroke-linecap="round"
						stroke-linejoin="round"
						stroke-width="2"
						d="M14 5l7 7m0 0l-7 7m7-7H3"
					/>
				</svg>
			</a>
		</div>
	</div>
</section>