<template>
  <header
    :class="[
      'fixed w-full z-40 transition-all',
      isScrolled
        ? 'bg-[#fff]/60 backdrop-blur-2xl top-7 py-2'
        : 'py-2.5 md:py-4',
      isMenuOpen ? 'bg-white/60 backdrop-blur-2xl' : '',
    ]"
  >
    <div class="max-w-7xl mx-auto px-4">
      <div class="flex items-center justify-between">
        <a :href="path">
          <img
            src="/muco-logo.svg"
            alt="Müco Logo"
            class="transition-all duration-300"
            :class="isScrolled ? 'h-10' : 'h-12 md:h-18'"
          />
        </a>

        <nav class="hidden md:flex gap-6">
          <a :href="`${path}#about`" class="hover:text-highlight">
            {{ t("Who we are") }}
          </a>
          <a :href="`${path}#testimonials`" class="hover:text-highlight">
            {{ t("Testimonials") }}
          </a>
          <a :href="`${path}#contact`" class="hover:text-highlight">
            {{ t("Contact") }}
          </a>
          <a :href="`${path}menu`" class="hover:text-highlight">
            {{ t("Menu") }}
          </a>
        </nav>

        <div class="flex items-center gap-2">
          <Button
            :label="t('Order')"
            href="https://yemek.go.link/3PDtu"
            external
            variant="pink"
            :class="isScrolled ? 'px-3.5! py-2.5! text-sm!' : ''"
          />

          <button class="md:hidden py-2 px-3" @click="isMenuOpen = !isMenuOpen">
            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none">
              <path
                v-if="!isMenuOpen"
                d="M4 6h16M4 12h16M4 18h16"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
              <path
                v-else
                d="M6 6l12 12M18 6L6 18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
              />
            </svg>
          </button>
        </div>
      </div>

      <!-- MOBILE MENU -->
      <transition
        enter-active-class="transition duration-200 ease-out"
        enter-from-class="opacity-0 -translate-y-2"
        enter-to-class="opacity-100 translate-y-0"
        leave-active-class="transition duration-150 ease-in"
        leave-from-class="opacity-100 translate-y-0"
        leave-to-class="opacity-0 -translate-y-2"
      >
        <nav
          v-if="isMenuOpen"
          class="md:hidden mt-4 flex flex-col px-1 py-4 text-center"
        >
          <a
            :href="`${path}#about`"
            @click="isMenuOpen = false"
            class="text-lg py-2"
          >
            {{ t("Who we are") }}
          </a>
          <a
            :href="`${path}#testimonials`"
            @click="isMenuOpen = false"
            class="text-lg py-2"
          >
            {{ t("Testimonials") }}
          </a>
          <a
            :href="`${path}menu`"
            @click="isMenuOpen = false"
            class="text-lg py-2"
          >
            {{ t("Menu") }}
          </a>
          <a
            :href="`${path}#contact`"
            @click="isMenuOpen = false"
            class="text-lg py-2"
          >
            {{ t("Contact") }}
          </a>
        </nav>
      </transition>
    </div>
  </header>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref, onMounted, onUnmounted } from "vue";
import { useLocale } from "@/composables/useLocale";

const { path } = useLocale();
const { t } = useI18n();

const isScrolled = ref(false);
const isMenuOpen = ref(false);

const handleScroll = () => {
  isScrolled.value = window.scrollY > 20;
};

onMounted(() => window.addEventListener("scroll", handleScroll));
onUnmounted(() => window.removeEventListener("scroll", handleScroll));
</script>
