<script setup lang="ts">
const { t, tm } = useI18n();

// Use tm() only to get the array length; render individual strings via t()
const items = computed(() => (tm("termsPage.items") as unknown[]) || []);

useSeoMeta({
  title: computed(() => t("termsAndConditionsSeo.title")),
  description: computed(() => t("termsAndConditionsSeo.description")),
  ogTitle: computed(() => t("termsAndConditionsSeo.ogTitle")),
  ogDescription: computed(() => t("termsAndConditionsSeo.ogDescription")),
  keywords: computed(() => t("termsAndConditionsSeo.keywords")),
});
</script>

<template>
  <main>
    <InternalHeaderSection
      :pages="[{ name: t('termsAndConditions') }]"
      video-url="/videos/about-header.mp4"
    >
      <template #title>
        <h1>{{ t("termsPage.heroTitle") }}</h1>
      </template>
    </InternalHeaderSection>

    <section class="bg-gradient-odd py-12">
      <div class="container mx-auto max-w-4xl px-4">
        <p
          v-if="t('termsPage.lastUpdated')"
          class="text-muted-foreground mb-4 text-sm"
        >
          {{ t("termsPage.lastUpdated") }}
        </p>
        <p class="mb-10 text-base leading-relaxed md:text-lg">
          {{ t("termsPage.intro") }}
        </p>

        <div class="space-y-8">
          <article
            v-for="(_, idx) in items"
            :key="idx"
            class="text-card-foreground border-surface-border bg-surface-background rounded-xl border p-6 shadow-sm"
          >
            <h2 class="text-primary mb-3 text-xl font-semibold">
              {{ t(`termsPage.items.${idx}.title`) }}
            </h2>
            <p class="text-foreground/90 text-base leading-relaxed">
              {{ t(`termsPage.items.${idx}.text`) }}
            </p>
          </article>
        </div>
      </div>
    </section>

    <!-- <LazyContactMainSection
      :form-title="t('contactSection.title')"
      section-background="bg-gradient-odd"
    /> -->
  </main>
</template>

<style scoped></style>
