@php
    // PRD 3.24 / 4.6: the navbar is transparent over the hero and turns into a
    // white blurred bar after scrolling — but only on pages that actually have
    // a gradient hero behind it. Everywhere else it starts solid, because
    // transparent navigation over white body content is unreadable.
    $overlayRoutes = ['home', 'about', 'portfolio.index', 'services.index', 'blog.index', 'contact.create'];
    $headerMode = request()->routeIs($overlayRoutes) ? 'overlay' : 'solid';

    $navItems = [
        ['label' => 'Home', 'route' => 'home'],
        ['label' => 'Portfolio', 'route' => 'portfolio.index'],
        ['label' => 'Services', 'route' => 'services.index'],
        ['label' => 'Blog', 'route' => 'blog.index'],
        ['label' => 'About', 'route' => 'about'],
    ];
@endphp

<header
    class="site-header {{ $headerMode === 'solid' ? 'site-header--scrolled' : '' }}"
    data-site-header="{{ $headerMode }}"
>
    <nav class="navbar container-site py-3 flex-nowrap" aria-label="Primary navigation">
        <a class="navbar-brand d-flex align-items-center gap-2 me-auto" href="{{ route('home') }}">
            @if(!empty($generalSettings['logo']))
                <img src="{{ asset('storage/'.$generalSettings['logo']) }}" alt="{{ $generalSettings['site_name'] ?? config('app.name') }}" style="height: 36px; width: auto;">
            @else
                <span class="fw-bold" style="color: var(--color-heading); font-size: 1.25rem;">
                    {{ $generalSettings['site_name'] ?? config('app.name') }}
                </span>
            @endif
        </a>

        {{-- --- Desktop navigation --------------------------------------- --}}
        <ul class="navbar-nav d-none d-lg-flex flex-row align-items-center gap-1 mb-0">
            @foreach($navItems as $item)
                @php $isActive = request()->routeIs($item['route'].'*'); @endphp
                <li class="nav-item">
                    <a
                        class="nav-link fw-medium px-3 {{ $isActive ? 'is-active' : '' }}"
                        href="{{ route($item['route']) }}"
                        @if($isActive) aria-current="page" @endif
                    >{{ $item['label'] }}</a>
                </li>
            @endforeach

            <li class="nav-item">
                <a href="{{ route('search') }}" class="nav-link px-3" aria-label="Search the site">
                    <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                </a>
            </li>

            <li class="nav-item ms-2">
                <a href="{{ route('contact.create') }}" class="btn btn-primary-gradient btn-sm">Let&rsquo;s Talk</a>
            </li>
        </ul>

        {{-- --- Mobile trigger ------------------------------------------- --}}
        <button
            class="btn btn-secondary-outline btn-sm d-lg-none"
            type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#mobileNav"
            aria-controls="mobileNav"
            aria-label="Open menu"
        >
            <i class="fa-solid fa-bars" aria-hidden="true"></i>
        </button>
    </nav>
</header>

{{-- --- Mobile slide-in panel (PRD 3.24 / 4.5) ---------------------------- --}}
<div class="offcanvas offcanvas-end d-lg-none" tabindex="-1" id="mobileNav" aria-labelledby="mobileNavLabel" style="width: min(320px, 88vw);">
    <div class="offcanvas-header border-bottom" style="border-color: var(--color-border) !important;">
        <span class="offcanvas-title fw-bold" id="mobileNavLabel" style="color: var(--color-heading);">
            {{ $generalSettings['site_name'] ?? config('app.name') }}
        </span>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close menu"></button>
    </div>

    <div class="offcanvas-body d-flex flex-column">
        <nav class="d-flex flex-column gap-1 mb-4" aria-label="Mobile navigation">
            @foreach($navItems as $item)
                @php $isActive = request()->routeIs($item['route'].'*'); @endphp
                <a
                    href="{{ route($item['route']) }}"
                    class="mobile-nav-link {{ $isActive ? 'is-active' : '' }}"
                    @if($isActive) aria-current="page" @endif
                >{{ $item['label'] }}</a>
            @endforeach
            <a href="{{ route('search') }}" class="mobile-nav-link">Search</a>
        </nav>

        <a href="{{ route('contact.create') }}" class="btn btn-primary-gradient w-100 mb-4">Let&rsquo;s Talk</a>

        @if($socialLinks->isNotEmpty())
            <div class="d-flex flex-wrap gap-2 mt-auto">
                @foreach($socialLinks as $link)
                    <a
                        href="{{ $link->url }}"
                        target="_blank"
                        rel="noopener noreferrer"
                        class="share-button"
                        aria-label="{{ $link->platform }}"
                    >
                        <i class="{{ $link->icon_class ?: 'fa-solid fa-link' }}" aria-hidden="true"></i>
                    </a>
                @endforeach
            </div>
        @endif
    </div>
</div>