Simple pricing grid

<script module lang="ts">
	export interface PricingPlan {
		/** Plan name shown as the card heading. */
		label: string;
		/** Display-only price string, e.g. "$12". Never parsed or charged. */
		price: string;
		/** Billing period shown after the price, e.g. "per month". */
		period?: string;
		description?: string;
		features: string[];
		cta: { label: string; href: string };
		recommended?: boolean;
	}
</script>

<script lang="ts">
	interface Props {
		plans: PricingPlan[];
		title: string;
		description?: string;
		headingLevel?: 2 | 3 | 4 | 5;
		recommendedLabel?: string;
	}

	let {
		plans,
		title,
		description,
		headingLevel = 2,
		recommendedLabel = 'Recommended'
	}: Props = $props();

	const uid = $props.id();
	const sectionHeading = $derived(`h${headingLevel}`);
	const planHeading = $derived(`h${headingLevel + 1}`);
</script>

<section class="pricing-grid px-4 py-16 sm:px-6 lg:px-8" aria-labelledby="{uid}-title">
	<div class="mx-auto max-w-6xl">
		<div class="mx-auto max-w-2xl text-center">
			<svelte:element
				this={sectionHeading}
				id="{uid}-title"
				class="text-3xl font-semibold tracking-tight text-balance text-zinc-900 sm:text-4xl"
			>
				{title}
			</svelte:element>
			{#if description}
				<p class="mt-4 text-base text-pretty text-zinc-600 sm:text-lg">{description}</p>
			{/if}
		</div>

		<ul class="mt-12 flex flex-wrap justify-center gap-6" role="list">
			{#each plans as plan, index (index)}
				<li
					class={[
						'flex max-w-sm min-w-0 grow basis-64 flex-col rounded-2xl bg-white p-6 sm:p-8',
						plan.recommended ? 'shadow-sm ring-2 ring-[var(--_accent)]' : 'ring-1 ring-zinc-200'
					]}
				>
					<div class="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
						<svelte:element
							this={planHeading}
							id="{uid}-plan-{index}"
							class="text-lg font-semibold break-words text-zinc-900"
						>
							{plan.label}
						</svelte:element>
						{#if plan.recommended}
							<p
								class="rounded-full bg-[var(--_accent)] px-2.5 py-1 text-xs font-medium text-[var(--_on-accent)]"
							>
								{recommendedLabel}
							</p>
						{/if}
					</div>

					{#if plan.description}
						<p class="mt-3 text-sm text-pretty text-zinc-600">{plan.description}</p>
					{/if}

					<p class="mt-6 flex flex-wrap items-baseline gap-x-2">
						<span class="text-4xl font-semibold tracking-tight break-all text-zinc-900"
							>{plan.price}</span
						>
						{#if plan.period}
							<span class="text-sm text-zinc-600">{plan.period}</span>
						{/if}
					</p>

					<ul class="mt-6 flex-1 space-y-3 text-sm text-zinc-700" role="list">
						{#each plan.features as feature, featureIndex (featureIndex)}
							<li class="flex gap-3">
								<svg
									class="mt-0.5 size-4 shrink-0 text-zinc-900"
									viewBox="0 0 16 16"
									fill="none"
									aria-hidden="true"
								>
									<path
										d="M3.5 8.5l3 3 6-7"
										stroke="currentColor"
										stroke-width="1.75"
										stroke-linecap="round"
										stroke-linejoin="round"
									/>
								</svg>
								<span class="min-w-0 break-words">{feature}</span>
							</li>
						{/each}
					</ul>

					<a
						href={plan.cta.href}
						aria-describedby="{uid}-plan-{index}"
						class={[
							'mt-8 block rounded-lg px-4 py-2.5 text-center text-sm font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--_accent)]',
							plan.recommended
								? 'bg-[var(--_accent)] text-[var(--_on-accent)] hover:opacity-90'
								: 'text-zinc-900 ring-1 ring-zinc-300 ring-inset hover:bg-zinc-50'
						]}
					>
						{plan.cta.label}
					</a>
				</li>
			{/each}
		</ul>
	</div>
</section>

<style>
	.pricing-grid {
		--_accent: var(--pricing-grid-accent, #18181b);
		--_on-accent: var(--pricing-grid-on-accent, #ffffff);
	}
</style>