<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'GASOS') }} - {{ $title ?? 'Association Sénégalaise de la Valls Icamp' }}</title>
    <meta name="description" content="Association Sénévalls - Engagement, solidarité et transparence au service de la communauté sénégalaise établie dans la Valls Icamp.">
    <meta name="keywords" content="Sénévalls, association sénégalaise, Valls Icamp, solidarité, entraide, Sénégal, Espagne, gestion de projets">
    <link rel="canonical" href="{{ url()->current() }}">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ url()->current() }}">
    <meta property="og:title" content="{{ config('app.name', 'GASOS') }} - Association Sénégalaise de la Valls Icamp">
    <meta property="og:description" content="Bâtir ensemble un avenir solidaire et durable pour notre communauté.">
    <meta property="og:image" content="{{ asset('Images/logocarte.png') }}">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="{{ url()->current() }}">
    <meta property="twitter:title" content="{{ config('app.name', 'GASOS') }} - Association Sénégalaise de la Valls Icamp">
    <meta property="twitter:description" content="Bâtir ensemble un avenir solidaire et durable pour notre communauté.">
    <meta property="twitter:image" content="{{ asset('Images/logocarte.png') }}">

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="{{ asset('Images/logocarte.png') }}">
    <link rel="icon" type="image/png" sizes="16x16" href="{{ asset('Images/logocarte.png') }}">
    <link rel="shortcut icon" href="{{ asset('Images/logocarte.png') }}">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        [x-cloak] {
            display: none !important;
        }

        @keyframes blob {
            0% {
                transform: translate(0px, 0px) scale(1);
            }

            33% {
                transform: translate(30px, -50px) scale(1.1);
            }

            66% {
                transform: translate(-20px, 20px) scale(0.9);
            }

            100% {
                transform: translate(0px, 0px) scale(1);
            }
        }

        .animate-blob {
            animation: blob 7s infinite;
        }

        .animation-delay-2000 {
            animation-delay: 2s;
        }

        .animation-delay-4000 {
            animation-delay: 4s;
        }

        @keyframes bounce-slow {

            0%,
            100% {
                transform: translateY(-5%);
                animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
            }

            50% {
                transform: translateY(0);
                animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
            }
        }

        .animate-bounce-slow {
            animation: bounce-slow 3s infinite;
        }

        @keyframes slow-zoom {
            0% {
                transform: scale(1);
            }

            100% {
                transform: scale(1.1);
            }
        }

        .animate-slow-zoom {
            animation: slow-zoom 20s linear infinite alternate;
        }

        @keyframes fade-in-up {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fade-in-up 0.8s ease-out forwards;
        }
    </style>
</head>

