{!-- =====================================================================
     embed_global_navigation
     Top header / nav for every page. Alpine `shell` provides dark mode
     toggle + mobile drawer state. Desktop dropdowns use
     <el-popover> from @tailwindplus/elements (loaded via ginsburg.js).
     ===================================================================== --}
<header
  x-data="shell"
  class="sticky top-0 z-50 gf-surface-base gf-shadow-neu-sm border-b border-gray-200 dark:border-gray-800"
>
  <div class="gf-container flex items-center justify-between gap-4 py-3">

    {!-- ============== Logo ============== --}
    <a href="{site_url}" class="flex items-center gap-2 shrink-0">
      <span class="hidden md:inline-flex font-display font-semibold tracking-tight text-lg sm:text-xl">
        <span class="text-primary-700 dark:text-primary-300">ginsbur</span><span class="text-gray-900 dark:text-gray-100">gf</span><span class="text-primary-700 dark:text-primary-300">oundation.org</span>
      </span>
      <span class="md:hidden font-display font-bold text-2xl text-primary-600 dark:text-primary-400">gf</span>
    </a>

    {!-- ============== Desktop nav ============== --}
    <nav class="hidden lg:flex items-center gap-1" aria-label="Primary">

      {!-- About Us --}
      <el-popover-group class="contents">
        <el-popover-button
          class="gf-btn-ghost px-3 py-2 {if segment_1 =='foundation' || segment_1 =='people'}gf-nav-link-active{/if}"
        >
          <span>About Us</span>
          <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </el-popover-button>
        <el-popover anchor="bottom start" class="gf-popover-panel">
          {exp:channel:entries channel="foundation" dynamic="no" status="open" disable="categories|member_data"}
            <a href="{site_url}foundation/{url_title}" class="gf-popover-link {if segment_2 =='{url_title}'}gf-nav-link-active{/if}">{title}</a>
          {/exp:channel:entries}
          <a href="{site_url}people/ginsburg" class="gf-popover-link {if segment_1 =='people' && segment_2 =='ginsburg'}gf-nav-link-active{/if}">Composer Gerald Ginsburg</a>
          <a href="{site_url}people" class="gf-popover-link {if segment_1 =='people' && segment_2 == ''}gf-nav-link-active{/if}">People</a>
        </el-popover>
      </el-popover-group>

      {!-- Albums --}
      <el-popover-group class="contents">
        <el-popover-button class="gf-btn-ghost px-3 py-2 {if segment_1 =='album'}gf-nav-link-active{/if}">
          <span>Albums</span>
          <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </el-popover-button>
        <el-popover anchor="bottom start" class="gf-popover-panel">
          {exp:channel:entries channel="album" dynamic="no" disable="categories|member_data"}
            <a href="{site_url}album/{url_title}" class="gf-popover-link {if segment_2 =='{url_title}'}gf-nav-link-active{/if}">{title}</a>
          {/exp:channel:entries}
        </el-popover>
      </el-popover-group>

      {!-- Works --}
      <el-popover-group class="contents">
        <el-popover-button class="gf-btn-ghost px-3 py-2 {if segment_1 =='works'}gf-nav-link-active{/if}">
          <span>Works</span>
          <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </el-popover-button>
        <el-popover anchor="bottom start" class="gf-popover-panel">
          <a href="{site_url}contact" class="gf-popover-link">Request Scores</a>
          {exp:channel:entries channel="works" dynamic="no" status="open" disable="categories|member_data"}
            <a href="{site_url}works/{url_title}" class="gf-popover-link">{title}</a>
          {/exp:channel:entries}
        </el-popover>
      </el-popover-group>

      {!-- Gallery --}
      <el-popover-group class="contents">
        <el-popover-button class="gf-btn-ghost px-3 py-2 {if segment_1 =='gallery'}gf-nav-link-active{/if}">
          <span>Gallery</span>
          <svg class="size-4" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
        </el-popover-button>
        <el-popover anchor="bottom start" class="gf-popover-panel">
          {exp:channel:entries channel="gallery" dynamic="no" status="open" disable="categories|member_data"}
            <a href="{site_url}gallery/{url_title}" class="gf-popover-link">{title}</a>
          {/exp:channel:entries}
        </el-popover>
      </el-popover-group>

      <a href="{site_url}blog" class="gf-btn-ghost px-3 py-2 {if segment_1 =='blog'}gf-nav-link-active{/if}">News &amp; Press</a>
      <a href="{site_url}contact" class="gf-btn-ghost px-3 py-2 {if segment_1 =='contact'}gf-nav-link-active{/if}">Contact</a>

    </nav>

    {!-- ============== Right cluster: theme toggle + mobile button ============== --}
    <div class="flex items-center gap-2">

      {!-- Dark mode toggle --}
      <button
        type="button"
        @click="toggleDark()"
        class="gf-btn-ghost p-2"
        :aria-label="dark ? 'Switch to light mode' : 'Switch to dark mode'"
      >
        {!-- Sun icon (shown when dark) --}
        <svg x-show="dark" x-cloak class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM4.05 4.05a.75.75 0 011.06 0l1.06 1.06a.75.75 0 11-1.06 1.06L4.05 5.11a.75.75 0 010-1.06zM13.83 13.83a.75.75 0 011.06 0l1.06 1.06a.75.75 0 11-1.06 1.06l-1.06-1.06a.75.75 0 010-1.06zM2 10a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5h-1.5A.75.75 0 012 10zM15 10a.75.75 0 01.75-.75h1.5a.75.75 0 010 1.5h-1.5A.75.75 0 0115 10zM5.11 14.89a.75.75 0 010 1.06l-1.06 1.06a.75.75 0 11-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zM14.89 5.11a.75.75 0 010 1.06L13.83 7.23a.75.75 0 11-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zM10 6a4 4 0 100 8 4 4 0 000-8z"/>
        </svg>
        {!-- Moon icon (shown when light) --}
        <svg x-show="!dark" x-cloak class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path d="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z"/>
        </svg>
      </button>

      {!-- Mobile drawer trigger --}
      <button
        type="button"
        @click="openMobile()"
        class="lg:hidden gf-btn-ghost p-2"
        aria-label="Open navigation menu"
      >
        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M3.75 17.25h16.5"/>
        </svg>
      </button>
    </div>
  </div>

  {!-- ============== Mobile drawer ============== --}
  <el-dialog
    x-show="mobileOpen"
    x-cloak
    @close="closeMobile()"
    class="lg:hidden"
  >
    <el-dialog-backdrop class="fixed inset-0 bg-gray-900/70 backdrop-blur-sm"></el-dialog-backdrop>
    <el-dialog-panel class="fixed inset-y-0 right-0 z-50 w-full max-w-sm gf-surface-base gf-shadow-neu-lg p-6 overflow-y-auto">
      <div class="flex items-center justify-between mb-6">
        <span class="font-display font-semibold text-lg">Menu</span>
        <button @click="closeMobile()" class="gf-btn-ghost p-2" aria-label="Close menu">
          <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
        </button>
      </div>

      <nav class="flex flex-col gap-1" aria-label="Mobile">

        {!-- Mobile: About Us (collapsible) --}
        <div x-data="{open: false}">
          <button @click="open = !open" class="w-full flex items-center justify-between gf-popover-link">
            <span>About Us</span>
            <svg class="size-4 transition-transform" :class="open ? 'rotate-180' : ''" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
          </button>
          <div x-show="open" x-collapse class="ml-3 flex flex-col gap-1">
            {exp:channel:entries channel="foundation" dynamic="no" status="open" disable="categories|member_data"}
              <a href="{site_url}foundation/{url_title}" class="gf-popover-link">{title}</a>
            {/exp:channel:entries}
            <a href="{site_url}people/ginsburg" class="gf-popover-link">Composer Gerald Ginsburg</a>
            <a href="{site_url}people" class="gf-popover-link">People</a>
          </div>
        </div>

        {!-- Mobile: Albums --}
        <div x-data="{open: false}">
          <button @click="open = !open" class="w-full flex items-center justify-between gf-popover-link">
            <span>Albums</span>
            <svg class="size-4 transition-transform" :class="open ? 'rotate-180' : ''" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
          </button>
          <div x-show="open" x-collapse class="ml-3 flex flex-col gap-1">
            {exp:channel:entries channel="album" dynamic="no" disable="categories|member_data"}
              <a href="{site_url}album/{url_title}" class="gf-popover-link">{title}</a>
            {/exp:channel:entries}
          </div>
        </div>

        {!-- Mobile: Works --}
        <div x-data="{open: false}">
          <button @click="open = !open" class="w-full flex items-center justify-between gf-popover-link">
            <span>Works</span>
            <svg class="size-4 transition-transform" :class="open ? 'rotate-180' : ''" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
          </button>
          <div x-show="open" x-collapse class="ml-3 flex flex-col gap-1">
            <a href="{site_url}contact" class="gf-popover-link">Request Scores</a>
            {exp:channel:entries channel="works" dynamic="no" status="open" disable="categories|member_data"}
              <a href="{site_url}works/{url_title}" class="gf-popover-link">{title}</a>
            {/exp:channel:entries}
          </div>
        </div>

        {!-- Mobile: Gallery --}
        <div x-data="{open: false}">
          <button @click="open = !open" class="w-full flex items-center justify-between gf-popover-link">
            <span>Gallery</span>
            <svg class="size-4 transition-transform" :class="open ? 'rotate-180' : ''" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
          </button>
          <div x-show="open" x-collapse class="ml-3 flex flex-col gap-1">
            {exp:channel:entries channel="gallery" dynamic="no" status="open" disable="categories|member_data"}
              <a href="{site_url}gallery/{url_title}" class="gf-popover-link">{title}</a>
            {/exp:channel:entries}
          </div>
        </div>

        <a href="{site_url}blog" class="gf-popover-link">News &amp; Press</a>
        <a href="{site_url}contact" class="gf-popover-link">Contact</a>
      </nav>
    </el-dialog-panel>
  </el-dialog>

</header>