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

const isMobileMenuOpen = ref(false);

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

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

<template>
    <div class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden">
        <div class="layout-container flex h-full grow flex-col">
            <header class="sticky top-0 z-50 bg-black/80 backdrop-blur-sm">
                <div class="container mx-auto px-4">
                    <div class="flex items-center justify-between border-b border-solid border-gray-800 px-6 py-4 whitespace-nowrap">
                        <div class="flex items-center gap-3">
                            <img src="/logo-success.webp" alt="Logo" class="h-12 w-30" />
                        </div>
                        <nav class="hidden items-center gap-8 md:flex">
                            <Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/">Accueil</Link>
                            <Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/tirage">Tirages</Link>
                            <Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/">Testimonial</Link>
                        </nav>
                        <div class="flex items-center gap-4">
                            <button
                                class="hover:bg-opacity-90 flex h-10 max-w-[480px] min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-md bg-[var(--c-purple)] px-6 text-sm font-bold text-white shadow-[var(--c-purple)]/20 shadow-lg transition-all focus:ring-2 focus:ring-[var(--c-purple)] focus:ring-offset-2 focus:ring-offset-black focus:outline-none"
                                @click="goToBooking"
                            >
                                <span class="truncate">Réserver une Session</span>
                            </button>
                            <button class="text-white md:hidden">
                                <span class="material-symbols-outlined"> menu </span>
                            </button>
                        </div>
                    </div>
                </div>
            </header>

            <nav v-if="isMobileMenuOpen" class="bg-light-ivory/90 flex flex-col items-center gap-4 py-4 md:hidden">
                <Link
                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
                    href="#"
                    @click="toggleMobileMenu"
                    >Accueil</Link
                >

                <Link
                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
                    href="#"
                    @click="toggleMobileMenu"
                    >L'Oracle</Link
                >
                <Link
                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
                    href="#"
                    @click="toggleMobileMenu"
                    >Lectures</Link
                >
                <Link
                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
                    href="#"
                    @click="toggleMobileMenu"
                    >Témoignages</Link
                >
                <Link
                    class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
                    href="/rendez-vous"
                    @click="toggleMobileMenu"
                    >Booking</Link
                >
            </nav>

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

            <footer class="relative border-t border-gray-800 bg-black 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-10 w-24" />
                            </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-4 flex gap-4">
                                <a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" 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="text-white/70 transition-colors hover:text-[var(--c-gold)]" 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="text-white/70 transition-colors hover:text-[var(--c-gold)]" 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-1">
                            <div>
                                <h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Navigation</h4>
                                <ul class="space-y-2 text-sm">
                                    <li><Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/">Accueil</Link></li>
                                    <li>
                                        <a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#testimonials">Témoignages</a>
                                    </li>
                                    <li><Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/tirage">Lectures</Link></li>
                                    <li>
                                        <Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/rendez-vous"
                                            >Rendez-vous</Link
                                        >
                                    </li>
                                </ul>
                            </div>
                            <div>
                                <h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Légal</h4>
                                <ul class="space-y-2 text-sm">
                                    <li>
                                        <Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/politique-confidalite"
                                            >Politique de Confidentialité</Link
                                        >
                                    </li>
                                    <li>
                                        <Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/term-condition"
                                            >Conditions d'Utilisation</Link
                                        >
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <!-- Newsletter -->
                        <div>
                            <h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Newsletter</h4>
                            <p class="text-sm text-white/70">Recevez des inspirations et offres directement dans votre boîte mail.</p>
                            <form class="mt-4 flex max-w-md">
                                <input
                                    type="email"
                                    placeholder="Votre e-mail"
                                    class="w-full rounded-l-md border border-gray-700 bg-gray-900 px-4 text-sm text-white placeholder-gray-500 focus:border-[var(--c-purple)] focus:outline-none"
                                />
                                <button
                                    type="button"
                                    class="hover:bg-opacity-90 rounded-r-md bg-[var(--c-purple)] px-4 text-sm font-bold text-white transition-colors"
                                >
                                    S'abonner
                                </button>
                            </form>
                        </div>
                    </div>

                    <div class="mt-10 border-t border-gray-800 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>
.text-midnight-blue {
    color: var(--midnight-blue);
}
.bg-midnight-blue {
    background-color: var(--midnight-blue);
}
.text-spiritual-earth {
    color: var(--spiritual-earth);
}
.bg-spiritual-earth {
    background-color: var(--spiritual-earth);
}
.text-subtle-gold {
    color: var(--subtle-gold);
}
.bg-subtle-gold {
    background-color: var(--subtle-gold);
}
.text-linen {
    color: var(--linen);
}
.bg-linen {
    background-color: var(--linen);
}
.text-pure-white {
    color: var(--pure-white);
}
.bg-pure-white {
    background-color: var(--pure-white);
}
.text-light-ivory {
    color: var(--light-ivory);
}
.bg-light-ivory {
    background-color: var(--light-ivory);
}
</style>
