<script setup lang="ts">
// Sticky top nav with logo, anchor links, language toggle, login + demo CTA.
// Ported from landing-sections.jsx Nav (light mode, production subset).
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { APP_URL } from '~/utils/landingTokens'
import { useTheme, useCopy, useLang, toggleLang, scrollToAnchor, goToSection } from '~/composables/useLanding'

const t = useTheme()
const copy = useCopy()
const lang = useLang()
const route = useRoute()

const items = computed(() => [
  { label: copy.value.nav.product, href: '/#suite' },
  { label: copy.value.nav.security, href: '/#sovereignty' },
  { label: copy.value.nav.whitelabel, href: '/#whitelabel' },
  { label: copy.value.nav.pricing, href: '/#pricing' },
  { label: copy.value.nav.docs, href: '/docs' },
])

function onLogo(e: MouseEvent) {
  // On the homepage, scroll to top in place; from a sub-page let NuxtLink route home.
  if (route.path === '/') {
    e.preventDefault()
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }
}

function onNav(e: MouseEvent, href: string) {
  if (href.includes('#') && route.path === '/') {
    e.preventDefault()
    scrollToAnchor(href.slice(href.indexOf('#')))
  }
}
</script>

<template>
  <header :style="{
    position: 'sticky', top: '0', zIndex: 100,
    background: 'rgba(250,250,247,0.84)',
    backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)',
    borderBottom: `1px solid ${t.border}`,
  }">
    <div :style="{
      maxWidth: '1280px', margin: '0 auto', padding: '18px 64px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }">
      <NuxtLink to="/" :style="{ display: 'flex', alignItems: 'center', gap: '12px', cursor: 'pointer' }" @click="onLogo">
        <BrandNodeMark :size="32" :fg="t.fg" :accent="t.signal" />
        <div :style="{ fontFamily: '\'JetBrains Mono\', monospace', fontWeight: 600, fontSize: '16px', letterSpacing: '-0.02em', color: t.fg }">dezky</div>
      </NuxtLink>

      <nav :style="{ display: 'flex', alignItems: 'center', gap: '36px' }">
        <NuxtLink
          v-for="(it, i) in items" :key="i" :to="it.href"
          :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted, letterSpacing: '-0.005em' }"
          @click="onNav($event, it.href)"
        >{{ it.label }}</NuxtLink>
      </nav>

      <div :style="{ display: 'flex', alignItems: 'center', gap: '14px' }">
        <button
          :style="{
            background: 'transparent', border: `1px solid ${t.border}`,
            color: t.fgMuted, fontSize: '11px', padding: '6px 10px', borderRadius: '4px',
            fontFamily: '\'JetBrains Mono\', monospace', letterSpacing: '0.06em', textTransform: 'uppercase',
            whiteSpace: 'nowrap',
          }"
          @click="toggleLang()"
        >{{ lang === 'da' ? 'da · en' : 'en · da' }}</button>
        <a :href="APP_URL" :style="{ fontFamily: '\'Inter\', sans-serif', fontSize: '14px', color: t.fgMuted }">{{ copy.nav.login }}</a>
        <LandingBtn variant="primary" @click="goToSection('#final-cta', route.path)">{{ copy.nav.cta }} →</LandingBtn>
      </div>
    </div>
  </header>
</template>
