<template>
    <section class="relative -mx-[calc((100vw-100%)/2)] w-screen 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-[#1e1b4b]/80"
                style="background: linear-gradient(135deg, rgba(76, 29, 149, 0.7), rgba(30, 27, 75, 0.8))"
            ></div>
        </div>

        <div class="relative z-10 mx-auto max-w-5xl px-4">
            <div
                class="group relative overflow-hidden rounded-3xl border border-[#4c1d95]/30 bg-gradient-to-br from-black/80 to-[#1a0b2e] p-8 text-center shadow-2xl ring-1 ring-[#4c1d95]/40 backdrop-blur-sm md:p-12"
            >
                <!-- Soft radial glows -->

                <!-- 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">
                    <h2 class="text-4xl font-black text-white drop-shadow-md md:text-5xl">Amplify Your Oracle</h2>
                    <p class="mx-auto mt-4 max-w-2xl text-lg text-white/90 drop-shadow-md">
                        For deeper guidance, book a personalized consultation with Kris.
                    </p>

                    <div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
                        <button
                            @click="goToOffers"
                            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-[#f59e0b] to-[#eab308] px-8 font-bold tracking-wide text-[#1e1b4b] shadow-lg transition-all duration-300 hover:shadow-[#f59e0b]/40"
                        >
                            <span class="relative z-10">Book a 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="goToBooking"
                            class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[#4c1d95] bg-transparent px-8 font-bold text-white backdrop-blur-sm transition-all hover:bg-[#4c1d95]"
                        >
                            Book a Consultation
                        </button>
                    </div>

                    <p class="mt-6 text-xs text-white/70 backdrop-blur-sm">Secure payment</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);
}
</style>
