<template>
    <section class="bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
        <h2 class="mb-16 transform text-center text-4xl font-bold text-[var(--c-white)] transition-all duration-700 hover:scale-105 md:text-5xl">
            Explorez Nos Lectures
        </h2>

        <div class="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
            <!-- Free Tier -->
            <div
                class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
            >
                <div
                    class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                ></div>
                <div class="relative z-10 text-center">
                    <h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-purple-300">
                        Lecture Gratuite
                    </h3>
                    <p class="mt-2 text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">Gratuit</p>
                </div>
                <ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/80">
                    <li class="flex items-center gap-3 transition-transform duration-300 group-hover:-translate-x-1">
                        <svg
                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
                            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 transition-transform delay-75 duration-300 group-hover:-translate-x-1">
                        <svg
                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
                            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 transition-transform delay-150 duration-300 group-hover:-translate-x-1">
                        <svg
                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
                            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="relative z-10 mt-4 flex h-12 w-full items-center justify-center rounded-full border border-[var(--c-purple)]/40 bg-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
                >
                    <span class="transition-transform duration-300 group-hover:translate-x-1">Commencer</span>
                    <svg
                        class="ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </button>
            </div>

            <!-- Featured Tier -->
            <div
                class="group relative flex scale-105 flex-col gap-6 overflow-hidden rounded-2xl bg-gradient-to-br from-[var(--c-purple)] to-purple-900 p-8 shadow-lg ring-2 ring-[var(--c-gold)] transition-all duration-500 hover:-translate-y-3 hover:scale-[1.03] hover:shadow-2xl"
            >
                <div class="absolute top-4 right-4 z-10 rounded-full bg-[var(--c-gold)] px-3 py-1 text-xs font-bold text-[var(--c-purple)]">
                    POPULAIRE
                </div>
                <div
                    class="absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/10 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                ></div>
                <div class="relative z-10 text-center">
                    <h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-[var(--c-gold)]">
                        Profilage
                    </h3>
                    <p class="mt-2 text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">29€</p>
                </div>
                <ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/90">
                    <li class="flex items-center gap-3 transition-transform duration-300 group-hover:-translate-x-1">
                        <svg
                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-white"
                            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 transition-transform delay-75 duration-300 group-hover:-translate-x-1">
                        <svg
                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-white"
                            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 transition-transform delay-150 duration-300 group-hover:-translate-x-1">
                        <svg
                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-white"
                            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="relative z-10 mt-4 flex h-12 w-full items-center justify-center rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 font-bold tracking-wide text-[var(--c-purple)] transition-all duration-300 group-hover:from-yellow-300 group-hover:to-yellow-400 group-hover:shadow-lg"
                >
                    <span class="transition-transform duration-300 group-hover:translate-x-1">Découvrir</span>
                    <svg
                        class="ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </button>
            </div>

            <!-- Premium Tier -->
            <div
                class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
            >
                <div
                    class="absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                ></div>
                <div class="relative z-10 text-center">
                    <h3 class="text-2xl font-bold text-[var(--c-white)] transition-colors duration-300 group-hover:text-[var(--c-gold)]">
                        Quadrige Doré
                    </h3>
                    <p class="mt-2 text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">99€</p>
                </div>
                <ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/80">
                    <li class="flex items-center gap-3 transition-transform duration-300 group-hover:-translate-x-1">
                        <svg
                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
                            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 transition-transform delay-75 duration-300 group-hover:-translate-x-1">
                        <svg
                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
                            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 transition-transform delay-150 duration-300 group-hover:-translate-x-1">
                        <svg
                            class="h-5 w-5 text-[var(--c-gold)] transition-colors duration-300 group-hover:text-purple-300"
                            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="relative z-10 mt-4 flex h-12 w-full items-center justify-center rounded-full border border-[var(--c-purple)]/40 bg-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
                >
                    <span class="transition-transform duration-300 group-hover:translate-x-1">Explorer</span>
                    <svg
                        class="ml-2 h-5 w-5 -translate-x-2 transform opacity-0 transition-all duration-300 group-hover:translate-x-0 group-hover:opacity-100"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                </button>
            </div>
        </div>
    </section>
</template>

<style scoped>
/* Custom animations for the cards */
.group:hover .group-hover\:-translate-x-1 {
    transform: translateX(-4px);
}

/* Smooth transitions for all elements */
* {
    transition-property: color, background-color, transform, opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
