<script lang="ts">
	import Icon, { type IconName } from './Icon.svelte';

	export interface StepItem {
		step: string;
		icon: IconName;
		title: string;
		description: string;
	}

	interface Props {
		items: StepItem[];
	}

	let { items }: Props = $props();
</script>

<div class="steps-cq">
	<ol class="grid" role="list" style:--grid-min="17rem">
		{#each items as item (item.step)}
			<li class="step-card">
				<span class="step-number" aria-hidden="true">{item.step}</span>
				<span class="step-icon"><Icon name={item.icon} size={24} /></span>
				<h3>{item.title}</h3>
				<p>{item.description}</p>
			</li>
		{/each}
	</ol>
</div>

<style>
	/* Container query : rythme plus généreux quand le conteneur s'élargit. */
	.steps-cq {
		container-type: inline-size;
	}

	.step-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: var(--space-3);
		padding: var(--space-4);
		background: var(--glass);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border: 1px solid var(--glass-border);
		border-radius: var(--radius-2);
	}

	.step-number {
		font-family: var(--font-mono);
		font-size: var(--text-4);
		font-weight: 700;
		line-height: 1;
		color: color-mix(in oklch, var(--page-accent, var(--accent)) 25%, transparent);
	}

	.step-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		inline-size: 3rem;
		block-size: 3rem;
		border-radius: var(--radius-1);
		color: var(--page-accent-text, var(--accent-text));
		background: color-mix(in oklch, var(--page-accent, var(--accent)) 14%, transparent);
	}

	h3 {
		font-size: var(--text-2);
	}

	p {
		font-size: var(--text-small);
		color: var(--ink-soft);
	}

	@container (min-width: 45rem) {
		.step-card {
			padding: var(--space-5);
		}
	}
</style>
