<template>
  <nav class="sticky top-0 z-50 w-full glass border-b border-gray-200/50 dark:border-gray-800/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16">
        <!-- Logo & Brand -->
        <div class="flex-shrink-0 flex items-center gap-3">
          <router-link to="/" class="flex items-center gap-2 group">
            <div class="w-8 h-8 rounded-lg bg-gray-900 dark:bg-white flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform duration-200">
              <i class="fas fa-layer-group text-white dark:text-gray-900 text-sm"></i>
            </div>
            <span class="font-bold text-xl tracking-tight text-gray-900 dark:text-white group-hover:opacity-80 transition-opacity"> Spritesheet generator </span>
          </router-link>
        </div>

        <!-- Desktop Navigation -->
        <div class="hidden md:flex items-center gap-6">
          <div class="flex items-center gap-4 text-sm font-medium text-gray-600 dark:text-gray-400">
            <router-link to="/" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Generator</router-link>
            <router-link to="/blog" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">Blog</router-link>
            <router-link to="/about" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">About</router-link>
            <router-link to="/faq" class="hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">FAQ</router-link>
          </div>

          <div class="h-4 w-px bg-gray-200 dark:bg-gray-700"></div>

          <div class="flex items-center gap-3">
            <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" title="Source Code">
              <i class="fab fa-github text-lg"></i>
            </a>
            <a href="https://discord.gg/JTev3nzeDa" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-[#5865F2] dark:text-gray-400 dark:hover:text-[#5865F2] transition-colors" title="Discord Community">
              <i class="fab fa-discord text-lg"></i>
            </a>
            <button @click="$emit('open-help')" class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400 transition-colors" title="Help">
              <i class="fas fa-question-circle text-lg"></i>
            </button>
            <DarkModeToggle />
          </div>
        </div>

        <!-- Mobile Menu Button -->
        <div class="flex md:hidden">
          <DarkModeToggle />
          <button @click="isMobileMenuOpen = !isMobileMenuOpen" class="ml-4 p-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
            <i :class="isMobileMenuOpen ? 'fas fa-times' : 'fas fa-bars'" class="text-lg"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- Mobile Menu -->
    <div v-show="isMobileMenuOpen" class="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white/95 dark:bg-gray-950/95 backdrop-blur-xl">
      <div class="px-2 pt-2 pb-3 space-y-1">
        <router-link to="/" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="isMobileMenuOpen = false">Generator</router-link>
        <router-link to="/blog" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="isMobileMenuOpen = false">Blog</router-link>
        <router-link to="/about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="isMobileMenuOpen = false">About</router-link>
        <router-link to="/faq" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="isMobileMenuOpen = false">FAQ</router-link>
        <div class="border-t border-gray-200 dark:border-gray-800 my-2 pt-2 flex gap-4 px-3">
          <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
            <i class="fab fa-github text-xl"></i>
          </a>
          <a href="https://discord.gg/JTev3nzeDa" target="_blank" class="text-gray-500 hover:text-[#5865F2] dark:text-gray-400 dark:hover:text-[#5865F2]">
            <i class="fab fa-discord text-xl"></i>
          </a>
          <button
            @click="
              $emit('open-help');
              isMobileMenuOpen = false;
            "
            class="text-gray-500 hover:text-indigo-600 dark:text-gray-400 dark:hover:text-indigo-400"
          >
            <i class="fas fa-question-circle text-xl"></i>
          </button>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { RouterLink } from 'vue-router';
  import DarkModeToggle from '../utilities/DarkModeToggle.vue';

  defineEmits(['open-help']);

  const isMobileMenuOpen = ref(false);
</script>
