<script setup>
import { defineAsyncComponent } from "vue";

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

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

const bg = usePageBackground("bg-events-calendar.png");

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

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

const seoTitles = {
  zh: "活动日历 | 投资者活动 | FiEE",
  en: "Events Calendar | Investor Events | FiEE",
  ja: "イベントカレンダー | 投資家イベント | FiEE",
  "zh-TW": "活動日曆 | 投資者活動 | FiEE",
};

const seoDescriptions = {
  zh: "查看即将举行的FiEE投资者活动、财报电话会议和企业演示。",
  en: "View upcoming FiEE investor events, earnings calls, and corporate presentations.",
  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 background to layout
provide('pageBg', bg);
</script>

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