@php
    $headerBlock = \App\Models\Block::where('type', 'header_block')->first();
    $defaultLogo = asset('img/default-logo.png');
    $logoImage = $headerBlock ? asset('storage/' . $headerBlock->logo_image) : $defaultLogo;
    $logoClass = 'logo-dark'; // Set this to a consistent value for all pages
@endphp

<nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 10;">
    <div class="container-fluid p-md-0">
        <a class="navbar-brand {{ $logoClass }}" href="/" aria-label="Viking Roots Logo" style="z-index: 20; background-image: url('{{ $logoImage }}');">
        </a>
        <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavId" aria-controls="collapsibleNavId" aria-expanded="false" aria-label="Toggle navigation" style="position: relative; z-index: 20; background: white; margin-right: 2rem;">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="collapsibleNavId" style="z-index: 20;">
            <ul class="navbar-nav ms-auto mt-2 mt-md-0 nav-white">
                @php
                    $pageItems = \App\Models\Page::requireLogin(false)->get();
                @endphp
                @foreach ($pageItems as $pageItem)
                    <li class="nav-item mobile-home me-md-2">
                        <a class="text-uppercase nav-link text-white" href="/{{ $pageItem->slug }}">{{ $pageItem->title }}</a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
    <div class="overlay" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1)); z-index: 5;"></div>
</nav>