<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { contact } from '@/data/contact'

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

<template>
  <div class="contact-page">
    <h1>{{ t('contact.title') }}</h1>

    <div class="contact-section">
      <p>
        <strong>{{ t('contact.email') }}</strong><br />
        <a :href="`mailto:${contact.email}`">{{ contact.email }}</a>
      </p>
    </div>

    <div class="contact-section" v-if="contact.phone">
      <p>
        <strong>{{ t('contact.phone') }}</strong><br />
        {{ contact.phone }}
      </p>
    </div>

    <div class="contact-section" v-if="contact.wechat">
      <p>
        <strong>{{ t('contact.wechat') }}</strong><br />
        {{ contact.wechat }}
      </p>
    </div>

    <div class="contact-section" v-if="contact.xiaohongshu">
      <p>
        <strong>{{ t('contact.xiaohongshu') }}</strong><br />
        {{ contact.xiaohongshu }}
      </p>
    </div>

    <div class="contact-section" v-if="contact.shipinhao">
      <p>
        <strong>{{ t('contact.shipinhao') }}</strong><br />
        {{ contact.shipinhao }}
      </p>
    </div>
  </div>
</template>
