<template>
    <section class="gradient-bg relative overflow-hidden py-20 text-center sm:py-24">
        <!-- Decorative background elements -->
        <div class="absolute top-0 left-0 h-full w-full opacity-5">
            <div class="absolute top-10 left-10 h-20 w-20 rounded-full border border-[var(--spiritual-earth)]"></div>
            <div class="absolute right-10 bottom-10 h-24 w-24 rounded-full border border-[var(--spiritual-earth)]"></div>
            <div class="absolute top-1/2 left-1/4 h-16 w-16 rounded-full border border-[var(--midnight-blue)]"></div>
        </div>

        <div class="relative z-10">
            <h2 class="transform text-4xl font-bold text-[var(--midnight-blue)] transition-all duration-700 md:text-5xl">
                <span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-[var(--midnight-blue)]/90">
                    Plus Qu’un Guide,
                </span>
                <span class="citadel-script mt-2 block from-yellow-400 to-purple-500 text-5xl md:mt-0 md:ml-2 md:inline-block md:text-6xl">
                    <span class="inline-block cursor-default transition-all duration-500 hover:scale-110 hover:rotate-2">Un</span>
                    <span class="mx-2 inline-block cursor-default transition-all duration-500 hover:scale-110 hover:-rotate-2">Manuscrit</span>
                    <span class="inline-block cursor-default transition-all duration-500 hover:scale-110 hover:rotate-2">Stratégique</span>
                </span>
            </h2>

            <!-- Image placed between heading and text -->
            <div class="mx-auto mt-8 max-w-md transform transition-all duration-700">
                <div class="relative inline-block">
                    <img
                        src="/background/IMG_2240.jpg"
                        alt="Oracle de Kris Saint Ange"
                        class="w-full rounded-2xl shadow-2xl transition-all duration-500 hover:scale-105"
                    />
                    <!-- Decorative frame -->
                    <div class="pointer-events-none absolute inset-0 rounded-2xl border-2 border-[var(--spiritual-earth)]/30"></div>
                    <div class="pointer-events-none absolute -inset-4 rounded-3xl border border-[var(--midnight-blue)]/20"></div>

                    <!-- Floating particles around image -->
                    <div
                        v-for="i in 5"
                        :key="'particle-' + i"
                        class="absolute rounded-full bg-[var(--spiritual-earth)]/40"
                        :class="[
                            i === 1 ? '-top-2 -left-2 h-3 w-3' : '',
                            i === 2 ? '-top-3 right-4 h-2 w-2' : '',
                            i === 3 ? 'bottom-2 -left-3 h-4 w-4' : '',
                            i === 4 ? '-right-2 bottom-4 h-2 w-2' : '',
                            i === 5 ? 'top-4 -right-3 h-3 w-3' : '',
                        ]"
                    ></div>
                </div>
            </div>

            <p class="mx-auto mt-6 max-w-3xl transform text-lg text-[var(--midnight-blue)]/80 transition-all delay-200 duration-1000">
                <span class="inline-block cursor-default transition-all duration-300 hover:text-[var(--midnight-blue)]">
                    L'Oracle de Kris Saint Ange est une boussole pour votre voyage personnel et professionnel.
                </span>
                <span class="mt-2 inline-block cursor-default transition-all duration-300 hover:text-[var(--midnight-blue)]">
                    Chaque carte est une clé pour débloquer votre potentiel et prendre des décisions éclairées.
                </span>
            </p>
        </div>
    </section>
</template>

<style scoped>
.citadel-script {
    font-family: var(--font-sub-title), cursive;
    font-weight: 700;
}

/* Custom animation for the section */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

section {
    animation: fadeInUp 1s ease-out forwards;
}

/* Hover effects for text */
h2 span,
p span {
    transition: all 0.3s ease;
}

/* Custom color variables */
:root {
    --spiritual-earth: #a78bfa;
    --midnight-blue: #1e1b4b;
}

/* Media queries for responsive adjustments */
@media (max-width: 768px) {
    .citadel-script {
        display: block;
        margin-top: 0.5rem;
    }
}
</style>
