<!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="description" content="emelec Sarl - Entreprise spécialisée en électricité industrielle, maintenance, éclairage public, climatisation et prestations électriques">
    <title>@yield('title', 'emelec Sarl') - Solutions Électriques Professionnelles</title>

    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=plus-jakarta-sans:400,500,600,700,800" rel="stylesheet" />

    @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @else
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    @endif

    <style>
        :root {
            --emelec-primary: #F59E0B;
            --emelec-primary-dark: #D97706;
            --emelec-dark: #0F172A;
            --emelec-slate: #1E293B;
        }

    </style>
    @stack('styles')
</head>
<body class="font-sans antialiased bg-slate-50 text-slate-900">
    {{-- Navigation --}}
    <nav class="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-md shadow-sm border-b border-slate-200">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-20">
                <a href="{{ route('accueil') }}" class="flex items-center gap-2">
                    <div class="w-10 h-10 rounded-lg bg-amber-500 flex items-center justify-center">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                        </svg>
                    </div>
                    <span class="text-xl font-bold text-slate-800">emelec <span class="text-amber-500">Sarl</span></span>
                </a>

                @php
                $navLinkClass = 'font-medium transition relative py-2';
                $navLinkInactive = 'text-slate-600 hover:text-amber-500';
                $navLinkActive = 'text-amber-500 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-0.5 after:bg-amber-500 after:rounded-full';
                @endphp
                <div class="hidden md:flex items-center gap-8">
                    <a href="{{ route('accueil') }}" class="{{ $navLinkClass }} {{ request()->routeIs('accueil') ? $navLinkActive : $navLinkInactive }}">Accueil</a>
                    <a href="{{ route('apropos') }}" class="{{ $navLinkClass }} {{ request()->routeIs('apropos') ? $navLinkActive : $navLinkInactive }}">À propos</a>
                    <a href="{{ route('services') }}" class="{{ $navLinkClass }} {{ request()->routeIs('services') ? $navLinkActive : $navLinkInactive }}">Nos services</a>
                    <a href="{{ route('realisations') }}" class="{{ $navLinkClass }} {{ request()->routeIs('realisations') ? $navLinkActive : $navLinkInactive }}">Nos réalisations</a>
                    <a href="{{ route('contact') }}" class="{{ $navLinkClass }} {{ request()->routeIs('contact') ? $navLinkActive : $navLinkInactive }}">Contact</a>
                    <a href="{{ route('devis') }}" class="bg-amber-500 hover:bg-amber-600 text-white px-5 py-2.5 rounded-lg font-semibold transition shadow-lg shadow-amber-500/30 {{ request()->routeIs('devis') ? 'ring-2 ring-amber-400 ring-offset-2' : '' }}">
                        Demander un devis
                    </a>
                </div>

                {{-- Mobile menu button --}}
                <button type="button" id="mobile-menu-btn" class="md:hidden p-2 rounded-lg hover:bg-slate-100">
                    <svg class="w-6 h-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" />
                    </svg>
                </button>
            </div>
        </div>

        {{-- Mobile menu --}}
        <div id="mobile-menu" class="hidden md:hidden border-t border-slate-200 bg-white">
            <div class="px-4 py-4 space-y-2">
                <a href="{{ route('accueil') }}" class="block py-2 font-medium {{ request()->routeIs('accueil') ? 'text-amber-500' : 'text-slate-600 hover:text-amber-500' }}">Accueil</a>
                <a href="{{ route('apropos') }}" class="block py-2 font-medium {{ request()->routeIs('apropos') ? 'text-amber-500' : 'text-slate-600 hover:text-amber-500' }}">À propos</a>
                <a href="{{ route('services') }}" class="block py-2 font-medium {{ request()->routeIs('services') ? 'text-amber-500' : 'text-slate-600 hover:text-amber-500' }}">Nos services</a>
                <a href="{{ route('realisations') }}" class="block py-2 font-medium {{ request()->routeIs('realisations') ? 'text-amber-500' : 'text-slate-600 hover:text-amber-500' }}">Nos réalisations</a>
                <a href="{{ route('contact') }}" class="block py-2 font-medium {{ request()->routeIs('contact') ? 'text-amber-500' : 'text-slate-600 hover:text-amber-500' }}">Contact</a>
                <a href="{{ route('devis') }}" class="block py-3 bg-amber-500 text-white text-center rounded-lg font-semibold {{ request()->routeIs('devis') ? 'ring-2 ring-amber-400 ring-inset' : '' }}">Demander un devis</a>
            </div>
        </div>
    </nav>

    {{-- Main content --}}
    <main class="pt-20">
        @yield('content')
    </main>

    {{-- Footer --}}
    <footer class="bg-slate-900 text-slate-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <div class="flex items-center gap-2 mb-3">
                        <div class="w-10 h-10 rounded-lg bg-amber-500 flex items-center justify-center">
                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <span class="text-xl font-bold text-white">emelec <span class="text-amber-500">Sarl</span></span>
                    </div>
                    <p class="text-slate-400 text-sm leading-relaxed">
                        Votre partenaire de confiance pour toutes vos installations et maintenances électriques industrielles.
                    </p>
                </div>
                <div>
                    <h4 class="font-semibold text-white mb-3">Navigation</h4>
                    <ul class="space-y-2">
                        <li><a href="{{ route('accueil') }}" class="hover:text-amber-500 transition">Accueil</a></li>
                        <li><a href="{{ route('apropos') }}" class="hover:text-amber-500 transition">À propos</a></li>
                        <li><a href="{{ route('services') }}" class="hover:text-amber-500 transition">Nos services</a></li>
                        <li><a href="{{ route('realisations') }}" class="hover:text-amber-500 transition">Nos réalisations</a></li>
                        <li><a href="{{ route('contact') }}" class="hover:text-amber-500 transition">Contact</a></li>
                        <li><a href="{{ route('devis') }}" class="hover:text-amber-500 transition">Demander un devis</a></li>
                        {{-- <li><a href="{{ route('login') }}" class="hover:text-amber-500 transition text-slate-500 text-sm">Connexion</a></li> --}}
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-white mb-3">Contact</h4>
                    <div class="space-y-3">
                        <a href="mailto:emelec.dgi@gmail.com" class="flex items-center gap-3 text-slate-400 hover:text-amber-500 transition text-sm">
                            <span class="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center shrink-0">
                                <svg class="w-4 h-4" 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" /></svg>
                            </span>
                            emelec.dgi@gmail.com
                        </a>
                        <a href="tel:+2250787664033" class="flex items-center gap-3 text-slate-400 hover:text-amber-500 transition text-sm">
                            <span class="w-9 h-9 rounded-lg bg-slate-800 flex items-center justify-center shrink-0">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" /></svg>
                            </span>
                            +225 07 87 66 40 33 | +225 05 54 34 09 87
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-slate-700 mt-8 pt-6 flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4 text-slate-500 text-sm">
                <span>&copy; {{ date('Y') }} emelec Sarl. Tous droits réservés.Designed by <a href="https://softsys.ci" class="hover:text-amber-500 transition">Softsys</a></span>
            </div>
        </div>
    </footer>

    <script>
        document.getElementById('mobile-menu-btn') ? .addEventListener('click', function() {
            document.getElementById('mobile-menu').classList.toggle('hidden');
        });

    </script>
    @stack('scripts')
</body>
</html>
