<ion-header style="background-color: #1e1e1e;">
  <ion-toolbar color="dark">
    <ion-title>Fearless</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" style="background-color: #f4f4f4;">
  <div class="carousel-container" style="border-radius: 25px; margin: 5px auto;">
    <!-- 轮播容器，控制所有图片的横向排列 -->
    <div class="carousel" [style.transform]="'translateX(-' + currentSlide * 100 + '%)'">
      <div class="slide" *ngFor="let image of images; let i = index">
        <img [src]="image" alt="轮播图" class="carousel-image">
      </div>
    </div>
  
    <!-- 上一张按钮 -->
    <button class="prev" (click)="prevSlide()">&#10094;</button>
  
    <!-- 下一张按钮 -->
    <button class="next" (click)="nextSlide()">&#10095;</button>
  
    <!-- 小圆点 -->
    <div class="dots">
      <span class="dot" *ngFor="let image of images; let i = index" 
            [class.active]="i === currentSlide" 
            (click)="goToSlide(i)"></span>
    </div>
  </div>
  

  <!-- 标签切换 -->
  <ion-segment [(ngModel)]="selectedTab" color="secondary">
    <ion-segment-button value="recommend">
      推荐
    </ion-segment-button>
    <ion-segment-button value="activities">
      活动
    </ion-segment-button>
    <ion-segment-button value="courses">
      课程
    </ion-segment-button>
  </ion-segment>

  <div *ngIf="selectedTab === 'recommend'">
    <ion-card *ngFor="let item of recommendations">
      <img [src]="item.image" alt="推荐图片" />
      <ion-card-header>
        <ion-card-title>{{ item.title }}</ion-card-title>
        <ion-card-subtitle>{{ item.subtitle }}</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content>
        <p>{{ item.description }}</p>
        <ion-button expand="full" color="primary" (click)="promptAddress()">立即购买</ion-button>
      </ion-card-content>
    </ion-card>
  </div>

  <!-- 活动内容 -->
  <div *ngIf="selectedTab === 'activities'">
    <ion-grid>
      <ion-row>
        <ion-col size="12" size-md="4" *ngFor="let activity of activities">
          <ion-card>
            <ion-card-header>
              <ion-card-title>{{ activity.title }}</ion-card-title>
              <ion-card-subtitle>{{ activity.date }}</ion-card-subtitle>
            </ion-card-header>
            <ion-card-content>
              <p>{{ activity.description }}</p>
              <ion-chip color="primary">
                <ion-icon name="star" slot="start"></ion-icon>
                热门
              </ion-chip>
            </ion-card-content>
            <ion-button expand="full" color="tertiary" (click)="promptRegistration(activity)">立即报名</ion-button>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <!-- 课程内容 -->
  <div *ngIf="selectedTab === 'courses'">
    <ion-grid>
      <ion-row>
        <ion-col size="12" size-md="4" *ngFor="let course of courses">
          <ion-card>
            <ion-card-header>
              <ion-card-title>{{ course.title }}</ion-card-title>
              <ion-card-subtitle>{{ course.instructor }}</ion-card-subtitle>
            </ion-card-header>
            <ion-card-content>
              <p>{{ course.description }}</p>
              <ion-chip color="danger">
                <ion-icon name="checkmark-circle" slot="start"></ion-icon>
                热销
              </ion-chip>
            </ion-card-content>
            <ion-button expand="full" color="secondary" (click)="promptCourseEnrollment(course)">立即报名</ion-button>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>