<body class="font-sans antialiased" x-data="{ mobileMenuOpen: false }">
    <!-- Preloader Premium -->
    <div id="preloader"
        style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #0a0f1a; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center;">
        <div class="loader-spinner"></div>
    </div>

    <style>
        .loader-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        @keyframes loader-line {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(200%); }
        }
    </style>

    <script>
        window.addEventListener('load', function () {
            var preloader = document.getElementById('preloader');
            if (preloader) {
                setTimeout(function() {
                    preloader.style.transition = 'opacity 0.6s ease-out, visibility 0.6s';
                    preloader.style.opacity = '0';
                    preloader.style.visibility = 'hidden';
                    setTimeout(function () {
                        preloader.style.display = 'none';
                    }, 600);
                }, 1000);
            }
        });
    </script>

    <!-- Navigation -->
    <nav
        class="bg-[#0a0f1a] sticky top-0 z-50 transition-all duration-500 border-b border-white/10 shadow-2xl"
        style="background-color: #0a0f1a !important;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-24">
                <!-- Logo & Brand -->
                <div class="flex-shrink-0 flex items-center">
                    <a href="{{ route('home') }}" class="flex items-center gap-4 group">
                        <div class="relative">
                            <img class="block h-14 w-auto transition-all duration-700 group-hover:scale-110 brightness-0 invert"
                                src="{{ asset('Images/logocarte.png') }}" alt="Sénévalls Logo" decoding="async">
                            <div class="absolute -inset-4 bg-amber-500/20 rounded-full blur-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-700"></div>
                        </div>
                        <div class="flex items-center">
                            <span class="text-2xl font-bold text-white tracking-tight group-hover:text-amber-500 transition-colors duration-300 pb-1">sénévalls</span>
                        </div>
                    </a>
                </div>

                <div class="hidden md:flex md:items-center ml-auto">
                    <div class="flex items-center" id="desktop-menu">
                        <a href="{{ route('home') }}#a-propos"
                            class="nav-link text-[12px] font-black text-white hover:text-amber-500 transition-all duration-300 relative group py-2 tracking-[0.2em]"
                            style="margin: 0 25px !important;">
                            À PROPOS
                            <span
                                class="nav-indicator absolute -bottom-1 left-0 w-0 h-[3px] bg-amber-500 transition-all duration-300 group-hover:w-full shadow-[0_0_15px_#f59e0b]"></span>
                        </a>
                        <a href="{{ route('home') }}#activites"
                            class="nav-link text-[12px] font-black text-white hover:text-amber-500 transition-all duration-300 relative group py-2 tracking-[0.2em]"
                            style="margin: 0 25px !important;">
                            ACTIVITÉS
                            <span
                                class="nav-indicator absolute -bottom-1 left-0 w-0 h-[3px] bg-amber-500 transition-all duration-300 group-hover:w-full shadow-[0_0_15px_#f59e0b]"></span>
                        </a>
                        <a href="{{ route('home') }}#realisations"
                            class="nav-link text-[12px] font-black text-white hover:text-amber-500 transition-all duration-300 relative group py-2 tracking-[0.2em]"
                            style="margin: 0 25px !important;">
                            RÉALISATIONS
                            <span
                                class="nav-indicator absolute -bottom-1 left-0 w-0 h-[3px] bg-amber-500 transition-all duration-300 group-hover:w-full shadow-[0_0_15px_#f59e0b]"></span>
                        </a>
                        <a href="{{ route('home') }}#contact"
                            class="nav-link text-[12px] font-black text-white hover:text-amber-500 transition-all duration-300 relative group py-2 tracking-[0.2em]"
                            style="margin: 0 25px !important;">
                            CONTACT
                            <span
                                class="nav-indicator absolute -bottom-1 left-0 w-0 h-[3px] bg-amber-500 transition-all duration-300 group-hover:w-full shadow-[0_0_15px_#f59e0b]"></span>
                        </a>
                    </div>

                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            const sections = document.querySelectorAll('section');
                            const navLinks = document.querySelectorAll('.nav-link');

                            window.addEventListener('scroll', () => {
                                let current = '';
                                sections.forEach(section => {
                                    const sectionTop = section.offsetTop;
                                    const sectionHeight = section.clientHeight;
                                    if (pageYOffset >= (sectionTop - 150)) {
                                        current = section.getAttribute('id');
                                    }
                                });

                                navLinks.forEach(link => {
                                    link.classList.remove('text-amber-500');
                                    link.querySelector('.nav-indicator').classList.add('w-0');
                                    link.querySelector('.nav-indicator').classList.remove('w-full');
                                    
                                    if (link.getAttribute('href').includes('#' + current)) {
                                        link.classList.add('text-amber-500');
                                        link.querySelector('.nav-indicator').classList.remove('w-0');
                                        link.querySelector('.nav-indicator').classList.add('w-full');
                                    }
                                });
                            });
                        });
                    </script>

                    <div class="pl-12 border-l border-slate-800 flex items-center">
                        @auth
                            <a href="{{ route('dashboard') }}"
                                class="text-white hover:text-amber-500 font-bold text-sm transition-all duration-300 flex items-center gap-2 group">
                                <span class="uppercase tracking-widest">Espace Pro</span>
                            </a>
                        @else
                            <a href="{{ route('login') }}"
                                class="inline-flex items-center justify-center px-6 py-2 font-bold text-white rounded-full hover:opacity-80 transition-all duration-300"
                                style="background-color: #000000 !important; box-shadow: none !important; border: none !important;">
                                <span class="text-[10px] uppercase tracking-[0.2em]">Se connecter</span>
                            </a>
                        @endauth
                    </div>
                </div>

                <!-- Mobile menu button -->
                <div class="flex md:hidden items-center ml-4">
                    <button @click="mobileMenuOpen = !mobileMenuOpen"
                        class="inline-flex items-center justify-center p-2 rounded-lg text-slate-400 hover:text-white hover:bg-slate-900 focus:outline-none transition-all duration-200 border border-slate-800 hover:border-amber-500/50">
                        <span class="sr-only">Ouvrir le menu</span>
                        <svg x-show="!mobileMenuOpen" class="h-7 w-7" stroke="currentColor" fill="none"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                        </svg>
                        <svg x-show="mobileMenuOpen" class="h-7 w-7" stroke="currentColor" fill="none"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- Mobile menu -->
        <div x-show="mobileMenuOpen" x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0 -translate-y-4" x-transition:enter-end="opacity-100 translate-y-0"
            x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0"
            x-transition:leave-end="opacity-0 -translate-y-4" x-cloak
            class="md:hidden absolute top-full left-0 w-full bg-white border-b border-white/10 shadow-2xl">

            <div class="px-6 py-8 space-y-4">
                <a href="{{ route('home') }}#a-propos" @click="mobileMenuOpen = false"
                    class="block px-4 py-3 rounded-lg text-sm font-bold text-slate-800 hover:text-amber-500 hover:bg-slate-50 transition-all duration-200 tracking-[0.2em]">
                    À PROPOS
                </a>
                <a href="{{ route('home') }}#services" @click="mobileMenuOpen = false"
                    class="block px-4 py-3 rounded-lg text-sm font-bold text-slate-800 hover:text-amber-500 hover:bg-slate-50 transition-all duration-200 tracking-[0.2em]">
                    SERVICES
                </a>
                <a href="{{ route('home') }}#realisations" @click="mobileMenuOpen = false"
                    class="block px-4 py-3 rounded-lg text-sm font-bold text-slate-800 hover:text-amber-500 hover:bg-slate-50 transition-all duration-200 tracking-[0.2em]">
                    RÉALISATIONS
                </a>
                <a href="{{ route('home') }}#contact" @click="mobileMenuOpen = false"
                    class="block px-4 py-3 rounded-lg text-sm font-bold text-slate-800 hover:text-amber-500 hover:bg-slate-50 transition-all duration-200 tracking-[0.2em]">
                    CONTACT
                </a>

                <div class="pt-6 mt-6 border-t border-slate-800">
                    @auth
                        <a href="{{ route('dashboard') }}" @click="mobileMenuOpen = false"
                            class="block w-full text-center px-6 py-4 rounded-xl text-lg font-black bg-slate-900 text-amber-500 border border-amber-500/30 shadow-lg transition-all duration-200">
                            ESPACE PRO
                        </a>
                    @else
                        <a href="{{ route('login') }}" @click="mobileMenuOpen = false"
                            class="block w-full text-center px-6 py-3 rounded-xl text-sm font-black text-white hover:opacity-80 transition-all duration-200 uppercase tracking-widest"
                            style="background-color: #000000 !important; box-shadow: none !important; border: none !important;">
                            Se connecter
                        </a>
                    @endauth
                </div>
            </div>
        </div>
    </nav>

    <!-- Page Content -->
    <main>
        @yield('content')
    </main>

    <!-- Footer Pro Black Force -->
    <footer class="bg-black text-white pt-32 pb-16 border-t border-white/10 relative overflow-hidden" 
        style="background-color: #000000 !important;">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
            <!-- Robust Top Spacer -->
            <div class="h-16 md:h-32"></div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-16 mb-16">
                <!-- Col 1: Branding & Socials -->
                <div class="space-y-6">
                    <div class="flex items-center gap-3">
                        <img class="h-10 w-auto brightness-0 invert" src="{{ asset('Images/logocarte.png') }}" alt="Logo">
                        <div class="flex flex-col">
                            <span class="text-[12px] font-black tracking-widest leading-tight">ASSOCIATION SÉNÉGALAISE</span>
                            <span class="text-[12px] font-black tracking-widest leading-tight">DE LA VALLS ICAMP</span>
                        </div>
                    </div>
                    <p class="text-slate-400 text-sm leading-relaxed font-light">
                        Engagement, solidarité et transparence au service de la communauté sénégalaise établie dans la Valls Icamp et à travers le monde.
                    </p>
                    <div class="flex gap-4">
                        <a href="#" class="text-slate-500 hover:text-amber-500 transition-colors duration-300">
                            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"></path></svg>
                        </a>
                        <!-- Add other social icons if needed -->
                    </div>
                </div>

                <!-- Col 2: Fast Navigation -->
                <div class="space-y-6">
                    <h4 class="text-xs font-black uppercase tracking-[0.3em] text-amber-500">Navigation</h4>
                    <ul class="space-y-4">
                        <li><a href="{{ route('home') }}#a-propos" class="text-slate-400 hover:text-white text-sm transition-colors duration-300">À propos</a></li>
                        <li><a href="{{ route('home') }}#services" class="text-slate-400 hover:text-white text-sm transition-colors duration-300">Services</a></li>
                        <li><a href="{{ route('home') }}#realisations" class="text-slate-400 hover:text-white text-sm transition-colors duration-300">Réalisations</a></li>
                        <li><a href="{{ route('home') }}#contact" class="text-slate-400 hover:text-white text-sm transition-colors duration-300">Contact</a></li>
                    </ul>
                </div>

                <!-- Col 3: Contact Info -->
                <div class="space-y-6">
                    <h4 class="text-xs font-black uppercase tracking-[0.3em] text-amber-500">Contact</h4>
                    <ul class="space-y-4 text-slate-400 text-sm">
                        <li class="flex items-center gap-3">
                            <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
                            contact@senevalls.com
                        </li>
                        <li class="flex items-center gap-3">
                            <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5.983C3 4.888 3.895 4 5 4h4c.945 0 1.748.66 1.94 1.583l.8 3.8a2 2 0 01-1.15 2.23l-2.03.9c.56 1.48 1.7 2.62 3.18 3.18l.9-2.03a2 2 0 012.23-1.15l3.8.8c.923.192 1.583.995 1.583 1.94v4c0 1.105-.895 2-2 2h-4C10.605 22 3 14.395 3 5V5.983z"></path></svg>
                            +34 664 10 69 00
                        </li>
                        <li class="flex items-center gap-3">
                            <svg class="w-5 h-5 text-amber-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                            Sénégal & Espagne
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Bottom Line -->
            <div class="pt-10 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
                <p class="text-slate-500 text-[10px] font-bold uppercase tracking-[0.4em]">
                    &copy; {{ date('Y') }} ASSOCIATION SÉNÉGALAISE DE LA VALLS ICAMP
                </p>
                <p class="text-[9px] text-slate-600 uppercase tracking-widest">Connecté au réseau global</p>
            </div>
        </div>
    </footer>

</body>

</html>