<template>
  <view class="tab-page">
    <view class="tab-page__header">
      <text class="tab-page__title">课程</text>
      <text class="tab-page__subtitle">精品团课 · 私教 · 线上课</text>
    </view>

    <RecommendCourses />

    <view class="tab-page__actions">
      <view class="tab-page__btn" hover-class="tab-page__btn--hover" @tap="goCourseList">
        <text class="tab-page__btn-text">预约课程</text>
      </view>
      <view class="tab-page__btn tab-page__btn--ghost" hover-class="tab-page__btn--hover" @tap="goMyCourses">
        <text class="tab-page__btn-text tab-page__btn-text--ghost">我的课程</text>
      </view>
    </view>

    <view class="bottom-placeholder"></view>
    <TabBar :active="1" />
  </view>
</template>

<script setup>
import RecommendCourses from '@/components/index/RecommendCourses.vue'
import TabBar from '@/components/TabBar.vue'
import { PAGE, navigateToPage } from '@/common/constants/routes.js'

function goCourseList() {
  navigateToPage(PAGE.COURSE_LIST)
}

function goMyCourses() {
  navigateToPage(PAGE.MY_COURSES)
}
</script>

<style lang="scss" scoped>
.tab-page {
  min-height: 100vh;
  background-color: #f0f4f8;
  padding-bottom: 160rpx;
}

.tab-page__header {
  padding: 48rpx 32rpx 16rpx;
}

.tab-page__title {
  display: block;
  font-size: 40rpx;
  font-weight: 700;
  color: #1a202c;
}

.tab-page__subtitle {
  display: block;
  margin-top: 8rpx;
  font-size: 24rpx;
  color: #64748b;
}

.tab-page__actions {
  display: flex;
  gap: 20rpx;
  padding: 24rpx 32rpx;
}

.tab-page__btn {
  flex: 1;
  height: 80rpx;
  border-radius: 999rpx;
  background: linear-gradient(135deg, #ff6b35 0%, #ff8c5a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab-page__btn--ghost {
  background: #fff;
  border: 1px solid #e2e8f0;
}

.tab-page__btn-text {
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
}

.tab-page__btn-text--ghost {
  color: #1a4a6f;
}

.bottom-placeholder {
  height: 40rpx;
}
</style>
