<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"
        style="background: linear-gradient(135deg, #1e1b4b, #4c1d95, #000000)"
    >
        <div class="layout-container flex h-full grow flex-col">
            <!-- Enhanced Header with Bigger Font -->
            <header
                class="fixed top-0 z-50 w-full transition-all duration-300"
                :class="isScrolled ? 'bg-gradient-to-t from-[var(--c-deep-navy)] to-black py-2 shadow-xl backdrop-blur-md' : 'bg-transparent py-4'"
            >
                <div class="container mx-auto px-4 sm:px-6">
                    <div class="flex items-center justify-between px-2 py-2 whitespace-nowrap sm:px-6">
                        <div class="flex items-center gap-3">
                            <img
                                src="/logo-success.webp"
                                alt="Logo"
                                class="h-12 w-32 transition-transform duration-300 hover:scale-105 sm:h-14 sm:w-36"
                            />
                        </div>
                        <nav class="hidden items-center gap-6 md:flex lg:gap-10">
                            <Link
                                class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                href="/"
                            >
                                Home
                                <span
                                    class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
                                ></span>
                            </Link>
                            <Link
                                class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                href="/tirage"
                            >
                                Readings
                                <span
                                    class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
                                ></span>
                            </Link>
                            <Link
                                class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                href="/#testimonials"
                            >
                                Testimonials
                                <span
                                    class="absolute bottom-0 left-0 h-1 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-3 sm:gap-4">
                            <button
                                class="mystic-btn mystic-btn-primary group relative hidden h-12 min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-base font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 sm:inline-flex"
                                @click="goToBooking"
                            >
                                <span class="relative z-10 truncate">Book</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="p-2 text-white transition-colors hover:text-[var(--c-gold)] md:hidden" @click="toggleMobileMenu">
                                <svg class="h-7 w-7" 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 with Bigger Font -->
            <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-full max-w-sm 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-12 w-32" />
                        <button @click="toggleMobileMenu" class="p-2 text-white">
                            <svg class="h-7 w-7" 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-4">
                        <Link
                            class="border-b border-white/10 py-5 text-xl font-semibold text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
                            href="/"
                            @click="toggleMobileMenu"
                            >Accueil</Link
                        >
                        <Link
                            class="border-b border-white/10 py-5 text-xl font-semibold 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-5 text-xl font-semibold text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
                            href="/#testimonials"
                            @click="toggleMobileMenu"
                            >Témoignages</Link
                        >
                        <button
                            class="mystic-btn mystic-btn-primary group relative mt-8 inline-flex h-14 w-full items-center justify-center overflow-hidden rounded-full px-6 text-lg font-bold text-white shadow-lg transition-all duration-300"
                            @click="
                                goToBooking();
                                toggleMobileMenu();
                            "
                        >
                            <span class="relative z-10">Réserver une Session</span>
                        </button>
                    </nav>
                </div>
            </div>

            <main class="relative flex min-h-screen w-full flex-col items-center">
                <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-4 py-8 sm:px-6 sm:py-14">
                    <div class="grid gap-8 md:grid-cols-3 lg:gap-10">
                        <!-- Brand + tagline -->
                        <div class="md:col-span-1">
                            <div class="flex items-center gap-3">
                                <img src="/logo-success.webp" alt="Logo" class="h-12 w-32 sm:h-14 sm:w-36" />
                            </div>
                            <p class="mt-4 max-w-sm text-base leading-relaxed text-white/70 sm:text-lg">
                                Guidance and clarity through inspired readings and personalized support.
                            </p>
                            <div class="mt-6 flex gap-3">
                                <a class="social-icon group" href="#" aria-label="Instagram">
                                    <svg class="h-6 w-6 sm:h-7 sm:w-7" 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 sm:h-7 sm:w-7" 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 sm:h-7 sm:w-7" 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-6 sm:gap-8 md:col-span-1 md:grid-cols-2">
                            <div>
                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Navigation</h4>
                                <ul class="space-y-3 text-base sm:space-y-4">
                                    <li>
                                        <Link class="footer-link group" href="/">Home</Link>
                                    </li>
                                    <li>
                                        <a class="footer-link group" href="#testimonials">Testimonials</a>
                                    </li>
                                    <li>
                                        <Link class="footer-link group" href="/tirage">Readings</Link>
                                    </li>
                                    <li>
                                        <Link class="footer-link group" href="/rendez-vous">Book</Link>
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Legal</h4>
                                <ul class="space-y-3 text-base sm:space-y-4">
                                    <li>
                                        <Link class="footer-link group" href="/politique-confidalite">Confidentiality</Link>
                                    </li>
                                    <li>
                                        <Link class="footer-link group" href="/term-condition">Terms</Link>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- Newsletter -->
                        <div class="md:col-span-1 lg:col-span-1">
                            <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Newsletter</h4>
                            <p class="mb-4 text-base leading-relaxed text-white/70 sm:text-lg">
                                Receive inspiration and offers directly in your inbox.
                            </p>
                            <form
                                class="mt-2 flex max-w-md flex-col gap-2 overflow-hidden rounded-full border border-white/20 bg-white/5 backdrop-blur-sm sm:flex-row"
                            >
                                <input
                                    type="email"
                                    placeholder="Your e-mail"
                                    class="w-full bg-transparent px-4 py-3 text-base text-white placeholder-white/50 focus:outline-none"
                                />
                                <button
                                    type="button"
                                    class="mystic-btn mystic-btn-secondary min-w-[120px] px-4 py-3 text-base font-bold whitespace-nowrap text-white transition-all"
                                >
                                    Subscribe
                                </button>
                            </form>
                        </div>
                    </div>

                    <div class="mt-8 border-t border-white/10 pt-6 text-center text-sm text-white/60 sm:mt-12 sm:text-base">
                        © 2025 Kris Saint Ange. All rights reserved.
                    </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;
    display: inline-block;
    padding: 4px 0;
    font-size: 1rem;
}

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

.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);
}

/* Responsive improvements */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Better touch targets for mobile */
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Improve mobile menu spacing */
    .fixed .absolute {
        width: 85%;
        max-width: 320px;
    }
}

@media (max-width: 640px) {
    /* Stack footer columns on very small screens */
    footer .grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Center align footer content on mobile */
    footer .md\\:col-span-1 {
        text-align: center;
    }

    footer .flex {
        justify-content: center;
    }
}

/* Prevent horizontal scroll */
html,
body {
    overflow-x: hidden;
}
</style>
