<script lang='ts' setup>
const { t } = useI18n();

const sections = [
  "serviceDescription",
  "userResponsibilities",
  "accountSecurity",
  "prohibitedActivities",
  "riskDisclosure",
  "privacyPolicy",
  "intellectualProperty",
  "disclaimers",
  "termination",
  "changes",
  "governingLaw",
];

function getSectionParagraphs(section: string) {
  const paragraphs: string[] = [];
  let index = 0;
  while (true) {
    const key = `term.sections.${section}.content.${index}`;
    const text = t(key);
    if (text === key)
      break;
    paragraphs.push(text);
    index++;
  }
  return paragraphs;
}
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar class="ion-toolbar">
        <ion-buttons slot="start">
          <ui-back-button default-href="/" />
        </ion-buttons>
        <ion-title>{{ t('term.title') }}</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content :fullscreen="true" class="ion-padding">
      <div class="max-w-4xl mx-auto">
        <!-- 最后更新时间 -->
        <div class="mb-6 text-sm text-(--ion-color-medium)">
          {{ t('term.lastUpdate') }}
        </div>

        <!-- 引言 -->
        <section class="mb-8">
          <p class="text-base leading-relaxed">
            {{ t('term.introduction') }}
          </p>
        </section>

        <!-- 服务条款内容 -->
        <section v-for="(section, index) in sections" :key="index" class="mb-8">
          <h2 class="text-lg font-semibold mb-4">
            {{ index + 1 }}. {{ t(`term.sections.${section}.title`) }}
          </h2>
          <div class="space-y-3">
            <p
              v-for="(paragraph, pIndex) in getSectionParagraphs(section)"
              :key="pIndex"
              class="text-sm leading-relaxed text-(--ion-color-step-600)"
            >
              {{ paragraph }}
            </p>
          </div>
        </section>

        <!-- 联系信息 -->
        <section class="mt-12 pt-6 border-t border-(--ion-color-step-150)">
          <h2 class="text-lg font-semibold mb-4">
            {{ t('term.contact.title') }}
          </h2>
          <p class="text-sm leading-relaxed text-(--ion-color-step-600)">
            {{ t('term.contact.description') }}
          </p>
          <div class="mt-4 space-y-2">
            <div class="text-sm">
              <span class="text-(--ion-color-medium)">{{ t('term.contact.email') }}:</span>
              <a href="mailto:support@example.com" class="ml-2 text-(--ion-color-primary)">
                support@example.com
              </a>
            </div>
          </div>
        </section>
      </div>
    </ion-content>
  </ion-page>
</template>

<style lang='css' scoped>
</style>
