<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', $site_name ?? 'Mon Site')</title>
    @include('partials.head-meta')
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: { 50: '#f0fdf4', 100: '#dcfce7', 500: '#22c55e', 600: '#16a34a', 700: '#15803d' }
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'DM Sans', system-ui, sans-serif; }
    </style>
</head>
@php
    $hasClassicBackground = !empty($classic_background_image ?? null);
    $classicBgSize = in_array(($classic_background_size ?? 'cover'), ['cover', 'contain', 'auto'], true) ? $classic_background_size : 'cover';
    $classicBgOverlay = max(0, min(80, (int) ($classic_background_overlay ?? 35)));
    $classicBgUrl = '';
    if ($hasClassicBackground) {
        if (str_starts_with($classic_background_image, 'http://') || str_starts_with($classic_background_image, 'https://') || str_starts_with($classic_background_image, '/')) {
            $classicBgUrl = $classic_background_image;
        } else {
            $classicBgUrl = asset('storage/'.$classic_background_image);
        }
    }
@endphp
<body class="bg-white text-slate-800 antialiased">
    @include('partials.page-loader')
    @include('partials.banners-top')
    <header class="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-slate-100 shadow-sm/50">
        <nav class="max-w-6xl mx-auto px-4 sm:px-6 py-3 sm:py-4 flex items-center justify-between gap-4 min-w-0 relative" aria-label="{{ __('Navigation principale') }}">
            {{-- Logo (gauche) --}}
            <a href="/" class="inline-flex items-center text-lg font-semibold text-slate-900 hover:text-slate-700 transition shrink-0 min-w-0 max-w-[50%] sm:max-w-none">
                @if($logo ?? null)
                    <img src="{{ asset('storage/'.$logo) }}" alt="{{ $site_name ?? 'Logo' }}" class="h-8 sm:h-9 w-auto max-h-9 object-contain">
                @else
                    <span class="truncate">{{ $site_name ?? 'Mon Site' }}</span>
                @endif
            </a>

            {{-- Tout à droite : liens + langue + panier + menu mobile --}}
            <div class="flex items-center justify-end gap-3 sm:gap-5 min-w-0 flex-1">
                <ul class="hidden lg:flex items-center gap-4 xl:gap-6 flex-nowrap shrink min-w-0">
                    @foreach($menu_items ?? [] as $item)
                        @php
                            $isBoutique = str_contains($item->url, '/boutique') && ($ecommerce_navbar_submenu ?? false) && ($ecommerce_categories ?? collect())->isNotEmpty();
                        @endphp
                        <li class="relative group shrink-0">
                            <a href="{{ $item->url }}" target="{{ $item->target }}" class="text-slate-600 hover:text-slate-900 text-sm font-medium transition flex items-center gap-1 whitespace-nowrap py-2">
                                {{ $item->getTranslatedLabel($multilang_current ?? 'fr', $multilang_default ?? 'fr') }}
                                @if($isBoutique)<svg class="w-4 h-4 opacity-70 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>@endif
                            </a>
                            @if($isBoutique)
                            <div class="absolute right-0 top-full pt-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-[60]">
                                <div class="bg-white rounded-xl border border-slate-200 shadow-xl py-2 min-w-[220px] max-h-[min(70vh,24rem)] overflow-y-auto">
                                    <a href="{{ route('ecommerce.index') }}" class="block px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 hover:text-slate-900 transition">{{ __('Tous les produits') }}</a>
                                    @foreach($ecommerce_categories as $cat)
                                    <a href="{{ route('ecommerce.category', $cat->slug) }}" class="block px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 hover:text-slate-900 transition">{{ $cat->name }}</a>
                                    @if($cat->children->isNotEmpty())
                                        @foreach($cat->children as $sub)
                                        <a href="{{ route('ecommerce.category', $sub->slug) }}" class="block px-4 py-1.5 pl-8 text-sm text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition">↳ {{ $sub->name }}</a>
                                        @endforeach
                                    @endif
                                    @endforeach
                                </div>
                            </div>
                            @endif
                        </li>
                    @endforeach
                </ul>
                <div class="flex items-center gap-2 sm:gap-3 shrink-0">
                    @include('partials.language-switcher')
                    @if(\Illuminate\Support\Facades\Route::has('ecommerce.cart'))
                    <a href="{{ route('ecommerce.cart') }}" class="hidden sm:inline-flex items-center gap-1.5 text-slate-600 hover:text-slate-900 transition p-1 rounded-lg hover:bg-slate-50" aria-label="{{ __('Panier') }}">
                        <svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                        <span class="text-sm font-medium tabular-nums">{{ $cart_count ?? 0 }}</span>
                    </a>
                    @endif
                    <button type="button" id="classic-nav-toggle" class="lg:hidden inline-flex items-center justify-center p-2 rounded-xl text-slate-700 hover:bg-slate-100 border border-slate-200 transition" aria-expanded="false" aria-controls="classic-nav-mobile" aria-label="{{ __('Ouvrir le menu') }}">
                        <svg class="w-6 h-6 classic-nav-icon-open" 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>
                        <svg class="w-6 h-6 classic-nav-icon-close hidden" 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"/></svg>
                    </button>
                </div>
            </div>
        </nav>

        {{-- Panneau mobile --}}
        <div id="classic-nav-mobile" class="lg:hidden hidden border-t border-slate-100 bg-white shadow-lg max-h-[min(85vh,calc(100dvh-4rem))] overflow-y-auto overscroll-contain">
            <ul class="px-4 py-3 space-y-0.5">
                @foreach($menu_items ?? [] as $item)
                    @php
                        $isBoutique = str_contains($item->url, '/boutique') && ($ecommerce_navbar_submenu ?? false) && ($ecommerce_categories ?? collect())->isNotEmpty();
                    @endphp
                    <li>
                        <a href="{{ $item->url }}" target="{{ $item->target }}" class="classic-nav-mobile-link block py-3 px-3 text-sm font-medium text-slate-700 hover:text-slate-900 hover:bg-slate-50 rounded-xl transition">
                            {{ $item->getTranslatedLabel($multilang_current ?? 'fr', $multilang_default ?? 'fr') }}
                        </a>
                        @if($isBoutique)
                        <ul class="pl-3 pb-2 space-y-0.5 border-l-2 border-slate-100 ml-3">
                            <li><a href="{{ route('ecommerce.index') }}" class="classic-nav-mobile-link block py-2 px-3 text-sm text-slate-600 hover:text-slate-900 rounded-lg">{{ __('Tous les produits') }}</a></li>
                            @foreach($ecommerce_categories as $cat)
                            <li><a href="{{ route('ecommerce.category', $cat->slug) }}" class="classic-nav-mobile-link block py-2 px-3 text-sm text-slate-600 hover:text-slate-900 rounded-lg">{{ $cat->name }}</a></li>
                            @foreach($cat->children ?? [] as $sub)
                            <li><a href="{{ route('ecommerce.category', $sub->slug) }}" class="classic-nav-mobile-link block py-1.5 px-3 pl-5 text-sm text-slate-500 hover:text-slate-800 rounded-lg">↳ {{ $sub->name }}</a></li>
                            @endforeach
                            @endforeach
                        </ul>
                        @endif
                    </li>
                @endforeach
                @if(\Illuminate\Support\Facades\Route::has('ecommerce.cart'))
                <li class="pt-2 mt-2 border-t border-slate-100 sm:hidden">
                    <a href="{{ route('ecommerce.cart') }}" class="classic-nav-mobile-link flex items-center gap-2 py-3 px-3 text-sm font-medium text-slate-700 hover:bg-slate-50 rounded-xl">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/></svg>
                        {{ __('Panier') }} <span class="tabular-nums">({{ $cart_count ?? 0 }})</span>
                    </a>
                </li>
                @endif
            </ul>
        </div>
    </header>
    <script>
    (function () {
        var btn = document.getElementById('classic-nav-toggle');
        var panel = document.getElementById('classic-nav-mobile');
        if (!btn || !panel) return;
        function setOpen(open) {
            panel.classList.toggle('hidden', !open);
            btn.setAttribute('aria-expanded', open ? 'true' : 'false');
            btn.setAttribute('aria-label', open ? @json(__('Fermer le menu')) : @json(__('Ouvrir le menu')));
            btn.querySelector('.classic-nav-icon-open').classList.toggle('hidden', open);
            btn.querySelector('.classic-nav-icon-close').classList.toggle('hidden', !open);
            document.body.classList.toggle('overflow-hidden', open);
        }
        btn.addEventListener('click', function () { setOpen(panel.classList.contains('hidden')); });
        panel.querySelectorAll('.classic-nav-mobile-link').forEach(function (a) {
            a.addEventListener('click', function () { setOpen(false); });
        });
        window.addEventListener('resize', function () {
            if (window.matchMedia('(min-width: 1024px)').matches) setOpen(false);
        });
    })();
    </script>

    <main>
        @yield('content')
    </main>

    @include('partials.banners-bottom')
    <footer class="bg-slate-50 border-t border-slate-100 mt-24">
        <div class="max-w-6xl mx-auto px-4 sm:px-6 py-12">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-6">
                <a href="/" class="text-slate-900 font-semibold">{{ $site_name ?? 'Mon Site' }}</a>
                <ul class="flex flex-wrap gap-6">
                    @php $newsletter_trigger_wrap = 'li'; @endphp
                    @include('partials.newsletter-trigger')
                    @foreach($menu_items ?? [] as $item)
                        <li><a href="{{ $item->url }}" target="{{ $item->target }}" class="text-slate-500 hover:text-slate-700 text-sm transition">{{ $item->getTranslatedLabel($multilang_current ?? 'fr', $multilang_default ?? 'fr') }}</a></li>
                    @endforeach
                </ul>
            </div>
            <div class="mt-8 pt-8 border-t border-slate-200 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                <p class="text-slate-400 text-sm">&copy; {{ date('Y') }} {{ $site_name ?? 'Mon Site' }}. {{ __('Tous droits réservés') }}.</p>
                <a href="https://gdevstudio.fr" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-sm text-slate-500 hover:text-slate-700 transition">
                    <img src="{{ route('branding.logo') }}" alt="GdevStudio" class="w-5 h-5 object-contain rounded">
                    <span>{{ __('Propulsé par') }} GdevStudio</span>
                </a>
            </div>
        </div>
    </footer>
    @include('partials.newsletter-popup')
    @include('partials.banners-popups')
    @include('partials.age-verification')
    @include('partials.cookie-banner')
    @stack('scripts')
</body>
</html>
