<script setup lang="ts">
import { ref } from 'vue'
import { navMenus, siteName } from '~/data/siteContent'
const mobileOpen = ref(false)
const config = useRuntimeConfig()
const loginUrl = config.public.platformLoginUrl as string
</script>

<template>
  <header class="sticky top-0 z-50 bg-white/95 backdrop-blur border-b border-gray-100">
    <div class="section-container flex items-center justify-between h-16">
      <NuxtLink to="/" class="flex items-center gap-2 text-primary-700 font-bold text-lg shrink-0">
        <span class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white text-sm font-mono">H</span>
        {{ siteName }}
      </NuxtLink>

      <nav class="hidden lg:flex items-center gap-1">
        <NuxtLink v-for="m in navMenus" :key="m.to" :to="m.to"
          class="px-3 py-2 rounded-lg text-sm text-text-secondary hover:text-primary hover:bg-primary-50 transition-colors">
          {{ m.label }}
        </NuxtLink>
      </nav>

      <div class="hidden lg:flex items-center gap-3">
        <a :href="loginUrl" class="text-sm text-text-secondary hover:text-primary transition-colors">平台登录</a>
        <NuxtLink to="/contact"
          class="px-4 py-2 bg-cta text-white rounded-lg text-sm font-medium hover:bg-cta-700 transition-colors">
          预约演示
        </NuxtLink>
      </div>

      <button @click="mobileOpen = !mobileOpen" class="lg:hidden p-2" aria-label="菜单">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            :d="mobileOpen ? 'M6 18L18 6M6 6l12 12' : 'M4 6h16M4 12h16M4 18h16'" />
        </svg>
      </button>
    </div>

    <div v-if="mobileOpen" class="lg:hidden border-t bg-white">
      <div class="section-container py-4 space-y-1">
        <NuxtLink v-for="m in navMenus" :key="m.to" :to="m.to" @click="mobileOpen = false"
          class="block px-3 py-2 rounded-lg text-text-secondary hover:text-primary hover:bg-primary-50">
          {{ m.label }}
        </NuxtLink>
        <div class="pt-3 border-t">
          <NuxtLink to="/contact" @click="mobileOpen = false"
            class="block w-full text-center px-4 py-3 bg-cta text-white rounded-lg font-medium">
            预约演示
          </NuxtLink>
        </div>
      </div>
    </div>
  </header>
</template>
