<template>
  <div>
    <div class="privacy-container">
      <div class="privacy-content">        
        <div class="text-gray-600 leading-relaxed mb-8">
          欢迎使用蜂快到家小程序！为了保障您能安全、顺畅地使用本小程序的服务，特制定本用户协议，请您仔细阅读。在使用本小程序前，请确保您已充分理解并同意本协议的所有条款。如您对本协议有任何疑问，请随时联系我们。
        </div>

        <div v-for="(section, index) in sections" :key="index" class="mb-10">
          <h2 class="text-base font-semibold text-gray-800 mb-4">{{ section.title }}</h2>
          <div v-for="(content, cIndex) in section.contents" :key="cIndex" class="mb-4">
            <h3 v-if="content.subTitle" class="text-sm font-medium text-gray-700 mb-2">{{ content.subTitle }}</h3>
            <p v-if="content.text" class="text-gray-600 leading-relaxed mb-2">{{ content.text }}</p>
            <ul v-if="content.list" class="list-disc list-inside space-y-2 text-gray-600">
              <li v-for="(item, iIndex) in content.list" :key="iIndex" class="ml-4">{{ item }}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const sections = [
  {
    title: '一、定义与解释',
    contents: [
      {
        list: [
          '小程序：即蜂快到家小程序及其提供的各项服务。',
          '用户：指使用本小程序的个人或实体。',
          '服务：包括但不限于代取快递、团购商品等小程序所提供的功能。'
        ]
      }
    ]
  },
  {
    title: '二、服务使用规范',
    contents: [
      {
        subTitle: '账号注册与使用',
        text: '用户需提供真实、准确、完整的个人信息进行账号注册。若因提供虚假信息导致的一切后果，由用户自行承担。',
        list: [
          '用户应妥善保管账号和密码，不得将账号转让、出租或出借予他人使用。因用户账号管理不善导致的任何损失，由用户自行负责。'
        ]
      },
      {
        subTitle: '服务使用限制',
        list: [
          '用户不得利用小程序从事任何违法违规活动，包括但不限于欺诈、侵权、传播有害信息等。',
          '禁止对小程序进行反向工程、反编译、篡改等破坏性行为，不得干扰小程序的正常运行。'
        ]
      }
    ]
  },
  {
    title: '三、双方权利与义务',
    contents: [
      {
        subTitle: '平台权利与义务',
        list: [
          '权利：有权根据业务发展需要对小程序进行升级、维护、修改或暂停服务，并以适当方式通知用户。对于违反本协议的用户，有权采取警告、限制使用、封禁账号等措施。',
          '义务：努力保障小程序的稳定运行，确保服务的可用性和安全性。及时处理用户的订单和反馈，提供必要的客户服务支持。'
        ]
      },
      {
        subTitle: '用户权利与义务',
        list: [
          '权利：有权在遵守本协议的前提下，自由使用小程序提供的各项服务。对平台的服务有提出意见和建议的权利。',
          '义务：遵守本协议及相关法律法规，合法使用小程序。按照平台规定的流程和要求进行下单、支付等操作，如实提供服务所需的信息。'
        ]
      }
    ]
  },
  {
    title: '四、费用与支付',
    contents: [
      {
        subTitle: '费用说明',
        text: '使用小程序的部分服务可能需要支付相应费用，具体费用标准将在小程序中明示。平台有权根据实际情况调整费用标准，并提前通知用户。'
      },
      {
        subTitle: '支付方式',
        text: '平台提供多种支付方式供用户选择，用户应确保支付信息的准确性和安全性。因用户支付信息错误导致的支付失败或其他损失，由用户自行承担。'
      }
    ]
  },
  {
    title: '五、责任限制',
    contents: [
      {
        subTitle: '不可抗力',
        text: '由于不可抗力因素（如自然灾害、政府行为、网络故障等）导致小程序无法正常运行或服务中断，平台不承担责任，但将尽力减少损失并及时通知用户。'
      },
      {
        subTitle: '用户责任',
        text: '因用户违反本协议或相关法律法规，导致平台或第三方遭受损失的，用户应承担赔偿责任。'
      }
    ]
  },
  {
    title: '六、协议变更与终止',
    contents: [
      {
        subTitle: '协议变更',
        text: '平台有权根据业务发展、法律法规变化等原因对本协议进行修改。修改后的协议将在小程序上公布，并以适当方式通知用户。若用户在协议变更后继续使用小程序，即视为同意接受变更后的协议。'
      },
      {
        subTitle: '协议终止',
        text: '用户有权随时停止使用小程序，可自行注销账号。若用户违反本协议，平台有权单方面终止本协议，注销用户账号，并保留追究法律责任的权利。'
      }
    ]
  },
  {
    title: '七、法律适用与争议解决',
    contents: [
      {
        subTitle: '法律适用',
        text: '本协议的订立、执行和解释均适用中国法律。'
      },
      {
        subTitle: '争议解决方式',
        text: '如双方在本协议履行过程中发生争议，应首先通过友好协商解决；协商不成的，任何一方均有权向有管辖权的人民法院提起诉讼。'
      }
    ]
  },
  {
    title: '八、其他条款',
    contents: [
      {
        subTitle: '完整性',
        text: '本协议构成双方关于小程序使用的完整协议，取代之前所有口头或书面的相关约定。'
      },
      {
        subTitle: '可分割性',
        text: '若本协议的任何条款被认定为无效或不可执行，不影响其他条款的有效性和可执行性。'
      },
      {
        subTitle: '联系我们',
        text: '若您对本协议有任何疑问、建议或投诉，欢迎联系我们。我们将在收到您的反馈后的 5 个工作日内与您联系并处理您的问题。'
      }
    ]
  }
]

onMounted(() => {
  document.title = '用户服务协议'
})

onBeforeUnmount(() => {
  document.title = '蜂快到家'
})
</script>

<style scoped>
.privacy-container {
  @apply min-h-screen px-4 py-16 max-w-3xl mx-auto;
}

.privacy-content {
  @apply prose prose-gray max-w-none bg-white rounded-lg p-8 shadow-sm;
}

@media (max-width: 640px) {
  .privacy-container {
    @apply px-4 py-6;
  }
  
  .privacy-content {
    @apply p-4;
  }
  
  h1 {
    @apply text-base;
  }
  
  h2 {
    @apply text-sm;
  }
}
</style> 