 <app-header></app-header>

<main class="container mx-auto px-4 pb-6 lg:px-6 lg:py-8">
        <!-- Hero Carousel -->
       

        <!-- Trending Stories -->
        <section class="mb-8 lg:mb-12">
            <div class="flex justify-between items-center mb-4 lg:mb-6">
               
                
                
               
            </div>
            <div class="mb-6">
            <div class=" grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4 lg:gap-6">
                <!-- Story Card -->
                <div class="story-card  rounded-lg shadow-sm overflow-hidden pointer" *ngFor="let story of stories; let i = index">
                    <div class="relative story-card">
                        <div (click)="goToSeries(story.id, story.story_title)" class="text-center rounded-lg story-cover aspect-[4/6] bg-gray-200 dark:bg-gray-700 overflow-hidden pointer">
                           
                            <img *ngIf="story.story_image" [src]="storyImgPath + '/' + story.story_image" alt="{{ story.story_title }}">
                            <div *ngIf="!story.story_image" class="w-full h-full flex items-center justify-center">
                              <i class="fas fa-book text-gray-400 text-2xl"></i>
                            </div>
                        </div>
                    
<button 
  (click)="addToLibrary(story.id)"
  class="absolute top-2 right-2 bg-white/90 text-wattpad-primary p-1 rounded-full hover:bg-white transition-colors"
  [title]="likedStories.includes(story.id) ? 'Remove from Library' : 'Add to Library'">

  <i *ngIf="likedStories.includes(story.id)" class="fas fa-heart text-red-500"></i>
  <i *ngIf="!likedStories.includes(story.id)" class="far fa-heart text-gray-400"></i>
</button>
                    </div>
                    <h3 class="font-bold text-sm lg:text-base mt-2 truncate" [innerHTML]="story.story_title"></h3>
                    <p class="text-xs lg:text-sm text-wattpad-light">{{t('BY')}} {{ story.author_name }}</p>
                   <div class="flex items-center mt-1 text-xs lg:text-sm text-wattpad-light">
  <i class="fas fa-star text-yellow-400 mr-1"></i>
  <span>{{ story.average_rating || 0 }}</span>
  <span class="mx-1">•</span>
  <span>{{ formatCount(story.views) }} {{t('READS')}}</span>
</div>
                </div>
                
              
                
                <!-- Add 6 more story cards -->
            </div>
          </div>
        </section>

        <!-- Categories -->
        <section class="mb-8 lg:mb-12">
            <div class="flex justify-between items-center mb-4 lg:mb-6">
                <h2 class="text-xl lg:text-2xl font-bold">{{t('CATEGORIES')}}</h2>
                <div class="text-center mt-4" *ngIf="categoryColumns.length > 12">
  <button 
    (click)="toggleCategories()" 
    class="text-wattpad-primary text-sm lg:text-base font-medium hover:underline">
    {{ showAllCategories ? 'See Less' : 'See All' }}
  </button>
</div>
            </div>
            
            <div class="grid grid-cols-3 gap-3 lg:grid-cols-6 lg:gap-4">
                <a *ngFor="let category of visibleCategories" 
     [routerLink]="['/category', category.id, category.categoryName.toLowerCase().replace(' ', '-')]"
     class="bg-white dark:bg-gray-800 rounded-lg p-4 text-center hover:shadow-md transition-all hover:-translate-y-1">
    <div class="text-wattpad-primary text-2xl mb-2">
      <i class="fas {{category.icon}}"></i>
    </div>
    <span class="font-medium text-sm lg:text-base">{{category.categoryName}}</span>
  </a>
                
               
                
                
            </div>
        </section>

        <!-- Top Writers -->
        <section class="mb-8 lg:mb-12">
            <div class="flex justify-between items-center mb-4 lg:mb-6">
                <h2 class="text-xl lg:text-2xl font-bold">{{t('TOP_WRITERS')}}</h2>
            </div>
            
            <div class="hide-scrollbar flex overflow-x-auto space-x-4 pb-4 lg:space-x-6 lg:pb-6">
                <!-- Writer Card -->
                <div class=" flex-shrink-0" *ngFor="let author of topAuthors.slice(0, 7)" (click)="viewProfile(author.user_id)">
                    <div class="bg-white dark:bg-gray-800 rounded-lg p-4 text-center w-32 lg:w-40 shadow hover:shadow-lg transition-all writer-card">
                        <div class="bg-gray-200 dark:bg-gray-700 h-20 w-20 lg:h-24 lg:w-24 mx-auto rounded-full mb-3 flex items-center justify-center">
                            <img 
  [src]="author.profileImg || 'assets/default-profile.png'" 
  (error)="author.profileImg = 'assets/default-profile.png'" 
  alt="Author Image" 
  class="w-full h-full object-cover rounded-full"
>
                        </div>
                        <h3 class="font-bold text-sm lg:text-base truncate">{{ author.author_name }}</h3>
                        <p class="text-xs lg:text-sm text-wattpad-light">{{ author.story_count }} {{t('STORIES')}}</p>
                        <button 
  class="mt-2 text-xs lg:text-sm px-3 py-1 rounded-full transition-colors"
  [ngClass]="{
    'bg-wattpad-primary text-white': !isFollowingMap[author.user_id],
    'bg-white text-wattpad-primary border border-wattpad-primary': isFollowingMap[author.user_id]
  }"
  (click)="toggleFollow(author.user_id)"
>
  {{ isFollowingMap[author.user_id] ? 'Unfollow' : 'Follow' }}
</button>
                        
                    </div>
                </div>
                
               
                
                <!-- Add 6 more writer cards -->
            </div>
        </section>

        <!-- Continue Reading -->
        <section class="mb-8 lg:mb-12" *ngIf="userProgress.length > 0">
            <div class="flex justify-between items-center mb-4 lg:mb-6">
                <h2 class="text-xl lg:text-2xl font-bold">{{t('CONTINUE_READING')}}</h2>
                <a href="#" class="text-wattpad-primary text-sm lg:text-base font-medium hover:underline">{{t('SEE_ALL')}}</a>
            </div>
            
            <div >
  <div (click)="resumeReading(userProgress[0].lastReadPartId, userProgress[0].title)"
       class="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm hover:shadow-md transition-shadow pointer">
    
    <div class="flex items-center space-x-3 lg:space-x-4">
      <div class="bg-gray-200 w-16 h-16 lg:w-20 lg:h-20 rounded-lg flex-shrink-0 flex  items-center justify-center overflow-h">
        <img *ngIf="userProgress[0].image" [src]="userProgress[0].image" alt="Story Cover" class="w-full h-full object-cover" />
      </div>
      <div class="flex-1 min-w-0">
        <h3 class="font-bold text-sm lg:text-base truncate">{{ userProgress[0].title }}</h3>
        <p class="text-xs lg:text-sm text-wattpad-light truncate">
          {{t('READS')}}: {{ userProgress[0].part }} of {{ userProgress[0].total }} - {{ userProgress[0].title }}
        </p>
        <div class="w-full bg-gray-200 dark:bg-gray-700 h-1.5 rounded-full mt-2">
          <div class="bg-wattpad-primary h-1.5 rounded-full"
               [style.width]="userProgress[0].percent + '%'">
          </div>
        </div>
      </div>
      <button class="text-wattpad-primary hover:text-[#E5274B] transition-colors pointer"
              (click)="resumeReading(userProgress[0].lastReadPartId, userProgress[0].title); $event.stopPropagation()">
        <i class="fas fa-play text-lg lg:text-xl"></i>
      </button>
    </div>
  </div>
</div>
        </section>

       
    </main>

   