<template>
  <div class="terms-of-use">
    <section
      class="terms-intro"
      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
    >
      <h1 class="section-titles">{{ t("terms_of_use.intro.title") }}</h1>
      <div class="content-block">
        <p>{{ t("terms_of_use.intro.p1") }}</p>
      </div>
    </section>

    <section
      class="terms-usage"
      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
    >
      <h3 class="section-title">{{ t("terms_of_use.usage.title") }}</h3>
      <div class="content-block">
        <p>{{ t("terms_of_use.usage.p1") }}</p>
      </div>
    </section>

    <section
      class="terms-ip"
      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
    >
      <h3 class="section-title">
        {{ t("terms_of_use.intellectual_property.title") }}
      </h3>
      <div class="content-block">
        <p>{{ t("terms_of_use.intellectual_property.p1") }}</p>
      </div>
    </section>

    <section
      class="terms-forward"
      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
    >
      <h3 class="section-title">
        {{ t("terms_of_use.forward_looking.title") }}
      </h3>
      <div class="content-block">
        <p>{{ t("terms_of_use.forward_looking.p1") }}</p>
      </div>
    </section>

    <section
      class="terms-linking"
      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
    >
      <h3 class="section-title">{{ t("terms_of_use.linking.title") }}</h3>
      <div class="content-block">
        <p>{{ t("terms_of_use.linking.p1") }}</p>
      </div>
    </section>

    <section
      class="terms-violations"
      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
    >
      <h3 class="section-title">{{ t("terms_of_use.violations.title") }}</h3>
      <div class="content-block">
        <p>{{ t("terms_of_use.violations.p1") }}</p>
      </div>
    </section>

    <section
      class="terms-liability"
      style="max-width: 1200px; margin: 40px auto; padding: 0 20px"
    >
      <h3 class="section-title">{{ t("terms_of_use.liability.title") }}</h3>
      <div class="content-block">
        <p>{{ t("terms_of_use.liability.p1") }}</p>
        <p>{{ t("terms_of_use.liability.p2") }}</p>
      </div>
    </section>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
</script>

<style scoped>
.terms-of-use {
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.section-titles {
  font-size: 2rem;
  margin-bottom: 20px;
  color: black;
}

.section-title {
  font-size: 1.3rem;
  margin-bottom: 20px;
  color: #895bff;
}

.content-block {
  font-size: 1rem;
  line-height: 1.6;
}

.content-block p {
  margin-bottom: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }

  .section-titles {
    font-size: 1.8rem;
  }

  .section-title {
    font-size: 1.2rem;
  }

  .content-block {
    font-size: 0.9rem;
  }
}
</style>
