<template>
    <section class="relative overflow-hidden py-20 sm:py-24">
        <!-- Background image with overlay -->
        <div class="absolute inset-0">
            <img src="/image005.jpg" alt="Background" class="h-full w-full object-cover" />
            <div class="absolute inset-0 bg-gradient-to-br from-[var(--c-purple)]/70 to-[var(--c-deep-navy)]/80"></div>
        </div>

        <div class="relative z-10 mx-auto max-w-5xl px-4">
            <div
                class="group relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)]/80 to-[var(--card)]/90 p-8 text-center shadow-2xl ring-1 ring-[var(--c-purple)]/40 backdrop-blur-sm md:p-12"
            >
                <!-- Soft radial glows -->
                <div class="pointer-events-none absolute -top-24 -left-24 h-56 w-56 rounded-full bg-[var(--c-purple)]/25 blur-3xl"></div>
                <div class="pointer-events-none absolute -right-24 -bottom-24 h-56 w-56 rounded-full bg-[var(--c-gold)]/20 blur-3xl"></div>

                <!-- Hover gold sweep -->
                <!-- <div
                    class="pointer-events-none 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> -->

                <!-- Subtle pattern overlay -->
                <div class="absolute inset-0 opacity-10 mix-blend-soft-light">
                    <div
                        class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjEiLz48L3N2Zz4=')]"
                    ></div>
                </div>

                <div class="relative z-10 flex flex-col items-center">
                    <span
                        class="mb-4 inline-flex items-center rounded-full bg-[var(--c-purple)]/40 px-3 py-1 text-xs font-bold tracking-wider text-[var(--c-white)]/90 ring-1 ring-[var(--c-purple)]/40 backdrop-blur-sm"
                        >Consultation</span
                    >

                    <h2 class="text-4xl font-black text-[var(--c-white)] drop-shadow-md md:text-5xl">Amplifiez Votre Oracle</h2>
                    <p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--c-white)]/90 drop-shadow-md">
                        Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
                    </p>

                    <div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
                        <button
                            @click="goToBooking"
                            class="gold-trail-btn relative inline-flex h-12 min-w-[160px] 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)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40"
                        >
                            <span class="relative z-10">Réserver une Consultation</span>
                            <span
                                class="absolute inset-0 translate-x-[-100%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[100%]"
                            ></span>
                        </button>
                        <button
                            @click="goToOffers"
                            class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[var(--c-purple)] bg-transparent px-8 font-bold text-[var(--c-white)] backdrop-blur-sm transition-all hover:bg-[var(--c-purple)]"
                        >
                            Découvrir les Lectures
                        </button>
                    </div>

                    <p class="mt-6 text-xs text-[var(--c-white)]/70 backdrop-blur-sm">
                        Paiements sécurisés. Annulation possible 24h avant la session.
                    </p>
                </div>
            </div>
        </div>
    </section>
</template>

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

const goToBooking = () => router.visit('/rendez-vous');
const goToOffers = () => router.visit('/tirage');
</script>

<style scoped>
/* Gold trail effect for the primary button */
.gold-trail-btn {
    position: relative;
    overflow: hidden;
}

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

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

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

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