{{-- ===== NAVBAR ===== --}}
<header class="gama-navbar" id="gamaNavbar">
    <nav class="gama-navbar-inner">

        {{-- Logo --}}
        <a href="{{ route('home') }}" class="gama-logo">
        <img src="{{ asset('images/logo.png') }}" alt="GAMA SAC" style="height:40px; width:auto;">
                
            </div>
        </a>

        {{-- Menu desktop --}}
        <ul class="gama-nav-links">
            <li>
                <a href="{{ route('home') }}" class="gama-nav-link {{ request()->routeIs('home') ? 'active' : '' }}">
                    {{ __('site.nav_home') }}
                </a>
            </li>

            <li class="gama-has-dropdown">
                <a href="{{ route('products') }}" class="gama-nav-link {{ request()->routeIs('products*') ? 'active' : '' }}">
                    {{ __('site.nav_catalogue') }}
                    <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-left:3px"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
                </a>
                <div class="gama-dropdown">
                    <div class="gama-dropdown-inner">
                        <p class="gama-dropdown-title">Nos gammes</p>
                        @foreach([
                            ['#cat-kraft',       'Kraft Naturel',  'Recycle - Resistant - Commerce'],
                            ['#cat-blanc',       'Blanc Premium',  'Couche - Finition - Luxe'],
                            ['#cat-alimentaire', 'Alimentaire',    'Certifie CE - Contact alimentaire'],
                            ['#cat-luxe',        'Luxe',           'Ruban satine - Pelliculage - Premium'],
                            ['#cat-custom',      'Sur Mesure',     'Dimensions libres - 6 couleurs'],
                        ] as [$anchor, $label, $desc])
                            <a href="{{ route('products') }}{{ $anchor }}" class="gama-dropdown-item">
                                <div>
                                    <p class="gama-dropdown-item-label">{{ $label }}</p>
                                    <p class="gama-dropdown-item-desc">{{ $desc }}</p>
                                </div>
                            </a>
                        @endforeach
                        <div class="gama-dropdown-footer">
                            <a href="{{ route('products') }}">Voir tout le catalogue</a>
                        </div>
                    </div>
                </div>
            </li>

            <li class="gama-has-dropdown">
                <a href="{{ route('fabrication') }}" class="gama-nav-link {{ request()->routeIs('fabrication') ? 'active' : '' }}">
                    {{ __('site.nav_fabrication') }}
                    <svg width="12" height="12" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="margin-left:3px"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
                </a>
                <div class="gama-dropdown">
                    <div class="gama-dropdown-inner">
                        <p class="gama-dropdown-title">Notre processus</p>
                        @foreach([
                            ['Choix du papier',  'Grammage, matiere, certification'],
                            ['Impression',       "Flexo jusqu'a 6 couleurs - Offset"],
                            ['Faconnage',        'Decoupe, collage, automatise'],
                            ['Livraison',        '5 a 15 jours - Tunisie'],
                        ] as [$label, $desc])
                            <a href="{{ route('fabrication') }}" class="gama-dropdown-item">
                                <div>
                                    <p class="gama-dropdown-item-label">{{ $label }}</p>
                                    <p class="gama-dropdown-item-desc">{{ $desc }}</p>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            </li>

            <li>
                <a href="{{ route('usine') }}" class="gama-nav-link {{ request()->routeIs('usine') ? 'active' : '' }}">
                    {{ __('site.nav_usine') }}
                </a>
            </li>
            <li>
                <a href="{{ route('blog') }}" class="gama-nav-link {{ request()->routeIs('blog*') ? 'active' : '' }}">
                    {{ __('site.nav_blog') }}
                </a>
            </li>
            <li>
                <a href="{{ route('contact') }}" class="gama-nav-link {{ request()->routeIs('contact') ? 'active' : '' }}">
                    {{ __('site.nav_contact') }}
                </a>
            </li>
        </ul>

        {{-- Actions desktop --}}
        <div class="gama-nav-actions">

            {{-- Selecteur de langue (UN SEUL) --}}
            <div class="gama-lang-wrap" id="langWrap">
                <button class="gama-lang-btn" id="langBtn"
                        onclick="document.getElementById('langDropdown').classList.toggle('open');event.stopPropagation()">
                    @if(app()->getLocale() == 'fr')
                        <span>&#127467;&#127479;</span> <span>FR</span>
                    @elseif(app()->getLocale() == 'en')
                        <span>&#127468;&#127463;</span> <span>EN</span>
                    @else
                        <span>&#127481;&#127475;</span> <span>AR</span>
                    @endif
                    <svg width="10" height="10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="gama-lang-dropdown" id="langDropdown">
                    <a href="{{ LaravelLocalization::getLocalizedURL('fr', null, [], true) }}"
                       class="gama-lang-option {{ app()->getLocale() == 'fr' ? 'active' : '' }}">
                        <span>&#127467;&#127479;</span> Français
                        @if(app()->getLocale() == 'fr') <i class="fas fa-check" style="margin-left:auto;color:#1a7a4a;font-size:10px"></i> @endif
                    </a>
                    <a href="{{ LaravelLocalization::getLocalizedURL('en', null, [], true) }}"
                       class="gama-lang-option {{ app()->getLocale() == 'en' ? 'active' : '' }}">
                        <span>&#127468;&#127463;</span> English
                        @if(app()->getLocale() == 'en') <i class="fas fa-check" style="margin-left:auto;color:#1a7a4a;font-size:10px"></i> @endif
                    </a>
                    <a href="{{ LaravelLocalization::getLocalizedURL('ar', null, [], true) }}"
                       class="gama-lang-option {{ app()->getLocale() == 'ar' ? 'active' : '' }}">
                        <span>&#127481;&#127475;</span> العربية
                        @if(app()->getLocale() == 'ar') <i class="fas fa-check" style="margin-left:auto;color:#1a7a4a;font-size:10px"></i> @endif
                    </a>
                </div>
            </div>

            {{-- WhatsApp --}}
            <a href="https://wa.me/+21629437777" target="_blank" class="gama-btn-whatsapp">
                <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12 0C5.373 0 0 5.373 0 12c0 2.127.558 4.122 1.532 5.85L.057 23.516a.5.5 0 00.608.61l5.788-1.517A11.96 11.96 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/></svg>
                {{ __('site.nav_whatsapp') }}
            </a>

            {{-- Connexion client --}}
            @if(session('client_user'))
                <a href="{{ route('client.dashboard') }}" class="gama-btn-client">
                    <i class="fas fa-user-circle"></i> {{ __('site.nav_mon_espace') }}
                </a>
            @else
                <a href="{{ route('client.login') }}" class="gama-btn-client">
                    <i class="fas fa-sign-in-alt"></i> {{ __('site.nav_connexion') }}
                </a>
            @endif


        </div>

        {{-- Burger mobile --}}
        <button class="gama-burger" id="gamaBurger" aria-label="Menu">
            <span></span><span></span><span></span>
        </button>
    </nav>

    {{-- Menu mobile --}}
    <div class="gama-mobile-menu" id="gamaMobileMenu">
        <div class="gama-mobile-inner">

            {{-- Langues mobile --}}
            <div style="display:flex;gap:8px;padding:8px 12px 12px;border-bottom:1px solid #f0f0f0;margin-bottom:8px;">
                <a href="{{ LaravelLocalization::getLocalizedURL('fr', null, [], true) }}"
                   style="padding:5px 12px;border:1px solid {{ app()->getLocale()=='fr' ? '#1a7a4a' : '#e0e0dd' }};
                          border-radius:8px;background:{{ app()->getLocale()=='fr' ? '#f0faf5' : '#f8fafc' }};
                          font-size:0.82rem;font-weight:700;color:{{ app()->getLocale()=='fr' ? '#1a7a4a' : '#444' }};
                          text-decoration:none;">
                    &#127467;&#127479; FR
                </a>
                <a href="{{ LaravelLocalization::getLocalizedURL('en', null, [], true) }}"
                   style="padding:5px 12px;border:1px solid {{ app()->getLocale()=='en' ? '#1a7a4a' : '#e0e0dd' }};
                          border-radius:8px;background:{{ app()->getLocale()=='en' ? '#f0faf5' : '#f8fafc' }};
                          font-size:0.82rem;font-weight:700;color:{{ app()->getLocale()=='en' ? '#1a7a4a' : '#444' }};
                          text-decoration:none;">
                    &#127468;&#127463; EN
                </a>
                <a href="{{ LaravelLocalization::getLocalizedURL('ar', null, [], true) }}"
                   style="padding:5px 12px;border:1px solid {{ app()->getLocale()=='ar' ? '#1a7a4a' : '#e0e0dd' }};
                          border-radius:8px;background:{{ app()->getLocale()=='ar' ? '#f0faf5' : '#f8fafc' }};
                          font-size:0.82rem;font-weight:700;color:{{ app()->getLocale()=='ar' ? '#1a7a4a' : '#444' }};
                          text-decoration:none;">
                    &#127481;&#127475; AR
                </a>
            </div>

            <a href="{{ route('home') }}"        class="gama-mobile-link">{{ __('site.nav_home') }}</a>
            <a href="{{ route('products') }}"    class="gama-mobile-link">{{ __('site.nav_catalogue') }}</a>
            <div class="gama-mobile-sub">
                @foreach(['#cat-kraft'=>'Kraft Naturel','#cat-blanc'=>'Blanc Premium','#cat-alimentaire'=>'Alimentaire','#cat-luxe'=>'Luxe','#cat-custom'=>'Sur Mesure'] as $anchor=>$label)
                    <a href="{{ route('products') }}{{ $anchor }}" class="gama-mobile-sublink">{{ $label }}</a>
                @endforeach
            </div>
            <a href="{{ route('fabrication') }}" class="gama-mobile-link">{{ __('site.nav_fabrication') }}</a>
            <a href="{{ route('usine') }}"       class="gama-mobile-link">{{ __('site.nav_usine') }}</a>
            <a href="{{ route('blog') }}"        class="gama-mobile-link">{{ __('site.nav_blog') }}</a>
            <a href="{{ route('contact') }}"     class="gama-mobile-link">{{ __('site.nav_contact') }}</a>

            <div class="gama-mobile-actions">
                <a href="https://wa.me/+21629437777" target="_blank" class="gama-mobile-wa">
                    <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347zM12 0C5.373 0 0 5.373 0 12c0 2.127.558 4.122 1.532 5.85L.057 23.516a.5.5 0 00.608.61l5.788-1.517A11.96 11.96 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/></svg>
                    {{ __('site.nav_whatsapp') }}
                </a>
                @if(session('client_user'))
                    <a href="{{ route('client.dashboard') }}" class="gama-mobile-devis" style="background:#1a7a4a;">
                        <i class="fas fa-user-circle"></i> {{ __('site.nav_mon_espace') }}
                    </a>
                @else
                    <a href="{{ route('client.login') }}" class="gama-mobile-devis" style="background:#1a7a4a;">
                        <i class="fas fa-sign-in-alt"></i> {{ __('site.nav_connexion') }}
                    </a>
                @endif
                <a href="{{ route('quote') }}" class="gama-mobile-devis">{{ __('site.nav_devis') }}</a>
            </div>
        </div>
    </div>
