<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { Menu, X } from 'lucide-vue-next'
import logoImg from '@/assets/logo.png'

const scrolled = ref(false)
const mobileOpen = ref(false)

const navLinks = [
  { label: '产品功能', href: '#features' },
  { label: '体验端', href: '#app' },
  { label: '管理端', href: '#admin' },
  { label: '课堂监控', href: '#classroom-monitor' },
  { label: '关于我们', href: '#about' },
]

function onScroll() {
  scrolled.value = window.scrollY > 20
}

function scrollTo(href: string) {
  mobileOpen.value = false
  const el = document.querySelector(href)
  el?.scrollIntoView({ behavior: 'smooth' })
}

onMounted(() => window.addEventListener('scroll', onScroll, { passive: true }))
onUnmounted(() => window.removeEventListener('scroll', onScroll))
</script>

<template>
  <nav
    class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
    :class="scrolled
      ? 'bg-white/80 backdrop-blur-xl shadow-lg shadow-indigo-100/40 border-b border-white/40'
      : 'bg-transparent'"
  >
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16 lg:h-18">
        <a href="#" class="flex items-center cursor-pointer group" @click.prevent="scrollTo('#hero')">
          <img :src="logoImg" alt="灵犀学" class="h-9 w-auto" />
        </a>

        <div class="hidden lg:flex items-center gap-1">
          <a
            v-for="link in navLinks"
            :key="link.href"
            :href="link.href"
            class="px-4 py-2 text-sm font-medium text-text-body hover:text-primary rounded-lg hover:bg-primary/5 transition-colors duration-200 cursor-pointer"
            @click.prevent="scrollTo(link.href)"
          >
            {{ link.label }}
          </a>
        </div>

        <div class="hidden lg:flex items-center gap-3">
          <a
            href="#cta"
            class="px-5 py-2.5 text-sm font-semibold text-white bg-gradient-to-r from-primary to-primary-light rounded-xl hover:shadow-lg hover:shadow-primary/30 transition-all duration-300 cursor-pointer"
            @click.prevent="scrollTo('#cta')"
          >
            免费体验
          </a>
        </div>

        <button
          class="lg:hidden p-2 rounded-lg hover:bg-gray-100 transition-colors duration-200 cursor-pointer"
          @click="mobileOpen = !mobileOpen"
          :aria-label="mobileOpen ? '关闭菜单' : '打开菜单'"
        >
          <X v-if="mobileOpen" class="w-5 h-5 text-text-body" />
          <Menu v-else class="w-5 h-5 text-text-body" />
        </button>
      </div>
    </div>

    <Transition
      enter-active-class="transition-all duration-300 ease-out"
      enter-from-class="opacity-0 -translate-y-2"
      enter-to-class="opacity-100 translate-y-0"
      leave-active-class="transition-all duration-200 ease-in"
      leave-from-class="opacity-100 translate-y-0"
      leave-to-class="opacity-0 -translate-y-2"
    >
      <div
        v-if="mobileOpen"
        class="lg:hidden bg-white/95 backdrop-blur-xl border-b border-gray-200/50 shadow-xl"
      >
        <div class="px-4 py-3 space-y-1">
          <a
            v-for="link in navLinks"
            :key="link.href"
            :href="link.href"
            class="block px-4 py-3 text-sm font-medium text-text-body hover:text-primary hover:bg-primary/5 rounded-xl transition-colors duration-200 cursor-pointer"
            @click.prevent="scrollTo(link.href)"
          >
            {{ link.label }}
          </a>
          <div class="pt-2 pb-1">
            <a
              href="#cta"
              class="block w-full text-center px-4 py-3 text-sm font-semibold text-white bg-gradient-to-r from-primary to-primary-light rounded-xl cursor-pointer"
              @click.prevent="scrollTo('#cta')"
            >
              免费体验
            </a>
          </div>
        </div>
      </div>
    </Transition>
  </nav>
</template>
