@props(['solid' => false])

<nav id="navbar" data-solid="{{ $solid ? '1' : '0' }}"
    class="fixed top-0 inset-x-0 z-50 py-4 transition-all duration-300 {{ $solid ? 'bg-[#0a0a0a]/82 border-b border-brand-green/15 backdrop-blur-[16px] shadow-[0_10px_30px_-10px_rgba(0,0,0,0.7)]' : 'bg-transparent border-b border-transparent backdrop-blur-none shadow-none' }}">

    <div class="max-w-[1200px] mx-auto px-6 flex items-center justify-between">

        {{-- Logo — glow verde para destacar sobre fundo escuro --}}
        <a href="{{ url('/') }}"
            class="flex items-center gap-2.5 no-underline font-heading font-bold text-[1.4rem] text-white">
            <svg width="36" height="36" viewBox="0 0 36 36" fill="none" class="shrink-0"
                style="filter: drop-shadow(0 0 1px rgba(34,197,94,0.32));">
                <rect width="36" height="36" rx="8" fill="#1a1a1a" />
                <rect x="9" y="10" width="12" height="3.5" rx="1.75" fill="#22C55E" />
                <rect x="9" y="16.25" width="18" height="3.5" rx="1.75" fill="#22C55E" />
                <rect x="9" y="22.5" width="15" height="3.5" rx="1.75" fill="#22C55E" />
            </svg>
            Lined
        </a>

        {{-- Links de navegação (desktop) --}}
        <ul class="hidden md:flex items-center gap-8 list-none m-0 p-0">
            <li>
                <a href="{{ route('home') }}"
                    class="text-[0.9rem] font-medium no-underline transition-colors duration-200 {{ request()->routeIs('home') ? 'text-white' : 'text-gray-400 hover:text-white' }}">
                    {{ __('Início') }}
                </a>
            </li>
            <li>
                <a href="{{ route('about') }}"
                    class="text-[0.9rem] font-medium no-underline transition-colors duration-200 {{ request()->routeIs('about') ? 'text-white' : 'text-gray-400 hover:text-white' }}">
                    {{ __('Sobre nós') }}
                </a>
            </li>
            <li>
                <a href="{{ route('work-with-us') }}"
                    class="text-[0.9rem] font-medium no-underline transition-colors duration-200 {{ request()->routeIs('work-with-us') ? 'text-white' : 'text-gray-400 hover:text-white' }}">
                    {{ __('Para negocios') }}
                </a>
            </li>
        </ul>

        {{-- Ações (desktop) --}}
        <div class="hidden md:flex items-center gap-3">
            {{-- Selector de Idioma (Desktop) --}}
            <!-- <div class="relative inline-block text-left mr-1" id="lang-selector-desktop">
                <button onclick="toggleLangDropdown()"
                    class="inline-flex items-center gap-1.5 px-3 py-2.5 bg-white/5 border border-white/10 hover:border-brand-green/45 hover:bg-white/10 text-white rounded-xl text-xs font-semibold cursor-pointer transition-all duration-200">
                    @if (app()->getLocale() === 'pt_BR')
