<template>
  <div class="header_navigation">
    <div class="height_10"></div>

    <ul class="header_navigation_topbar" aria-label="Language selector">
      <li class="header_nav_topbar_item">
        Professionnels
        <ul class="header_nav_topbar_submenu">
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Programmer l'Orchestre</NuxtLink></li>
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Le studio et les espaces</NuxtLink></li>
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Louer des instruments</NuxtLink></li>
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Recrutement / Concours</NuxtLink></li>
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Espace candidats</NuxtLink></li>
          <li class="header_nav_topbar_submenu_item"><NuxtLink to="/">Presse</NuxtLink></li>
        </ul>
      </li>
      <li class="header_nav_topbar_item header_nav_lang">
        <div class="header_nav_lang_item">FR</div>
        <div class="header_nav_lang_item">/</div>
        <div class="header_nav_lang_item">EN</div>
      </li>
    </ul>

    <div class="height_20"></div>

    <div class="header_navigation_main">
      <div class="header_nav_logo">
        <!-- LOGO injecté -->
        <slot name="logo" />
      </div>

      <nav class="header_nav_cont" aria-label="Primary navigation">
        <!-- Desktop nav -->
        <ul class="header_nav header_nav--desktop">
          <li class="header_nav_item brandontext_bold">
            L'Orchestre
            <ul class="header_nav_sub_menu">
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Nos missions</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Direction musicale</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Les musiciens</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Les artistes invités</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Discographie</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Nos partenaires</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Nous soutenir</NuxtLink></li>
            </ul>
          </li>

          <li class="header_nav_item">
            Concerts
            <ul class="header_nav_sub_menu">
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Saison</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Jeune public</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Concert mode d'emploi</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">ONDIF MAG</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">ONDIF LIVE !</NuxtLink></li>
            </ul>
          </li>

          <li class="header_nav_item brandontext_bold">
            Éducation et médiation
            <ul class="header_nav_sub_menu">
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Petite enfance</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Scolaires</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Champ social</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Insertion professionnelle</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Pratiques amateurs</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Ressources pédagogiques</NuxtLink></li>
            </ul>
          </li>

          <li class="header_nav_item">
            Mécénat
            <ul class="header_nav_sub_menu">
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Entreprises</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Les projets</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Particuliers</NuxtLink></li>
              <li class="header_nav_sub_menu_item"><NuxtLink to="/">Ils nous font confiance</NuxtLink></li>
            </ul>
          </li>

          <li class="header_nav_item header_nav_icones">
            <div class="">
              <NuxtLink to="/agenda">
                <div class="nav_icone">
                  <div class="nav_icone_img nav_icone_img--agenda">
                    <!-- ICÔNE injectée -->
                    <span class="sr-only">Agenda</span>
                    <slot name="agenda-icon" />
                  </div>
                </div>
              </NuxtLink>
            </div>
            <div class=" padding_top_1">
              <NuxtLink to="/agenda">
                <div class="nav_icone">
                  <div class="nav_icone_img nav_icone_img--ticket">
                    <!-- ICÔNE injectée -->
                    <span class="sr-only">billeterie</span>
                    <slot name="ticket" />
                  </div>
                </div>
              </NuxtLink>
            </div>
          </li>

        </ul>

        <!-- Mobile nav -->
         <div class="header_nav--mobile">
          <button
            class="header_burger"
              type="button"
              :class="{ 'is-open': isOpen }"
              :aria-expanded="isOpen ? 'true' : 'false'"
              aria-controls="mobile-menu"
              @click="toggle"
            >
              <span class="sr-only">{{ isOpen ? 'Fermer le menu' : 'Ouvrir le menu' }}</span>
              <!-- icone hamburger injecté -->
            <BurgerIcon :burger-color="burgerColor" />
          </button>
         </div>

        <!-- Mobile icons -->
        <div class="header_nav header_nav--mobile-icons">
          <div class="header_nav_item">
            <NuxtLink to="/agenda">
              <div class="nav_icone">
                <div class="nav_icone_img nav_icone_img--agenda">
                  <!-- ICÔNE injectée -->
                  <span class="sr-only">Agenda</span>
                  <slot name="agenda-icon" />
                </div>
              </div>
            </NuxtLink>
          </div>

          <div class="header_nav_item padding_top_1">
            <NuxtLink to="/agenda">
              <div class="nav_icone">
                <div class="nav_icone_img nav_icone_img--ticket">
                  <!-- ICÔNE injectée -->
                  <span class="sr-only">billeterie</span>
                  <slot name="ticket" />
                </div>
              </div>
            </NuxtLink>
          </div>
        </div>

        <!-- Mobile drawer -->
        <div
          id="mobile-menu"
          class="header_drawer"
          :data-open="isOpen ? 'true' : 'false'"
        >
          <ul class="header_drawer_inner">
            <li
              class="header_drawer_link brandontext_bold"
              :class="{ 'is-open': activeDrawer === 'orchestre' }"
              @click="toggleDrawer('orchestre')"
            >
              L'Orchestre
              <ul class="header_drawer_sub_menu">
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Nos missions</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Direction musicale</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Les musiciens</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Les artistes invités</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Discographie</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Nos partenaires</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Nous soutenir</NuxtLink></li>
              </ul>
            </li>

            <li
              class="header_drawer_link"
              :class="{ 'is-open': activeDrawer === 'concerts' }"
              @click="toggleDrawer('concerts')"
            >
              Concerts
              <ul class="header_drawer_sub_menu">
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Saison</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Jeune public</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Concert mode d'emploi</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">ONDIF MAG</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">ONDIF LIVE !</NuxtLink></li>
              </ul>
            </li>

            <li
              class="header_drawer_link brandontext_bold"
              :class="{ 'is-open': activeDrawer === 'education' }"
              @click="toggleDrawer('education')"
            >
              Éducation et médiation
              <ul class="header_drawer_sub_menu">
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Petite enfance</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Scolaires</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Champ social</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Insertion professionnelle</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Pratiques amateurs</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Ressources pédagogiques</NuxtLink></li>
              </ul>
            </li>

            <li
              class="header_drawer_link"
              :class="{ 'is-open': activeDrawer === 'mecenat' }"
              @click="toggleDrawer('mecenat')"
            >
              Mécénat
              <ul class="header_drawer_sub_menu">
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Entreprises</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Les projets</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Particuliers</NuxtLink></li>
                <li class="header_drawer_sub_menu_item"><NuxtLink to="/">Ils nous font confiance</NuxtLink></li>
              </ul>
            </li>

            <NuxtLink class="header_drawer_link icon_mobile_agenda" to="/agenda" @click="close">
              <!-- ICÔNE injectée -->
              <slot name="mobile_agenda_icon" />
            </NuxtLink>

            <NuxtLink class="header_drawer_link icon_mobile_ticket" to="/agenda" @click="close">
              <!-- ICÔNE injectée -->
              <slot name="mobile_ticket" />
            </NuxtLink>
          </ul>
        </div>

      </nav>
    </div>

    <div class="height_25"></div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { useRoute } from 'vue-router'
  import { watch } from 'vue'

  defineProps({
    burgerColor: { type: String, default: 'hamburger_black' }
  })

  const isOpen = ref(false)
  const activeDrawer = ref(null)
  const toggle = () => (isOpen.value = !isOpen.value)
  const close = () => (isOpen.value = false)
  const toggleDrawer = (key) => {
    activeDrawer.value = activeDrawer.value === key ? null : key
  }

  // ✅ ferme automatiquement le mobile drawer si on navigue
  const route = useRoute()
  watch(() => route.fullPath, () => {
    close()
    activeDrawer.value = null
  })
</script>

<style lang="scss">
  .icon_mobile_agenda {
    width: 35px;
    margin-top: 10px;
    img {
      width: 100%
    }
  }
  .icon_mobile_ticket {
    width: 61px;
    img {
      width: 100%
    }
  }
</style>
