<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="/tabs/tab3" text="" icon="arrow-back"></ion-back-button>
    </ion-buttons>
    <ion-title>积分与优惠</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="points-and-coupons-page">
  <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="chevron-down-circle" pullingText="下拉刷新" refreshingSpinner="circles" refreshingText="正在刷新..."></ion-refresher-content>
  </ion-refresher>

  <!-- 用户积分展示 -->
  <section class="user-points-section">
    <ion-card>
      <ion-card-header>
        <ion-card-title>我的积分</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <div class="points-display">
          <h1>{{ userPoints }}</h1>
          <p>可用积分</p>
        </div>
      </ion-card-content>
    </ion-card>
  </section>

  <!-- 优惠活动列表 -->
  <section class="promotions-section">
    <h3 class="section-title">最新优惠活动</h3>
    <ion-list>
      <ion-item button *ngFor="let promotion of promotions" (click)="viewPromotionDetails(promotion)" class="promotion-item">
        <ion-icon name="gift" slot="start"></ion-icon>
        <ion-label>
          <h2>{{ promotion.title }}</h2>
          <p>{{ promotion.description }}</p>
        </ion-label>
        <ion-badge color="secondary" *ngIf="promotion.isNew">新</ion-badge>
      </ion-item>
    </ion-list>
  </section>

  <section class="redeem-section">
    <h3 class="section-title">积分兑换礼品</h3>
    <ion-grid>
      <ion-row>
        <ion-col size="6" *ngFor="let gift of gifts">
          <ion-card (click)="viewGiftDetails(gift)">
            <img [src]="gift.image" alt="{{ gift.name }}" class="gift-image" />
            <ion-card-content>
              <h2>{{ gift.name }}</h2>
              <p>{{ gift.pointsRequired }} 积分</p>
            </ion-card-content>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </section>

</ion-content>