🇧🇷 <span class="hidden sm:inline">PT</span>
@elseif(app()->getLocale() === 'es')
🇪🇸 <span class="hidden sm:inline">ES</span>
@else
🇺🇸 <span class="hidden sm:inline">EN</span>
@endif
                    <svg id="dchevron-lang-desktop" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" style="transition: transform 0.22s ease;">
                        <path d="M6 9l6 6 6-6" />
                    </svg>
                </button>
                <div id="drop-lang-desktop" class="hidden absolute right-0 mt-2 w-32 rounded-xl z-50 shadow-[0_16px_48px_rgba(0,0,0,0.85)] border border-white/20 bg-[#111111]/95 backdrop-blur-[16px] overflow-hidden">
                    <a href="?lang=pt_BR" class="flex items-center gap-2 px-4 py-2.5 text-xs text-white/70 hover:text-white hover:bg-white/5 no-underline transition-colors {{ app()->getLocale() === 'pt_BR' ? 'text-brand-green font-bold bg-white/5' : '' }}">
                        🇧🇷 Português
                    </a>
                    <a href="?lang=es" class="flex items-center gap-2 px-4 py-2.5 text-xs text-white/70 hover:text-white hover:bg-white/5 no-underline transition-colors {{ app()->getLocale() === 'es' ? 'text-brand-green font-bold bg-white/5' : '' }}">
                        🇪🇸 Español
                    </a>
                    <a href="?lang=en" class="flex items-center gap-2 px-4 py-2.5 text-xs text-white/70 hover:text-white hover:bg-white/5 no-underline transition-colors {{ app()->getLocale() === 'en' ? 'text-brand-green font-bold bg-white/5' : '' }}">
                        🇺🇸 English
                    </a>
                </div>
            </div> -->

            @if (session('lined_token'))
                @php
                    $authUser    = (object)(array) session('lined_user');
                    $authRole    = (int) session('lined_role', 0);
                    $dashRoute   = match($authRole) {
                        1       => 'owner.dashboard.index',
                        2       => 'superadmin.dashboard.index',
                        default => 'home',
                    };
                    $roleLabel   = match($authRole) {
                        1       => 'Owner',
                        2       => 'Super Admin',
                        default => 'Cliente',
                    };
                @endphp

                {{-- Dropdown desktop --}}
                <div class="relative" id="user-dropdown-desktop">
                    <button onclick="toggleUserDropdown()"
                        class="flex items-center gap-2.5 cursor-pointer bg-transparent border-0 p-0">
                        <div class="w-10 h-10 rounded-full bg-brand-green/20 border border-brand-green/30 flex items-center justify-center shrink-0 overflow-hidden">
                            @if (!empty($authUser->photo))
                                <img src="{{ $authUser->photo }}" alt="{{ $authUser->name ?? '' }}" class="w-full h-full object-cover">
                            @else
                                <span class="text-brand-green text-sm font-bold">{{ strtoupper(substr($authUser->name ?? 'U', 0, 1)) }}</span>
                            @endif
                        </div>
                        <span class="text-white text-[0.85rem] font-medium max-w-[120px] truncate">{{ $authUser->name ?? 'Usuário' }}</span>
                        <svg id="user-chevron" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" style="transition: transform 0.2s ease; color: #9ca3af;">
                            <path d="M6 9l6 6 6-6"/>
                        </svg>
                    </button>

                    <div id="user-drop" class="hidden absolute right-0 mt-2 w-52 rounded-xl shadow-[0_16px_48px_rgba(0,0,0,0.85)] border border-white/12 bg-[#111111]/95 backdrop-blur-[16px] overflow-hidden z-50">
                        {{-- Info --}}
                        <div class="px-4 py-3 border-b border-white/8">
                            <p class="text-white text-xs font-semibold truncate">{{ $authUser->name ?? 'Usuário' }}</p>
                            <p class="text-gray-500 text-xs mt-0.5">{{ $roleLabel }}</p>
                        </div>
                        {{-- Links --}}
                        <div class="py-1.5">
                            @if($authRole !== 3)
                            <a href="{{ route($dashRoute) }}"
                                class="flex items-center gap-3 px-4 py-2.5 text-gray-300 hover:text-white hover:bg-white/6 text-xs font-medium no-underline transition-colors">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
                                Dashboard
                            </a>
                            @endif
                            @if($authRole === 3)
                            <a href="{{ route('customer.profile') }}"
                                class="flex items-center gap-3 px-4 py-2.5 text-gray-300 hover:text-white hover:bg-white/6 text-xs font-medium no-underline transition-colors">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                                {{ __('Perfil') }}
                            </a>
                            <a href="{{ route('customer.appointments') }}"
                                class="flex items-center gap-3 px-4 py-2.5 text-gray-300 hover:text-white hover:bg-white/6 text-xs font-medium no-underline transition-colors">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                                {{ __('Minhas Reservas') }}
                            </a>
                            @endif
                        </div>
                        {{-- Logout --}}
                        <div class="border-t border-white/8 py-1.5">
                            <form id="header-logout-form" method="POST" action="{{ route('logout') }}">@csrf</form>
                            <button type="button" onclick="confirmForm(this)" data-form="header-logout-form"
                                data-title="Sair da conta"
                                data-message="Tem certeza que deseja encerrar a sessão?"
                                data-confirm="Sair" data-danger="true"
                                class="w-full flex items-center gap-3 px-4 py-2.5 text-red-400 hover:text-red-300 hover:bg-red-400/8 text-xs font-medium transition-colors bg-transparent border-0 cursor-pointer text-left">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                                Sair
                            </button>
                        </div>
                    </div>
                </div>
            @else
                <div class="flex items-center gap-1 bg-white/5 rounded-2xl p-1">
                    <a href="{{ route('login') }}"
                        class="inline-flex items-center justify-center px-4 py-2 rounded-xl text-[0.85rem] font-semibold no-underline transition-all duration-200
                               {{ request()->routeIs('login') ? 'bg-white/15 text-white' : 'text-gray-400 hover:text-white' }}">
                        {{ __('Entrar') }}
                    </a>
                    <a href="{{ route('register') }}"
                        class="inline-flex items-center justify-center px-4 py-2 rounded-xl text-[0.85rem] font-semibold text-white no-underline transition-all duration-200
                               {{ request()->routeIs('register*') ? 'bg-brand-green shadow-[0_0_14px_rgba(34,197,94,0.4)]' : 'bg-brand-green/70 hover:bg-brand-green' }}">
                        {{ __('Cadastrar-se') }}
                    </a>
                </div>
            @endif
        </div>

        {{-- Botão mobile --}}
        <button id="menuBtn" class="md:hidden p-2 bg-transparent border-0 cursor-pointer flex flex-col gap-[5px]"
            aria-label="Menu">
            <span class="block w-[22px] h-[2px] bg-white rounded-sm transition-all duration-300"></span>
            <span class="block w-[22px] h-[2px] bg-white rounded-sm transition-all duration-300"></span>
            <span class="block w-[22px] h-[2px] bg-white rounded-sm transition-all duration-300"></span>
        </button>

    </div>

    {{-- Menu mobile --}}
    <div id="mobileMenu" class="hidden md:hidden border-t border-white/10 bg-brand-black/95 backdrop-blur-xl px-6 py-5">
        <ul class="list-none m-0 p-0 flex flex-col gap-4 mb-5">
            <li>
                <a href="{{ route('home') }}"
                    class="text-[0.95rem] font-medium no-underline block transition-colors {{ request()->routeIs('home') ? 'text-white' : 'text-gray-300 hover:text-white' }}">
                    {{ __('Início') }}
                </a>
            </li>
            <li>
                <a href="{{ route('about') }}"
                    class="text-[0.95rem] font-medium no-underline block transition-colors {{ request()->routeIs('about') ? 'text-white' : 'text-gray-300 hover:text-white' }}">
                    {{ __('Sobre nós') }}
                </a>
            </li>
            <li>
                <a href="{{ route('work-with-us') }}"
                    class="text-[0.95rem] font-medium no-underline block transition-colors {{ request()->routeIs('work-with-us') ? 'text-white' : 'text-gray-300 hover:text-white' }}">
                    {{ __('Para negocios') }}
                </a>
            </li>
        </ul>
        <div class="flex flex-col gap-3">
            @if (session('lined_token'))
                @php
                    $authUserM  = (object)(array) session('lined_user');
                    $authRoleM  = (int) session('lined_role', 0);
                    $dashRouteM = match($authRoleM) { 1 => 'owner.dashboard.index', 2 => 'superadmin.dashboard.index', default => 'home' };
                    $roleLabelM = match($authRoleM) { 1 => 'Owner', 2 => 'Super Admin', default => 'Cliente' };
                @endphp

                {{-- Info usuario mobile --}}
                <div class="flex items-center gap-3 px-1 py-2 rounded-xl bg-white/4 border border-white/8 mb-1">
                    <div class="w-9 h-9 rounded-full bg-brand-green/20 border border-brand-green/30 flex items-center justify-center shrink-0 overflow-hidden">
                        @if (!empty($authUserM->photo))
                            <img src="{{ $authUserM->photo }}" alt="{{ $authUserM->name ?? '' }}" class="w-full h-full object-cover">
                        @else
                            <span class="text-brand-green text-sm font-bold">{{ strtoupper(substr($authUserM->name ?? 'U', 0, 1)) }}</span>
                        @endif
                    </div>
                    <div class="min-w-0">
                        <p class="text-white text-sm font-semibold truncate">{{ $authUserM->name ?? 'Usuário' }}</p>
                        <p class="text-gray-500 text-xs">{{ $roleLabelM }}</p>
                    </div>
                </div>

                @if($authRoleM !== 3)
                <a href="{{ route($dashRouteM) }}"
                    class="flex items-center gap-3 py-2.5 px-3 rounded-xl text-gray-300 hover:text-white hover:bg-white/6 text-sm font-medium no-underline transition-colors">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>
                    Dashboard
                </a>
                @endif

                @if($authRoleM === 3)
                <a href="{{ route('customer.profile') }}"
                    class="flex items-center gap-3 py-2.5 px-3 rounded-xl text-gray-300 hover:text-white hover:bg-white/6 text-sm font-medium no-underline transition-colors">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                    {{ __('Perfil') }}
                </a>
                <a href="{{ route('customer.appointments') }}"
                    class="flex items-center gap-3 py-2.5 px-3 rounded-xl text-gray-300 hover:text-white hover:bg-white/6 text-sm font-medium no-underline transition-colors">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                    {{ __('Minhas Reservas') }}
                </a>
                @endif

                <form id="header-logout-form-mobile" method="POST" action="{{ route('logout') }}">@csrf</form>
                <button type="button" onclick="confirmForm(this)" data-form="header-logout-form-mobile"
                    data-title="Sair da conta"
                    data-message="Tem certeza que deseja encerrar a sessão?"
                    data-confirm="Sair" data-danger="true"
                    class="flex items-center gap-3 py-2.5 px-3 rounded-xl text-red-400 hover:text-red-300 hover:bg-red-400/8 text-sm font-medium bg-transparent border-0 cursor-pointer w-full text-left transition-colors">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                    Sair
                </button>
            @else
                <div class="flex gap-1 bg-white/5 rounded-2xl p-1">
                    <a href="{{ route('login') }}"
                        class="flex-1 text-center py-2.5 rounded-xl text-[0.9rem] font-semibold no-underline transition-all duration-200
                               {{ request()->routeIs('login') ? 'bg-white/15 text-white' : 'text-gray-400 hover:text-white' }}">
                        {{ __('Entrar') }}
                    </a>
                    <a href="{{ route('register') }}"
                        class="flex-1 text-center py-2.5 rounded-xl text-[0.9rem] font-semibold text-white no-underline transition-all duration-200
                               {{ request()->routeIs('register*') ? 'bg-brand-green shadow-[0_0_14px_rgba(34,197,94,0.4)]' : 'bg-brand-green/70 hover:bg-brand-green' }}">
                        {{ __('Cadastrar-se') }}
                    </a>
                </div>
            @endif
        </div>

        {{-- Selector de Idioma (Mobile) --}}
        <div class="flex items-center justify-center gap-2.5 py-3.5 border-t border-white/10 mt-5">
            <a href="?lang=pt_BR"
                class="flex items-center justify-center gap-1.5 px-4 py-2 rounded-xl border {{ app()->getLocale() === 'pt_BR' ? 'border-brand-green bg-brand-green/10 text-brand-green font-bold' : 'border-white/10 text-white/60' }} text-xs no-underline transition-all">
                🇧🇷 <span class="font-medium">PT</span>
            </a>
            <a href="?lang=es"
                class="flex items-center justify-center gap-1.5 px-4 py-2 rounded-xl border {{ app()->getLocale() === 'es' ? 'border-brand-green bg-brand-green/10 text-brand-green font-bold' : 'border-white/10 text-white/60' }} text-xs no-underline transition-all">
                🇪🇸 <span class="font-medium">ES</span>
            </a>
            <a href="?lang=en"
                class="flex items-center justify-center gap-1.5 px-4 py-2 rounded-xl border {{ app()->getLocale() === 'en' ? 'border-brand-green bg-brand-green/10 text-brand-green font-bold' : 'border-white/10 text-white/60' }} text-xs no-underline transition-all">
                🇺🇸 <span class="font-medium">EN</span>
            </a>
        </div>
    </div>

