<script setup lang="ts">
import { ref } from 'vue'
import ThemeToggle from '@/components/layout/ThemeToggle.vue'

const mobileOpen = ref(false)

const links = [
  { label: 'How It Works', href: '/#how-it-works' },
  { label: 'Capabilities', href: '/#capabilities' },
  { label: 'CLI', href: '/#cli' },
  { label: 'Pricing', href: '/#pricing' },
  { label: 'Docs', href: '/docs' },
  { label: 'Changelog', href: '/changelog' },
]

function closeMobile() {
  mobileOpen.value = false
}
</script>

<template>
  <nav class="sticky top-0 z-50 bg-surface-light/90 dark:bg-[#0a0f1a] backdrop-blur-lg border-b border-border-light dark:border-slate-800">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 flex justify-between items-center h-14">
      <!-- Wordmark -->
      <a href="/" class="text-lg font-bold font-display bg-gradient-to-r from-accent-500 to-cyan-400 bg-clip-text text-transparent">
        Specwright
      </a>

      <!-- Desktop links -->
      <div class="hidden md:flex items-center gap-6">
        <a
          v-for="link in links"
          :key="link.href"
          :href="link.href"
          class="text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 transition-colors"
        >
          {{ link.label }}
        </a>
        <a
          href="/app"
          class="text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-200 transition-colors"
        >
          Dashboard
        </a>
        <ThemeToggle />
        <a
          href="https://github.com/apps/gv-specwright/installations/new"
          class="inline-flex items-center gap-2 px-4 py-1.5 rounded-lg text-sm font-semibold text-white bg-gradient-to-r from-accent-500 to-cyan-400 hover:opacity-90 transition-opacity"
        >
          Install on GitHub
        </a>
      </div>

      <!-- Mobile controls -->
      <div class="flex md:hidden items-center gap-2">
        <ThemeToggle />
        <button
          type="button"
          class="p-1.5 rounded-md text-slate-500 hover:text-slate-700 dark:hover:text-slate-300"
          @click="mobileOpen = !mobileOpen"
          aria-label="Toggle menu"
        >
          <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path v-if="!mobileOpen" stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            <path v-else stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
          </svg>
        </button>
      </div>
    </div>

    <!-- Mobile menu -->
    <div v-if="mobileOpen" class="md:hidden border-t border-border-light dark:border-slate-800 bg-surface-light dark:bg-[#0a0f1a] px-4 py-3 space-y-1">
      <a
        v-for="link in links"
        :key="link.href"
        :href="link.href"
        class="block py-2 text-sm font-medium text-slate-600 dark:text-slate-400"
        @click="closeMobile"
      >
        {{ link.label }}
      </a>
      <a href="/app" class="block py-2 text-sm font-medium text-slate-600 dark:text-slate-400" @click="closeMobile">
        Dashboard
      </a>
      <a
        href="https://github.com/apps/gv-specwright/installations/new"
        class="block mt-2 text-center px-4 py-2 rounded-lg text-sm font-semibold text-white bg-gradient-to-r from-accent-500 to-cyan-400"
        @click="closeMobile"
      >
        Install on GitHub
      </a>
    </div>
  </nav>
</template>
