<script lang="ts" setup>
import { router } from '@inertiajs/vue3';
import { onMounted, ref } from 'vue';

const isMounted = ref(false);
const buttonHover = ref(false);

onMounted(() => {
    setTimeout(() => {
        isMounted.value = true;
    }, 100);
});

const goToShuffle = () => {
    router.visit('/tirage');
};
</script>

<template>
    <section class="relative flex min-h-[60vh] items-center justify-center overflow-hidden px-4 py-20 text-center md:min-h-[80vh]">
        <!-- Animated background elements -->
        <div class="absolute inset-0 bg-black/50"></div>
        <div class="absolute top-0 left-0 h-full w-full">
            <div
                class="absolute top-1/4 left-1/4 h-72 w-72 animate-pulse rounded-full bg-purple-500 opacity-30 mix-blend-soft-light blur-xl filter"
            ></div>
            <div
                class="absolute right-1/4 bottom-1/3 h-72 w-72 animate-bounce rounded-full bg-yellow-300 opacity-30 mix-blend-soft-light blur-xl filter delay-1000"
                style="animation-duration: 15s"
            ></div>
        </div>

        <div class="relative z-10 mx-auto max-w-3xl">
            <!-- Animated heading with hover effect -->
            <h1
                class="mb-4 transform text-4xl font-bold text-white transition-all duration-700 md:text-6xl"
                :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
            >
                <span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-purple-200">Libérez</span>
                <span class="mx-2 inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-purple-200">votre</span>
                <span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-yellow-300">potentiel</span>
                <span class="mt-2 block"></span>
                <span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-purple-200">avec Toutes</span>
                <span class="mx-2 inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-purple-200">les</span>
                <span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-yellow-300">Clés du Succès</span>
            </h1>

            <!-- Animated paragraph -->
            <p
                class="mb-8 transform text-lg text-white/80 transition-all delay-200 duration-1000 md:text-xl"
                :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
            >
                Gagnez en clarté et en direction avec un coaching personnalisé et des tirages d'oracle.
                <span class="mt-2 block md:inline-block">Découvrez votre chemin vers le succès et l'épanouissement.</span>
            </p>

            <!-- Animated buttons with enhanced hover effects -->
            <div
                class="flex transform flex-wrap justify-center gap-4 transition-all delay-500 duration-1000"
                :class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
            >
                <button
                    @mouseenter="buttonHover = true"
                    @mouseleave="buttonHover = false"
                    @click="goToShuffle"
                    class="group relative flex h-14 max-w-[480px] min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-purple-600 to-purple-800 px-8 text-base font-bold text-white shadow-lg shadow-purple-500/30 transition-all duration-500 hover:from-purple-700 hover:to-purple-900 hover:shadow-xl hover:shadow-purple-500/50 focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-black focus:outline-none"
                >
                    <span class="relative z-10 truncate transition-all duration-300 group-hover:scale-105">Essayez 1 carte gratuite</span>
                    <div
                        class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-purple-500 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
                    ></div>
                </button>

                <button
                    @mouseenter="buttonHover = true"
                    @mouseleave="buttonHover = false"
                    @click="goToShuffle"
                    class="group relative flex h-14 max-w-[480px] min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-xl border-2 border-purple-500 bg-transparent px-8 text-base font-bold text-white transition-all duration-500 hover:border-transparent hover:bg-gradient-to-r hover:from-purple-600 hover:to-purple-800 hover:text-white focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-black focus:outline-none"
                >
                    <span class="relative z-10 truncate transition-all duration-300 group-hover:scale-105">Découvrir les tirages</span>
                    <div class="absolute inset-0 bg-white opacity-0 transition-opacity duration-500 group-hover:opacity-10"></div>
                </button>
            </div>
        </div>
    </section>
</template>

<style scoped>
.gradient-bg {
    background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #4a5568 100%);
}

/* Custom animation for text elements */
@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.animate-text-shine {
    background: linear-gradient(to right, #ffffff 20%, #d8b4fe 30%, #fef08a 70%, #ffffff 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
}
</style>
