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

  {{-- ── Top bar ──────────────────────────────────────── --}}
  <div class="topbar">
    <div class="top-left">
      <span>{{ now()->format('F j, Y') }}</span>
      <span class="epaper">e-Paper</span>
    </div>
    <div class="top-right">
      <span class="e-book">eBooks</span>
      {{-- Google Translate widget — renders a language selector in the top bar --}}
      <div id="google_translate_element"></div>
      <span class="log">LOGIN</span>
      <button class="subscribe-btn" id="openModal">SUBSCRIBE</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="Close">&times;</span>
      <h2 id="modalTitle">Stay Updated</h2>
      <p>Get The Hindu's top stories delivered to your inbox.</p>
      <form action="{{ route('subscribe') }}" method="POST" id="subscribeForm">
        @csrf
        <input type="email" name="email" placeholder="Enter your email" class="email-input" required>
        <button type="submit" class="subscribe-submit">Subscribe</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>

  {{-- ── Navbar ────────────────────────────────────────── --}}
  <nav class="navbar" aria-label="Primary navigation">
    <div class="nav-left">

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

      {{-- Mega Menu Drawer --}}
      <div id="megaMenu" class="menu" role="dialog" aria-label="Navigation menu">
        <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="Close menu">✕</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> Search
            </a>
          </div>

          <div class="menu-hindu-items-grid">
            @foreach($allCategories->chunk(2) as $chunk)
            <div class="menu-hindu-items-col">
              @foreach($chunk as $cat)
              {{-- Show English category name when available, fallback to Spanish --}}
              <p><a href="{{ route('category.show', $cat->slug) }}">{{ $cat->category_name_english ?? $cat->category_name }}</a></p>
              @endforeach
            </div>
            @endforeach
          </div>

          <div class="menu-hindu-items-bottom">
            <span>Connect with us</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') }}">About The Hindu →</a>
            </p>
          </div>
        </div>
      </div>

      {{-- Search button --}}
        <button class="search search-toggle-btn" id="searchToggle" aria-label="Search" aria-expanded="false">
          <i class="fa-solid fa-magnifying-glass"></i> Search
        </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="Search articles..." aria-label="Search" autocomplete="off">
            <button type="submit" aria-label="Submit search"><i class="fa-solid fa-magnifying-glass"></i></button>
          </form>
        </div>
    </div>

    {{-- Primary nav links — Home + top 8 categories in English --}}
    <div class="nav-links">
        <a href="{{ route('index') }}" class="home-link">Home</a>
      @foreach($allCategories->take(8) as $cat)
      <a href="{{ route('category.show', $cat->slug) }}"
         @class(['active' => request()->route('slug') === $cat->slug])>
        {{-- Use English category name; fallback to Spanish if English not set --}}
        {{ $cat->category_name_english ?? $cat->category_name }}
      </a>
      @endforeach
    </div>
  </nav>

</header>

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

{{-- ── Google Translate Widget Script ──────────────────────────── --}}
{{--
  This embeds the Google Translate element that lets visitors switch
  between Spanish (the site's native language) and English.
  It also prevents the page from being auto-translated on load, since
  the site already serves Spanish content intentionally.
--}}
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'es',           // site is in Spanish
      includedLanguages: 'en,es',   // offer English and Spanish only
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
      autoDisplay: false            // do NOT auto-translate on load
    }, 'google_translate_element');
  }
</script>
<script type="text/javascript"
  src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
