<!-- Modern Header -->
<header class="sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-gray-200" x-data="{ mobileMenuOpen: false }">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <!-- Logo -->
      <div class="flex items-center">
        <a href="/" class="text-xl uppercase font-bold text-gray-900 transition hover:text-gray-400">{{ .Site.Title }}</a>
      </div>
      
      <!-- Desktop Navigation -->
        <nav class="hidden md:flex">
            <ul class="flex items-center h-full gap-8 m-0 p-0 list-none">
                {{ if .Site.Data.wordpress }}
                    {{ $count := 0 }}
                    {{ range $index, $element := .Site.Data.wordpress.categories }}
                        {{ if or (eq $element.name "Featured") (eq $element.name "Non classé") }}
                            {{ continue }}
                        {{ else if lt $count 5 }}
                        <li>
                            <a href="/{{ $element.slug }}" class="px-4 py-2 rounded transition ease-in-out hover:bg-gray-100 text-gray-600 hover:text-blue-600 font-medium">{{ $element.name }}</a>
                        </li>
                        {{ $count = add $count 1 }}
                        {{ else }}
                        {{ break }}
                        {{ end }}
                    {{ end }}
                {{ end }}
            </ul>
        </nav>
        <div class="flex items-center space-x-4">
        <button class="md:hidden text-gray-600" id="mobile-menu-toggle" aria-label="Toggle mobile menu" @click="mobileMenuOpen = !mobileMenuOpen">
            <i class="fas text-xl transition-transform duration-300 ease-in-out"
               :class="mobileMenuOpen ? 'fa-times' : 'fa-bars'"></i>
        </button>
        <button class="hidden md:block bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium">
            Subscribe
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile Menu -->
  <div x-show="mobileMenuOpen"
       x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="opacity-0 transform -translate-y-2"
       x-transition:enter-end="opacity-100 transform translate-y-0"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="opacity-100 transform translate-y-0"
       x-transition:leave-end="opacity-0 transform -translate-y-2"
       class="md:hidden absolute top-full left-0 right-0 bg-white border-b border-gray-200 shadow-lg">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-4">
      <ul class="flex flex-col space-y-4 m-0 p-0 list-none">
        {{ if .Site.Data.wordpress }}
            {{ $count := 0 }}
            {{ range $index, $element := .Site.Data.wordpress.categories }}
                {{ if or (eq $element.name "Featured") (eq $element.name "Non classé") }}
                    {{ continue }}
                {{ else if lt $count 5 }}
                <li>
                    <a href="/{{ $element.slug }}" class="px-4 py-2 rounded transition ease-in-out hover:bg-gray-100 text-gray-600 hover:text-blue-600 font-medium">{{ $element.name }}</a>
                </li>
                {{ $count = add $count 1 }}
                {{ else }}
                {{ break }}
                {{ end }}
            {{ end }}
        {{ end }}
      </ul>
    </div>
  </div>
</header>
