<div class="container">
  <!-- Header -->
  <app-header (search)="onSearch($event)"></app-header>

  <!-- Sorting Tabs -->
  <app-sorting-tabs 
    [activeTab]="activeSort" 
    (sortChange)="onSortChange($event)">
  </app-sorting-tabs>

  <!-- Stats Section -->
  <div class="section">
    <div class="section-title">
      <h2>菜品健康指数</h2>
      <a href="#" class="more">查看详情</a>
    </div>
    
    <app-stats-section></app-stats-section>
  </div>

  <!-- Menu Grid -->
  <div class="section">
    <div class="section-title">
      <h2>发现美味</h2>
      <a href="#" class="more">全部菜品</a>
    </div>
    
    <div class="menu-grid">
      <app-menu-card 
        *ngFor="let item of menuItems"
        [menuItem]="item"
        (viewCulture)="onViewCulture($event)"
        (addToCart)="onAddToCart($event)">
      </app-menu-card>
    </div>
  </div>
</div>

<!-- Culture Modal -->
<div class="modal-overlay" [class.active]="showCultureModal" (click)="closeModal()">
  <div class="culture-modal" (click)="$event.stopPropagation()">
    <div class="modal-header">
      <div class="modal-close" (click)="closeModal()">
        <i class="fas fa-times"></i>
      </div>
      <h3 class="modal-title">{{ currentCulture?.name }}</h3>
      <div class="modal-subtitle">{{ currentCulture?.origin }} · {{ currentCulture?.era }}</div>
    </div>
    <div class="modal-content">
      <div class="modal-ar">
        <div class="ar-animation"></div>
        <div>AR文化展示</div>
      </div>
      <div class="modal-text">
        <h4>历史典故</h4>
        <p>{{ currentCulture?.history }}</p>
        
        <h4>文化内涵</h4>
        <p>{{ currentCulture?.culture }}</p>
        
        <h4>烹饪技艺</h4>
        <p>{{ currentCulture?.cooking }}</p>
        
        <h4>健康指数</h4>
        <p>{{ currentCulture?.health }}</p>
      </div>
    </div>
  </div>
</div>

<!-- Bottom Navigation -->
<app-bottom-nav></app-bottom-nav>
