<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>
      <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)
              <p><a href="{{ route('category.show', $cat->slug) }}">{{ $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 --}}
      <a href="{{ route('search') }}" class="search" aria-label="Search">
        <i class="fa-solid fa-magnifying-glass"></i> Search
      </a>
    </div>

    {{-- Primary nav links (top 8 categories) --}}
    <div class="nav-links">
      @foreach($allCategories->take(8) as $cat)
      <a href="{{ route('category.show', $cat->slug) }}"
         @class(['active' => request()->route('slug') === $cat->slug])>
        {{ $cat->category_name }}
      </a>
      @endforeach
      <a href="#" class="premium-link">Premium 💎</a>
    </div>
  </nav>

</header>

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