<template>
  <view class="manual-page">
    <view class="hero-card">
      <image class="logo" src="/static/images/app_icon_pack_schemeA_tealLogo/master_1024.png" mode="aspectFit"></image>
      <view class="hero-text">
        <text class="title">Attractor 设备与软件说明</text>
        <text class="subtitle">让连接、控制与日常使用更清晰</text>
      </view>
    </view>

    <scroll-view class="manual-list" scroll-y>
      <view class="section-card">
        <text class="section-title">软件说明</text>
        <view class="row">
          <text class="label">当前版本</text>
          <text class="value">v{{ version }}</text>
        </view>
        <text class="desc">Attractor App 用于设备连接、参数设置、状态查看与快捷控制。建议保持应用为最新版本，以获得更稳定的蓝牙连接和更完整的功能体验。</text>
      </view>

      <view class="section-card">
        <text class="section-title">设备连接说明</text>
        <text class="bullet">1. 首次使用前，请确保设备电量充足并处于可连接状态。</text>
        <text class="bullet">2. 打开“我的设备”页面后，系统会自动搜索附近设备。</text>
        <text class="bullet">3. 点击候选设备并确认连接，成功后会进入“我的设备”列表。</text>
        <text class="bullet">4. 若连接失败，请重启设备蓝牙并靠近手机后重试。</text>
      </view>

      <view class="section-card">
        <text class="section-title">治疗参数说明</text>
        <text class="bullet">• 模式：舒缓模式适合日常放松，强效模式适合更高强度需求。</text>
        <text class="bullet">• 档位：建议从低档逐步上调，避免突然增加刺激强度。</text>
        <text class="bullet">• 频率/脉宽：请根据个人体感逐步调整，若不适请立即停止。</text>
        <text class="bullet">• 电压：支持按“+/-”调整，建议先低后高，逐步适配。</text>
      </view>

      <view class="section-card">
        <text class="section-title">安全与注意事项</text>
        <text class="bullet">• 使用过程中若出现明显不适，请立即停止并咨询专业人士。</text>
        <text class="bullet">• 请勿在驾驶、洗浴、睡眠等不适宜场景中使用。</text>
        <text class="bullet">• 设备异常发热、无响应或连接不稳定时，请先断电后再排查。</text>
      </view>

      <view class="section-card">
        <text class="section-title">技术支持</text>
        <view class="row">
          <text class="label">支持邮箱</text>
          <text class="value">support@attractor.app</text>
        </view>
        <view class="row">
          <text class="label">服务时间</text>
          <text class="value">工作日 09:00 - 18:00</text>
        </view>
      </view>

      <view class="footer-tip">
        <text>© 2026 Attractor. All Rights Reserved.</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      version: getApp().globalData?.config?.appInfo?.version || '2.3.0'
    }
  }
}
</script>

<style scoped>
.manual-page {
  min-height: 100vh;
  background: #f4f7f8;
  padding: 20rpx;
  box-sizing: border-box;
}

.hero-card {
  background: #ffffff;
  border: 1rpx solid #e7eeef;
  border-radius: 18rpx;
  padding: 22rpx;
  display: flex;
  align-items: center;
  margin-bottom: 14rpx;
}

.logo {
  width: 90rpx;
  height: 90rpx;
  border-radius: 18rpx;
  margin-right: 16rpx;
}

.hero-text {
  display: flex;
  flex-direction: column;
}

.title {
  font-size: 31rpx;
  font-weight: 700;
  color: #0f172a;
}

.subtitle {
  margin-top: 4rpx;
  font-size: 22rpx;
  color: #94a3b8;
}

.manual-list {
  height: calc(100vh - 170rpx);
}

.section-card {
  background: #ffffff;
  border: 1rpx solid #e7eeef;
  border-radius: 16rpx;
  padding: 18rpx;
  margin-bottom: 12rpx;
}

.section-title {
  display: block;
  font-size: 28rpx;
  font-weight: 700;
  color: #0f7f7a;
  margin-bottom: 10rpx;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.label {
  font-size: 24rpx;
  color: #475569;
}

.value {
  font-size: 24rpx;
  color: #0f172a;
  font-weight: 600;
}

.desc {
  font-size: 24rpx;
  color: #334155;
  line-height: 1.65;
}

.bullet {
  display: block;
  font-size: 24rpx;
  color: #334155;
  line-height: 1.65;
  margin-bottom: 6rpx;
}

.footer-tip {
  text-align: center;
  color: #94a3b8;
  font-size: 22rpx;
  padding: 16rpx 0 20rpx;
}
</style>
