<header class="sticky top-0 z-40 bg-white dark:bg-gray-800 shadow-sm lg:hidden">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <a href="#" class="text-2xl font-bold text-wattpad-primary logo"> 
              <img src="app_logo.png" alt="">
            </a>
            <div class="flex items-center space-x-4">
              <div class="px-4 py-2 flex justify-between ">
        
         <select 
           class="border rounded px-2 py-1 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
           (change)="changeLanguage($event)"
           [value]="selectedLanguage"
         >
           <option value="en">ENGLISH</option>
           <option value="hi">हिंदी</option>
           <option value="mr">मराठी</option>
           <option value="bn">বাংলা</option>
           <option value="ta">தமிழ்</option>
           <option value="te">తెలుగు</option>
         </select>
       </div>
                <button (click)="toggleSearchOverlay()" id="mobileSearchBtn" class="text-gray-700 dark:text-gray-300">
                    <i class="fas fa-search text-xl"></i>
                </button>
                <button id="mobileMenuBtn" class="text-gray-700 dark:text-gray-300" (click)="toggleMobileMenu()">
    <i class="fas fa-ellipsis-v text-xl"></i>
</button>
            </div>
        </div>
    </header> <!-- Mobile Header End-->
     <header class="hidden lg:block bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-40">
  <div class="container mx-auto px-6 py-3 flex justify-between items-center">
    <div class="flex items-center space-x-10">
      <a routerLink="/" class="text-2xl font-bold text-wattpad-primary logo"> <img src="app_logo.png" alt=""></a>
      <nav class="flex space-x-6">
        <!-- Browse Menu -->
        <div class="relative browse-dropdown">
  <button (click)="toggleDropdown('browse')" class="flex items-center font-medium hover:text-wattpad-primary transition-colors">
    {{t('CATEGORIES')}} <i class="fas fa-chevron-down ml-1 text-xs"></i>
  </button>
  
        <div class="mega-menu p-6 grid grid-cols-3 gap-6 bg-white dark:bg-gray-800 shadow-md absolute top-full left-0 z-40"
       *ngIf="activeDropdown === 'browse'  && categoryColumns.length">
        

  <div *ngFor="let group of categoryColumns">
  
  <ul class="space-y-2">
    <li *ngFor="let name of group">
  <a [routerLink]="['/category', name.id, name.categoryName]" class="block px-4 py-2 hover:bg-[rgb(255,45,85)] dark:hover:bg-[rgb(255,45,85)]">
    {{ name.categoryName }}
  </a>
</li>
  </ul>
</div>


</div>
                      </div>

        <!-- Write Dropdown -->
       <div class="relative write-dropdown">
  <button routerLink="/contest" class="flex items-center font-medium hover:text-wattpad-primary transition-colors">
   {{t('WRITING_CONTEST')}}
  </button>
  <!-- <div class="dropdown-menu w-48 py-2 rounded-md absolute bg-white dark:bg-gray-900 shadow-md mt-2 z-40"
       *ngIf="activeDropdown === 'write'">
            
          
            <a href="" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">Monatization</a>
            <a href="/contest" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700">Writing Competitions</a>
          </div> -->
        </div>

        <!-- <a href="#" class="font-medium hover:text-wattpad-primary transition-colors">Community</a> -->
      </nav>
    </div>

    <!-- Right Buttons -->
    <div class="flex items-center space-x-4">
      
      <div class="px-4 py-2 flex justify-between ">
        
         <select 
           class="border rounded px-2 py-1 text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
           (change)="changeLanguage($event)"
           [value]="selectedLanguage"
         >
            <option value="en">ENGLISH</option>
           <option value="hi">हिंदी</option>
           <option value="mr">मराठी</option>
           <option value="bn">বাংলা</option>
           <option value="ta">தமிழ்</option>
           <option value="te">తెలుగు</option>
         </select>
       </div>
      <!-- Search -->
      <button (click)="toggleSearchOverlay()" class="p-2 hover:text-wattpad-primary">
        <i class="fas fa-search text-lg"></i>
      </button>

      <!-- Dark/Light Mode -->
     <button 
  id="themeToggle" 
  (click)="toggleTheme()" 
  class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
>
  <i class="fas fa-sun dark:hidden"></i>
  <i class="fas fa-moon hidden dark:block"></i>
</button>
<a href="new" class="write rounded-full">Write</a>
      <!-- login -->
