<template>
    <section class="py-20 sm:py-24">
        <h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Comment cela fonctionne</h2>
        <div class="relative mx-auto max-w-2xl">
            <div class="absolute left-1/2 h-full w-0.5 -translate-x-1/2 bg-[var(--linen)]"></div>
            <div class="relative z-10 flex flex-col gap-16">
                <div class="flex items-center gap-8">
                    <div
                        class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg"
                    >
                        1
                    </div>
                    <div class="bg-[var(--light-ivory)] pl-4">
                        <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Choisissez Votre Lecture</h3>
                    </div>
                </div>
                <div class="flex items-center justify-end gap-8 text-right">
                    <div class="bg-[var(--light-ivory)] pr-4">
                        <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Recevez Votre Interprétation</h3>
                    </div>
                    <div
                        class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg"
                    >
                        2
                    </div>
                </div>
                <div class="flex items-center gap-8">
                    <div
                        class="flex h-20 w-20 flex-shrink-0 items-center justify-center rounded-full bg-[var(--subtle-gold)] text-3xl font-bold text-[var(--midnight-blue)] shadow-lg"
                    >
                        3
                    </div>
                    <div class="bg-[var(--light-ivory)] pl-4">
                        <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Appliquez la Sagesse</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
