<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { RouterLink } from 'vue-router'

const scrolled = ref(false)
const menuOpen = ref(false)

const onScroll = () => { scrolled.value = window.scrollY > 8 }

onMounted(() => {
  window.addEventListener('scroll', onScroll, { passive: true })
  onScroll()
})
onBeforeUnmount(() => window.removeEventListener('scroll', onScroll))

const closeMenu = () => { menuOpen.value = false }
</script>

<template>
  <header class="nav" :class="{ 'nav--scrolled': scrolled }">
    <div class="container nav__inner">
      <RouterLink to="/" class="brand" @click="closeMenu">
        <svg width="32" height="32" viewBox="0 0 64 64" aria-hidden="true">
          <defs>
            <linearGradient id="logoGrad" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stop-color="#0B1437"/>
              <stop offset="100%" stop-color="#00E5FF"/>
            </linearGradient>
          </defs>
          <rect width="64" height="64" rx="14" fill="url(#logoGrad)"/>
          <path d="M16 44 L26 28 L36 38 L48 18" stroke="#F4F6FB" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span class="brand__name">RisingCompute</span>
      </RouterLink>

      <button
        class="nav__toggle"
        :aria-expanded="menuOpen"
        aria-label="Toggle menu"
        @click="menuOpen = !menuOpen"
      >
        <span></span><span></span><span></span>
      </button>

      <nav class="nav__links" :class="{ 'nav__links--open': menuOpen }" @click="closeMenu">
        <RouterLink to="/products">Products</RouterLink>
        <RouterLink to="/technology">Technology</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/careers">Careers</RouterLink>
        <RouterLink to="/blog">Insights</RouterLink>
        <RouterLink to="/contact" class="btn btn--primary nav__cta">Talk to us</RouterLink>
      </nav>
    </div>
  </header>
</template>

<style scoped>
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 50;
  background: rgba(11, 20, 55, 0.6);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition);
}
.nav--scrolled {
  background: rgba(11, 20, 55, 0.88);
  border-bottom-color: var(--color-border-soft);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--color-text); }
.brand__name { font-size: 1.05rem; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.nav__links :where(a):not(.btn) {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.nav__links :where(a):not(.btn):hover {
  color: var(--color-text);
}
.nav__links :where(a.router-link-active):not(.btn) {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.nav__cta { padding: 0.55rem 1rem; font-size: 0.9rem; }

.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  width: 40px;
  height: 36px;
  padding: 8px 10px;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
}

@media (max-width: 880px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-5);
    background: rgba(11, 20, 55, 0.98);
    border-bottom: 1px solid var(--color-border-soft);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition);
  }
  .nav__links--open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav__cta { margin-top: var(--space-2); }
}
</style>
