<template>
  <header class="fixed inset-x-0 top-0 z-50 border-b border-transparent transition-all duration-300" :class="headerClass">
    <div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
      <router-link to="/" class="flex min-w-0 items-center">
        <img :src="logoSrc" alt="萧康云医" class="h-9 w-9 shrink-0 rounded-lg object-contain" @error="logoSrc = defaultLogo" />
        <div class="ml-3 min-w-0">
          <div class="truncate text-base font-bold text-slate-950 dark-text-strong">{{ brandName }}</div>
          <div class="hidden text-xs text-slate-500 sm:block dark-text-muted">诊所赋能 SaaS 平台</div>
        </div>
      </router-link>
      <nav class="hidden items-center gap-1 lg:flex"><template v-for="item in menuItems" :key="item.path"><div v-if="item.children" class="nav-dropdown"><router-link :to="item.path" class="rounded-full px-4 py-2 text-sm font-medium text-slate-700 transition hover:text-[var(--gold)] dark-text" active-class="text-[var(--gold)] dark-active">{{ item.name }}<i class="fas fa-chevron-down ml-1 text-[10px]"></i></router-link><div class="nav-dropdown__panel"><router-link v-for="child in item.children" :key="child.path" :to="child.path" class="nav-dropdown__item"><span>{{ child.name }}</span><small>{{ child.desc }}</small></router-link></div></div><router-link v-else :to="item.path" class="rounded-full px-4 py-2 text-sm font-medium text-slate-700 transition hover:text-[var(--gold)] dark-text" active-class="text-[var(--gold)] dark-active" :exact="item.exact">{{ item.name }}</router-link></template></nav>
      <div class="hidden items-center gap-3 lg:flex"><button class="icon-button" type="button" :title="isDark ? '切换为明亮模式' : '切换为暗色模式'" @click="toggleTheme"><i :class="isDark ? 'fas fa-sun' : 'fas fa-moon'"></i></button><button class="primary-button" type="button" @click="openModal"><i class="fas fa-calendar-check"></i><span>预约演示</span></button></div>
      <div class="flex items-center gap-2 lg:hidden"><button class="icon-button" type="button" :title="isDark ? '切换为明亮模式' : '切换为暗色模式'" @click="toggleTheme"><i :class="isDark ? 'fas fa-sun' : 'fas fa-moon'"></i></button><button class="icon-button" type="button" title="打开菜单" @click="toggleMenu"><i :class="isMenuOpen ? 'fas fa-times' : 'fas fa-bars'"></i></button></div>
    </div>
    <div v-show="isMenuOpen" class="border-t border-slate-100 bg-white/95 px-4 py-4 shadow-xl backdrop-blur lg:hidden dark-panel"><nav class="mx-auto flex max-w-7xl flex-col gap-2"><template v-for="item in menuItems" :key="item.path"><router-link :to="item.path" class="rounded-lg px-3 py-3 text-base font-medium text-slate-700 hover:text-[var(--gold)] dark-text" active-class="text-[var(--gold)] dark-active" @click="closeMenu">{{ item.name }}</router-link><div v-if="item.children" class="mobile-subnav"><router-link v-for="child in item.children" :key="child.path" :to="child.path" @click="closeMenu">{{ child.name }}</router-link></div></template><button class="primary-button mt-2 w-full justify-center" type="button" @click="openModal(); closeMenu();"><i class="fas fa-calendar-check"></i><span>预约演示</span></button></nav></div>
  </header>
  <transition name="modal-fade"><div v-if="showModal" class="fixed inset-0 z-50 flex items-start justify-center overflow-auto bg-slate-950/50 p-4 backdrop-blur" @click="closeModal"><div class="mt-16 w-full max-w-2xl overflow-hidden rounded-xl bg-white shadow-2xl dark-panel" @click.stop><div class="flex items-center justify-between bg-[var(--pine-deep)] px-5 py-4 text-white"><div><h2 class="text-xl font-bold">预约萧康云医演示</h2><p class="mt-1 text-sm text-stone-200">留下联系方式，我们会根据诊所情况提供演示方案。</p></div><button class="rounded-full p-2 hover:bg-white/10" type="button" @click="closeModal"><i class="fas fa-times"></i></button></div><div class="bg-[var(--pine-deep)] p-5"><ContactForm lang="zh" /></div></div></div></transition>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import ContactForm from '@/components/ui/ContactForm.vue'
