---
import { t } from '@/i18n';
import Container from '@/components/ui/Container.astro';
---

<section aria-labelledby="quick-steps-title">
	<Container>
		<div class="flex flex-col gap-8.75 rounded-card bg-jade px-5 py-6.25 lg:flex-row lg:items-center lg:gap-6.25 lg:px-10">
			<h2 id="quick-steps-title" class="text-title font-semibold text-balance text-white lg:max-w-58 lg:shrink-0">
				{t.quickSteps.title}
			</h2>
			<ol class="grid gap-3.75 lg:flex-1 lg:grid-cols-3 lg:gap-6.25">
				{
					t.quickSteps.items.map((item, index) => (
						<li class="flex items-center gap-6.25 rounded-card bg-white px-6.25 py-3.75 lg:py-5">
							<span class="text-[2rem] font-semibold text-mint" aria-hidden="true">
								{index + 1}
							</span>
							<div class="flex flex-col">
								<h3 class="font-semibold">{item.title}</h3>
								<p class="text-sm font-light text-muted lg:text-base">{item.text}</p>
							</div>
						</li>
					))
				}
			</ol>
		</div>
	</Container>
</section>