<a href="login"  *ngIf="!isLoggedIn" class="px-4 py-2 rounded-full font-medium bg-wattpad-primary text-white hover:bg-[#E5274B] transition-colors  hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">{{t('SIGN IN / SIGN UP')}}</a>
      <!-- User Dropdown -->
      <div class="relative user-dropdown" *ngIf="isLoggedIn">
  <button (click)="toggleDropdown('user')" class="flex items-center space-x-2">
    <!-- Replace the initial with profile image -->
    <img *ngIf="currentUser?.profileimg" 
         [src]="profileImagePath + currentUser.profileimg" 
         class="w-8 h-8 rounded-full object-cover"
         alt="Profile Image">
    <div *ngIf="!currentUser?.profileimg" 
         class="w-8 h-8 rounded-full bg-wattpad-primary flex items-center justify-center text-white">
         {{ userName.charAt(0) }}
    </div>
    <span class="font-medium">{{userName || 'Guest'}}</span>
    <i class="fas fa-chevron-down text-xs"></i>
  </button>
  <div class="dropdown-menu w-56 py-2 rounded-md absolute right-0 bg-white dark:bg-gray-900 shadow-md mt-2 z-40"
       *ngIf="activeDropdown === 'user'">
       <a (click)="createNewStory()" class="block px-4 py-2 hover:bg-[rgb(255,45,85)] dark:hover:bg-[rgb(255,45,85)]"><i class="fa-solid fa-feather"></i> {{t('WRITE')}}</a>
       <a (click)="navigateToMyWorks()" class="block px-4 py-2 hover:bg-[rgb(255,45,85)] dark:hover:bg-[rgb(255,45,85)]"><i class="fa-solid fa-feather"></i> {{t('MY_STORIES')}}</a>
          <a href="user-profile" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"><i class="fas fa-user mr-2"></i> {{t('MY_PROFILE')}}</a>
          <!-- <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"><i class="fas fa-inbox mr-2"></i> Inbox</a> -->
          <!-- <a href="notifications" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"><i class="fas fa-bell mr-2"></i> Notifications</a> -->
          <a href="library" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"><i class="fas fa-bookmark mr-2"></i> {{t('LIBRARY')}}</a>
         
          <!-- <div class="px-4 py-2 flex justify-between items-center">
  <span>{{ translationService.translate('LANGUAGE') }}</span>
  <select 
    class="border rounded px-2 py-1 text-sm dark:bg-gray-700 dark:border-gray-600"
    (change)="changeLanguage($event)"
    [value]="currentLanguage"
  >
    <option value="English">{{ translationService.translate('ENGLISH') }}</option>
    <option value="Hindi">{{ translationService.translate('HINDI') }}</option>
    <option value="Marathi">{{ translationService.translate('MARATHI') }}</option>
  </select>
          </div> -->
          <!-- <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"><i class="fas fa-question-circle mr-2"></i> Help</a>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"><i class="fas fa-cog mr-2"></i> Settings</a> -->
          <div class="border-t my-1 dark:border-gray-600"></div>
          <a *ngIf="isLoggedIn" (click)="logout()" class="pointer block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-wattpad-primary"><i class="fas fa-sign-out-alt mr-2"></i> {{t('SIGN_OUT')}}</a>
        <a *ngIf="!isLoggedIn" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 text-wattpad-primary" href="login"><i class="fas fa-sign-out-alt mr-2"></i> {{t('SIGN_IN')}}</a>
                      

                      
        </div>
      </div>
    </div>
  </div>
</header>

<!-- Search Overlay -->
 
<div 
  *ngIf="searchOverlayActive"
  [ngClass]="{
    'search-overlay': true,
    'fixed inset-0 bg-white dark:bg-gray-800 z-50 p-4': true,
    'active': searchOverlayActive
  }">

  <div class="container mx-auto">
    <div class="flex justify-between items-center mb-6">
      <!-- <h2 class="text-xl font-bold dark:text-white"> Search Funtel</h2> -->
      <button (click)="toggleSearchOverlay()" class="text-gray-500 dark:text-gray-300 hover:text-wattpad-primary">
        <i class="fas fa-times text-2xl"></i>
      </button>
    </div>
    <div class="relative">
      <form (submit)="onSearchSubmit($event)">
        <input type="text" [(ngModel)]="searchText" name="search" (input)="onSearchInput()" placeholder="Search for stories..." class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-wattpad-primary dark:bg-gray-700 dark:text-white">
        <button type="submit" class="absolute right-3 top-3 text-gray-500 dark:text-gray-300 hover:text-wattpad-primary">
          <i class="fas fa-search"></i>
        </button>
      </form>
      <ul *ngIf="filteredSuggestions.length" class="absolute z-10 w-full bg-white dark:bg-gray-800 shadow-lg mt-2 rounded-md">
        <li *ngFor="let suggestion of filteredSuggestions" (click)="selectSuggestion(suggestion)" class="px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer">
          {{ suggestion.story_title }}
        </li>
      </ul>
    </div>
  </div>
</div>
<div *ngIf="showLoginRedirectMessage" class="login-redirect-message">
  You are already logged in.
</div>

