<ion-header class="header">
  <div class="tab-container">
    <div class="tabs">
      <span
        class="tab"
        *ngFor="let tab of tabs"
        [class.active]="activeTab === tab"
        (click)="setActiveTab(tab)"
      >
        {{ tab }}
      </span>
    </div>
    <div class="action-buttons">
      <div class="action-btn"><i class="bi bi-search"></i></div>
    </div>
  </div>
</ion-header>

<ion-content class="content">
  <!-- 店铺信息 -->
  <div class="shop-header">
    <div class="shop-avatar">
      <img src="https://via.placeholder.com/60" alt="店铺头像" />
    </div>
    <div class="shop-info">
      <div class="shop-name">专业饰品交易店</div>
      <div class="shop-stats">
        <div class="shop-stat"><i class="bi bi-star-fill"></i>4.9</div>
        <div class="shop-stat"><i class="bi bi-people"></i>5.2k粉丝</div>
        <div class="shop-stat"><i class="bi bi-box-seam"></i>1.8k商品</div>
      </div>
    </div>
    <button class="follow-btn" [ngStyle]="{ backgroundColor: shopFollowed ? '#ccc' : '#1890ff' }" (click)="toggleFollow()">
      {{ shopFollowed ? '已关注' : '+ 关注' }}
    </button>
  </div>

  <!-- 店铺导航 -->
  <div class="shop-nav">
    <div
      class="nav-item"
      *ngFor="let item of shopNavItems"
      [class.active]="activeNavItem === item"
      (click)="setActiveNav(item)"
    >
      {{ item }}
    </div>
  </div>

  <!-- 店铺公告 -->
  <div class="shop-notice">
    <div class="notice-title"><i class="bi bi-megaphone"></i> 店铺公告</div>
    <div class="notice-content">
      本店所有商品均为正品，支持官方验货。满1000元减50元优惠活动进行中，多买多优惠！新用户首次购物享9折优惠！
    </div>
  </div>

  <!-- 饰品列表 -->
  <div class="item-list">
     <div class="item-card" *ngFor="let item of [0,1,2,3,4,5]; let i = index">
      <div class="item-image">
        <img [src]="'assets/images/item' + (i + 1) + '.jpg'" alt="商品图片" />
      </div>
      <div class="item-info">
        <div class="item-name">商品名称示例</div>
        <div class="item-wear">磨损: 0.012345</div>
        <div class="item-price">¥ 1,999.00</div>
      </div>
    </div>
  </div>
</ion-content>
