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

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

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

const goToBooking = () => {
    router.visit('/rendez-vous');
};

// Handle scroll effect for header
onMounted(() => {
    window.addEventListener('scroll', () => {
        isScrolled.value = window.scrollY > 50;
    });
});
</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(--c-deep-navy)] via-[var(--c-purple)] to-black"
    >
        <div class="layout-container flex h-full grow flex-col">
            <!-- Enhanced Header -->
            <header
                class="fixed top-0 z-50 w-full transition-all duration-300"
                :class="isScrolled ? 'bg-black/90 py-2 shadow-xl backdrop-blur-md' : 'bg-transparent py-4'"
            >
                <div class="container mx-auto px-4">
                    <div class="flex items-center justify-between px-6 py-2 whitespace-nowrap">
                        <div class="flex items-center gap-3">
                            <img src="/logo-success.webp" alt="Logo" class="h-12 w-30 transition-transform duration-300 hover:scale-105" />
                        </div>
                        <nav class="hidden items-center gap-8 md:flex">
                            <Link
                                class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                href="/"
                            >
                                Accueil
                                <span
                                    class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
                                ></span>
                            </Link>
                            <Link
                                class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                href="/tirage"
                            >
                                Tirages
                                <span
                                    class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
                                ></span>
                            </Link>
                            <Link
                                class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                href="/"
                            >
                                Témoignages
                                <span
                                    class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
                                ></span>
                            </Link>
                        </nav>
                        <div class="flex items-center gap-4">
                            <button
                                class="mystic-btn mystic-btn-primary group relative inline-flex h-10 min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-sm font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5"
                                @click="goToBooking"
                            >
                                <span class="relative z-10 truncate">Réserver une Session</span>
                                <span
                                    class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
                                ></span>
                            </button>
                            <button class="text-white transition-colors hover:text-[var(--c-gold)] md:hidden" @click="toggleMobileMenu">
                                <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </header>

            <!-- Enhanced Mobile Menu -->
            <div v-if="isMobileMenuOpen" class="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm md:hidden" @click="toggleMobileMenu">
                <div
                    class="absolute top-0 right-0 h-full w-3/4 bg-gradient-to-b from-[var(--c-purple)] to-[var(--c-deep-navy)] p-6 shadow-2xl"
                    @click.stop
                >
                    <div class="mb-8 flex items-center justify-between">
                        <img src="/logo-success.webp" alt="Logo" class="h-10 w-24" />
                        <button @click="toggleMobileMenu" class="text-white">
                            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                            </svg>
                        </button>
                    </div>
                    <nav class="flex flex-col gap-6">
                        <Link
                            class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
                            href="/"
                            @click="toggleMobileMenu"
                            >Accueil</Link
                        >
                        <Link
                            class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
                            href="/tirage"
                            @click="toggleMobileMenu"
                            >Tirages</Link
                        >
                        <Link
                            class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
                            href="/"
                            @click="toggleMobileMenu"
                            >Témoignages</Link
                        >
                        <button
                            class="mystic-btn mystic-btn-primary group relative mt-4 inline-flex h-12 w-full items-center justify-center overflow-hidden rounded-full px-6 text-sm font-bold text-white shadow-lg transition-all duration-300"
                            @click="
                                goToBooking;
                                toggleMobileMenu();
                            "
                        >
                            <span class="relative z-10 truncate">Réserver une Session</span>
                        </button>
                    </nav>
                </div>
            </div>

            <main class="relative flex min-h-screen w-full flex-col items-center pt-20">
                <slot />
            </main>

            <!-- Enhanced Footer -->
            <footer class="relative border-t border-white/10 bg-gradient-to-t from-black to-[var(--c-deep-navy)] text-white">
                <div class="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></div>
                <div class="mx-auto max-w-7xl px-6 py-14">
                    <div class="grid gap-10 md:grid-cols-3">
                        <!-- Brand + tagline -->
                        <div>
                            <div class="flex items-center gap-3">
                                <img src="/logo-success.webp" alt="Logo" class="h-12 w-30" />
                            </div>
                            <p class="mt-4 max-w-sm text-sm text-white/70">
                                Guidance et clarté à travers des tirages inspirés et un accompagnement personnalisé.
                            </p>
                            <div class="mt-6 flex gap-4">
                                <a class="social-icon group" href="#" aria-label="Instagram">
                                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
                                        <rect x="32" y="32" width="192" height="192" rx="48"></rect>
                                        <circle cx="128" cy="128" r="40" fill="black"></circle>
                                    </svg>
                                </a>
                                <a class="social-icon group" href="#" aria-label="Facebook">
                                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
                                        <path d="M176 24h-32a56 56 0 0 0-56 56v24H64v32h24v96h32v-96h32l8-32h-40V80a16 16 0 0 1 16-16h32Z"></path>
                                    </svg>
                                </a>
                                <a class="social-icon group" href="#" aria-label="X">
                                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
                                        <path
                                            d="M152.23,116.19l62.51-78.85H184.2l-38.79,49-30.06-49H80.2l43.9,70.44L60.44,218.66H99l42.31-53.56,32.63,53.56h35.09Z"
                                        ></path>
                                    </svg>
                                </a>
                            </div>
                        </div>

                        <!-- Quick links -->
                        <div class="grid grid-cols-2 gap-8 md:grid-cols-2">
                            <div>
                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white">Navigation</h4>
                                <ul class="space-y-3 text-sm">
                                    <li>
                                        <Link class="footer-link group" href="/">Accueil</Link>
                                    </li>
                                    <li>
                                        <a class="footer-link group" href="#testimonials">Témoignages</a>
                                    </li>
                                    <li>
                                        <Link class="footer-link group" href="/tirage">Lectures</Link>
                                    </li>
                                    <li>
                                        <Link class="footer-link group" href="/rendez-vous">Rendez-vous</Link>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white">Légal</h4>
                                <ul class="space-y-3 text-sm">
                                    <li>
                                        <Link class="footer-link group" href="/politique-confidalite">Politique de Confidentialité</Link>
                                    </li>
                                    <li>
                                        <Link class="footer-link group" href="/term-condition">Conditions d'Utilisation</Link>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- Newsletter -->
                        <div>
                            <h4 class="mb-4 text-lg font-bold tracking-wider text-white">Newsletter</h4>
                            <p class="mb-4 text-sm text-white/70">Recevez des inspirations et offres directement dans votre boîte mail.</p>
                            <form class="mt-2 flex max-w-md overflow-hidden rounded-full border border-white/20 bg-white/5 backdrop-blur-sm">
                                <input
                                    type="email"
                                    placeholder="Votre e-mail"
                                    class="w-full bg-transparent px-4 py-3 text-sm text-white placeholder-white/50 focus:outline-none"
                                />
                                <button
                                    type="button"
                                    class="mystic-btn mystic-btn-secondary px-4 text-sm font-bold whitespace-nowrap text-white transition-all"
                                >
                                    S'abonner
                                </button>
                            </form>
                        </div>
                    </div>

                    <div class="mt-12 border-t border-white/10 pt-6 text-center text-xs text-white/60 sm:text-sm">
                        © 2024 Kris Saint Ange. Tous droits réservés.
                    </div>
                </div>
            </footer>
        </div>
    </div>
