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

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

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

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

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

const seoTitles = {
  zh: "产品介绍 | 创新技术 | FiEE",
  en: "Our Products | Innovative Technology | FiEE",
  ja: "製品紹介 | 革新的技術 | FiEE",
  "zh-TW": "產品介紹 | 創新技術 | FiEE",
};

const seoDescriptions = {
  zh: "探索FiEE的高性能电子产品和技术创新。",
  en: "Explore FiEE's range of high-performance electronic products and technological innovations.",
  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>
