<div class="container">
  <!-- Header -->
  <header>
    <div class="header-container">
      <div class="logo">
        <i class="fas fa-cat"></i>
        <span>点菜喵</span>
      </div>
      <div class="user-actions">
        <button class="icon-btn">
          <i class="fas fa-bell"></i>
        </button>
        <button class="icon-btn">
          <i class="fas fa-search"></i>
        </button>
      </div>
    </div>
  </header>

  <!-- Featured Story -->
  <div class="featured-story">
    <div class="featured-image" [style.background-image]="'url(' + featuredStory.image + ')'">
      <div class="featured-content">
        <div class="featured-tag">{{ featuredStory.tag }}</div>
        <h2 class="featured-title">{{ featuredStory.title }}</h2>
        <p class="featured-desc">{{ featuredStory.description }}</p>
        <div class="featured-stats">
          <span><i class="fas fa-eye"></i> {{ featuredStory.views | number }}浏览</span>
          <span><i class="fas fa-heart"></i> {{ featuredStory.likes | number }}点赞</span>
          <span><i class="fas fa-comment"></i> {{ featuredStory.comments | number }}评论</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Category Navigation -->
  <div class="category-nav">
    <div 
      *ngFor="let category of categories" 
      class="category-item" 
      [class.active]="category.active"
      (click)="setActiveCategory(category.id)">
      <div class="category-icon">
        <i [class]="category.icon"></i>
      </div>
      <div class="category-text">{{ category.name }}</div>
    </div>
  </div>

  <!-- Stories List -->
  <div class="story-section">
    <div class="story-header">
      <h2>热门故事</h2>
      <a href="#" class="more">查看更多</a>
    </div>
    
    <div 
      *ngFor="let story of stories" 
      class="story-card"
      (click)="cardClick($event)">
      <div class="story-image" [style.background-image]="'url(' + story.image + ')'">
        <h3 class="story-title">{{ story.title }}</h3>
      </div>
      <div class="story-meta">
        <div class="story-stats">
          <span class="story-stat"><i class="fas fa-eye"></i> {{ story.views | number }}</span>
          <span class="story-stat"><i class="fas fa-heart"></i> {{ story.likes | number }}</span>
        </div>
        <span><i class="fas fa-clock"></i> {{ story.timeAgo }}</span>
      </div>
      <div class="story-actions">
        <button class="story-btn read-btn" (click)="openStoryModal(story.id); $event.stopPropagation()">阅读故事</button>
        <button class="story-btn share-btn" (click)="shareStory(); $event.stopPropagation()">分享</button>
      </div>
    </div>
  </div>
</div>

<!-- Story Detail Modal -->
<div 
  class="modal-overlay" 
  [class.active]="isModalOpen()"
  (click)="closeModal()">
  <div class="modal-content" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-title">美食故事</div>
      <div class="modal-close" (click)="closeModal()">
        <i class="fas fa-times"></i>
      </div>
    </div>
    <div class="modal-body">
      <div 
        class="modal-image" 
        [style.background-image]="'url(' + getSelectedStory().image + ')'"></div>
      <h2 class="modal-story-title">{{ getSelectedStory().title }}</h2>
      <div class="modal-story-content" [innerHTML]="getSelectedStory().content"></div>
    </div>
    <div class="modal-footer">
      <div class="story-stats">
        <span class="story-stat"><i class="fas fa-eye"></i> {{ getSelectedStory().views | number }}浏览</span>
        <span class="story-stat"><i class="fas fa-heart"></i> {{ getSelectedStory().likes | number }}点赞</span>
        <span class="story-stat"><i class="fas fa-comment"></i> {{ getSelectedStory().comments | number }}评论</span>
      </div>
      <div class="modal-actions">
        <button class="story-btn share-btn" (click)="shareStory()">分享</button>
        <button class="story-btn read-btn" (click)="likeStory()">
          <i class="fas fa-heart"></i> 点赞
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Bottom Navigation -->
<div class="bottom-nav">
  <div class="nav-item">
    <i class="fas fa-home"></i>
    <div>首页</div>
  </div>
  <div class="nav-item">
    <i class="fas fa-search"></i>
    <div>发现</div>
  </div>
  <div class="nav-item active">
    <i class="fas fa-book-open"></i>
    <div>故事</div>
  </div>
  <div class="nav-item">
    <i class="fas fa-shopping-cart"></i>
    <div>购物车</div>
  </div>
  <div class="nav-item">
    <i class="fas fa-user"></i>
    <div>我的</div>
  </div>
</div>
