{{-- ============================================================ --}}
{{-- HEADER GLOBAL — AMD-TOPOGRAFIA, LDA.                        --}}
{{-- Padrão único: fundo branco, texto azul escuro em todas as páginas --}}
{{-- ============================================================ --}}

<header id="main-header"
        class="fixed left-0 top-[48px] w-full z-50 bg-white shadow-sm transition-all duration-300 ease-in-out">

    <div class="w-full max-w-[1440px] mx-auto px-6 md:px-12 h-20 flex items-center justify-between relative z-10">

        {{-- ▼▼▼ LOGO ▼▼▼ --}}
        <a href="{{ route('welcome') }}" class="flex items-center group shrink-0">
            <div class="relative">
                <img id="logo-img"
                     src="{{ asset('Logo.png') }}"
                     alt="AMD-TOPOGRAFIA, LDA."
                     class="h-12 w-auto transition-all duration-300 group-hover:scale-105">
            </div>
        </a>

        {{-- ▼▼▼ NAVEGAÇÃO DESKTOP ▼▼▼ --}}
        <nav class="hidden lg:flex items-center gap-8 text-[15px]">
            <a href="{{ route('welcome') }}" class="nav-link font-semibold tracking-widest uppercase text-xs transition-all duration-200 text-[#06458F] hover:text-[#06458F]/70">{{ __('app.navbar.home') }}</a>
            {{-- EMPRESA — Dropdown --}}
            <div class="relative group">
                <button id="nav-empresa-btn" class="font-semibold tracking-widest uppercase text-xs transition-all duration-200 text-[#06458F] hover:text-[#06458F]/70 flex items-center gap-1.5 cursor-pointer">
                    {{ __('app.navbar.about') }}
                    <svg class="w-3 h-3 transition-transform duration-200 group-hover:rotate-180" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/>
                    </svg>
                </button>
                <div class="absolute left-0 mt-2 w-48 bg-white rounded-xl border border-slate-100 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-[120] py-1.5">
                    <a href="{{ route('sobre') }}#quem-somos" class="block px-5 py-2.5 text-xs font-bold text-slate-700 hover:bg-slate-50 hover:text-[#06458F] transition-colors uppercase tracking-wider">
                        {{ __('sobre.accordion.who_we_are') }}
                    </a>
                </div>
            </div>
            <a href="{{ route('welcome') }}#servicos" class="nav-link font-semibold tracking-widest uppercase text-xs transition-all duration-200 text-[#06458F] hover:text-[#06458F]/70">{{ __('app.navbar.services') }}</a>
            <a href="{{ route('noticias.index') }}" class="nav-link font-semibold tracking-widest uppercase text-xs transition-all duration-200 text-[#06458F] hover:text-[#06458F]/70">{{ __('app.navbar.projects') }}</a>
            <a href="{{ route('formacoes.index') }}" class="nav-link font-semibold tracking-widest uppercase text-xs transition-all duration-200 text-[#06458F] hover:text-[#06458F]/70">{{ __('app.navbar.courses') }}</a>
            <a href="{{ route('welcome') }}#contacto" class="nav-link font-semibold tracking-widest uppercase text-xs transition-all duration-200 text-[#06458F] hover:text-[#06458F]/70">{{ __('app.navbar.contact') }}</a>
        </nav>

        {{-- ▼▼▼ BOTÕES DE AÇÃO ▼▼▼ --}}
        <div class="hidden lg:flex items-center gap-3 shrink-0">
            {{-- Seletor de Idioma Dropdown --}}
            <div class="relative group" id="lang-selector-container">
                <button id="nav-lang-btn"
                        class="inline-flex items-center justify-center gap-1.5 h-11 px-3 rounded-lg border transition-all duration-200 hover:shadow-md border-[#06458F]/30 text-[#06458F] hover:bg-[#06458F]/5 text-xs font-bold uppercase tracking-wider cursor-pointer"
                        title="Alterar Idioma">
                    <span>{{ strtoupper(App::getLocale() === 'zh_CN' ? 'zh' : App::getLocale()) }}</span>
                    <svg class="w-3 h-3 transition-transform duration-200 group-hover:rotate-180" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
                    </svg>
                </button>
                <div class="absolute right-0 mt-2 w-32 bg-white rounded-xl border border-slate-100 shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-[120] py-1.5">
                    @foreach(['pt' => 'Português', 'en' => 'English', 'fr' => 'Français', 'es' => 'Español', 'zh_CN' => '简体中文', 'kmb' => 'Kimbundu'] as $code => $name)
                        @if(App::getLocale() !== $code)
                            <a href="{{ getLocalizedUrl($code) }}"
                               class="block px-4 py-2 text-xs font-medium text-slate-700 hover:bg-slate-50 hover:text-[#06458F] transition-colors">
                                {{ $name }}
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>

            {{-- Carrinho (Abre o Drawer Lateral) --}}
            <button type="button"
                    onclick="if(typeof toggleCartDrawer === 'function') { toggleCartDrawer(true); } else { window.location.href = '{{ route('carrinho.index', ['locale' => App::getLocale()]) }}'; }"
                    id="nav-cart-btn"
                    class="relative inline-flex items-center justify-center w-11 h-11 rounded-lg border transition-all duration-200 hover:shadow-md border-[#06458F]/30 text-[#06458F] hover:bg-[#06458F]/5 cursor-pointer"
                    title="Ver Carrinho">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                </svg>
                <span id="cart-count" class="absolute -top-1.5 -right-1.5 bg-[#06458F] text-white font-bold rounded-full text-[9px] px-1.5 min-w-[18px] h-[18px] flex items-center justify-center border-2 border-white leading-none">0</span>
                <span id="nav-cart-badge" class="hidden"></span>
            </button>

            {{-- Loja Online --}}
            <a href="{{ route('loja.index') }}"
               id="nav-loja-btn"
               class="inline-flex items-center gap-2 px-6 py-3 text-xs font-bold tracking-widest uppercase rounded-lg transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 border border-transparent bg-[#06458F] text-white hover:bg-[#053A78]">
                <svg class="w-3.5 h-3.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>
                {{ __('app.navbar.shop') }}
            </a>
        </div>

        {{-- ▼▼▼ TOGGLE MOBILE ▼▼▼ --}}
        <div class="lg:hidden flex items-center gap-2 shrink-0">
            {{-- Carrinho no Mobile --}}
            <button type="button"
                    onclick="if(typeof toggleCartDrawer === 'function') { toggleCartDrawer(true); } else { window.location.href = '{{ route('carrinho.index', ['locale' => App::getLocale()]) }}'; }"
                    class="relative inline-flex items-center justify-center w-10 h-10 rounded-lg border border-[#06458F]/30 text-[#06458F] hover:bg-[#06458F]/5"
                    title="Carrinho">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>
                </svg>
                <span id="mobile-cart-count" class="absolute -top-1 -right-1 bg-[#06458F] text-white font-bold rounded-full text-[9px] w-4 h-4 flex items-center justify-center leading-none">0</span>
            </button>

            <button id="mobile-menu-button" class="p-2 transition-colors mobile-toggle text-[#06458F] hover:text-[#0A529F]">
                <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>

    {{-- ▼▼▼ MENU MOBILE ▼▼▼ --}}
    <div id="mobile-menu" class="hidden lg:hidden bg-white/98 backdrop-blur-lg border-t border-gray-200 shadow-xl">
        <nav class="flex flex-col px-6 py-4 space-y-3">
            <a href="{{ route('welcome') }}" class="nav-link font-semibold tracking-widest uppercase text-xs py-3 px-4 rounded-lg transition-all duration-200 {{ request()->routeIs('welcome') ? 'bg-[#06458F] text-white' : 'text-[#06458F] hover:bg-gray-100' }}">{{ __('app.navbar.home') }}</a>
            <a href="{{ route('sobre') }}#quem-somos" class="font-semibold tracking-widest uppercase text-xs py-3 px-4 rounded-lg transition-all duration-200 {{ request()->routeIs('sobre') ? 'bg-[#06458F] text-white' : 'text-[#06458F] hover:bg-gray-100' }}">{{ __('app.navbar.about') }}</a>
            <a href="{{ route('welcome') }}#servicos" class="font-semibold tracking-widest uppercase text-xs py-3 px-4 rounded-lg text-[#06458F] hover:bg-gray-100 transition-all duration-200">{{ __('app.navbar.services') }}</a>
            <a href="{{ route('noticias.index') }}" class="font-semibold tracking-widest uppercase text-xs py-3 px-4 rounded-lg text-[#06458F] hover:bg-gray-100 transition-all duration-200">{{ __('app.navbar.projects') }}</a>
            <a href="{{ route('formacoes.index') }}" class="font-semibold tracking-widest uppercase text-xs py-3 px-4 rounded-lg transition-all duration-200 {{ request()->is('formacoes*') ? 'bg-[#06458F] text-white' : 'text-[#06458F] hover:bg-gray-100' }}">{{ __('app.navbar.courses') }}</a>
            <a href="{{ route('welcome') }}#contacto" class="font-semibold tracking-widest uppercase text-xs py-3 px-4 rounded-lg text-[#06458F] hover:bg-gray-100 transition-all duration-200">{{ __('app.navbar.contact') }}</a>

            {{-- Idiomas no Mobile --}}
            <div class="pt-4 border-t border-gray-200">
                <span class="block text-[9px] font-bold uppercase tracking-widest text-slate-400 mb-2 px-4">Idioma / Language</span>
                <div class="grid grid-cols-6 gap-2 px-2">
                    @foreach(['pt' => 'PT', 'en' => 'EN', 'fr' => 'FR', 'es' => 'ES', 'zh_CN' => 'ZH', 'kmb' => 'KMB'] as $code => $label)
                        <a href="{{ getLocalizedUrl($code) }}"
                           class="flex items-center justify-center py-2 rounded-lg text-xs font-bold transition-all {{ App::getLocale() === $code ? 'bg-[#06458F] text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">
                            {{ $label }}
                        </a>
                    @endforeach
                </div>
            </div>

            <div class="pt-4 space-y-3 border-t border-gray-200">
                <a href="{{ route('loja.index') }}" class="flex items-center justify-center gap-2 w-full px-6 py-3 text-xs font-bold tracking-widest uppercase rounded-lg bg-[#06458F] text-white transition-all duration-200 hover:bg-[#0A529F]">
                    <svg class="w-3.5 h-3.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>
                    {{ __('app.navbar.shop') }}
                </a>
            </div>
        </nav>
    </div>
