---
import { getChurchName } from '../lib/bindings.js';

let churchName = 'Church';
try {
  churchName = getChurchName();
} catch (e) {
  console.error('Failed to get church name:', e);
}
---

<nav class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200/20 dark:border-gray-700/20" role="navigation" aria-label="main navigation">
  <div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16 lg:h-20">
      <!-- Logo/Brand -->
      <div class="flex items-center">
        <a href="/" class="flex items-center space-x-3 group">
          <!-- Angel Wings Icon -->
          <div class="relative">
            <div class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-xl transition-all duration-300 group-hover:scale-105">
              <i data-lucide="sparkles" class="w-6 h-6 text-white"></i>
            </div>
            <div class="absolute -top-1 -right-1 w-4 h-4 bg-gold-500 rounded-full opacity-80 animate-ping"></div>
          </div>
          <div class="hidden sm:block">
            <h1 class="text-xl lg:text-2xl font-bold text-divine-gradient">{churchName}</h1>
            <p class="text-xs text-gray-600 dark:text-gray-400 -mt-1">Three Angels' Message</p>
          </div>
        </a>
      </div>

      <!-- Desktop Navigation -->
      <div class="hidden lg:flex items-center space-x-0">
        <a href="/" class="nav-link">
          <i data-lucide="home" class="w-4 h-4"></i>
          <span>Home</span>
        </a>

        <!-- Events Link -->
        <a href="/events" class="nav-link">
          <i data-lucide="calendar" class="w-4 h-4"></i>
          <span>Events</span>
        </a>

        <!-- Sermons Link -->
        <a href="/sermons" class="nav-link">
          <i data-lucide="book-open" class="w-4 h-4"></i>
          <span>Sermons</span>
        </a>

        <!-- Bulletin Link with Dropdown -->
        <div class="relative group">
          <a href="/bulletin" class="nav-link">
            <i data-lucide="newspaper" class="w-4 h-4"></i>
            <span>Bulletin</span>
            <i data-lucide="chevron-down" class="w-4 h-4 ml-1 group-hover:rotate-180 transition-transform"></i>
          </a>
          <div class="dropdown-menu">
            <a href="/bulletin" class="dropdown-item">
              <i data-lucide="calendar-check" class="w-4 h-4 text-primary-600"></i>
              <span>Current Bulletin</span>
            </a>
            <a href="/bulletin/archive" class="dropdown-item">
              <i data-lucide="archive" class="w-4 h-4 text-primary-600"></i>
              <span>Bulletin Archive</span>
            </a>
          </div>
        </div>

        <!-- Three Angels' Message -->
        <div class="relative group">
          <a href="/three-angels" class="nav-link">
            <i data-lucide="users" class="w-4 h-4"></i>
            <span>Three Angels</span>
            <i data-lucide="chevron-down" class="w-4 h-4 ml-1 group-hover:rotate-180 transition-transform"></i>
          </a>
          <div class="dropdown-menu">
            <a href="/three-angels" class="dropdown-item">
              <i data-lucide="layers" class="w-4 h-4 text-primary-600"></i>
              <span>Overview</span>
            </a>
            <a href="/three-angels/first" class="dropdown-item">
              <span class="w-4 h-4 flex items-center justify-center text-xs font-bold bg-primary-100 text-primary-700 rounded">1</span>
              <span>First Angel</span>
            </a>
            <a href="/three-angels/second" class="dropdown-item">
              <span class="w-4 h-4 flex items-center justify-center text-xs font-bold bg-primary-100 text-primary-700 rounded">2</span>
              <span>Second Angel</span>
            </a>
            <a href="/three-angels/third" class="dropdown-item">
              <span class="w-4 h-4 flex items-center justify-center text-xs font-bold bg-primary-100 text-primary-700 rounded">3</span>
              <span>Third Angel</span>
            </a>
          </div>
        </div>

        <a href="/about" class="nav-link">
          <i data-lucide="info" class="w-4 h-4"></i>
          <span>About</span>
        </a>

        <a href="/contact" class="nav-link">
          <i data-lucide="mail" class="w-4 h-4"></i>
          <span>Contact</span>
        </a>
      </div>

      <!-- CTA Button & Mobile Menu -->
      <div class="flex items-center space-x-2">
        <!-- Donation Button -->
        <a href="https://adventistgiving.org/donate/AN4MJG" target="_blank" rel="noopener" class="hidden sm:inline-flex items-center space-x-2 bg-gold-500 text-black px-4 py-2 rounded-xl font-medium shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
          <i data-lucide="heart" class="w-4 h-4"></i>
          <span>Donate</span>
        </a>

        <!-- Live Stream Button -->
        <a href="/live" class="hidden sm:inline-flex items-center space-x-2 bg-sacred-gradient text-white px-4 py-2 rounded-xl font-medium shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105">
          <i data-lucide="video" class="w-4 h-4"></i>
          <span>Watch Live</span>
        </a>

        <!-- Mobile Menu Button -->
        <button id="mobile-menu-button" class="lg:hidden p-2 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
          <i data-lucide="menu" class="w-6 h-6"></i>
        </button>
      </div>
    </div>

    <!-- Mobile Menu -->
    <div id="mobile-menu" class="hidden lg:hidden absolute top-full left-0 right-0 bg-white/95 dark:bg-gray-900/95 backdrop-blur-md border-b border-gray-200/20 dark:border-gray-700/20 shadow-xl">
      <div class="px-4 py-6 space-y-3">
        <a href="/" class="mobile-nav-link">
          <i data-lucide="home" class="w-5 h-5"></i>
          <span>Home</span>
        </a>
        <a href="/events" class="mobile-nav-link">
          <i data-lucide="calendar" class="w-5 h-5"></i>
          <span>Events</span>
        </a>
        <a href="/sermons" class="mobile-nav-link">
          <i data-lucide="book-open" class="w-5 h-5"></i>
          <span>Sermons</span>
        </a>
        <a href="/bulletin" class="mobile-nav-link">
          <i data-lucide="newspaper" class="w-5 h-5"></i>
          <span>Current Bulletin</span>
        </a>
        <a href="/bulletin/archive" class="mobile-nav-link">
          <i data-lucide="archive" class="w-5 h-5"></i>
          <span>Bulletin Archive</span>
        </a>
        <a href="/three-angels" class="mobile-nav-link">
          <i data-lucide="users" class="w-5 h-5"></i>
          <span>Three Angels' Message</span>
        </a>
        <a href="/about" class="mobile-nav-link">
          <i data-lucide="info" class="w-5 h-5"></i>
          <span>About</span>
        </a>
        <a href="/contact" class="mobile-nav-link">
          <i data-lucide="mail" class="w-5 h-5"></i>
          <span>Contact</span>
        </a>
        <a href="https://adventistgiving.org/donate/AN4MJG" target="_blank" rel="noopener" class="mobile-nav-link bg-gold-500 text-black">
          <i data-lucide="heart" class="w-5 h-5"></i>
          <span>Donate</span>
        </a>
        <a href="/live" class="mobile-nav-link bg-sacred-gradient text-white">
          <i data-lucide="video" class="w-5 h-5"></i>
          <span>Watch Live</span>
        </a>
      </div>
    </div>
  </div>
</nav>

<style>
  .nav-link {
    @apply flex items-center space-x-1 px-2 py-2 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 font-medium text-sm;
  }

  .dropdown-menu {
    @apply absolute top-full left-0 mt-1 w-56 bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 transform translate-y-2 group-hover:translate-y-0 z-50;
  }

  .dropdown-item {
    @apply flex items-center space-x-4 px-6 py-3 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors first:rounded-t-xl last:rounded-b-xl;
  }

  .mobile-nav-link {
    @apply flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200 font-medium;
  }
</style>