<template>
  <view class="agreement-page">
    <!-- 顶部导航 -->
    <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
      <view class="nav-back" @click="handleBack">
        <image class="back-icon" src="/static/icons/Left (左).png" mode="aspectFit" />
      </view>
      <text class="nav-title">用户协议</text>
      <view class="nav-placeholder"></view>
    </view>

    <!-- 内容区域 -->
    <scroll-view 
      class="content" 
      scroll-y 
      :style="{ marginTop: (statusBarHeight + 44) + 'px' }"
    >
      <view class="agreement-content">
        <text class="title">1818AI 用户服务协议</text>
        <text class="update-time">更新日期：2024年1月1日</text>
        
        <text class="section-title">一、服务条款的确认和接纳</text>
        <text class="section-content">
          欢迎使用1818AI服务。在使用本服务之前，请您仔细阅读本协议的全部内容。如果您不同意本协议的任何内容，请不要使用本服务。当您使用本服务时，即表示您已充分阅读、理解并接受本协议的全部内容。
        </text>

        <text class="section-title">二、服务内容</text>
        <text class="section-content">
          1818AI是一款AI创作平台，为用户提供AI图片生成、AI视频生成等创作服务。具体服务内容以平台实际提供为准。
        </text>

        <text class="section-title">三、用户注册</text>
        <text class="section-content">
          1. 用户需通过微信授权登录使用本服务。
          2. 用户应提供真实、准确的个人信息。
          3. 用户应妥善保管账号信息，对账号下的所有行为负责。
        </text>

        <text class="section-title">四、用户行为规范</text>
        <text class="section-content">
          用户在使用本服务时，不得：
          1. 发布违反法律法规的内容；
          2. 发布侵犯他人知识产权的内容；
          3. 发布色情、暴力、恐怖等不良内容；
          4. 利用本服务从事任何违法活动；
          5. 干扰或破坏本服务的正常运行。
        </text>

        <text class="section-title">五、知识产权</text>
        <text class="section-content">
          1. 用户使用本服务生成的内容，其知识产权归用户所有。
          2. 用户授权平台在服务范围内使用、展示用户生成的内容。
          3. 平台的商标、标识、技术等知识产权归平台所有。
        </text>

        <text class="section-title">六、隐私保护</text>
        <text class="section-content">
          我们重视用户隐私保护，具体隐私政策请参阅《隐私政策》。
        </text>

        <text class="section-title">七、免责声明</text>
        <text class="section-content">
          1. 因不可抗力导致的服务中断，平台不承担责任。
          2. 用户因违反本协议导致的损失，由用户自行承担。
          3. AI生成内容仅供参考，平台不对其准确性负责。
        </text>

        <text class="section-title">八、协议修改</text>
        <text class="section-content">
          平台有权根据需要修改本协议，修改后的协议将在平台公布。如您继续使用本服务，即表示您接受修改后的协议。
        </text>

        <text class="section-title">九、联系我们</text>
        <text class="section-content">
          如有任何问题，请通过平台内的反馈功能联系我们。
        </text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const statusBarHeight = ref(0)

onMounted(() => {
  const sysInfo = uni.getSystemInfoSync()
  statusBarHeight.value = sysInfo.statusBarHeight || 0
})

const handleBack = () => {
  uni.navigateBack()
}
</script>

<style scoped>
.agreement-page {
  min-height: 100vh;
  background-color: #09090b;
}

.nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #09090b;
  z-index: 100;
}

.nav-back {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 24px;
  height: 24px;
}

.nav-title {
  font-size: 17px;
  font-weight: 600;
  color: #ffffff;
}

.nav-placeholder {
  width: 40px;
}

.content {
  height: calc(100vh - 44px);
  padding: 20px 16px;
  box-sizing: border-box;
}

.agreement-content {
  padding-bottom: 40px;
}

.title {
  display: block;
  font-size: 20px;
  font-weight: 600;
  color: #f4f4f5;
  text-align: center;
  margin-bottom: 8px;
}

.update-time {
  display: block;
  font-size: 13px;
  color: #71717a;
  text-align: center;
  margin-bottom: 24px;
}

.section-title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #f4f4f5;
  margin-top: 20px;
  margin-bottom: 10px;
}

.section-content {
  display: block;
  font-size: 14px;
  color: #a1a1aa;
  line-height: 1.8;
}
</style>
