<header class="header" id="site-header">

  {{-- ── Top bar ──────────────────────────────────────── --}}
  <div class="topbar">
    <div class="top-left">
      <span>{{ now()->locale('es')->isoFormat('D [de] MMMM [de] YYYY') }}</span>
      <span class="epaper">Edición Digital</span>
    </div>
    <div class="top-right">
      <span class="e-book">Libros digitales</span>
      <span class="log">Iniciar sesión</span>
      <button class="subscribe-btn" id="openModal">Suscribirse</button>
    </div>
  </div>

  {{-- ── Subscribe Modal ──────────────────────────────── --}}
  <div class="modal" id="subscribeModal" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
    <div class="modal-content">
      <span class="close-btn" id="closeModal" aria-label="Cerrar">&times;</span>
      <h2 id="modalTitle">Mantente informado</h2>
      <p>Recibe las noticias más importantes de The Hindu en tu correo.</p>
      <form action="{{ route('subscribe') }}" method="POST" id="subscribeForm">
        @csrf
        <input type="email" name="email" placeholder="Ingresa tu correo electrónico" class="email-input" required>
        <button type="submit" class="subscribe-submit">Suscribirse</button>
        <p class="subscribe-msg" id="subscribeMsg"></p>
      </form>
    </div>
  </div>

  {{-- ── Logo ──────────────────────────────────────────── --}}
  <div class="logo">
    <a href="{{ route('index') }}" title="{{ config('app.name', 'The Hindu') }}">
      <img src="{{ asset('img/thehindu-logo.svg') }}" alt="{{ config('app.name', 'The Hindu') }}" width="auto" height="auto">
    </a>
  </div>

  {{-- ── English name map — edit this if you add/rename categories ──────── --}}
  @php
    $englishNames = [
      'Política'       => 'Politics',
      'Economía'       => 'Economy',
      'Deportes'       => 'Sports',
      'Tecnología'     => 'Technology',
      'Turismo'        => 'Tourism',
      'Salud'          => 'Health',
      'Medio Ambiente' => 'Environment',
      'Cultura'        => 'Culture',
      'Migración'      => 'Migration',
      'Seguridad'      => 'Security',
    ];
  @endphp

  {{-- ── Navbar ────────────────────────────────────────── --}}
  <nav class="navbar" aria-label="Navegación principal">
    <div class="nav-left">

      {{-- Hamburger menu icon --}}
      <button class="menu-icon" id="menuToggle" aria-label="Abrir menú" aria-expanded="false" aria-controls="megaMenu">☰</button>

      {{-- Mega Menu Drawer --}}
      <div id="megaMenu" class="menu" role="dialog" aria-label="Menú de navegación">
        <div class="logo">
          <a href="{{ route('index') }}">
            <img src="{{ asset('img/thehindu-logo.svg') }}" alt="{{ config('app.name', 'The Hindu') }}" width="auto" height="auto">
          </a>
        </div>
        <button class="menu-close" id="menuClose" aria-label="Cerrar menú">✕</button>

        <div class="menu-hindu-items-container">
          <div class="menu-hindu-items-top">
            <a href="{{ route('search') }}" class="menu-hindu-items-search">
              <i class="fa-solid fa-magnifying-glass"></i>
            </a>
          </div>

          <div class="menu-hindu-items-grid">
            @foreach($allCategories->chunk(2) as $chunk)
            <div class="menu-hindu-items-col">
              @foreach($chunk as $cat)
              <p>
                <a href="{{ route('category.show', $cat->slug) }}"
                   class="notranslate"
                   translate="no"
                   data-es="{{ $cat->category_name }}"
                   data-en="{{ $cat->category_name_english ?? ($englishNames[$cat->category_name] ?? $cat->category_name) }}">
                  <span class="cat-label">{{ $cat->category_name }}</span>
                </a>
              </p>
              @endforeach
            </div>
            @endforeach
          </div>

          <div class="menu-hindu-items-bottom">
            <span>Síguenos</span>
            <div class="menu-hindu-items-icons">
              <a href="#" aria-label="WhatsApp"><span><i class="fa-brands fa-whatsapp"></i></span></a>
              <a href="#" aria-label="Facebook"><span><i class="fa-brands fa-facebook"></i></span></a>
              <a href="#" aria-label="Instagram"><span><i class="fa-brands fa-instagram"></i></span></a>
              <a href="#" aria-label="Twitter / X"><span><i class="fa-brands fa-x-twitter"></i></span></a>
            </div>
            <p class="menu-hindu-items-link">
              <a href="{{ route('about') }}">Acerca de The Hindu →</a>
            </p>
          </div>
        </div>
      </div>

      {{-- Search button --}}
      <button class="search search-toggle-btn" id="searchToggle" aria-label="Buscar" aria-expanded="false">
        <i class="fa-solid fa-magnifying-glass"></i>
      </button>

      {{-- Search dropdown --}}
      <div class="search-dropdown" id="searchDropdown" aria-hidden="true">
        <form action="{{ route('search') }}" method="GET" class="search-dropdown-form" role="search">
          <input type="search" name="q" id="searchInput" placeholder="Buscar artículos..." aria-label="Buscar" autocomplete="off">
          <button type="submit" aria-label="Enviar búsqueda"><i class="fa-solid fa-magnifying-glass"></i></button>
        </form>
      </div>
    </div>

    <div class="nav-links">
      <a href="{{ route('index') }}" class="home-link notranslate" translate="no" data-es="Hogar" data-en="Home">
        <span class="cat-label">Hogar</span>
      </a>
      @foreach($allCategories->take(8) as $cat)
      <a href="{{ route('category.show', $cat->slug) }}"
         class="notranslate{{ request()->route('slug') === $cat->slug ? ' active' : '' }}"
         translate="no"
         data-es="{{ $cat->category_name }}"
         data-en="{{ $cat->category_name_english ?? ($englishNames[$cat->category_name] ?? $cat->category_name) }}">
        <span class="cat-label">{{ $cat->category_name }}</span>
      </a>
      @endforeach
    </div>
  </nav>