</header>

<style>
/* Hide hero slider since we now use static hero */
.hero-slider-container { display: none; }

/* Nav links — sublinhado de precisão verde (assinatura AMD) */
.nav-link {
    position: relative;
}
.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: #8BCB4A;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-link:hover::after {
    transform: scaleX(1);
}
</style>

<script>
(function () {
    var header    = document.getElementById('main-header');
    var logo      = document.getElementById('logo-img');
    var mobileBtn = document.getElementById('mobile-menu-button');
    var topbar    = document.getElementById('site-topbar');

    // Apenas a welcome page tem topbar; nas restantes header fica em top-0
    var hasTopbar = !!document.getElementById('site-topbar');
    header.className = "fixed left-0 w-full z-50 bg-white shadow-sm transition-all duration-300 ease-in-out" + (hasTopbar ? " top-[48px]" : " top-0");
    if (logo) logo.style.filter = '';

    // Na welcome page: ao scroll > 10px header sobe para top-0 (topbar esconde)
    if (hasTopbar) {
        window.addEventListener('scroll', function () {
            var scrollY = window.scrollY || window.pageYOffset;
            var top = scrollY > 10 ? 'top-0' : 'top-[48px]';
            header.className = "fixed left-0 w-full z-50 bg-white shadow-sm transition-all duration-300 ease-in-out " + top;
        }, { passive: true });
    }

    if (mobileBtn) {
        var mobileMenu = document.getElementById('mobile-menu');
        mobileBtn.addEventListener('click', function () {
            if (mobileMenu) {
                mobileMenu.classList.toggle('hidden');
            }
        });

        if (mobileMenu) {
            var mobileLinks = mobileMenu.querySelectorAll('a');
            mobileLinks.forEach(function (link) {
                link.addEventListener('click', function () {
                    mobileMenu.classList.add('hidden');
                });
            });
        }
    }
})();
</script>