<script setup lang="ts">
const mobileMenuOpen = useMobileMenuState();

const { y } = useWindowScroll();
const isScrolled = computed(() => y.value > 0);
</script>

<template>
  <header
    class="sticky inset-x-0 top-0 z-50 transition-colors duration-300"
    :class="isScrolled ? 'bg-background' : 'bg-transparent'"
  >
    <div
      class="h-header container mx-auto flex items-center justify-between px-4"
    >
      <div class="flex min-w-[201.33px] items-center">
        <NuxtLinkLocale to="/" :aria-label="$t('ariaLabels.homeLink')">
          <SvgWebstdyLogo class="h-8 w-auto" />
        </NuxtLinkLocale>
      </div>
      <div class="flex items-center gap-14">
        <LayoutNavigation class="hidden lg:block" />

        <div class="flex items-center gap-4">
          <div class="flex items-center gap-4 max-sm:hidden">
            <ColorModeSelector />
            <LanguageSwitcher />
          </div>

          <button
            class="cursor-pointer"
            aria-label="menu toggle"
            @click="mobileMenuOpen = !mobileMenuOpen"
          >
            <SvgMenuIcon />
          </button>
        </div>
      </div>
    </div>
    <!-- Mobile Menu -->
    <LayoutMobileMenu />
  </header>
</template>
