<template>
  <view class="level-page">
    <!-- 导航栏 -->
    <uni-nav-bar title="关于我们" left-icon="left" @click-left="goBack" :fixed="true" :status-bar="true" />

    <!-- 用户信息 / 品牌标识 -->
    <view class="user-info">

      <view class="brand-info">

        <text class="brand-slogan">科学训练，重塑自我</text>
      </view>
    </view>

    <!-- 介绍区域 -->
    <view class="about-section">
      <view class="about-card">
        <view class="about-title">品牌理念</view>
        <view class="about-content">
          自己练健身致力于为每一位健身爱好者提供<span
            class="highlight">科学、高效、个性化</span>的训练解决方案。我们相信，健身不仅是改变体型的手段，更是一种积极向上的生活方式。无论你是健身新手还是资深训练者，自己练健身都将陪伴你完成每一次突破，见证你的每一点进步。
        </view>
      </view>

      <view class="about-card">
        <view class="about-title">核心功能</view>
        <view class="feature-list">
          <view class="feature-item" v-for="(item, index) in features" :key="index">
            <view class="feature-num">{{ index + 1 }}</view>
            <view class="feature-text">
              <view class="feature-name">{{ item.name }}</view>
              <view class="feature-desc">{{ item.desc }}</view>
            </view>
          </view>
        </view>
      </view>


      <view class="about-card">
        <view class="about-title">用户协议与隐私</view>
        <view class="link-list">
          <view class="link-item" @click="openAgreement('service')">
            <text>服务协议</text>
            <up-icon name="arrow-right" color="#fff" size="20"></up-icon>
          </view>
          <view class="link-item" @click="openAgreement('privacy')">
            <text>隐私政策</text>
            <up-icon name="arrow-right" color="#fff" size="20"></up-icon>
          </view>
        </view>
      </view>
    </view>



  </view>
</template>

<script setup>
import { ref } from 'vue';

const features = ref([
  {
    name: '个性化训练计划',
    desc: '根据你的目标和水平，智能生成专属训练方案',
  },
  {
    name: '海量动作库',
    desc: '覆盖全身肌群的标准动作示范与详细讲解',
  },
  {
    name: '训练数据追踪',
    desc: '记录每一次训练，可视化你的成长轨迹',
  },
  {
    name: '训练日历管理',
    desc: '灵活安排训练日程，养成规律健身习惯',
  },
]);

const goBack = () => {
  uni.navigateBack();
};

const openAgreement = (type) => {
  if (type == 'service') {
    uni.navigateTo({
      url: '/pages5/pages/user/yonhu-xieyi'
    })
  } else {
    uni.navigateTo({
      url: '/pages5/pages/user/yinsi-xieyi'
    })
  }
};
</script>

<style scoped>
.level-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #1a1a1a;
  color: white;
  padding-bottom: 60rpx;
}

/* ========== 品牌标识 ========== */
.user-info {
  display: flex;
  align-items: center;
  gap: 24rpx;
  padding: 40rpx 30rpx;
  background: linear-gradient(135deg, #1e1e1e 0%, #2a2a2a 100%);
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.06);
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  object-fit: cover;
  border: 3rpx solid rgba(255, 107, 0, 0.4);
}

.brand-info {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.brand-slogan {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 2rpx;
}

/* ========== 关于我们内容区 ========== */
.about-section {
  padding: 24rpx 24rpx 0;
}

.about-card {
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 16rpx;
  padding: 28rpx 24rpx;
  margin-bottom: 20rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.08);
}

.about-title {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
  padding-left: 14rpx;
  border-left: 5rpx solid #ff6b00;
  color: #fff;
}

.about-content {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.8;
  text-align: justify;
}

.highlight {
  color: #ff6b00;
  font-weight: bold;
}

/* ========== 核心功能列表 ========== */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
  padding: 14rpx 0;
}

.feature-num {
  width: 48rpx;
  height: 48rpx;
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.25), rgba(255, 107, 0, 0.08));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22rpx;
  font-weight: bold;
  color: #ff6b00;
  flex-shrink: 0;
}

.feature-text {
  flex: 1;
}

.feature-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #fff;
  margin-bottom: 4rpx;
}

.feature-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

/* ========== 联系我们 ========== */
.contact-list {
  display: flex;
  flex-direction: column;
  gap: 14rpx;
}

.contact-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8rpx 0;
}

.contact-label {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.6);
}

.contact-value {
  font-size: 26rpx;
  color: rgba(255, 255, 255, 0.9);
}

/* ========== 链接列表 ========== */
.link-list {
  display: flex;
  flex-direction: column;
}

.link-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.06);
}

.link-item:last-child {
  border-bottom: none;
}

.link-arrow {
  color: rgba(255, 255, 255, 0.3);
  font-size: 26rpx;
}

/* ========== 版本信息 ========== */
.version-info {
  text-align: center;
  padding: 40rpx 0 20rpx;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.35);
}

.copyright {
  font-size: 20rpx;
}
</style>