<header class="bg-white dark:bg-gray-900 shadow-lg md:static fixed top-0 left-0 right-0 z-40">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center py-4">
      <div class="flex items-center space-x-4 space-x-reverse">
        <h1 class="text-2xl font-bold text-primary-600 dark:text-primary-400 flex items-center space-x-2 space-x-reverse">
          <i class="fas fa-chart-line text-3xl"></i>
          <span>مایا اسلامی</span>
        </h1>
      </div>

      <nav class="hidden md:flex items-center space-x-6 space-x-reverse">
        <a href="/index" class="nav-link flex items-center space-x-1 space-x-reverse">
          <i class="fas fa-home"></i>
          <span>خانه</span>
        </a>
        <a href="/prices" class="nav-link flex items-center space-x-1 space-x-reverse">
          <i class="fas fa-dollar-sign"></i>
          <span>پکیج‌ها</span>
        </a>
        <a href="/articles" class="nav-link flex items-center space-x-1 space-x-reverse">
          <i class="fas fa-book"></i>
          <span>آموزش</span>
        </a>
        <a href="/news" class="nav-link flex items-center space-x-1 space-x-reverse">
          <i class="fas fa-signal"></i>
          <span>سیگنال‌ها</span>
        </a>
        <a href="/subscription" class="nav-link flex items-center space-x-1 space-x-reverse">
          <i class="fas fa-crown"></i>
          <span>اشتراک ویژه</span>
        </a>
        <a href="/profile" class="nav-link flex items-center space-x-1 space-x-reverse">
          <i class="fas fa-user"></i>
          <span>پروفایل</span>
        </a>
        <a href="/contact" class="nav-link flex items-center space-x-1 space-x-reverse">
          <i class="fas fa-phone"></i>
          <span>تماس با ما</span>
        </a>
      </nav>

      <div class="flex items-center space-x-4 space-x-reverse">
        <button id="theme-toggle" class="p-2 rounded-lg bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200">
          <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
          </svg>
          <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </div>

  </div>
</header>

<!-- Bottom Mobile Navigation -->
<div class="md:hidden fixed bottom-0 left-0 right-0 z-50" style="position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important;">
  <nav class="bg-white dark:bg-gray-900 shadow-lg border-t border-gray-200 dark:border-gray-700">
    <div class="flex items-center">
      <a href="/index" class="flex-1 flex flex-col items-center justify-center py-3 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-all duration-200 nav-link-mobile">
        <i class="fas fa-home text-lg mb-1"></i>
        <span class="text-xs font-medium">خانه</span>
      </a>
      <a href="/news" class="flex-1 flex flex-col items-center justify-center py-3 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-all duration-200 nav-link-mobile">
        <i class="fas fa-signal text-lg mb-1"></i>
        <span class="text-xs font-medium">سیگنال</span>
      </a>
      <a href="/prices" class="flex-1 flex flex-col items-center justify-center py-3 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-all duration-200 nav-link-mobile">
        <i class="fas fa-dollar-sign text-lg mb-1"></i>
        <span class="text-xs font-medium">قیمت</span>
      </a>
      <a href="/articles" class="flex-1 flex flex-col items-center justify-center py-3 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-all duration-200 nav-link-mobile">
        <i class="fas fa-book text-lg mb-1"></i>
        <span class="text-xs font-medium">آموزش</span>
      </a>
      <a href="/profile" class="flex-1 flex flex-col items-center justify-center py-3 text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-all duration-200 nav-link-mobile">
        <i class="fas fa-user text-lg mb-1"></i>
        <span class="text-xs font-medium">پروفایل</span>
      </a>
    </div>
  </nav>
</div>