<template>
    <header
    :class="[{ mobile: screenWidth < 1350, desk: screenWidth >= 1350 }, { active: scrollPosition > 50 }]"
    role="banner"
  >
  <SettingsPanel v-if="screenWidth >= 1350" />  
  <div class="headContent">
      <div class="logoBox" role="button" tabindex="0" aria-label="Startseite" @click="navigateTo('/')">
        <NuxtImg
          provider="strapi"
          src="/uploads/DML_Logo_grey_2024_c51210b70c.svg"
          alt="digimedialoop Logo"
          loading="eager"   
        />
      </div>
      <div
        class="navigationBox"
        :class="[
          isMenuOpen ? 'menu-active' : '',
          screenWidth < 1350 ? 'mobile' : 'desk'
        ]"
        role="navigation"
        aria-label="Hauptnavigation"
        tabindex="0"
      >
      <div
class="closer"
        @click="toggleMenu"
        @keydown.enter="toggleMenu"/>
        <nav v-if="isMenuOpen || screenWidth > 1350" aria-expanded="true">
          <NuxtLinkLocale
            v-for="link in navigationLinks"
            :key="link.routeKey"
            :to="localePath(link.routeKey)"
            @click="handleMobileClose"
          >
            {{ $t(link.label) }}
          </NuxtLinkLocale>
          <a
              class="menu_link" href="#"
              role="button" 
              aria-label="Kontaktformular öffnen"
              @click="toggleContactBubble"
            >
              {{ $t('contact') }}   
          </a>    
        <SettingsPanel v-if="screenWidth < 1350" />
        </nav>
      </div>
    </div>
  </header>
</template>

<script setup>
import { computed } from 'vue'
import { useMainStore } from '@/stores/main'
import { useRuntimeConfig, navigateTo } from '#app'
import { useLocalePath } from '#i18n'

const localePath = useLocalePath()
const mainStore = useMainStore()
const config = useRuntimeConfig()

const navigationLinks = [
  { routeKey: 'webagency', label: 'webagency' },
  { routeKey: 'services', label: 'services' },
  { routeKey: 'references', label: 'references' }
]

const isMenuOpen = computed(() => mainStore.menuOpen)
const scrollPosition = computed(() => mainStore.scrollPosition)
const screenWidth = computed(() => mainStore.screenWidth)
const cmsUrl = computed(() => config.public.cmsBaseUrl)

const toggleMenu = () => mainStore.toggleMenu()
const toggleContactBubble = () => mainStore.toggleContactBubble()

const handleMobileClose = () => {
  if (screenWidth.value < 1350 && isMenuOpen.value) {
    toggleMenu()
  }
}

</script>

