  {{-- TOP BAR --}}
  <div class="flex justify-between text-sm py-3">
    <span class="font-medium text-gray-800">{{ now()->format('l, F d, Y') }} | {{ now()->format('h:i A') }} IST</span>
    <span class="text-red-600 font-medium cursor-pointer">English</span>
  </div>

  {{-- HEADER --}}
  <header class="relative">

    <div class="relative flex items-center justify-between py-6">

      {{-- HAMBURGER --}}
      <div id="menuBtn" class="flex flex-col gap-1 cursor-pointer">
        <span class="w-6 h-[2px] bg-black"></span>
        <span class="w-6 h-[2px] bg-black"></span>
        <span class="w-6 h-[2px] bg-black"></span>
      </div>

      {{-- LOGO --}}
      <a href="{{ route('index') }}">
        <h1 class="absolute left-1/2 -translate-x-1/2 text-red-700 text-2xl md:text-5xl logo-font font-bold">Business Standard</h1>
      </a>

      {{-- RIGHT ICONS --}}
      <div class="flex items-center gap-5">
        <div class="relative">
          <svg class="w-5 h-5 md:w-6 md:h-6 stroke-gray-700" fill="none" viewBox="0 0 24 24" stroke-width="2">
            <path d="M15 17h5l-1.5-2v-5a6.5 6.5 0 10-13 0v5L4 17h5"/>
            <path d="M9 21h6"/>
          </svg>
          <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-600 rounded-full"></span>
        </div>
        <svg class="w-5 h-5 md:w-6 md:h-6 stroke-gray-700" fill="none" viewBox="0 0 24 24" stroke-width="2">
          <circle cx="12" cy="7" r="4"/>
          <path d="M5.5 21a8.38 8.38 0 0113 0"/>
        </svg>
        <a href="{{ route('search') }}">
          <svg class="w-5 h-5 md:w-6 md:h-6 stroke-gray-700" fill="none" viewBox="0 0 24 24" stroke-width="2">
            <circle cx="11" cy="11" r="7"/>
            <path d="M21 21l-4.3-4.3"/>
          </svg>
        </a>
      </div>

    </div>

    <div class="border-t border-gray-300"></div>

    {{-- NAV --}}
    <div class="flex items-center justify-between py-3">
      <nav class="hidden md:flex items-center gap-4 text-[12px] font-semibold text-gray-800">
        <a href="{{ route('index') }}" class="{{ request()->routeIs('index') ? 'text-red-600' : '' }}">HOME</a>
        @foreach($allCategories->take(8) as $cat)
        <a href="{{ route('category.show', $cat->slug) }}" class="{{ request()->is('category/'.$cat->slug) ? 'text-red-600' : '' }}">{{ strtoupper($cat->category_name_english ?? $cat->category_name) }}</a>
        @endforeach
      </nav>
      <button id="openSubscribeModal" class="hidden md:inline-block border border-red-600 text-red-600 px-4 py-0 rounded-md font-semibold">Subscribe</button>
    </div>

    {{-- DROPDOWN --}}
    <div id="menuDropdown" class="hidden absolute left-0 top-full w-full bg-white border-t shadow-md z-50" style="left: -16px; width: calc(100% + 32px);">
      <div class="max-w-[1200px] mx-auto px-4 md:px-6 py-6">
        <nav class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm font-semibold text-gray-800">
          <a href="{{ route('index') }}" class="{{ request()->routeIs('index') ? 'text-red-600' : '' }}">HOME</a>
          @foreach($allCategories as $cat)
          <a href="{{ route('category.show', $cat->slug) }}" class="{{ request()->is('category/'.$cat->slug) ? 'text-red-600' : '' }}">{{ strtoupper($cat->category_name_english ?? $cat->category_name) }}</a>
          @endforeach
          <a href="{{ route('about') }}">ABOUT</a>
          <a href="{{ route('privacyPolicy') }}">PRIVACY POLICY</a>
        </nav>
      </div>
    </div>

    <div class="border-t my-0"></div>
  </header>

  {{-- SUBSCRIBE MODAL --}}
  <div id="subscribeModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-[100] flex items-center justify-center">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 p-8 relative">
      <button id="closeSubscribeModal" class="absolute top-4 right-4 text-gray-500 hover:text-black text-2xl">&times;</button>
      <div class="text-center mb-6">
        <h2 class="text-red-700 text-3xl font-bold logo-font mb-1">Business Standard</h2>
        <p class="text-gray-600">Stay Informed. Subscribe Now.</p>
      </div>

      {{-- Session Flash Messages --}}
      @if(session('success'))
        <div class="bg-green-50 border border-green-300 text-green-700 px-4 py-3 rounded mb-4 text-sm">
          {{ session('success') }}
        </div>
      @endif
      @if(session('info'))
        <div class="bg-blue-50 border border-blue-300 text-blue-700 px-4 py-3 rounded mb-4 text-sm">
          {{ session('info') }}
        </div>
      @endif

      <form action="{{ route('subscribe') }}" method="POST" id="subscribeForm">
        @csrf
        <div class="mb-4">
          <input type="email" name="email" placeholder="Enter your email address"
            class="w-full border border-gray-300 rounded px-4 py-3 text-sm focus:outline-none focus:border-red-600 @error('email') border-red-500 @enderror"
            value="{{ old('email') }}" required>
          @error('email')
            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
          @enderror
        </div>
        <button type="submit" class="w-full bg-red-700 text-white py-3 rounded font-semibold hover:bg-red-800 transition">
          Subscribe to Business Standard
        </button>
        <p class="text-xs text-gray-500 text-center mt-2">Get latest news in your inbox. Unsubscribe anytime.</p>
      </form>
    </div>
  </div>
