<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">Explorez Nos Lectures</h2>
        <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
            <div
                class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
            >
                <div class="text-center">
                    <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Lecture Gratuite</h3>
                    <p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">Gratuit</p>
                </div>
                <ul class="flex-grow space-y-3 text-[var(--midnight-blue)]/80">
                    <li class="flex items-center gap-3">
                        <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                            ></path></svg
                        >Lecture d'une carte
                    </li>
                    <li class="flex items-center gap-3">
                        <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                            ></path></svg
                        >Interprétation générale
                    </li>
                    <li class="flex items-center gap-3">
                        <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                            ></path></svg
                        >Conseils rapides
                    </li>
                </ul>
                <button
                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
                >
                    Commencer
                </button>
            </div>
            <div
                class="flex scale-105 flex-col gap-6 rounded-2xl bg-[var(--midnight-blue)] p-8 shadow-lg ring-2 ring-[var(--subtle-gold)] transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
            >
                <div class="text-center">
                    <h3 class="text-2xl font-bold text-[var(--pure-white)]">Profilage</h3>
                    <p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">29€</p>
                </div>
                <ul class="flex-grow space-y-3 text-[var(--linen)]">
                    <li class="flex items-center gap-3">
                        <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                            ></path></svg
                        >Lecture de trois cartes
                    </li>
                    <li class="flex items-center gap-3">
                        <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                            ></path></svg
                        >Analyse personnalisée
                    </li>
                    <li class="flex items-center gap-3">
                        <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                            ></path></svg
                        >Recommandations ciblées
                    </li>
                </ul>
                <button
                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--pure-white)]"
                >
                    Découvrir
                </button>
            </div>
            <div
                class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
            >
                <div class="text-center">
                    <h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Quadrige Doré</h3>
                    <p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">99€</p>
                </div>
                <ul class="flex-grow space-y-3 text-[var(--midnight-blue)]/80">
                    <li class="flex items-center gap-3">
                        <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                            ></path></svg
                        >Lecture de quatre cartes
                    </li>
                    <li class="flex items-center gap-3">
                        <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                            ></path></svg
                        >Exploration approfondie
                    </li>
                    <li class="flex items-center gap-3">
                        <svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
                            ></path></svg
                        >Stratégie complète
                    </li>
                </ul>
                <button
                    class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
                >
                    Explorer
                </button>
            </div>
        </div>
    </section>
</template>
