@php
  $isHome = request()->routeIs('home');
  $serviceLinks = ($sections['features'] ?? null)?->items->filter(fn ($item) => filled($item->link)) ?? collect();
@endphp
{{-- `scrolling-navbar` is the JS hook (main.js) that toggles `top-nav-collapse`
     on/off based on scroll position, for the transparent-over-hero effect —
     only relevant on the homepage. On other pages it's applied statically
     below instead, and must NOT carry `scrolling-navbar`, or that same JS
     scroll handler strips it back off (matching on class name, not page)
     the moment scrollY drops near the top. --}}
<nav class="navbar navbar-expand-lg fixed-top indigo {{ $isHome ? 'scrolling-navbar' : 'top-nav-collapse' }}">
  <div class="container">
    <div class="navbar-header">
      <a href="{{ route('home') }}" class="navbar-brand"><img class="img-fulid" src="{{ $theme?->logoUrl() ?? asset('dsi/img/dsi2.png') }}" alt=""></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false" aria-label="Toggle navigation">
        <i class="lnr lnr-menu"></i>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="navbar-nav mr-auto w-100 justify-content-end">
        <li class="nav-item">
          <a class="nav-link {{ $isHome ? 'page-scroll' : '' }}" href="{{ $isHome ? '#hero-area' : route('home') }}">{{ __('Home') }}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link {{ $isHome ? 'page-scroll' : '' }}" href="{{ $isHome ? '#services' : route('home').'#services' }}">{{ __('About') }}</a>
        </li>
        <li class="nav-item {{ $serviceLinks->isNotEmpty() ? 'nav-hover-dropdown' : '' }}">
          <a class="nav-link {{ $isHome ? 'page-scroll' : '' }}" href="{{ $isHome ? '#features' : route('home').'#features' }}">{{ __('Services') }}</a>
          @if ($serviceLinks->isNotEmpty())
            <div class="dropdown-menu">
              @foreach ($serviceLinks as $item)
                <a class="dropdown-item" href="{{ $item->link }}" target="_blank" rel="noopener noreferrer">{{ $item->title }}</a>
              @endforeach
            </div>
          @endif
        </li>
        <li class="nav-item nav-item-cta">
          <a class="btn btn-common nav-contact-btn {{ request()->routeIs('contact') ? 'active' : '' }}" href="{{ route('contact') }}">{{ __('Contact') }}</a>
        </li>
        <li class="nav-item lang-switch">
          <a href="{{ route('locale.switch', 'id') }}" class="{{ app()->getLocale() === 'id' ? 'active' : '' }}">ID</a><span>/</span><a href="{{ route('locale.switch', 'en') }}" class="{{ app()->getLocale() === 'en' ? 'active' : '' }}">EN</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- Mobile Menu Start -->
  <ul class="mobile-menu">
     <li>
        <a class="{{ $isHome ? 'page-scroll' : '' }}" href="{{ $isHome ? '#hero-area' : route('home') }}">{{ __('Home') }}</a>
      </li>
      <li>
        <a class="{{ $isHome ? 'page-scroll' : '' }}" href="{{ $isHome ? '#services' : route('home').'#services' }}">{{ __('About') }}</a>
      </li>
      @if ($serviceLinks->isNotEmpty())
        <li>
          <a class="{{ $isHome ? 'page-scroll' : '' }}" href="{{ $isHome ? '#features' : route('home').'#features' }}">{{ __('Services') }}</a>
          <ul>
            @foreach ($serviceLinks as $item)
              <li><a href="{{ $item->link }}" target="_blank" rel="noopener noreferrer">{{ $item->title }}</a></li>
            @endforeach
          </ul>
        </li>
      @else
        <li>
          <a class="{{ $isHome ? 'page-scroll' : '' }}" href="{{ $isHome ? '#features' : route('home').'#features' }}">{{ __('Services') }}</a>
        </li>
      @endif
      <li>
        <a href="{{ route('contact') }}">{{ __('Contact') }}</a>
      </li>
      <li class="mobile-lang-switch">
        <a href="{{ route('locale.switch', 'id') }}" class="{{ app()->getLocale() === 'id' ? 'active' : '' }}">ID</a> / <a href="{{ route('locale.switch', 'en') }}" class="{{ app()->getLocale() === 'en' ? 'active' : '' }}">EN</a>
      </li>
  </ul>
  <!-- Mobile Menu End -->
</nav>