</nav>

@push('scripts')
    <script>
        const navbar = document.getElementById('navbar');
        const navSolid = navbar.dataset.solid === '1';

        function updateNavbar() {
            if (navSolid || window.scrollY > 20) {
                navbar.className =
                    "fixed top-0 inset-x-0 z-50 py-4 bg-[#0a0a0a]/82 border-b border-brand-green/15 backdrop-blur-[16px] transition-all duration-300 shadow-[0_10px_30px_-10px_rgba(0,0,0,0.7)]";
            } else {
                navbar.className =
                    "fixed top-0 inset-x-0 z-50 py-4 bg-transparent border-b border-transparent backdrop-blur-none transition-all duration-300 shadow-none";
            }
        }
        window.addEventListener('scroll', updateNavbar);
        updateNavbar();

        const menuBtn = document.getElementById('menuBtn');
        const mobileMenu = document.getElementById('mobileMenu');
        menuBtn.addEventListener('click', () => {
            mobileMenu.classList.toggle('hidden');
        });

        // Dropdown de usuario
        function toggleUserDropdown() {
            const drop    = document.getElementById('user-drop');
            const chevron = document.getElementById('user-chevron');
            if (!drop) return;
            drop.classList.toggle('hidden');
            chevron.style.transform = drop.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
        }

        window.addEventListener('click', function(e) {
            const container = document.getElementById('user-dropdown-desktop');
            const drop      = document.getElementById('user-drop');
            const chevron   = document.getElementById('user-chevron');
            if (container && !container.contains(e.target) && drop) {
                drop.classList.add('hidden');
                if (chevron) chevron.style.transform = 'rotate(0deg)';
            }
        });

        // Toggle dropdown de idioma
        function toggleLangDropdown() {
            const drop = document.getElementById('drop-lang-desktop');
            const chevron = document.getElementById('dchevron-lang-desktop');
            if (drop) {
                drop.classList.toggle('hidden');
                if (chevron) {
                    chevron.style.transform = drop.classList.contains('hidden') ? 'rotate(0deg)' : 'rotate(180deg)';
                }
            }
        }

        // Cerrar dropdown al hacer click fuera
        window.addEventListener('click', function(e) {
            const container = document.getElementById('lang-selector-desktop');
            const drop = document.getElementById('drop-lang-desktop');
            const chevron = document.getElementById('dchevron-lang-desktop');
            if (container && !container.contains(e.target)) {
                if (drop) {
                    drop.classList.add('hidden');
                }
                if (chevron) {
                    chevron.style.transform = 'rotate(0deg)';
                }
            }
        });

        // Smooth scroll para links de ancoragem (#como-funciona, #profissionais, etc.)
        document.querySelectorAll('#navbar a[href*="#"]').forEach(link => {
            link.addEventListener('click', function(e) {
                const href = this.getAttribute('href');
                // Extrair o hash do href (pode ser "/#como-funciona" ou "#profissionais")
                const hashIndex = href.indexOf('#');
                if (hashIndex === -1) return;
                const hash = href.substring(hashIndex);
                const target = document.querySelector(hash);
                if (target) {
                    e.preventDefault();
                    const offset = 50; // Altura do navbar fixo
                    const top = target.getBoundingClientRect().top + window.pageYOffset - offset;
                    window.scrollTo({
                        top: top,
                        behavior: 'smooth'
                    });

                    // Fechar menu mobile se estiver aberto
                    if (mobileMenu && !mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
    </script>
@endpush