<template>
  <div class="agreement-page">
    <div class="agreement-container">
      <!-- 返回按钮 -->
      <div class="back-button" @click="goBack">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span>返回</span>
      </div>

      <!-- 中文版本 -->
      <div class="agreement-content">
        <h1>最终用户许可协议(EULA)</h1>
        
        <p class="intro">
          本最终用户许可协议（下称"协议"）是您（"用户"）与 Vionow（"Vionow"、"我们"）之间订立的法律合同，管辖您对我们基于网络的视频创作平台及相关服务（"服务"）的访问和使用。
        </p>
        
        <p class="intro">
          通过访问、注册或使用Vionow，即表示您同意受本协议条款的约束。如果您不同意这些条款，则不得使用本服务。
        </p>

        <section>
          <h2>1. 许可授予</h2>
          <p>
            Vionow 授予您一项有限的、非排他性的、不可转让且可撤销的许可，允许您根据本协议和我们的服务条款，为个人或专业目的使用本服务。
          </p>
          
          <h3>您可以：</h3>
          <ul>
            <li>通过网络浏览器访问和使用本服务</li>
            <li>上传素材并创作您自己的视频</li>
            <li>将处理后的结果用于商业或非商业目的（根据您的订阅级别允许）</li>
          </ul>

          <h3>您不可以：</h3>
          <ul>
            <li>转售、再许可或重新分发本服务或其输出内容</li>
            <li>对平台进行逆向工程或修改</li>
            <li>使用自动化系统（如机器人、脚本等）访问或利用本服务</li>
          </ul>
        </section>

        <section>
          <h2>2. 所有权</h2>
          <p>
            本服务中的所有知识产权，包括软件、界面、模型和人工智能技术，均属于Vionow。您保留您上传的内容及生成输出内容的所有权，但须遵守本协议。
          </p>
        </section>

        <section>
          <h2>3. 用户内容</h2>
          <p>
            上传内容即表示您确认您拥有该内容的使用权或已获得使用许可。您授予Vionow 一项有限许可，以处理和临时存储您的内容，从而提供本服务。
          </p>
          <p>
            我们不对您的输入或输出内容主张所有权。
          </p>
        </section>

        <section>
          <h2>4. 可接受的使用</h2>
          <p>您同意不将本服务用于：</p>
          <ul>
            <li>侵犯第三方权利（例如版权、商标权、隐私权）</li>
            <li>非法、有害或滥用活动</li>
            <li>生成或传播攻击性、色情或仇恨内容</li>
          </ul>
          <p>违反规定可能导致您的访问权限被暂停或终止。</p>
        </section>

        <section>
          <h2>5. 终止</h2>
          <p>
            如果您违反本协议，我们可能会暂停或终止您的账户及对本服务的访问权限。您可以随时取消您的订阅，但须遵守我们的退款和计费政策。
          </p>
        </section>

        <section>
          <h2>6. 免责声明</h2>
          <p>
            本服务按"原样"提供，不附带任何形式的保证。虽然我们力求准确和高质量，但我们不保证特定的结果或不间断的访问。
          </p>
          <p>我们对以下情况不承担责任：</p>
          <ul>
            <li>数据丢失</li>
            <li>输出质量问题</li>
            <li>与您使用本服务相关的第三方索赔</li>
          </ul>
        </section>

        <section>
          <h2>7. 修改</h2>
          <p>
            我们保留随时修改本协议的权利。更新内容将在公开发布后立即生效。继续使用本服务即表示您接受修订后的条款。
          </p>
        </section>

        <section>
          <h2>8. 联系方式</h2>
          <p>
            如果对本协议有任何疑问或疑虑，请通过以下方式联系我们：<br>
            <a href="mailto:contact@vionow.com">contact@vionow.com</a>
          </p>
        </section>

        <!-- 分隔线 -->
        <div class="divider"></div>

        <!-- English Version -->
        <h1 class="english-title">End User License Agreement (EULA)</h1>
        
        <p class="intro">
          This End User License Agreement ("Agreement") is a legal contract between you (the "User") and Vionow ("Vionow", "we", or "us"), governing your access to and use of our web-based video creation platform and associated services (the "Service").
        </p>
        
        <p class="intro">
          By accessing, registering for, or using Vionow, you agree to be bound by the terms of this Agreement. If you do not agree to the terms, you must not use the Service.
        </p>

        <section>
          <h2>1. License Grant</h2>
          <p>
            Vionow grants you a limited, non-exclusive, non-transferable, and revocable license to use the Service for personal or professional purposes in accordance with this Agreement and our Terms of Service.
          </p>
          
          <h3>You may:</h3>
          <ul>
            <li>Access and use the Service via a web browser</li>
            <li>Upload content and create your own videos</li>
            <li>Use processed results for commercial or non-commercial purposes (as permitted by your subscription level)</li>
          </ul>

          <h3>You may not:</h3>
          <ul>
            <li>Resell, sublicense, or redistribute the Service or its output</li>
            <li>Reverse engineer or modify the platform</li>
            <li>Use automated systems (bots, scripts, etc.) to access or exploit the Service</li>
          </ul>
        </section>

        <section>
          <h2>2. Ownership</h2>
          <p>
            All intellectual property rights in the Service, including the software, interface, models, and AI technologies, belong to Vionow. You retain ownership of the content you upload and the outputs generated, subject to this Agreement.
          </p>
        </section>

        <section>
          <h2>3. User Content</h2>
          <p>
            By uploading content, you confirm that you own the rights or have permission to use it. You grant Vionow a limited license to process and temporarily store your content to provide the Service.
          </p>
          <p>
            We do not claim ownership of your input or output content.
          </p>
        </section>

        <section>
          <h2>4. Acceptable Use</h2>
          <p>You agree not to use the Service:</p>
          <ul>
            <li>To infringe upon third-party rights (e.g. copyright, trademark, privacy)</li>
            <li>For unlawful, harmful, or abusive activities</li>
            <li>To generate or distribute offensive, pornographic, or hateful content</li>
          </ul>
          <p>Violations may result in suspension or termination of access.</p>
        </section>

        <section>
          <h2>5. Termination</h2>
          <p>
            We may suspend or terminate your account and access to the Service if you breach this Agreement. You may cancel your subscription at any time, subject to our refund and billing policy.
          </p>
        </section>

        <section>
          <h2>6. Disclaimers</h2>
          <p>
            The Service is provided "as is" without warranties of any kind. While we strive for accuracy and quality, we do not guarantee specific outcomes or uninterrupted access.
          </p>
          <p>We are not liable for:</p>
          <ul>
            <li>Loss of data</li>
            <li>Output quality issues</li>
            <li>Third-party claims related to your use of the Service</li>
          </ul>
        </section>

        <section>
          <h2>7. Modifications</h2>
          <p>
            We reserve the right to modify this Agreement at any time. Updates will be posted publicly and take effect upon publication. Continued use of the Service implies acceptance of the revised terms.
          </p>
        </section>

        <section>
          <h2>8. Contact</h2>
          <p>
            For any questions or concerns regarding this Agreement, please contact us at:<br>
            <a href="mailto:contact@vionow.com">contact@vionow.com</a>
          </p>
        </section>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.back()
}
</script>