<!-- Mobile Menu Overlay -->
<div *ngIf="mobileMenuActive" class="fixed inset-0 bg-white dark:bg-gray-800 z-50 lg:hidden">
  <div class="container mx-auto px-4 py-4">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-xl font-bold dark:text-white">Menu</h2>
      <button (click)="toggleMobileMenu()" class="text-gray-500 dark:text-gray-300 hover:text-wattpad-primary">
        <i class="fas fa-times text-2xl"></i>
      </button>
    </div>
    
    <div class="space-y-4">
      <!-- Browse Menu -->
      <div class="border-b pb-4 dark:border-gray-700">
        <button (click)="toggleMobileDropdown('browse')" class="flex items-center justify-between w-full font-medium text-lg">
          <span>Browse</span>
          <i class="fas fa-chevron-down text-xs transition-transform duration-200"
             [ngClass]="{'rotate-180': mobileActiveDropdown === 'browse'}"></i>
        </button>
        <div *ngIf="mobileActiveDropdown === 'browse'" class="mt-2 pl-4 space-y-2">
          <div *ngFor="let group of categoryColumns">
            <ul class="space-y-2">
              <li *ngFor="let name of group">
                <a [routerLink]="['/category', name.id, name.categoryName]" 
                   class="block px-4 py-2 hover:bg-[rgb(255,45,85)] dark:hover:bg-[rgb(255,45,85)] rounded"
                   (click)="toggleMobileMenu()">
                  {{ name.categoryName }}
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      
      <!-- Earn Money Menu -->
      <!-- <div class="border-b pb-4 dark:border-gray-700">
        <button (click)="toggleMobileDropdown('earn')" class="flex items-center justify-between w-full font-medium text-lg">
          <span>Earn Money</span>
          <i class="fas fa-chevron-down text-xs transition-transform duration-200"
             [ngClass]="{'rotate-180': mobileActiveDropdown === 'earn'}"></i>
        </button>
        <div *ngIf="mobileActiveDropdown === 'earn'" class="mt-2 pl-4 space-y-2">
          <a href="" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">Monatization</a>
          <a href="/contest" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">Writing Competitions</a>
        </div>
      </div> -->
<div class="border-b pb-4 dark:border-gray-700">
        <button (click)="toggleMobileDropdown('earn')" class="flex items-center justify-between w-full font-medium text-lg">
          
      <a href="/contest" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">{{t('WRITING_CONTEST')}}</a>
      </button>
      </div>
      
      <!-- User Menu -->
      <div *ngIf="isLoggedIn" class="border-b pb-4 dark:border-gray-700">
        <button (click)="toggleMobileDropdown('user')" class="flex items-center justify-between w-full font-medium text-lg">
          <span>My Account</span>
          <i class="fas fa-chevron-down text-xs transition-transform duration-200"
             [ngClass]="{'rotate-180': mobileActiveDropdown === 'user'}"></i>
        </button>
        <div *ngIf="mobileActiveDropdown === 'user'" class="mt-2 pl-4 space-y-2">
          <a (click)="createNewStory(); toggleMobileMenu()" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">{{t('WRITE')}}</a>
          <a (click)="navigateToMyWorks(); toggleMobileMenu()" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">{{t('MY_STORIES')}}</a>
          <a href="user-profile" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">{{t('MY_PROFILE')}}</a>
          <a href="library" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">{{t('LIBRARY')}}</a>
          <!-- <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">Help</a>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">Settings</a> -->
          
        </div>
      </div>
      
      <!-- Login Button -->
      <div *ngIf="!isLoggedIn" class="pt-4">
        <a href="login" class="block w-full text-center px-4 py-3 rounded-full font-medium bg-wattpad-primary text-white hover:bg-[#E5274B] transition-colors">
          {{t('SIGN_IN')}}
        </a>
      </div>
      <div *ngIf="isLoggedIn" class="pt-4">
        <a (click)="logout()" class="block w-full text-center px-4 py-3 rounded-full font-medium bg-wattpad-primary text-white hover:bg-[#E5274B] transition-colors">
         {{t('SIGN_OUT')}}
        </a>
      </div>
      
      <!-- Theme Toggle -->
      <div class="flex items-center justify-between pt-4">
        <span class="font-medium">Dark Mode</span>
        <button (click)="toggleTheme()" class="relative inline-flex items-center h-6 rounded-full w-11 bg-gray-200 dark:bg-gray-700">
          <span class="sr-only">Toggle theme</span>
          <span class="inline-block w-4 h-4 transform transition rounded-full bg-white dark:bg-gray-300 translate-x-1 dark:translate-x-6"></span>
        </button>
      </div>
      <!-- <a (click)="logout()" *ngIf="isLoggedIn" class="block mobilesignout px-4 py-2 text-wattpad-primary hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">Sign out</a>
      <a (click)="logout()" *ngIf="!isLoggedIn" class="block mobilesignout px-4 py-2 text-wattpad-primary hover:bg-gray-100 dark:hover:bg-gray-700 rounded cursor-pointer">Sign In</a> -->
    </div>
  </div>
</div>