<script setup lang="ts">
import LandingLayout from '@/layouts/app/LandingLayout.vue';
import { ref } from 'vue';

interface UserForm {
    fullname: string;
    email: string;
}

const userForm = ref<UserForm>({
    fullname: '',
    email: '',
});

const loading = ref<boolean>(false);
const appointmentConfirmed = ref<boolean>(false);

const handleAppointment = () => {
    loading.value = true;

    // Simuler un délai de traitement
    setTimeout(() => {
        loading.value = false;
        appointmentConfirmed.value = true;

        // Réinitialiser le formulaire après confirmation
        userForm.value = {
            fullname: '',
            email: '',
        };
    }, 1500);
};
</script>

<template>
    <LandingLayout>
        <!-- Background container - only affects the main content -->
        <div class="relative min-h-screen">
            <!-- Background with mystical elements - only for main content -->
            <div class="absolute inset-0 z-0 overflow-hidden">
                <!-- Main background with gradient overlay -->
                <div class="absolute inset-0 bg-gradient-to-br from-[var(--light-ivory)]/95 via-white/90 to-[var(--linen)]/80"></div>

                <!-- Background image with very low opacity -->
                <div class="absolute inset-0 bg-cover bg-center bg-no-repeat opacity-50" style="background-image: url('/aganda-back.jpg')"></div>

                <!-- Decorative floating elements -->
                <div class="absolute top-1/4 left-1/4 h-32 w-32 rounded-full bg-[var(--subtle-gold)]/10 blur-xl"></div>
                <div class="absolute right-1/4 bottom-1/3 h-40 w-40 rounded-full bg-[var(--midnight-blue)]/5 blur-xl"></div>
                <div class="absolute top-1/3 right-1/3 h-24 w-24 rounded-full bg-[var(--spiritual-earth)]/8 blur-lg"></div>

                <!-- Subtle pattern overlay -->
                <div
                    class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_rgba(0,0,0,0.15)_1px,_transparent_0)] bg-[length:60px_60px] opacity-[0.02]"
                ></div>
            </div>

            <!-- Main content with background -->
            <main class="relative z-10 flex flex-1 justify-center px-4 py-12 sm:px-6 sm:py-16 lg:px-8 lg:py-20">
                <div class="layout-content-container flex w-full max-w-6xl flex-col items-center gap-12 lg:gap-16">
                    <!-- Enhanced Header Section -->
                    <div class="max-w-4xl text-center">
                        <h1 class="mb-6 font-serif text-4xl font-bold text-[var(--midnight-blue)] sm:text-5xl lg:text-6xl">
                            Votre Transformation Spirituelle Commence Ici
                        </h1>
                        <p class="mx-auto max-w-3xl text-lg text-[var(--midnight-blue)]/80 sm:text-xl">
                            Vous sentez que quelque chose vous appelle vers une vie plus alignée ?
                            <span class="font-semibold text-[var(--spiritual-earth)]">Votre âme cherche des réponses</span> et je suis là pour vous
                            guider.
                        </p>
                    </div>

                    <div class="grid max-w-5xl grid-cols-1 gap-6 md:grid-cols-3">
                        <!-- Benefit 1 -->
                        <div class="rounded-2xl border border-white/50 bg-white/60 p-6 text-center backdrop-blur-sm">
                            <div class="mb-4 flex justify-center">
                                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--subtle-gold)]/20">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                    </svg>
                                </div>
                            </div>
                            <h3 class="mb-3 font-serif text-xl font-bold text-[var(--midnight-blue)]">Clarté Immédiate</h3>
                            <p class="text-[var(--midnight-blue)]/70">
                                Obtenez des réponses claires à vos questions les plus profondes et libérez-vous des doutes qui vous retiennent
                            </p>
                        </div>

                        <!-- Benefit 2 -->
                        <div class="rounded-2xl border border-white/50 bg-white/60 p-6 text-center backdrop-blur-sm">
                            <div class="mb-4 flex justify-center">
                                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--subtle-gold)]/20">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" />
                                        <path d="M12 6V12L15 15" />
                                    </svg>
                                </div>
                            </div>
                            <h3 class="mb-3 font-serif text-xl font-bold text-[var(--midnight-blue)]">Guidance Personnalisée</h3>
                            <p class="text-[var(--midnight-blue)]/70">
                                Une approche unique adaptée à votre énergie et votre chemin de vie pour des résultats transformateurs
                            </p>
                        </div>

                        <!-- Benefit 3 -->
                        <div class="rounded-2xl border border-white/50 bg-white/60 p-6 text-center backdrop-blur-sm">
                            <div class="mb-4 flex justify-center">
                                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--subtle-gold)]/20">
                                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                        <path
                                            d="M21 12.79C21 18.43 16.64 23 11.5 23C6.36 23 2 18.43 2 12.79C2 7.15 6.36 2.58 11.5 2.58C16.64 2.58 21 7.15 21 12.79Z"
                                        />
                                        <path d="M15 8L11 12L9 10" />
                                    </svg>
                                </div>
                            </div>
                            <h3 class="mb-3 font-serif text-xl font-bold text-[var(--midnight-blue)]">Transformation Durable</h3>
                            <p class="text-[var(--midnight-blue)]/70">
                                Ne vous contentez pas de solutions temporaires. Créez les changements profonds que votre âme appelle
                            </p>
                        </div>
                    </div>

                    <!-- Call to Action Text -->
                    <div class="max-w-3xl text-center">
                        <div class="rounded-2xl border border-[var(--subtle-gold)]/30 bg-[var(--light-ivory)]/50 p-8 backdrop-blur-sm">
                            <h2 class="mb-4 font-serif text-2xl font-bold text-[var(--spiritual-earth)]">
                                Le Moment Est Venu de Dire "Oui" à Votre Voyage Intérieur
                            </h2>
                            <p class="mb-4 text-lg text-[var(--midnight-blue)]/80">
                                <span class="font-semibold">Des centaines de personnes</span> ont déjà transformé leur vie grâce à cette guidance.
                                Elles ont trouvé la <span class="font-semibold text-[var(--spiritual-earth)]">paix intérieure</span>, la
                                <span class="font-semibold text-[var(--spiritual-earth)]">clarté mentale</span> et la
                                <span class="font-semibold text-[var(--spiritual-earth)]">confiance</span> pour avancer.
                            </p>
                            <p class="text-lg text-[var(--midnight-blue)]/80">
                                <span class="font-bold">Et vous ?</span> Qu'attendez-vous pour découvrir ce que l'univers a prévu pour vous ?
                            </p>
                        </div>
                    </div>

                    <!-- Confirmation Message -->
                    <div v-if="appointmentConfirmed" class="w-full max-w-2xl">
                        <div class="rounded-2xl border border-green-200 bg-green-50/80 p-8 text-center shadow-xl backdrop-blur-sm">
                            <div class="mb-6 flex justify-center">
                                <div class="flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
                                    <svg class="h-8 w-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                    </svg>
                                </div>
                            </div>
                            <h2 class="mb-4 font-serif text-2xl font-bold text-green-800">Magnifique ! Votre Demande Est Enregistrée</h2>
                            <p class="mb-4 text-green-700"><strong>Félicitations pour ce premier pas vers votre transformation !</strong></p>
                            <p class="mb-6 text-green-700">
                                Je vous contacte dans les 24 heures pour échanger sur vos besoins et convenir du meilleur moment pour votre
                                consultation personnalisée.
                            </p>
                            <button
                                @click="appointmentConfirmed = false"
                                class="rounded-xl bg-green-600 px-6 py-3 font-semibold text-white transition-colors hover:bg-green-700"
                            >
                                Prendre un nouveau rendez-vous
                            </button>
                        </div>
                    </div>

                    <!-- Form Card -->
                    <div v-else class="w-full max-w-md">
                        <div class="rounded-2xl border border-white/50 bg-white/80 p-8 shadow-xl backdrop-blur-sm">
                            <div class="mb-8 text-center">
                                <h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Réservez Votre Appel Découverte</h2>
                                <p class="mt-3 text-[var(--midnight-blue)]/70">
                                    <strong>Offert :</strong> 15 minutes pour identifier vos blocages et créer un plan d'action personnalisé
                                </p>
                            </div>

                            <form class="flex flex-col gap-6" @submit.prevent="handleAppointment">
                                <!-- Name Input -->
                                <div class="group">
                                    <label class="mb-3 block text-sm font-semibold text-[var(--midnight-blue)]" for="name">
                                        Votre Prénom et Nom
                                    </label>
                                    <div class="relative">
                                        <input
                                            class="form-input w-full rounded-xl border-2 border-[var(--linen)] bg-white/80 p-4 text-base text-[var(--midnight-blue)] transition-all duration-300 placeholder:text-[var(--midnight-blue)]/40 focus:border-[var(--subtle-gold)] focus:bg-white focus:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)]/20"
                                            id="name"
                                            name="name"
                                            placeholder="Comment souhaitez-vous que je vous appelle ?"
                                            type="text"
                                            v-model="userForm.fullname"
                                            required
                                        />
                                        <div
                                            class="pointer-events-none absolute inset-0 rounded-xl border-2 border-transparent transition-all duration-300 group-focus-within:border-[var(--subtle-gold)]/30"
                                        ></div>
                                    </div>
                                </div>

                                <!-- Email Input -->
                                <div class="group">
                                    <label class="mb-3 block text-sm font-semibold text-[var(--midnight-blue)]" for="email">
                                        Votre Meilleur Email
                                    </label>
                                    <div class="relative">
                                        <input
                                            class="form-input w-full rounded-xl border-2 border-[var(--linen)] bg-white/80 p-4 text-base text-[var(--midnight-blue)] transition-all duration-300 placeholder:text-[var(--midnight-blue)]/40 focus:border-[var(--subtle-gold)] focus:bg-white focus:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)]/20"
                                            id="email"
                                            name="email"
                                            placeholder="Où puis-je vous envoyer les détails ?"
                                            type="email"
                                            v-model="userForm.email"
                                            required
                                        />
                                        <div
                                            class="pointer-events-none absolute inset-0 rounded-xl border-2 border-transparent transition-all duration-300 group-focus-within:border-[var(--subtle-gold)]/30"
                                        ></div>
                                    </div>
                                </div>

                                <!-- Urgency CTA -->
                                <div class="rounded-xl border border-[var(--subtle-gold)] bg-[var(--light-ivory)]/50 p-4 text-center">
                                    <p class="text-sm font-semibold text-[var(--spiritual-earth)]">
                                        ⚡ Places limitées - Ne laissez pas le doute vous priver de votre transformation
                                    </p>
                                </div>

                                <!-- Submit Button -->
                                <button
                                    class="group relative mt-2 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] px-8 text-lg font-bold tracking-wide text-white shadow-lg transition-all duration-500 hover:from-[var(--spiritual-earth)] hover:to-[var(--midnight-blue)] hover:shadow-xl disabled:cursor-not-allowed disabled:opacity-50"
                                    type="submit"
                                    :disabled="loading || !userForm.fullname || !userForm.email"
                                >
                                    <!-- Shine effect -->
                                    <span
                                        class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-full"
                                    ></span>

                                    <!-- Button content -->
                                    <span class="relative z-10 flex items-center gap-3">
                                        <svg v-if="loading" class="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
                                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                            <path
                                                class="opacity-75"
                                                fill="currentColor"
                                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
                                            ></path>
                                        </svg>
                                        <span>{{ loading ? 'Envoi en cours...' : '✨ Oui, je veux ma consultation offerte !' }}</span>
                                    </span>
                                </button>

                                <!-- Security Note -->
                                <p class="mt-4 text-center text-xs text-[var(--midnight-blue)]/60">
                                    🔒 Confidentialité absolue • Sans engagement • Guidance 100% personnalisée
                                </p>
                            </form>
                        </div>
                    </div>

                    <!-- Testimonial Section -->
                    <div class="max-w-4xl text-center">
                        <div class="rounded-2xl border border-white/50 bg-white/50 p-8 backdrop-blur-sm">
                            <h3 class="mb-6 font-serif text-2xl font-bold text-[var(--midnight-blue)]">Ils Ont Osé le Pas Décisif</h3>
                            <div class="grid gap-6 md:grid-cols-2">
                                <div class="text-left">
                                    <p class="mb-4 text-[var(--midnight-blue)]/80 italic">
                                        "Je traînais des incertitudes depuis des années. En une seule séance, j'ai trouvé la clarté qui m'a changé la
                                        vie. Merci !"
                                    </p>
                                    <p class="font-semibold text-[var(--spiritual-earth)]">- Marie, 34 ans</p>
                                </div>
                                <div class="text-left">
                                    <p class="mb-4 text-[var(--midnight-blue)]/80 italic">
                                        "La guidance reçue a transformé ma relation avec moi-même et avec les autres. Je me sens enfin alignée avec
                                        mon vrai moi."
                                    </p>
                                    <p class="font-semibold text-[var(--spiritual-earth)]">- Thomas, 41 ans</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Final CTA -->
                    <div class="max-w-2xl text-center">
                        <div class="rounded-2xl bg-gradient-to-r from-[var(--subtle-gold)]/20 to-[var(--spiritual-earth)]/20 p-6">
                            <h3 class="mb-4 font-serif text-xl font-bold text-[var(--midnight-blue)]">🌟 Votre Avenir Vous Attend</h3>
                            <p class="text-[var(--midnight-blue)]/80">
                                Ne laissez pas le quotidien étouffer l'appel de votre âme.
                                <strong>Votre transformation commence par un simple "oui"</strong>.
                            </p>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </LandingLayout>
</template>

<style scoped>
/* Custom animations */
@keyframes float {
    0%,
    100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.floating {
    animation: float 6s ease-in-out infinite;
}

/* Smooth transitions for form elements */
.form-input {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure the background doesn't leak into footer */
.relative.min-h-screen {
    background: transparent;
}
</style>
