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

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

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

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

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

// ✅ 使用通用 SEO 配置
useSeoSetup({
  titles: {
    zh: "最新新闻与动态 | FiEE",
    en: "Latest News & Updates | FiEE",
    ja: "最新ニュースと更新情報 | FiEE",
    "zh-TW": "最新新聞與動態 | FiEE",
  },
  descriptions: {
    zh: "获取FiEE的最新新闻稿、公司新闻和活动更新。及时了解公司最新动态、行业资讯和重大事件。",
    en: "Stay updated with the latest press releases, corporate news, and event updates from FiEE. Get the latest company news and industry insights.",
    ja: "FiEEの最新プレスリリース、企業ニュース、イベント更新情報をご覧ください。最新の企業ニュースと業界の洞察を入手してください。",
    "zh-TW":
      "獲取FiEE的最新新聞稿、公司新聞和活動更新。及時了解公司最新動態、行業資訊和重大事件。",
  },
  ogImage: "/assets/image/og-news.png",
  pageType: "website",
});

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

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