<div class="sticky top-0 z-50 bg-white shadow-sm">
  <!-- Topbar - More subtle and professional -->
  <div class="w-full bg-slate-800 text-white">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-2">
      <div class="flex items-center justify-between text-xs">
        <!-- Left: Welcome message -->
        <div class="hidden sm:block text-slate-300">
          Welcome to our platform
        </div>
        
        <!-- Center: Topbar links -->
        <nav aria-label="Topbar" class="flex items-center gap-4 md:gap-6">
          <a href="#" class="text-slate-300 hover:text-white transition-colors duration-200">About</a>
          <a href="#" class="text-slate-300 hover:text-white transition-colors duration-200">Careers</a>
          <a href="#" class="text-slate-300 hover:text-white transition-colors duration-200">Pricing</a>
          <a href="#" class="text-slate-300 hover:text-white transition-colors duration-200">Contact</a>
        </nav>
        
        <!-- Right: Social icons -->
        <div class="flex items-center gap-2">
          @php
            $social_links = \App\Models\SocialMedia::get();
          @endphp
          @foreach($social_links as $link)
            <a href="{{ $link->url }}" class="text-slate-300 p-1 rounded hover:text-white hover:bg-slate-700 transition-colors duration-200" aria-label="{{ $link->title }}" target="_blank">
              <i class="fab fa-{{ strtolower($link->title) }} text-sm"></i>
            </a>
          @endforeach
        </div>
      </div>
    </div>
  </div>

  <!-- Main Header - Cleaner and more modern -->
  <header class="bg-white border-b border-slate-100">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
      <div class="flex items-center justify-between h-16 md:h-20">
        <!-- Logo -->
        <div class="flex-shrink-0">
          <a href="{{route('index')}}" class="inline-flex items-center">
            <img src="@if($settings){{ asset('admin-assets/images/logos') }}/{{ $settings->footer_logo }}@endif" alt="Logo" class="h-8 md:h-10 object-contain" />
          </a>
        </div>

        <!-- Desktop Navigation -->
        <nav class="hidden md:flex items-center space-x-8" aria-label="Primary">
          @php
            $categories = \App\Models\Category::select('id', 'slug', 'name')
                ->limit(5)
                ->get();
          @endphp
          @foreach ($categories as $row)
            <a href="{{ route('blogs.category', $row->slug) }}" class="text-slate-700 font-medium hover:text-blue-600 transition-colors duration-200 py-2">{{$row->name}}</a>
          @endforeach
        </nav>

        <!-- Search and Mobile Menu -->
        <div class="flex items-center space-x-4">
          <!-- Search -->
          <div class="relative">
            <form role="search" class="flex items-center">
              <div class="relative">
                <input id="siteSearch" name="q" type="search" placeholder="Search articles..."
                       class="w-40 md:w-56 rounded-full border border-slate-300 bg-white px-4 py-2 text-sm text-slate-700 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200" />
                <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true">
                    <circle cx="11" cy="11" r="7" stroke-width="1.5"></circle>
                    <path d="m20 20-3.5-3.5" stroke-width="1.5"></path>
                  </svg>
                </span>
              </div>
            </form>
          </div>

          <!-- Mobile Menu Button -->
          <button id="openDrawerBtn"
                  class="md:hidden inline-flex items-center justify-center p-2 rounded-md text-slate-700 hover:bg-slate-100 transition-colors duration-200"
                  aria-label="Open main menu" aria-controls="mobileDrawer" aria-expanded="false">
            <!-- Hamburger -->
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
          </button>
        </div>
        <style>
    /* Language Switcher Styles */
    .language-switcher {
        position: relative;
        z-index: 1000;
    }

    .language-switcher select {
        display: none; /* Hide the default select */
    }

    .custom-language-select {
        width: 180px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: white;
        cursor: pointer;
        font-size: 14px;
        padding: 8px 12px;
        position: relative;
    }

    .custom-language-select img {
        width: 20px;
        height: 14px;
        margin-right: 8px;
        vertical-align: middle;
    }

    .custom-language-select span {
        vertical-align: middle;
    }

    .custom-language-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        border: 1px solid #ddd;
        border-radius: 4px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        margin-top: 4px;
        z-index: 1001;
    }

    .custom-language-dropdown div {
        padding: 8px 12px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .custom-language-dropdown div:hover {
        background: #f1f1f1;
    }

    /* Mobile-friendly responsiveness */
    @media (max-width: 768px) {
        .language-switcher {
            width: 100%;
            display: flex;
            justify-content: center;
            margin: 10px 0;
        }

        .custom-language-select {
            max-width: 90%;
            font-size: 15px;
        }
    }
</style>

@php
    $flags = [
        'en' => 'https://blogzcenter.com/public/flags/uk.png',
        'pl' => 'https://blogzcenter.com/public/flags/pl.png',
        'en-US' => 'https://blogzcenter.com/public/flags/us.png',
    ];
    $currentLocale = LaravelLocalization::getCurrentLocale();
@endphp

<div class="language-switcher">
    <div class="custom-language-select" onclick="toggleDropdown()">
        <img src="{{ $flags[$currentLocale] ?? $flags['en'] }}" alt="flag">
        <span>{{ LaravelLocalization::getSupportedLocales()[$currentLocale]['native'] }}</span>
    </div>

    <div class="custom-language-dropdown" id="languageDropdown">
        @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
            @if($localeCode == 'en')
            <div onclick="window.location.href='http://couponsbaskets.co.uk'">
                <img src="{{ $flags[$localeCode] ?? $flags['en'] }}" alt="{{$localeCode}}" width="20">
                <span>{{ $properties['native'] }}</span>
            </div>
            
            @else
            <div onclick="window.location.href='{{ LaravelLocalization::getLocalizedURL($localeCode) }}'">
                <img src="{{ $flags[$localeCode] ?? $flags['en'] }}" alt="{{$localeCode}}" width="20">
                <span>{{ $properties['native'] }}</span>
            </div>
            @endif
        @endforeach
    </div>
</div>

<script>
    function toggleDropdown() {
        const dropdown = document.getElementById('languageDropdown');
        dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
    }

    // Close dropdown when clicking outside
    window.addEventListener('click', function(e) {
        if (!e.target.closest('.language-switcher')) {
            document.getElementById('languageDropdown').style.display = 'none';
        }
    });
</script>
      </div>
    </div>
  </header>
</div>

<!-- Mobile Navigation Drawer -->
<div id="mobileDrawer" class="fixed inset-y-0 left-0 z-50 w-full max-w-xs bg-white shadow-xl transform -translate-x-full transition-transform duration-300 ease-in-out md:hidden">
  <div class="flex flex-col h-full">
    <!-- Drawer Header -->
    <div class="flex items-center justify-between p-4 border-b border-slate-200">
      <span class="text-lg font-semibold text-slate-800">Menu</span>
      <button id="closeDrawerBtn" class="p-2 rounded-md text-slate-500 hover:bg-slate-100" aria-label="CloseMenu">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
    
    <!-- Navigation Links -->
    <div class="flex-1 overflow-y-auto p-4">
      <nav class="space-y-2">
        @foreach ($categories as $row)
          <a href="{{ route('blogs.category', $row->slug) }}" class="block py-3 px-4 text-slate-700 rounded-lg hover:bg-slate-100 transition-colors duration-200">{{$row->name}}</a>
        @endforeach
      </nav>
      
      <div class="mt-8 pt-6 border-t border-slate-200">
        <h3 class="px-4 text-sm font-medium text-slate-500 mb-3">Company</h3>
        <nav class="space-y-2">
          <a href="#" class="block py-2 px-4 text-slate-700 rounded-lg hover:bg-slate-100 transition-colors duration-200">About</a>
          <a href="#" class="block py-2 px-4 text-slate-700 rounded-lg hover:bg-slate-100 transition-colors duration-200">Careers</a>
          <a href="#" class="block py-2 px-4 text-slate-700 rounded-lg hover:bg-slate-100 transition-colors duration-200">Pricing</a>
          <a href="#" class="block py-2 px-4 text-slate-700 rounded-lg hover:bg-slate-100 transition-colors duration-200">Contact</a>
        </nav>
      </div>
    </div>
    
    <!-- Social Links -->
    <div class="p-4 border-t border-slate-200">
      <div class="flex justify-center space-x-4">
        @foreach($social_links as $link)
          <a href="{{ $link->url }}" class="p-2 text-slate-500 hover:text-slate-700 transition-colors duration-200" aria-label="{{ $link->title }}" target="_blank">
            <i class="fab fa-{{ strtolower($link->title) }} text-lg"></i>
          </a>
        @endforeach
      </div>
    </div>
  </div>
</div>

<!-- Overlay for mobile drawer -->
<div id="drawerOverlay" class="fixed inset-0 z-40 bg-black bg-opacity-50 hidden md:hidden"></div>

<script>
  // Mobile drawer functionality
  document.addEventListener('DOMContentLoaded', function() {
    const openDrawerBtn = document.getElementById('openDrawerBtn');
    const closeDrawerBtn = document.getElementById('closeDrawerBtn');
    const mobileDrawer = document.getElementById('mobileDrawer');
    const drawerOverlay = document.getElementById('drawerOverlay');
    
    function openDrawer() {
      mobileDrawer.classList.remove('-translate-x-full');
      drawerOverlay.classList.remove('hidden');
      document.body.style.overflow = 'hidden';
    }
    
    function closeDrawer() {
      mobileDrawer.classList.add('-translate-x-full');
      drawerOverlay.classList.add('hidden');
      document.body.style.overflow = '';
    }
    
    openDrawerBtn.addEventListener('click', openDrawer);
    closeDrawerBtn.addEventListener('click', closeDrawer);
    drawerOverlay.addEventListener('click', closeDrawer);
    
    // Close drawer when clicking on a link
    const drawerLinks = mobileDrawer.querySelectorAll('a');
    drawerLinks.forEach(link => {
      link.addEventListener('click', closeDrawer);
    });
  });
</script>