<template>
    <section class="relative overflow-hidden bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
        <!-- Background images with transparency -->
        <div class="absolute inset-0 opacity-10">
            <div class="absolute top-0 left-0 h-1/3 w-1/3 bg-[url('/background/IMG_2254.jpg')] bg-cover bg-center mix-blend-soft-light"></div>
            <div class="absolute right-0 bottom-0 h-1/3 w-1/3 bg-[url('/background/IMG_2252.jpg')] bg-cover bg-center mix-blend-soft-light"></div>
        </div>

        <!-- Animated floating elements -->
        <div class="pointer-events-none absolute inset-0 overflow-hidden">
            <div
                v-for="i in 8"
                :key="'float-' + i"
                class="absolute rounded-full opacity-20"
                :class="{
                    'bg-[var(--c-gold)]': i % 2 === 0,
                    'bg-[var(--c-purple)]': i % 2 === 1,
                }"
                :style="{
                    width: `${15 + i * 3}px`,
                    height: `${15 + i * 3}px`,
                    top: `${(i * 12) % 100}%`,
                    left: `${(i * 15) % 100}%`,
                    animation: `float ${12 + i}s ease-in-out infinite`,
                    animationDelay: `${i * 0.5}s`,
                }"
            ></div>
        </div>

        <h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 md:text-5xl">
            <span class="relative inline-block">
                Comment cela fonctionne
                <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 mx-auto max-w-4xl">
            <!-- Animated connecting line with glow effect -->
            <div class="absolute top-0 bottom-0 left-1/2 w-1 -translate-x-1/2">
                <div class="relative h-full w-full bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-60">
                    <div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/30 to-transparent"></div>
                </div>
            </div>

            <!-- Glowing orbs along the line -->
            <div
                v-for="i in 3"
                :key="'orb-' + i"
                class="animate-orb-pulse absolute left-1/2 h-6 w-6 -translate-x-1/2 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-80 shadow-lg"
                :style="{
                    top: `${i * 33}%`,
                    animationDelay: `${i * 0.3}s`,
                }"
            ></div>

            <div class="relative z-10 flex flex-col gap-16">
                <!-- Step 1 -->
                <div class="group flex items-center gap-8">
                    <div class="relative flex-shrink-0">
                        <div
                            class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
                        >
                            <span class="z-10">1</span>
                            <div
                                class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
                            ></div>
                        </div>
                        <!-- Decorative sparkles -->
                        <div
                            v-for="i in 3"
                            :key="'sparkle1-' + i"
                            class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                            :class="{
                                'top-0 right-0 text-lg': i === 1,
                                'bottom-0 left-0 text-sm': i === 2,
                                'top-1/2 -right-2 text-xs': i === 3,
                            }"
                            :style="{ animationDelay: `${i * 0.2}s` }"
                        >
                            ✦
                        </div>
                    </div>
                    <div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
                        <h3 class="mb-2 flex items-center gap-2 text-2xl font-bold text-white">
                            <span>Choisissez Votre Lecture</span>
                            <span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
                        </h3>
                        <p
                            class="max-w-md rounded-xl border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/20 group-hover:bg-black/30"
                        >
                            Sélectionnez le type de lecture qui correspond à vos besoins et aspirations actuelles.
                        </p>
                    </div>
                </div>

                <!-- Step 2 -->
                <div class="group flex items-center justify-end gap-8 text-right">
                    <div class="transform pr-4 transition-all duration-500 group-hover:-translate-y-1">
                        <h3 class="mb-2 flex items-center justify-end gap-2 text-2xl font-bold text-white">
                            <span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
                            <span>Recevez Votre Interprétation</span>
                        </h3>
                        <p
                            class="max-w-md rounded-xl border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/20 group-hover:bg-black/30"
                        >
                            Obtenez une analyse personnalisée et détaillée de votre tirage directement dans votre boîte mail.
                        </p>
                    </div>
                    <div class="relative flex-shrink-0">
                        <div
                            class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
                        >
                            <span class="z-10">2</span>
                            <div
                                class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
                            ></div>
                        </div>
                        <!-- Decorative sparkles -->
                        <div
                            v-for="i in 3"
                            :key="'sparkle2-' + i"
                            class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                            :class="{
                                'top-0 left-0 text-lg': i === 1,
                                'right-0 bottom-0 text-sm': i === 2,
                                'top-1/2 -left-2 text-xs': i === 3,
                            }"
                            :style="{ animationDelay: `${i * 0.2}s` }"
                        >
                            ✦
                        </div>
                    </div>
                </div>

                <!-- Step 3 -->
                <div class="group flex items-center gap-8">
                    <div class="relative flex-shrink-0">
                        <div
                            class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
                        >
                            <span class="z-10">3</span>
                            <div
                                class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
                            ></div>
                        </div>
                        <!-- Decorative sparkles -->
                        <div
                            v-for="i in 3"
                            :key="'sparkle3-' + i"
                            class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
                            :class="{
                                'top-0 right-0 text-lg': i === 1,
                                'bottom-0 left-0 text-sm': i === 2,
                                'top-1/2 -right-2 text-xs': i === 3,
                            }"
                            :style="{ animationDelay: `${i * 0.2}s` }"
                        >
                            ✦
                        </div>
                    </div>
                    <div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
                        <h3 class="mb-2 flex items-center gap-2 text-2xl font-bold text-white">
                            <span>Appliquez la Sagesse</span>
                            <span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
                        </h3>
                        <p
                            class="max-w-md rounded-xl border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/20 group-hover:bg-black/30"
                        >
                            Mettez en pratique les conseils et perspectives reçues pour transformer votre quotidien.
                        </p>
                    </div>
                </div>
            </div>

            <!-- Animated decorative elements -->
            <div class="absolute -top-10 -left-10 h-24 w-24 animate-pulse rounded-full bg-[var(--c-gold)]/10 blur-xl"></div>
            <div class="absolute -right-10 -bottom-10 h-32 w-32 animate-pulse rounded-full bg-[var(--c-purple)]/20 blur-xl delay-1000"></div>
        </div>
    </section>
</template>

<script>
export default {
    name: 'HowItWorks',
    mounted() {
        // Add intersection observer for scroll animations
        const observerOptions = {
            root: null,
            rootMargin: '0px',
            threshold: 0.2,
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fade-in-up');
                }
            });
        }, observerOptions);

        // Observe each step
        document.querySelectorAll('.group').forEach((step) => {
            observer.observe(step);
        });
    },
};
</script>

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

@keyframes pulse-slow {
    0%,
    100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes orb-pulse {
    0%,
    100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }
    70% {
        transform: translateX(-50%) scale(1.05);
        box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
    }
}

.group {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

.group:nth-child(1) {
    transition-delay: 0.1s;
}

.group:nth-child(2) {
    transition-delay: 0.3s;
}

.group:nth-child(3) {
    transition-delay: 0.5s;
}

.animate-fade-in-up {
    opacity: 1;
    transform: translateY(0);
}

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

.animate-orb-pulse {
    animation: orb-pulse 2s infinite;
}

/* Custom color variables */
:root {
    --c-purple: #4c1d95;
    --c-gold: rgba(245, 158, 11, 0.9);
    --linen: #faf0e6;
}

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