<style lang="sass">
header
  position: fixed
  top: 0
  left: 0
  margin: 0
  width: 100%
  background-image: linear-gradient(to bottom, rgba(white, 1), rgba(white, 1), rgba(white, 1), rgba(white, 0))
  box-sizing: border-box
  z-index: 20
  &::before, &::after
    content: ''
    position: absolute
    z-index: 90
    backdrop-filter: blur(10px) brightness(1.05) // Glaseffekt: Unschärfe + leicht erhöhte Helligkeit
    -webkit-backdrop-filter: blur(10px) brightness(1.05)
    border: 1px solid rgba(255, 255, 255, 0.2) // leichte Transparenz des Randes
    background: radial-gradient(circle, rgba(103, 202, 172, 0.8), rgba(103, 202, 172, 0.6), rgba(103, 202, 172, 0.4))
    background-size: 150% 150%
    opacity: 0.85 // Sichtbarkeit anpassen, aber noch leicht transparent
    z-index: 6
    transition: .8s
    box-shadow: $innerShadow
    overflow: hidden
  &::before
    width: 60vw
    height: 18rem
    border-radius: $loopShape
    top: -12rem
    right: -5vw
    animation: bubble-wobble 8s infinite ease alternate, gradient-animation 20s infinite alternate ease-in-out
    z-index: 6
    @media(max-width: $breakPointMD)
      height: 15rem
  &::after
    width: 28vw
    height: 12rem
    border-radius: $loopShape
    top: -2rem
    right: -6vw
    animation: bubble-wobble 7s infinite ease alternate, gradient-animation 12s infinite alternate ease-in-out
    @media(max-width: $breakPointMD)
      height: 8rem
      right: -10vw
  // MOBILE NAVIGATION
  &.mobile
    top: 0
    .headContent
      padding: 0
      .logoBox
        width: 50%
        z-index: 102
        img
          margin-top: 1.5rem //5rem
      &.active
        .logoBox
          img
            margin-top: 3rem
      .navigationBox
        display: block
        position: relative
        background-color: $darkgrey
        width: 4rem
        height: 4rem
        z-index: 8
        border-radius: 50%
        margin-right: 5vw
        margin-top: 2rem
        .closer
          position: relative
          width: 100%
          height: 4rem
          &::after, &::before
            position: absolute
            content: ''
            width: 2rem
            z-index: 12
            height: 5px
            border-radius: 4px
            background-color: white
            right: 75%
            transform: translateX(100%)
            transition: .8s
          &::before          
            top: 35%
          &::after
            top: 55%
        nav
          display: none
          background-image: none
          background: transparent
          border: none
          padding-top: 0rem !important
          .menu_link
            margin-left: 1.5rem
            transition: .8s
            &:hover
              transform: scale(1.06)
              background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
              box-shadow: 0 0 0 0 transparent
              border-radius: 20px
          a, .menu_link
            display: block
            color: white
            text-align: left
            margin-bottom: .5rem
            padding: 1.6rem 2.8rem .4rem
            position: relative
            font-size: 1.6rem !important
            width: auto
            max-width: 18rem
            text-transform: uppercase
            font-family: 'Mainfont-Bold'
            &::before
              content: ''
              width: 1rem
              height: .6rem
              background-color: rgba($primaryColor, .9)
              border-radius: $loopShape
              position: absolute
              top: 2.4rem
              left: 1rem
              border-radius: 20px
            &:hover
              transform: scale(1.06)
              background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
              box-shadow: 0 0 0 0 transparent
              border-radius: 20px

        &.menu-active
          width: 100vw
          height: 80vh
          border-radius: 5px
          margin: 0
          background-color: rgba($darkgrey, .9)
          .closer
            &::before, &::after
              top: 2rem
              right: 1rem
            &::before    
              transform: rotate(45deg)
            &::after    
              transform: rotate(-45deg)
          nav
            display: block
            padding: 10vh 0
            margin: 0 5vw

  .headContent
    display: flex
    align-items: top
    justify-content: space-between
    width: 100%
    padding: 0 2rem
    box-sizing: border-box
    transition: .8s
    z-index: 7
    margin: 0
    height: 0 //4rem
    .logoBox
      display: flex
      align-self: center
      justify-content: left
      width: 33%
      transition: .8s
      background-color: transparent
      margin-top: 4.5rem
      @media(max-width: $breakPointMD)
        margin-top: 3rem
      img
        width: 80%
        max-width: 250px
        margin: 4rem 5vw 0 5vw
        transition: .8s
    .navigationBox
      position: relative
      display: flex
      align-items: center
      justify-content: flex-end
      width: 80%
      transition: .8s
      margin-top: 1.2rem //-1rem
      nav
        display: block
        z-index: 102
        //background: linear-gradient(to right, rgba($lightgrey, 0.8), rgba(white, 0.9), rgba(white, 0.9))
        background: white
        border: 1px solid adjust-color($beige, $lightness: 5%)
        padding: 1rem 2rem
        text-align: center
        border-radius: 1rem
        margin: 4.8rem 1rem 0 1rem
        transition: .8s
        a
          margin: 0 1.2rem
          text-decoration: none
          color: $darkgrey
          text-transform: uppercase
          font-family: 'Comfortaa-Bold'
          font-size: 1.1rem
          letter-spacing: .05rem
          transition: .6s
          display: inline-block
          &:hover
            transform: scale(1.15)
            background-image: radial-gradient(rgba(white, .5), rgba(white, .1))
            box-shadow: 0 0 10px 10px rgba(white, 0.2)
            border-radius: 10px
  &.active
    &::before
      top: -13.5rem
    &::after
      top: -5rem
    .headContent
      padding: 0 //0 0 2.5rem 0
      .navigationBox
        margin-top: .5rem
        nav
          display: flex
          margin: 2.5rem 0 0 0
          padding: 1rem .5rem
          border-top-right-radius: 0
          border-top-left-radius: 0
          border-bottom-left-radius: 50px
          border-bottom-right-radius: 0
          background: transparent
          border: 1px solid transparent
          a
            font-size: 1rem
            font-weight: bold
            margin: 0 .8rem
      .logoBox
        align-items: left
        img
          margin-bottom: .5rem          
          width: 70%
          max-width: 200px
    
</style>