<script setup lang="ts">
import { Link, router } from '@inertiajs/vue3';
import { onMounted, ref } from 'vue';

const isMobileMenuOpen = ref(false);
const scrolled = ref(false);

const toggleMobileMenu = () => {
    isMobileMenuOpen.value = !isMobileMenuOpen.value;
};

const goToShuffle = () => {
    router.visit('/tirage');
};

onMounted(() => {
    const handleScroll = () => {
        scrolled.value = window.scrollY > 20;
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
});
</script>

<template>
    <div
        class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden bg-gradient-to-br from-[var(--light-ivory)]/30 via-white to-[var(--linen)]/20"
    >
        <!-- Background decorative elements -->
        <div class="fixed inset-0 z-0 overflow-hidden">
            <!-- Subtle gradient orbs -->
            <div class="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-[var(--subtle-gold)]/10 blur-3xl"></div>
            <div class="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-[var(--midnight-blue)]/5 blur-3xl"></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:40px_40px] opacity-[0.02]"
            ></div>
        </div>

        <div class="layout-container relative z-10 flex h-full grow flex-col">
            <!-- Enhanced Header -->
            <header
                class="sticky top-0 z-50 flex items-center justify-between px-4 py-4 transition-all duration-500 md:px-10 lg:px-20"
                :class="scrolled ? 'bg-white/90 py-3 shadow-sm backdrop-blur-md' : 'bg-transparent py-4'"
            >
                <!-- Logo with natural styling (no rounding, no shadow) -->
                <div class="flex items-center gap-3">
                    <img src="logo_or.png" alt="Logo" class="relative h-16 w-16 object-cover md:h-20 md:w-20" />
                    <div class="hidden md:block">
                        <h1 class="font-audrey text-[var(--midnight-blue)]">KRIS SAINT ANGE</h1>
                    </div>
                </div>

                <!-- Desktop Navigation -->
                <nav class="hidden flex-1 items-center justify-center gap-8 md:flex">
                    <Link
                        class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
                        href="/"
                    >
                        <span class="relative z-10">Accueil</span>
                        <div
                            class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
                        ></div>
                    </Link>
                    <Link
                        class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
                        href="/tirage"
                    >
                        <span class="relative z-10">L'Oracle</span>
                        <div
                            class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
                        ></div>
                    </Link>
                    <a
                        v-if="$page.url === '/'"
                        class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
                        href="#testimonials"
                    >
                        <span class="relative z-10">Témoignages</span>
                        <div
                            class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
                        ></div>
                    </a>
                    <Link
                        class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
                        href="/rendez-vous"
                    >
                        <span class="relative z-10">Prendre Rendez-vous</span>
                        <div
                            class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
                        ></div>
                    </Link>
                </nav>

                <!-- CTA Button & Mobile Menu -->
                <div class="flex items-center gap-4">
                    <button
                        v-if="$page.url === '/'"
                        @click="goToShuffle"
                        class="group relative flex h-12 min-w-[120px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] px-6 text-sm 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"
                    >
                        <span class="relative z-10 flex items-center gap-2"> Commencer </span>
                        <div
                            class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
                        ></div>
                    </button>

                    <button
                        @click="toggleMobileMenu"
                        class="relative flex h-10 w-10 items-center justify-center rounded-lg border border-[var(--linen)] bg-white/50 backdrop-blur-sm transition-all duration-300 hover:bg-white hover:shadow-sm md:hidden"
                    >
                        <svg
                            class="h-5 w-5 text-[var(--midnight-blue)] transition-transform duration-300"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor"
                        >
                            <path
                                v-if="!isMobileMenuOpen"
                                stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M4 6h16M4 12h16M4 18h16"
                            ></path>
                            <path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                    </button>
                </div>
            </header>

            <!-- Enhanced Mobile Menu -->
            <div
                v-if="isMobileMenuOpen"
                class="fixed inset-0 z-40 bg-white/95 backdrop-blur-md transition-all duration-500 md:hidden"
                :class="isMobileMenuOpen ? 'opacity-100' : 'pointer-events-none opacity-0'"
            >
                <div class="flex min-h-screen flex-col items-center justify-center gap-8 p-8">
                    <button
                        @click="toggleMobileMenu"
                        class="absolute top-6 right-6 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--light-ivory)]"
                    >
                        <svg class="h-5 w-5 text-[var(--midnight-blue)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>

                    <div class="mb-8 text-center">
                        <!-- Mobile logo without rounding or shadow -->
                        <img src="logo_or.png" alt="Logo" class="mx-auto mb-4 h-20 w-20 object-cover" />
                        <h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h2>
                    </div>

                    <nav class="flex w-full max-w-sm flex-col items-center gap-6">
                        <Link
                            class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
                            href="/"
                            @click="toggleMobileMenu"
                        >
                            Accueil
                        </Link>
                        <Link
                            class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
                            href="/tirage"
                            @click="toggleMobileMenu"
                        >
                            L'Oracle
                        </Link>
                        <Link
                            class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
                            href="#testimonials"
                            @click="toggleMobileMenu"
                        >
                            Témoignages
                        </Link>
                        <Link
                            class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
                            href="/rendez-vous"
                            @click="toggleMobileMenu"
                        >
                            Prendre Rendez-vous
                        </Link>
                    </nav>

                    <button
                        @click="goToShuffle"
                        class="mt-8 w-full max-w-sm rounded-xl bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] py-4 text-lg font-bold text-white shadow-lg transition-all duration-300 hover:shadow-xl"
                    >
                        Commencer la Lecture
                    </button>
                </div>
            </div>

            <!-- Main Content -->
            <main class="flex flex-1 flex-col items-center">
                <slot />
            </main>

            <!-- Enhanced Footer -->
            <footer class="mt-16 border-t border-[var(--linen)] bg-gradient-to-b from-white to-[var(--light-ivory)]/30 py-16">
                <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                    <div class="flex flex-col items-center gap-12">
                        <!-- Logo and description - logo without rounding or shadow -->
                        <div class="max-w-md text-center">
                            <img src="logo_or.png" alt="Logo" class="mx-auto mb-4 h-16 w-16 object-cover" />

                            <h3 class="mb-2 font-audrey text-[var(--midnight-blue)]">KRIS SAINT ANGE</h3>
                        </div>

                        <!-- Links -->
                        <div class="flex flex-wrap justify-center gap-x-8 gap-y-4">
                            <Link
                                class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
                                href="/"
                            >
                                Accueil
                                <span
                                    class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
                                ></span>
                            </Link>
                            <a
                                v-if="$page.url === '/'"
                                class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
                                href="#testimonials"
                            >
                                Témoignages
                                <span
                                    class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
                                ></span>
                            </a>
                            <Link
                                class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
                                href="/politique-confidalite"
                            >
                                Politique de Confidentialité
                                <span
                                    class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
                                ></span>
                            </Link>
                            <Link
                                class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
                                href="/term-condition"
                            >
                                Conditions d'Utilisation
                                <span
                                    class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
                                ></span>
                            </Link>
                        </div>

                        <!-- Social Links - Modified without circles -->
                        <div class="flex flex-col items-center gap-4">
                            <p class="text-sm font-medium text-[var(--midnight-blue)]/60">Suivez-moi</p>
                            <div class="flex justify-center gap-8">
                                <Link
                                    class="group flex flex-col items-center gap-2 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:text-[var(--spiritual-earth)]"
                                    href="#"
                                >
                                    <svg
                                        class="h-6 w-6 transition-transform duration-300 group-hover:scale-110"
                                        fill="currentColor"
                                        viewBox="0 0 256 256"
                                    >
                                        <path
                                            d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"
                                        ></path>
                                    </svg>
                                    <span class="text-xs">Instagram</span>
                                </Link>
                                <Link
                                    class="group flex flex-col items-center gap-2 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:text-[var(--spiritual-earth)]"
                                    href="#"
                                >
                                    <svg
                                        class="h-6 w-6 transition-transform duration-300 group-hover:scale-110"
                                        fill="currentColor"
                                        viewBox="0 0 256 256"
                                    >
                                        <path
                                            d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"
                                        ></path>
                                    </svg>
                                    <span class="text-xs">Facebook</span>
                                </Link>
                                <Link
                                    class="group flex flex-col items-center gap-2 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:text-[var(--spiritual-earth)]"
                                    href="#"
                                >
                                    <svg
                                        class="h-6 w-6 transition-transform duration-300 group-hover:scale-110"
                                        fill="currentColor"
                                        viewBox="0 0 256 256"
                                    >
                                        <path
                                            d="M247.39,68.94A8,8,0,0,0,240,64H209.57A48.66,48.66,0,0,0,168.1,40a46.91,46.91,0,0,0-33.75,13.7A47.9,47.9,0,0,0,120,88v6.09C79.74,83.47,46.81,50.72,46.46,50.37a8,8,0,0,0-13.65,4.92c-4.31,47.79,9.57,79.77,22,98.18a110.93,110.93,0,0,0,21.88,24.2c-15.23,17.53-39.21,26.74-39.47,26.84a8,8,0,0,0-3.85,11.93c.75,1.12,3.75,5.05,11.08,8.72C53.51,229.7,65.48,232,80,232c70.67,0,129.72-54.42,135.75-124.44l29.91-29.9A8,8,0,0,0,247.39,68.94Zm-45,29.41a8,8,0,0,0-2.32,5.14C196,166.58,143.28,216,80,216c-10.56,0-18-1.4-23.22-3.08,11.51-6.25,27.56-17,37.88-32.48A8,8,0,0,0,92,169.08c-.47-.27-43.91-26.34-44-96,16,13,45.25,33.17,78.67,38.79A8,8,0,0,0,136,104V88a32,32,0,0,1,9.6-22.92A30.94,30.94,0,0,1,167.9,56c12.66.16,24.49,7.88,29.44,19.21A8,8,0,0,0,204.67,80h16Z"
                                        ></path>
                                    </svg>
                                    <span class="text-xs">WhatsApp</span>
                                </Link>
                            </div>
                        </div>

                        <!-- Copyright -->
                        <div class="w-full max-w-md border-t border-[var(--linen)] pt-8 text-center">
                            <p class="text-sm text-[var(--midnight-blue)]/60">© 2025 Kris Saint Ange. Tous droits réservés.</p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
</template>

<style scoped>
/* Smooth transitions for all interactive elements */
* {
    transition-property: color, background-color, border-color, transform, box-shadow;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

.logo-container {
    background: linear-gradient(to bottom right, white, #f9f7f2);
    padding: 8px;
    border-radius: 8px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--light-ivory);
}

::-webkit-scrollbar-thumb {
    background: var(--subtle-gold);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--spiritual-earth);
}
</style>
