{{-- Top utility bar --}}
<div class="topbar">
    <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-2 sm:px-6 lg:px-8">
        <p class="hidden sm:block">{{ __('Sri Lanka Job Network — Find careers & employment') }}</p>
        <p class="sm:hidden">{{ __('Jobs in Sri Lanka') }}</p>
        <div class="flex items-center gap-4">
            <a href="{{ route('pages.show', 'contact') }}" class="hover:text-white">{{ __('Applicant Support') }}</a>
            @guest
                <a href="{{ route('register') }}?role=employer" class="font-semibold text-brand-blue hover:text-white">{{ __('Post Your Vacancy') }}</a>
            @else
                @if(auth()->user()->isEmployer())
                    <a href="{{ route('employer.jobs.create') }}" class="font-semibold text-brand-blue hover:text-white">{{ __('Post Your Vacancy') }}</a>
                @endif
            @endguest
        </div>
    </div>
</div>

{{-- Main header --}}
<header class="site-header sticky top-0 z-50">
    <div class="mx-auto max-w-7xl px-4 py-3 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between gap-4">
            <x-site-logo />

            <nav class="hidden items-center gap-6 lg:flex" aria-label="{{ __('Main navigation') }}">
                <a href="{{ route('jobs.index') }}" class="nav-link">{{ __('All Vacancies') }}</a>
                <a href="{{ route('jobs.index') }}?sort=latest" class="nav-link">{{ __('Recent Jobs') }}</a>
                <a href="{{ route('pages.show', 'about') }}" class="nav-link">{{ __('About Us') }}</a>
                <a href="{{ route('pages.show', 'contact') }}" class="nav-link">{{ __('Contact Us') }}</a>
                @auth
                    <a href="{{ match(auth()->user()->role->value) { 'admin' => route('admin.dashboard'), 'employer' => route('employer.dashboard'), default => route('seeker.dashboard') } }}" class="nav-link">{{ __('My Account') }}</a>
                @endauth
            </nav>

            <div class="flex items-center gap-2 sm:gap-3">
                @guest
                    <a href="{{ route('login') }}" class="btn-ghost hidden sm:inline-flex">{{ __('Log In') }}</a>
                    <a href="{{ route('register') }}" class="btn-primary !px-4 !py-2 text-sm">{{ __('Sign Up') }}</a>
                @else
                    <span class="hidden text-sm text-gray-500 sm:inline">{{ auth()->user()->name }}</span>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="btn-secondary !px-3 !py-2 text-sm">{{ __('Logout') }}</button>
                    </form>
                @endguest
            </div>
        </div>
    </div>
</header>