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

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

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

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

const seoTitles = {
  zh: "FiEE首页 | 创新电子解决方案",
  en: "FiEE Home | Innovative Electronics Solutions",
  ja: "FiEEホーム | 革新的電子ソリューション",
  "zh-TW": "FiEE首頁 | 創新電子解決方案",
};

const seoDescriptions = {
  zh: "欢迎访问FiEE官方网站。我们为您的业务需求提供尖端解决方案。",
  en: "Welcome to FiEE official website. We provide cutting-edge solutions for your business needs.",
  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,
});
</script>

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