@php($activeGroup = $activeGroup ?? null)
@php($navGroups = $navGroups ?? collect())
@php($hp = $anchorPrefix ?? '/')
  <!-- ===== HEADER ===== -->
  <header class="site-header{{ ($isStatic ?? true) ? ' is-static' : '' }}" id="site-header">
    <div class="header-inner">

      <div class="header-left">
        <div class="header-edge header-edge-left">
@if ($showBack ?? true)
          <button class="header-back-btn" type="button" aria-label="Back" data-cursor-label="Back">
            <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true">
              <path d="M19 12H5M11 19l-7-7 7-7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
@endif
          <div class="header-socials" aria-label="Social media">
            <a href="{{ setting('social.facebook') }}" class="social-icon" aria-label="Facebook" data-cursor-label="Facebook">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
                <path d="M13.5 21V13.5H16L16.5 10.5H13.5V8.625C13.5 7.835 13.69 7.5 14.7 7.5H16.5V4.5C16.18 4.455 15.27 4.5 14.235 4.5C12.075 4.5 10.5 5.83 10.5 8.205V10.5H8V13.5H10.5V21H13.5Z"/>
              </svg>
            </a>
            <a href="{{ setting('social.linkedin') }}" class="social-icon" aria-label="LinkedIn" data-cursor-label="LinkedIn">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor" aria-hidden="true">
                <path d="M6.5 8.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM5 10h3v10H5V10zm5 0h2.85v1.4h.04c.4-.75 1.4-1.55 2.88-1.55 3.08 0 3.65 2.02 3.65 4.64V20h-3.04v-4.7c0-1.12-.02-2.56-1.56-2.56-1.57 0-1.8 1.22-1.8 2.48V20H10V10z"/>
              </svg>
            </a>
            <a href="{{ setting('social.instagram') }}" class="social-icon" aria-label="Instagram" data-cursor-label="Instagram">
              <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                <rect x="4" y="4" width="16" height="16" rx="4"/>
                <circle cx="12" cy="12" r="3.5"/>
                <circle cx="16.5" cy="7.5" r="0.7" fill="currentColor" stroke="none"/>
              </svg>
            </a>
          </div>
        </div>
        <nav class="nav-main nav-main-left" aria-label="Primary">
          <ul>
            <li class="has-children{{ $activeGroup === 'savoir-faire' ? ' is-current-parent' : '' }}">
              <a href="{{ $hp }}#craft" data-cursor-label="Discover">{{ setting('nav.group.savoir_faire') }}</a>
              <ul class="nav-dropdown" aria-label="Disciplines">
                @foreach (($navGroups['savoir-faire'] ?? []) as $navPage)
                  <li><a href="/{{ $navPage->slug }}">{{ $navPage->nav_label ?: $navPage->title }}</a></li>
                @endforeach
              </ul>
            </li>
            <li class="has-children{{ $activeGroup === 'expertise' ? ' is-current-parent' : '' }}">
              <a href="{{ $hp }}#expertise" data-cursor-label="View">{{ setting('nav.group.expertise') }}</a>
              <ul class="nav-dropdown" aria-label="Secteurs">
                @foreach (($navGroups['expertise'] ?? []) as $navPage)
                  <li><a href="/{{ $navPage->slug }}">{{ $navPage->nav_label ?: $navPage->title }}</a></li>
                @endforeach
              </ul>
            </li>
            <li class="has-children{{ $activeGroup === 'atelier' ? ' is-current-parent' : '' }}">
              <a href="{{ $hp }}#atelier" data-cursor-label="Discover">{{ setting('nav.group.atelier') }}</a>
              <ul class="nav-dropdown" aria-label="The atelier workshop">
                @foreach (($navGroups['atelier'] ?? []) as $navPage)
                @if (($activeSlug ?? null) === $navPage->slug)
                <li class="is-current-child"><a href="/{{ $navPage->slug }}">{{ $navPage->nav_label ?: $navPage->title }}</a></li>
                @else
                <li><a href="/{{ $navPage->slug }}">{{ $navPage->nav_label ?: $navPage->title }}</a></li>
                @endif
                @endforeach
              </ul>
            </li>
          </ul>
        </nav>
      </div>

      <a href="/" class="logo" aria-label="Atelier Funfrock — home">
        <span class="logo-top">Atelier</span>
        <span class="logo-name">Funfrock</span>
      </a>

      <div class="header-right">
        <nav class="nav-main nav-main-right" aria-label="Secondary">
          <ul>
@if (($activeSlug ?? null) === 'gallery')
            <li><a href="/gallery" class="is-current" data-cursor-label="Gallery">{{ setting('nav.link.projects') }}</a></li>
@else
            <li><a href="/gallery" data-cursor-label="Gallery">{{ setting('nav.link.projects') }}</a></li>
@endif
@if (($activeSlug ?? null) === 'references')
            <li><a href="/references" class="is-current" data-cursor-label="Houses">{{ setting('nav.link.references') }}</a></li>
@else
            <li><a href="/references" data-cursor-label="Houses">{{ setting('nav.link.references') }}</a></li>
@endif
@if (($activeSlug ?? null) === 'contact')
            <li><a href="/contact" class="is-current" data-cursor-label="Write">{{ setting('nav.link.contact') }}</a></li>
@else
            <li><a href="/contact" data-cursor-label="Write">{{ setting('nav.link.contact') }}</a></li>
@endif
          </ul>
        </nav>
        <span class="lang">EN <span class="lang-sep">/</span> <a href="#" class="lang-alt">FR</a></span>
        <button class="menu-btn" id="menuBtn" aria-label="Open menu">
          <span></span><span></span>
        </button>
      </div>

    </div>
  </header>