<template>
  <nav :class="['bg-primary shadow-md fixed w-full z-50', { 'nav-scrolled': scrolled }]">
    <div class="container">
      <div class="flex items-center justify-between h-16">
        <NuxtLink to="/" class="flex items-center text-white">
          <i class="fas fa-cloud text-2xl mr-2"></i>
          <span class="text-xl font-bold">{{ $t('common.appName') }}</span>
        </NuxtLink>
        
        <!-- 桌面端导航 -->
        <div class="hidden md:flex items-center space-x-8">
          <NuxtLink 
            v-for="(item, index) in navItems" 
            :key="index" 
            :to="item.path" 
            class="text-white/85 hover:text-secondary transition-colors duration-300"
            :class="{ 'text-white': $route.path === item.path }"
          >
            {{ $t(item.i18nKey) }}
          </NuxtLink>
          
          <!-- 语言切换器 -->
          <LanguageSwitcher />
        </div>

        <!-- 移动端菜单按钮 -->
        <button
          class="md:hidden text-white p-2 rounded-lg hover:bg-white/10 transition-colors duration-300"
          aria-label="打开菜单"
          @click="toggleMobileMenu"
        >
          <i class="fas fa-bars text-xl"></i>
        </button>
      </div>

      <!-- 移动端菜单 -->
      <div :class="['md:hidden bg-primary absolute top-16 left-0 right-0 shadow-lg', { 'hidden': !mobileMenuOpen }]">
        <div class="container py-4">
          <div class="flex flex-col space-y-4">
            <NuxtLink
              v-for="(item, index) in navItems"
              :key="index"
              :to="item.path"
              class="text-white/85 hover:text-secondary transition-colors duration-300 py-2"
              :class="{ 'text-white': $route.path === item.path }"
              @click="mobileMenuOpen = false"
            >
              {{ $t(item.i18nKey) }}
            </NuxtLink>
            
            <!-- 移动端语言切换器 -->
            <div class="py-2">
              <LanguageSwitcher />
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <!-- 添加导航栏占位，防止内容被导航栏遮挡 -->
  <div class="h-16"></div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import { useI18n } from 'vue-i18n';
import LanguageSwitcher from './LanguageSwitcher.vue';

const route = useRoute();
const { t } = useI18n();
const mobileMenuOpen = ref(false);
const scrolled = ref(false);

const navItems = [
  { i18nKey: 'nav.home', path: '/' },
  { i18nKey: 'nav.products', path: '/products' },
  { i18nKey: 'nav.solutions', path: '/solutions' },
  { i18nKey: 'nav.cases', path: '/cases' },
  { i18nKey: 'nav.about', path: '/about' },
  { i18nKey: 'nav.contact', path: '/contact' }
];

const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value;
};

const handleScroll = () => {
  if (window.scrollY > 100) {
    scrolled.value = true;
  } else {
    scrolled.value = false;
  }
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script> 