<script setup>
import { defineAsyncComponent } from 'vue'

const size375 = defineAsyncComponent(() => import("@/views/email-alerts/index.vue"));
const size768 = defineAsyncComponent(() => import("@/views/email-alerts/index.vue"));
const size1440 = defineAsyncComponent(() => import("@/views/email-alerts/index.vue"));
const size1920 = defineAsyncComponent(() => import("@/views/email-alerts/index.vue"));

const { viewComponent, componentKey } = useViewSelector({
  size375,
  size768,
  size1440,
  size1920,
});

const bg = usePageBackground("bg-contacts.png");

definePageMeta({
  layout: "default",
});

// 国际化支持
const { locale } = useI18n();

const seoTitles = {
  zh: "邮件提醒 | 保持关注 | FiEE",
  en: "Email Alerts | Stay Informed | FiEE",
  ja: "メールアラート | 最新情報 | FiEE",
  "zh-TW": "郵件提醒 | 保持關注 | FiEE",
};

const seoDescriptions = {
  zh: "订阅FiEE邮件提醒，直接接收最新新闻稿和财务更新。",
  en: "Subscribe to FiEE email alerts to receive the latest press releases and financial updates directly.",
  ja: "FiEEメールアラートに登録して、最新のプレスリリースと財務更新情報を直接受け取ります。",
  "zh-TW": "訂閱FiEE郵件提醒，直接接收最新新聞稿和財務更新。",
};

const currentLocale = locale.value;

useSeoMeta({
  title: seoTitles[currentLocale] || seoTitles.en,
  description: seoDescriptions[currentLocale] || seoDescriptions.en,
  ogTitle: seoTitles[currentLocale] || seoTitles.en,
});

provide('pageBg', bg);
</script>

<template>
  <component :is="viewComponent" :key="componentKey" />
</template>