import { getSiteSettings } from '@/api/request/site'
import defaultLogo from '@/assets/images/logo.png'
const isScrolled = ref(false), isMenuOpen = ref(false), showModal = ref(false), isDark = ref(false)
const brandName = ref('萧康云医')
const logoSrc = ref(defaultLogo)
const menuItems = [{ path: '/', name: '首页', exact: true }, { path: '/features', name: '产品能力' }, { path: '/solutions', name: '解决方案' }, { path: '/pricing', name: '价格' }, { path: '/about', name: '关于我们', children: [{ path: '/about', name: '公司介绍', desc: '品牌使命与业务定位' }, { path: '/team', name: '团队介绍', desc: '医疗与技术团队' }, { path: '/features', name: '服务特色', desc: '诊所赋能服务体系' }, { path: '/careers', name: '加入我们', desc: '招聘与共创机会' }] }]
const headerClass = computed(() => isScrolled.value || isMenuOpen.value ? 'bg-white/90 shadow-sm backdrop-blur dark-panel' : 'bg-white/75 backdrop-blur dark-panel')
const applyTheme = () => { document.documentElement.classList.toggle('dark', isDark.value); localStorage.setItem('xk-theme', isDark.value ? 'dark' : 'light') }
const toggleTheme = () => { isDark.value = !isDark.value; applyTheme() }
const openModal = () => { showModal.value = true }
const closeModal = () => { showModal.value = false }
const toggleMenu = () => { isMenuOpen.value = !isMenuOpen.value; document.body.style.overflow = isMenuOpen.value ? 'hidden' : '' }
const closeMenu = () => { isMenuOpen.value = false; document.body.style.overflow = '' }
const handleScroll = () => { isScrolled.value = window.scrollY > 10 }
onMounted(async () => { const savedTheme = localStorage.getItem('xk-theme'); isDark.value = savedTheme ? savedTheme === 'dark' : window.matchMedia('(prefers-color-scheme: dark)').matches; applyTheme(); window.addEventListener('scroll', handleScroll); const settings = await getSiteSettings().catch(() => null); if (settings?.site_title) brandName.value = settings.site_title.replace('官网', ''); if (settings?.site_logo && !settings.site_logo.startsWith('/src/')) logoSrc.value = settings.site_logo })
onBeforeUnmount(() => { window.removeEventListener('scroll', handleScroll); document.body.style.overflow = '' })
</script>

<style scoped>
.modal-fade-enter-active,.modal-fade-leave-active { transition: opacity 0.2s ease; }.modal-fade-enter-from,.modal-fade-leave-to { opacity: 0; }.nav-dropdown { position: relative; }.nav-dropdown__panel { position: absolute; left: 50%; top: calc(100% + 12px); display: grid; width: 224px; transform: translateX(-50%) translateY(8px); border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel-bg) 96%, transparent); padding: 8px; opacity: 0; pointer-events: none; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14); transition: opacity 0.2s ease, transform 0.2s ease; }.nav-dropdown:hover .nav-dropdown__panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }.nav-dropdown__item { display: grid; gap: 2px; border-radius: 8px; padding: 10px 12px; color: var(--ink); }.nav-dropdown__item:hover { background: var(--page-muted); color: var(--gold); }.nav-dropdown__item small { color: var(--text-muted); font-size: 12px; }.mobile-subnav { display: grid; gap: 4px; margin: -4px 0 8px 18px; border-left: 1px solid var(--line); padding-left: 12px; }.mobile-subnav a { border-radius: 8px; padding: 8px 10px; color: var(--text-main); font-size: 14px; }
</style>