<style scoped>
.agreement-page {
  min-height: 100vh;
  background: var(--bg-base);
  padding: var(--space-10) var(--space-5);
  overflow-y: auto;
}

.agreement-container {
  max-width: 900px;
  max-height: calc(100vh - 80px);
  margin: 0 auto;
  background: var(--bg-glass);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-2xl);
  padding: var(--space-16) var(--space-20);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-default);
  overflow-y: auto;
  overflow-x: hidden;
}

/* 自定义滚动条样式 */
.agreement-container::-webkit-scrollbar {
  width: 8px;
}

.agreement-container::-webkit-scrollbar-track {
  background: var(--bg-glass);
  border-radius: var(--radius-full);
}

.agreement-container::-webkit-scrollbar-thumb {
  background: var(--primary-glow-medium);
  border-radius: var(--radius-full);
  transition: background var(--duration-normal) var(--ease-default);
}

.agreement-container::-webkit-scrollbar-thumb:hover {
  background: var(--primary-glow-strong);
}

/* Firefox 滚动条样式 */
.agreement-container {
  scrollbar-width: thin;
  scrollbar-color: var(--primary-glow-medium) var(--bg-glass);
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--primary-500);
  font-size: var(--text-base);
  cursor: pointer;
  margin-bottom: var(--space-8);
  transition: var(--transition-all);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
}

.back-button:hover {
  background: var(--primary-glow-light);
  transform: translateX(-4px);
}

.back-button svg {
  width: 20px;
  height: 20px;
}

.agreement-content {
  color: var(--text-primary);
  line-height: var(--leading-relaxed);
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-semibold);
  color: var(--primary-500);
  margin-bottom: var(--space-8);
  text-align: center;
}

.english-title {
  margin-top: var(--space-16);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--text-primary);
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

p {
  font-size: var(--text-base);
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}

.intro {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
}

section {
  margin-bottom: var(--space-8);
}

ul {
  list-style: none;
  padding-left: 0;
  margin: var(--space-4) 0;
}

ul li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

ul li::before {
  content: "·";
  position: absolute;
  left: var(--space-2);
  color: var(--primary-500);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
}

a {
  color: var(--primary-500);
  text-decoration: none;
  transition: opacity var(--duration-normal) var(--ease-default);
}

a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-default), transparent);
  margin: var(--space-16) 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .agreement-container {
    padding: var(--space-10) var(--space-8);
  }

  h1 {
    font-size: var(--text-3xl);
  }

  h2 {
    font-size: var(--text-xl);
  }

  h3 {
    font-size: var(--text-base);
  }

  p, ul li {
    font-size: var(--text-sm);
  }
}

@media (max-width: 480px) {
  .agreement-page {
    padding: var(--space-5) var(--space-3);
  }

  .agreement-container {
    padding: var(--space-8) var(--space-5);
  }

  h1 {
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-lg);
  }
}
</style>
