<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'" style="background: linear-gradient(to right, #ff7e5f, #feb47b); padding: 20px 0; border-radius: 15px;">
    <ion-card *ngFor="let item of recommendations" style="border-radius: 10px; overflow: hidden;">
      <img [src]="item.image" alt="推荐图片" />
      <ion-card-header style="background-color: #fff5e1;">
        <ion-card-title>{{ item.title }}</ion-card-title>
        <ion-card-subtitle>{{ item.subtitle }}</ion-card-subtitle>
      </ion-card-header>
      <ion-card-content style="background-color: #fff9f2;">
        <p>{{ item.description }}</p>
        <ion-button expand="full" color="warning" (click)="promptAddress()">立即购买</ion-button>
      </ion-card-content>
    </ion-card>
  </div>

  <!-- 活动内容 -->
  <div *ngIf="selectedTab === 'activities'" style="background-color: #f9f9f9; padding: 20px 0; border-radius: 15px;">
    <ion-grid>
      <ion-row>
        <ion-col size="12" size-md="4" *ngFor="let activity of activities">
          <ion-card style="border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
            <ion-card-header style="background-color: #ff6f61;">
              <ion-card-title style="color: #fff;">{{ activity.title }}</ion-card-title>
              <ion-card-subtitle style="color: #fff;">{{ activity.date }}</ion-card-subtitle>
            </ion-card-header>
            <ion-card-content style="background-color: #ffe8e0;">
              <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="danger" (click)="promptRegistration(activity)">立即报名</ion-button>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

  <!-- 课程内容 -->
  <div *ngIf="selectedTab === 'courses'" style="background-color: #f0f4f7; padding: 20px 0; border-radius: 15px;">
    <ion-grid>
      <ion-row>
        <ion-col size="12" size-md="4" *ngFor="let course of courses">
          <ion-card style="border-radius: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);">
            <ion-card-header style="background-color: #1e88e5;">
              <ion-card-title style="color: #fff;">{{ course.title }}</ion-card-title>
              <ion-card-subtitle style="color: #fff;">{{ course.instructor }}</ion-card-subtitle>
            </ion-card-header>
            <ion-card-content style="background-color: #e1f5fe;">
              <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="primary" (click)="promptCourseEnrollment(course)">立即报名</ion-button>
          </ion-card>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>
</ion-content>