</template>

<style scoped>
/* Button styles matching the hero section */
.mystic-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.mystic-btn-primary {
    background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
    box-shadow: 0 0 20px rgba(125, 91, 166, 0.7);
}

.mystic-btn-primary:hover {
    box-shadow: 0 0 30px rgba(125, 91, 166, 0.9);
    transform: translateY(-2px);
}

.mystic-btn-secondary {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    backdrop-filter: blur(10px);
}

.mystic-btn-secondary:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(245, 158, 11, 0.3) 100%);
    border-color: rgba(255, 215, 0, 0.6);
    transform: translateY(-1px);
}

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

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

/* Social icons */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.social-icon:hover {
    background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(125, 91, 166, 0.4);
}

/* Footer links */
.footer-link {
    position: relative;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
}

.footer-link:hover {
    color: #ffd700;
    padding-left: 8px;
}

.footer-link::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    background: #ffd700;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s ease;
}

.footer-link:hover::before {
    opacity: 1;
    left: 0;
}

/* Custom color variables */
:root {
    --c-purple: #4c1d95;
    --c-deep-navy: #1e1b4b;
    --c-gold: rgba(245, 158, 11, 0.7);
}

/* Smooth transitions for all elements */
* {
    transition:
        color 0.3s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

/* Mobile menu animation */
.fixed {
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Header scroll effect */
header {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Newsletter form focus states */
input:focus {
    box-shadow: 0 0 0 2px rgba(125, 91, 166, 0.5);
}
</style>
