<template>
    <section class="overflow-hidden bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
        <!-- Animated background elements -->
        <div class="pointer-events-none absolute inset-0 overflow-hidden">
            <div
                v-for="i in 15"
                :key="'bg-' + i"
                class="absolute rounded-full opacity-10"
                :class="{
                    'bg-[var(--c-gold)]': i % 3 === 0,
                    'bg-[var(--c-purple)]': i % 3 === 1,
                    'bg-white': i % 3 === 2,
                }"
                :style="{
                    width: `${20 + ((i * 5) % 60)}px`,
                    height: `${20 + ((i * 5) % 60)}px`,
                    top: `${(i * 7) % 100}%`,
                    left: `${(i * 10) % 100}%`,
                    animation: `float ${15 + i * 2}s ease-in-out infinite`,
                    animationDelay: `${i * 0.7}s`,
                }"
            ></div>
        </div>

        <h2
            class="relative z-10 mb-16 transform text-center text-4xl font-bold text-[var(--c-white)] transition-all duration-700 hover:scale-105 md:text-5xl"
        >
            <span class="relative inline-block">
                Explorez Nos Lectures
                <span class="absolute -bottom-2 left-1/4 h-1 w-1/2 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></span>
            </span>
        </h2>

        <div class="relative z-10 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"
            >
                <!-- Animated border effect -->
                <div class="absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-700 group-hover:opacity-100">
                    <div
                        class="animate-border-pulse absolute -inset-2 rounded-2xl bg-gradient-to-r from-[var(--c-purple)]/0 via-[var(--c-purple)]/30 to-[var(--c-purple)]/0"
                    ></div>
                </div>

                <!-- Floating icon -->
                <div
                    class="absolute -top-6 -right-6 text-8xl text-[var(--c-gold)] opacity-5 transition-all duration-700 group-hover:scale-110 group-hover:opacity-10"
                >
                    ✦
                </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>
                    <div class="relative mt-2 inline-block">
                        <p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">Gratuit</p>
                        <div
                            class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                        >
                            <div class="animate-ping-slow h-24 w-24 rounded-full border-2 border-[var(--c-gold)]/30"></div>
                        </div>
                    </div>
                </div>

                <!-- Animated checkmark list -->
                <ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/80">
                    <li
                        v-for="(feature, index) in freeFeatures"
                        :key="index"
                        class="flex items-center gap-3 transition-all duration-300"
                        :class="{
                            'group-hover:-translate-x-1': index === 0,
                            'group-hover:-translate-x-2': index === 1,
                            'group-hover:-translate-x-3': index === 2,
                        }"
                        :style="{ transitionDelay: `${index * 100}ms` }"
                    >
                        <svg
                            class="h-5 w-5 flex-shrink-0 text-[var(--c-gold)] transition-all duration-300 group-hover:scale-110 group-hover:text-purple-300"
                            fill="currentColor"
                            viewBox="0 0 256 256"
                        >
                            <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>
                        <span class="transition-all duration-300 group-hover:text-[var(--c-white)]">{{ feature }}</span>
                    </li>
                </ul>

                <button
                    class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden 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="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Commencer</span>
                    <svg
                        class="relative z-10 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"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                    <div
                        class="absolute inset-0 -translate-x-full -skew-x-12 bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
                    ></div>
                </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"
            >
                <!-- Popular badge with animation -->
                <div class="absolute top-4 right-4 z-10">
                    <div class="relative">
                        <div class="absolute -inset-1 animate-pulse rounded-full bg-[var(--c-gold)] opacity-75 blur"></div>
                        <div class="relative rounded-full bg-[var(--c-gold)] px-3 py-1 text-xs font-bold text-[var(--c-purple)]">POPULAIRE</div>
                    </div>
                </div>

                <!-- Sparkle effect -->
                <div
                    v-for="i in 3"
                    :key="'sparkle-' + i"
                    class="animate-sparkle absolute text-[var(--c-gold)] opacity-70"
                    :class="{
                        'top-4 left-4 text-xl': i === 1,
                        'right-6 bottom-6 text-lg': i === 2,
                        'top-1/2 left-1/4 text-sm': i === 3,
                    }"
                >
                    ✦
                </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>
                    <div class="relative mt-2 inline-block">
                        <p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">29€</p>
                        <div
                            class="absolute -inset-2 rounded-full bg-[var(--c-gold)]/20 opacity-0 blur-md transition-opacity duration-500 group-hover:opacity-100"
                        ></div>
                    </div>
                </div>

                <ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/90">
                    <li
                        v-for="(feature, index) in featuredFeatures"
                        :key="index"
                        class="flex items-center gap-3 transition-all duration-300"
                        :class="{
                            'group-hover:-translate-x-1': index === 0,
                            'group-hover:-translate-x-2': index === 1,
                            'group-hover:-translate-x-3': index === 2,
                        }"
                        :style="{ transitionDelay: `${index * 100}ms` }"
                    >
                        <svg
                            class="h-5 w-5 flex-shrink-0 text-[var(--c-gold)] transition-all duration-300 group-hover:scale-110 group-hover:text-white"
                            fill="currentColor"
                            viewBox="0 0 256 256"
                        >
                            <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>
                        <span class="transition-all duration-300 group-hover:text-[var(--c-white)]">{{ feature }}</span>
                    </li>
                </ul>

                <button
                    class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden 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="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Découvrir</span>
                    <svg
                        class="relative z-10 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"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                    <div
                        class="absolute inset-0 -translate-x-full -skew-x-12 bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-700 group-hover:translate-x-full"
                    ></div>
                </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"
            >
                <!-- Golden particles -->
                <div
                    v-for="i in 5"
                    :key="'particle-' + i"
                    class="animate-float absolute rounded-full bg-[var(--c-gold)]/40"
                    :class="{
                        'top-4 left-4 h-3 w-3': i === 1,
                        'right-6 bottom-6 h-2 w-2': i === 2,
                        'top-1/4 right-4 h-4 w-4': i === 3,
                        'bottom-4 left-6 h-3 w-3': i === 4,
                        'top-3/4 left-4 h-2 w-2': i === 5,
                    }"
                    :style="{ animationDelay: `${i * 0.5}s` }"
                ></div>

                <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>
                    <div class="relative mt-2 inline-block">
                        <p class="text-5xl font-bold text-[var(--c-gold)] transition-transform duration-300 group-hover:scale-110">99€</p>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div
                                class="animate-spin-slow h-20 w-20 rounded-full border border-[var(--c-gold)]/30 opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                            ></div>
                        </div>
                    </div>
                </div>

                <ul class="relative z-10 flex-grow space-y-3 text-[var(--c-white)]/80">
                    <li
                        v-for="(feature, index) in premiumFeatures"
                        :key="index"
                        class="flex items-center gap-3 transition-all duration-300"
                        :class="{
                            'group-hover:-translate-x-1': index === 0,
                            'group-hover:-translate-x-2': index === 1,
                            'group-hover:-translate-x-3': index === 2,
                        }"
                        :style="{ transitionDelay: `${index * 100}ms` }"
                    >
                        <svg
                            class="h-5 w-5 flex-shrink-0 text-[var(--c-gold)] transition-all duration-300 group-hover:scale-110 group-hover:text-purple-300"
                            fill="currentColor"
                            viewBox="0 0 256 256"
                        >
                            <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>
                        <span class="transition-all duration-300 group-hover:text-[var(--c-white)]">{{ feature }}</span>
                    </li>
                </ul>

                <button
                    class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden 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="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Explorer</span>
                    <svg
                        class="relative z-10 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"
                    >
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                    </svg>
                    <div
                        class="absolute inset-0 -translate-x-full -skew-x-12 bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-1000 group-hover:translate-x-full"
                    ></div>
                </button>
            </div>
        </div>
    </section>
</template>

<script setup>
// Define features for each tier
const freeFeatures = ["Lecture d'une carte", 'Interprétation générale', 'Conseils rapides'];

const featuredFeatures = ['Lecture de trois cartes', 'Analyse personnalisée', 'Recommandations ciblées'];

const premiumFeatures = ['Lecture de quatre cartes', 'Exploration approfondie', 'Stratégie complète'];
</script>

<style scoped>
/* Custom animations */
@keyframes float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-5px) rotate(2deg);
    }
    66% {
        transform: translateY(3px) rotate(-2deg);
    }
}

@keyframes border-pulse {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes ping-slow {
    0% {
        transform: scale(0.8);
        opacity: 1;
    }
    75%,
    100% {
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes sparkle {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-border-pulse {
    animation: border-pulse 2s ease-in-out infinite;
}

.animate-ping-slow {
    animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-sparkle {
    animation: sparkle 3s ease-in-out infinite;
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Custom color variables */
:root {
    --c-purple: #4c1d95;
    --c-white: #ffffff;
    --c-gold: rgba(245, 158, 11, 0.9);
    --card: #1e1b4b;
}

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