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

const size375 = defineAsyncComponent(() =>
  import("@/views/financialinformation/annualreports/index.vue")
);
const size768 = defineAsyncComponent(() =>
  import("@/views/financialinformation/annualreports/index.vue")
);
const size1920 = defineAsyncComponent(() =>
  import("@/views/financialinformation/annualreports/index.vue")
);

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

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

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

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

// 根据语言动态生成 SEO 元数据
const seoTitles = {
  zh: "年度报告 | 投资者关系 | FiEE",
  en: "Annual Reports | Investor Relations | FiEE",
  ja: "年次報告書 | 投資家情報 | FiEE",
  "zh-TW": "年度報告 | 投資者關係 | FiEE",
};

const seoDescriptions = {
  zh: "访问FiEE的年度财务报告、股东信和企业业绩回顾。",
  en: "Access FiEE's annual financial reports, shareholder letters, and corporate performance reviews.",
  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>