</header>

{{-- Overlay for mega menu --}}
<div class="menu-overlay" id="menuOverlay"></div>

{{-- Hidden Google Translate container --}}
<div id="google_translate_element" style="display:none;"></div>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'es',
      includedLanguages: 'en,es',
      autoDisplay: true
    }, 'google_translate_element');
  }
</script>
<script type="text/javascript"
  src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

<script>
(function () {

  function currentLang() {
    var cookie = document.cookie.match(/googtrans=\/es\/(\w+)/);
    if (cookie && cookie[1]) return cookie[1] === 'en' ? 'en' : 'es';
    if (document.documentElement.classList.contains('translated-ltr')) return 'en';
    return localStorage.getItem('siteLang') || 'es';
  }

  function swapCategoryNames(lang) {
    document.querySelectorAll('a[data-es][data-en]').forEach(function (el) {
      var span = el.querySelector('.cat-label');
      var target = span || el;
      target.textContent = (lang === 'en') ? el.dataset.en : el.dataset.es;
    });
  }

  var lang = currentLang();
  localStorage.setItem('siteLang', lang);
  swapCategoryNames(lang);

  new MutationObserver(function () {
    var newLang = document.documentElement.classList.contains('translated-ltr') ? 'en' : 'es';
    localStorage.setItem('siteLang', newLang);
    swapCategoryNames(newLang);
    [300, 800, 1500].forEach(function (ms) {
      setTimeout(function () { swapCategoryNames(newLang); }, ms);
    });
  }).observe(document.documentElement, {
    attributes: true,
    attributeFilter: ['class']
  });

  function watchLinks() {
    var nav = document.querySelector('nav');
    if (!nav) return;
    var busy = false;
    new MutationObserver(function () {
      if (busy) return;
      busy = true;
      swapCategoryNames(currentLang());
      requestAnimationFrame(function () { busy = false; });
    }).observe(nav, { subtree: true, childList: true, characterData: true });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', watchLinks);
  } else {
    watchLinks();
  }

  var lastLang = lang;
  setInterval(function () {
    var now = currentLang();
    if (now !== lastLang) {
      lastLang = now;
      localStorage.setItem('siteLang', now);
      swapCategoryNames(now);
    }
  }, 500);

})();
</script>