<template>
    <div class="relative flex items-center justify-center py-20 text-center sm:py-32">
        <div class="absolute inset-0 overflow-hidden">
            <div
                class="absolute inset-0 bg-cover bg-center"
                style="
                    background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCYwDtbzamxSUEWCWG7j3saRw40YQI6KQIVhrw_IrJI8FZXKKHOYej_hGrkM6B5S_MiY-vZ3sWqQDJdPEiYnuH81hSwoHOwfuZWZqY_QoW2UvbtvqCVIiFzd0wk-P63V9j-AgIYgqtonlEzqX1FvYGPZrsocOKx6sArVQACeo6MrVYkm2IVwDGWFyFL0L5U9bzRD8-Zo7hRvn_1hmJxOPS72z61S3jZnDTZPQe6tX9_jJk8ei7qludF6Gs-Qb92jXbRR68FpIoxPHg');
                    filter: blur(4px) brightness(0.7);
                "
            ></div>
            <div class="absolute inset-0 bg-gradient-to-t from-[var(--light-ivory)] via-transparent to-transparent"></div>
        </div>
        <div class="relative z-10 flex max-w-3xl flex-col items-center gap-6">
            <h1 class="text-5xl font-bold text-[var(--pure-white)] md:text-7xl" style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)">
                Révélez Votre
                <span class="citadel-script text-6xl text-[var(--subtle-gold)] md:text-8xl">Empire</span>
                Intérieur
            </h1>
            <p class="max-w-2xl text-lg text-[var(--linen)]">
                Embrassez la sagesse intemporelle de l’Oracle de Kris Saint Ange, un guide stratégique pour naviguer votre destin avec clarté et
                confiance.
            </p>
            <button
                class="mt-4 flex h-12 max-w-[480px] min-w-[120px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-8 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-[var(--subtle-gold)]/30 hover:shadow-lg"
            >
                <span class="truncate">Découvrir Votre Oracle</span>
            </button>
        </div>
    </div>
</template>