</header>

<style>
.gama-navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    border-bottom: 2px solid #D4A843;
    transition: box-shadow 0.3s;
}
.gama-navbar.scrolled{box-shadow:0 2px 20px rgba(0,0,0,0.08)}
.gama-navbar-inner{max-width:1280px;margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:24px}
.gama-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.gama-logo-icon {
    width: 38px; height: 38px;
    background: #0F172A;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    color: #D4A843; font-weight: 900; font-size: 1.1rem;
    box-shadow: 0 2px 8px rgba(15,23,42,0.3);
}
.gama-logo-gama{font-weight:900;font-size:1.15rem;color:#1a7a4a}
.gama-logo-sac{font-weight:900;font-size:1.15rem;color:#d4a843}
.gama-logo-sub{font-size:0.65rem;color:#aaa;margin:0;line-height:1;margin-top:1px}
.gama-nav-links{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0;flex:1}
.gama-nav-link{display:flex;align-items:center;font-size:0.85rem;font-weight:600;color:#444;text-decoration:none;padding:8px 12px;border-radius:8px;transition:all 0.2s;white-space:nowrap}
.gama-nav-link:hover, .gama-nav-link.active {
    color: #0F172A;
    background: #F5E6C0;
}
.gama-has-dropdown{position:relative}
.gama-dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:#fff;border:1px solid #eee;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,0.12);opacity:0;visibility:hidden;transform:translateY(-8px);transition:all 0.22s ease;pointer-events:none;z-index:100}
.gama-has-dropdown:hover .gama-dropdown{opacity:1;visibility:visible;transform:translateY(0);pointer-events:all}
.gama-dropdown-inner{padding:16px}
.gama-dropdown-title{font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:#aaa;margin:0 0 10px 4px}
.gama-dropdown-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;text-decoration:none;transition:background 0.15s}
.gama-dropdown-item:hover{background:#f0faf5}
.gama-dropdown-item-label{font-size:0.82rem;font-weight:700;color:#1a1a2e;margin:0}
.gama-dropdown-item-desc{font-size:0.7rem;color:#888;margin:1px 0 0}
.gama-dropdown-footer{border-top:1px solid #f0f0f0;margin-top:8px;padding-top:10px}
.gama-dropdown-footer a{font-size:0.78rem;font-weight:700;color:#1a7a4a;text-decoration:none;padding:4px 10px;display:block}
.gama-dropdown-footer a:hover{text-decoration:underline}
.gama-nav-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.gama-lang-wrap{position:relative}
.gama-lang-btn{display:flex;align-items:center;gap:5px;background:#f8fafc;border:1px solid #e2e8f0;padding:7px 11px;border-radius:8px;font-size:0.82rem;font-weight:700;cursor:pointer;color:#444;transition:all 0.2s;font-family:inherit}
.gama-lang-btn:hover{background:#f0faf5;border-color:#9fe1cb;color:#1a7a4a}
.gama-lang-dropdown{position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid #eee;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.12);min-width:150px;z-index:200;overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all 0.2s ease}
.gama-lang-dropdown.open{opacity:1;visibility:visible;transform:translateY(0)}
.gama-lang-option{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;font-size:0.82rem;font-weight:600;color:#444;text-decoration:none;transition:background 0.15s}
.gama-lang-option:hover{background:#f0faf5;color:#1a7a4a}
.gama-lang-option.active{background:#f0faf5;color:#1a7a4a}
.gama-btn-whatsapp{display:flex;align-items:center;gap:5px;background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;font-size:0.75rem;font-weight:700;padding:7px 12px;border-radius:8px;text-decoration:none;transition:all 0.2s;white-space:nowrap}
.gama-btn-whatsapp:hover{background:#dcfce7}
.gama-btn-client{display:flex;align-items:center;gap:5px;background:#f0faf5;color:#1a7a4a;border:1px solid #9fe1cb;font-size:0.75rem;font-weight:700;padding:7px 12px;border-radius:8px;text-decoration:none;transition:all 0.2s;white-space:nowrap}
.gama-btn-client:hover{background:#dcfce7}

.gama-btn-devis {
    display: flex; align-items: center; gap: 5px;
    background: #D4A843;
    color: #0F172A;
    font-size: 0.82rem; font-weight: 800;
    padding: 9px 18px; border-radius: 9px;
    text-decoration: none; transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(212,168,67,0.35);
    white-space: nowrap;
}
.gama-btn-devis:hover { background: #B08930; color: #0F172A; }
.gama-btn-devis:hover{background:#b08930}
.gama-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;margin-left:auto}
.gama-burger span{display:block;width:24px;height:2px;background:#333;border-radius:2px;transition:all 0.3s}
.gama-burger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.gama-burger.open span:nth-child(2){opacity:0}
.gama-burger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
.gama-mobile-menu{display:none;background:#fff;border-top:1px solid #f0f0f0;box-shadow:0 8px 24px rgba(0,0,0,0.1)}
.gama-mobile-menu.open{display:block}
.gama-mobile-inner{padding:12px 20px 20px}
.gama-mobile-link{display:block;font-size:0.9rem;font-weight:600;color:#333;text-decoration:none;padding:11px 12px;border-radius:8px;transition:background 0.15s}
.gama-mobile-link:hover{background:#f0faf5;color:#1a7a4a}
.gama-mobile-sub{padding-left:16px;border-left:2px solid #e5e7eb;margin:4px 0 4px 20px}
.gama-mobile-sublink{display:block;font-size:0.8rem;color:#666;text-decoration:none;padding:7px 8px;border-radius:6px;transition:background 0.15s}
.gama-mobile-sublink:hover{background:#f0faf5;color:#1a7a4a}
.gama-mobile-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #f0f0f0}
.gama-mobile-wa{display:flex;align-items:center;justify-content:center;gap:8px;background:#25D366;color:#fff;font-weight:700;font-size:0.88rem;padding:12px;border-radius:10px;text-decoration:none}
.gama-mobile-devis{display:block;text-align:center;background:#d4a843;color:#fff;font-weight:800;font-size:0.88rem;padding:12px;border-radius:10px;text-decoration:none}
@media(max-width:1024px){.gama-nav-links,.gama-nav-actions{display:none}.gama-burger{display:flex}.gama-navbar-inner{gap:0}}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var navbar     = document.getElementById('gamaNavbar');
    var burger     = document.getElementById('gamaBurger');
    var mobileMenu = document.getElementById('gamaMobileMenu');

    window.addEventListener('scroll', function () {
        navbar.classList.toggle('scrolled', window.scrollY > 40);
    });

    burger.addEventListener('click', function () {
        burger.classList.toggle('open');
        mobileMenu.classList.toggle('open');
    });

    document.addEventListener('click', function (e) {
        if (!navbar.contains(e.target)) {
            burger.classList.remove('open');
            mobileMenu.classList.remove('open');
            var dd = document.getElementById('langDropdown');
            if (dd) dd.classList.remove('open');
        }
    });
});
</script>