<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const isScrolled = ref(false)
const isMobileMenuOpen = ref(false)

const navLinks = [
  { label: 'Features', href: '#features' },
  { label: 'How It Works', href: '#how-it-works' },
  { label: 'Services', href: '#support' },
  { label: 'Contact', href: '#contact' },
]

function handleScroll() {
  isScrolled.value = window.scrollY > 10
}

function toggleMobileMenu() {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

function closeMobileMenu() {
  isMobileMenuOpen.value = false
}

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

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

<template>
  <header
    class="fixed top-0 left-0 right-0 z-50 bg-white transition-shadow duration-200"
    :class="isScrolled ? 'shadow-sm' : 'border-b border-[#E2E8F0]'"
  >
    <div class="page-container flex items-center gap-12 h-[68px]">

      <!-- Logo -->
      <a href="#" class="flex items-center gap-2 shrink-0" @click.prevent="scrollToTop">
        <div class="w-8 h-8 rounded-lg bg-[#1D4ED8] flex items-center justify-center">
          <span class="text-white font-bold text-base leading-none">T</span>
        </div>
        <span class="text-[#0F172A] font-bold text-lg">TapTrack</span>
      </a>

      <!-- Spacer -->
      <div class="flex-1" />

      <!-- Desktop Nav Links -->
      <nav class="hidden md:flex items-center gap-9">
        <a
          v-for="link in navLinks"
          :key="link.href"
          :href="link.href"
          class="text-[#475569] font-medium text-sm hover:text-[#1D4ED8] transition-colors duration-150"
        >
          {{ link.label }}
        </a>
      </nav>

      <!-- CTA Button -->
      <a
        href="#contact"
        class="hidden md:inline-flex items-center bg-[#1D4ED8] hover:bg-[#1A43C0] text-white font-semibold text-sm px-[22px] py-[10px] rounded-lg transition-colors duration-150 shrink-0"
      >
        Request a Demo
      </a>

      <!-- Mobile Hamburger -->
      <button
        class="md:hidden flex flex-col gap-[5px] p-2 -mr-2"
        :aria-label="isMobileMenuOpen ? 'Close menu' : 'Open menu'"
        @click="toggleMobileMenu"
      >
        <span
          class="block w-5 h-0.5 bg-[#475569] transition-all duration-200"
          :class="isMobileMenuOpen ? 'rotate-45 translate-y-[7px]' : ''"
        />
        <span
          class="block w-5 h-0.5 bg-[#475569] transition-all duration-200"
          :class="isMobileMenuOpen ? 'opacity-0' : ''"
        />
        <span
          class="block w-5 h-0.5 bg-[#475569] transition-all duration-200"
          :class="isMobileMenuOpen ? '-rotate-45 -translate-y-[7px]' : ''"
        />
      </button>
    </div>

    <!-- Mobile Menu Dropdown -->
    <div
      v-if="isMobileMenuOpen"
      class="md:hidden bg-white border-t border-[#E2E8F0] px-6 py-4 flex flex-col gap-4"
    >
      <a
        v-for="link in navLinks"
        :key="link.href"
        :href="link.href"
        class="text-[#475569] font-medium text-sm hover:text-[#1D4ED8] transition-colors duration-150 py-1"
        @click="closeMobileMenu"
      >
        {{ link.label }}
      </a>
      <a
        href="#contact"
        class="inline-flex items-center justify-center bg-[#1D4ED8] hover:bg-[#1A43C0] text-white font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors duration-150 mt-1"
        @click="closeMobileMenu"
      >
        Request a Demo
      </a>
    </div>
  </header>
</template>
