<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-cog"></i>
        </button>
      </div>
    </div>
  </header>

  <!-- User Profile -->
  <div class="profile-container">
    <div class="avatar">
      <i class="fas fa-user"></i>
    </div>
    <div class="user-name">{{ user.name }}</div>
    <div class="user-level">{{ user.level }}</div>
    
    <div class="stats-container">
      <div class="stat-item">
        <div class="stat-value">¥{{ user.monthlySpend | number }}</div>
        <div class="stat-label">本月消费</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ user.points }}</div>
        <div class="stat-label">积分</div>
      </div>
      <div class="stat-item">
        <div class="stat-value">{{ user.coupons }}</div>
        <div class="stat-label">优惠券</div>
      </div>
    </div>
  </div>

  <!-- Health Profile -->
  <div class="health-section">
    <div class="section-title">
      <h2>健康档案</h2>
      <button class="edit-btn" (click)="navigateTo('健康档案编辑')">
        <i class="fas fa-edit"></i> 编辑
      </button>
    </div>
    
    <div class="health-grid">
      <div class="health-card" *ngFor="let item of healthData" 
           (click)="animateIcon($event, '.health-icon')">
        <div class="health-icon">
          <i [class]="item.icon"></i>
        </div>
        <div class="health-title">{{ item.title }}</div>
        <div class="health-content">{{ item.content }}</div>
      </div>
    </div>
  </div>

  <!-- Order Analysis -->
  <div class="analysis-section">
    <div class="section-title">
      <h2>历史订单分析</h2>
      <button class="edit-btn" (click)="navigateTo('订单筛选')">
        <i class="fas fa-calendar-alt"></i> 筛选
      </button>
    </div>
    
    <div class="chart-container">
      <canvas #orderChart></canvas>
    </div>
    
    <div class="analysis-stats">
      <div class="analysis-stat" *ngFor="let stat of orderStats">
        <div class="analysis-value">{{ stat.value }}</div>
        <div class="analysis-label">{{ stat.label }}</div>
      </div>
    </div>
  </div>

  <!-- Membership Section -->
  <div class="membership-section">
    <div class="section-title">
      <h2>会员权益</h2>
      <button class="edit-btn" (click)="navigateTo('会员升级')">
        <i class="fas fa-crown"></i> 升级
      </button>
    </div>
    
    <div class="vip-card">
      <div class="vip-header">
        <div class="vip-title">点菜喵会员</div>
        <div class="vip-icon">
          <i class="fas fa-crown"></i>
        </div>
      </div>
      <div class="vip-level">{{ user.level }}</div>
      
      <div class="progress-container">
        <div class="progress-bar" [style.width]="user.vipProgress + '%'"></div>
      </div>
      <div class="progress-text">
        <span>当前积分: {{ user.points }}</span>
        <span>升级需: 200</span>
      </div>
    </div>
    
    <div class="benefits-container">
      <div class="benefit-item" *ngFor="let benefit of benefits">
        <div class="benefit-icon">
          <i [class]="benefit.icon"></i>
        </div>
        <div>{{ benefit.text }}</div>
      </div>
    </div>
  </div>

  <!-- Function Grid -->
  <div class="function-grid">
    <div class="function-item" *ngFor="let func of functions" 
         (click)="animateIcon($event, '.function-icon'); navigateTo(func.text)">
      <div class="function-icon">
        <i [class]="func.icon"></i>
      </div>
      <div class="function-text">{{ func.text }}</div>
    </div>
  </div>
</div>

