<template>
    <section
        class="relative -mx-[calc((100vw-100%)/2)] w-screen overflow-hidden bg-gradient-to-b from-black via-[#1a0b2e] to-black py-20 sm:py-24"
        style="background: linear-gradient(to bottom, #1a0b2e, #2d1b69, #1a0b2e)"
    >
        <!-- Full width background image with better visibility -->
        <div class="absolute inset-0 w-screen">
            <div class="absolute inset-0 w-screen bg-[url('/image002.jpg')] bg-cover bg-center opacity-40 mix-blend-soft-light"></div>
            <!-- Dark overlay for better text contrast -->
            <div class="absolute inset-0 w-screen bg-[#1a0b2e]/40"></div>
        </div>

        <!-- Subtle floating elements -->
        <div class="pointer-events-none absolute inset-0 w-screen overflow-hidden">
            <div
                v-for="i in 12"
                :key="'float-' + i"
                class="absolute opacity-15"
                :class="{
                    'text-[var(--c-gold)]': i % 3 === 0,
                    'text-[var(--c-purple)]': i % 3 === 1,
                    'text-white': i % 3 === 2,
                }"
                :style="{
                    fontSize: `${8 + i * 2}px`,
                    top: `${(i * 15) % 100}%`,
                    left: `${(i * 12) % 100}%`,
                    animation: `float ${15 + i * 2}s ease-in-out infinite`,
                    animationDelay: `${i * 0.3}s`,
                }"
            >
                {{ i % 3 === 0 ? '✦' : i % 3 === 1 ? '✧' : '☆' }}
            </div>
        </div>

        <!-- Container with full width content -->
        <div class="relative w-full">
            <h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 md:text-5xl">
                <span class="relative inline-block">
                    How It Works ?
                    <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 px-4 sm:px-6 lg:px-8">
                <!-- Elegant connecting line -->
                <div class="absolute top-0 bottom-0 left-1/2 w-0.5 -translate-x-1/2">
                    <div class="relative h-full w-full">
                        <div class="absolute inset-0 bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-60"></div>
                        <div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/20 to-transparent"></div>
                    </div>
                </div>

                <!-- Minimal orbs along the line -->
                <div
                    v-for="i in 3"
                    :key="'orb-' + i"
                    class="absolute left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-[var(--c-gold)] opacity-90 shadow-lg"
                    :style="{
                        top: `${i * 33}%`,
                    }"
                ></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-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/50"
                            >
                                <span class="z-10">1</span>
                                <div
                                    class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-40"
                                ></div>
                            </div>
                            <!-- Subtle sparkles -->
                            <div
                                class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
                            >
                                ✦
                            </div>
                        </div>
                        <div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
                            <h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
                                <span>Choose Your Reading </span>
                                <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
                            </h3>
                            <p
                                class="max-w-md rounded-lg border border-white/20 bg-black/40 p-4 text-white/90 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/50 group-hover:bg-black/60"
                            >
                                Select the type of reading that matches your current needs and aspirations.
                            </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-3 flex items-center justify-end gap-2 text-xl font-bold text-white">
                                <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
                                <span>Receive Your Interpretation</span>
                            </h3>
                            <p
                                class="max-w-md rounded-lg border border-white/20 bg-black/40 p-4 text-white/90 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/50 group-hover:bg-black/60"
                            >
                                Get a personalized, detailed analysis of your spread delivered straight to your inbox.
                            </p>
                        </div>
                        <div class="relative flex-shrink-0">
                            <div
                                class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/50"
                            >
                                <span class="z-10">2</span>
                                <div
                                    class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-40"
                                ></div>
                            </div>
                            <!-- Subtle sparkles -->
                            <div
                                class="absolute -top-1 -left-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
                            >
                                ✦
                            </div>
                        </div>
                    </div>

                    <!-- Step 3 -->
                    <div class="group flex items-center gap-8">
                        <div class="relative flex-shrink-0">
                            <div
                                class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/50"
                            >
                                <span class="z-10">3</span>
                                <div
                                    class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-40"
                                ></div>
                            </div>
                            <!-- Subtle sparkles -->
                            <div
                                class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
                            >
                                ✦
                            </div>
                        </div>
                        <div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
                            <h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
                                <span>Apply the Wisdom </span>
                                <span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
                            </h3>
                            <p
                                class="max-w-md rounded-lg border border-white/20 bg-black/40 p-4 text-white/90 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/50 group-hover:bg-black/60"
                            >
                                Put the guidance and insights into practice to transform your daily life.
                            </p>
                        </div>
                    </div>
                </div>

                <!-- Subtle decorative elements -->
                <div class="absolute -top-8 left-10 h-16 w-16 rounded-full bg-[var(--c-gold)]/20 blur-xl"></div>
                <div class="absolute right-10 -bottom-8 h-20 w-20 rounded-full bg-[var(--c-purple)]/30 blur-xl"></div>
            </div>
        </div>
    </section>
</template>

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

        const observer = new IntersectionObserver((entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fade-in-up');
                    // Stagger animation for each step
                    const steps = entry.target.closest('.relative').querySelectorAll('.group');
                    steps.forEach((step, index) => {
                        step.style.transitionDelay = `${index * 0.2}s`;
                    });
                }
            });
        }, observerOptions);

        // Observe the container
        const container = document.querySelector('.relative.mx-auto');
        if (container) {
            observer.observe(container);
        }
    },
};
</script>

<style scoped>
/* Custom animations */
@keyframes float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.15;
    }
    50% {
        transform: translateY(-10px) rotate(180deg);
        opacity: 0.4;
    }
}

@keyframes pulse-slow {
    0%,
    100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

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

/* Scroll animation */
.group {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.6s ease-out,
        transform 0.6s ease-out;
}

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

/* Button styles */
.mystic-btn {
    position: relative;
    overflow: hidden;
}

.mystic-btn-primary {
    background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
    box-shadow: 0 0 20px rgba(125, 91, 166, 0.7);
}

.mystic-btn-primary:hover {
    box-shadow: 0 0 30px rgba(125, 91, 166, 0.9);
}

.mystic-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
    z-index: 1;
}

.mystic-btn:hover::before {
    transform: translateX(100%);
}

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

/* Responsive design */
@media (max-width: 768px) {
    .group {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .group:nth-child(2) {
        flex-direction: column-reverse;
    }

    .transform.pl-4,
    .transform.pr-4 {
        padding-left: 0;
        padding-right: 0;
    }

    .relative.mx-auto {
        padding: 0 1rem;
    }

    .absolute.left-1\/2 {
        display: none;
    }
}

/* Smooth transitions */
* {
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        transform 0.3s ease,
        opacity 0.3s ease;
}
</style>
