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

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

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

// ✅ 使用通用 SEO 配置
useSeoSetup({
  titles: {
    zh: "委员会任命 | 治理结构与职责 | FiEE",
    en: "Committee Appointments | Governance Structure | FiEE",
    ja: "委員会任命 | ガバナンス構造と責任 | FiEE",
    "zh-TW": "委員會任命 | 治理結構與職責 | FiEE",
  },
  descriptions: {
    zh: "了解FiEE公司委员会结构、章程、职责范围和任命信息。包括审计委员会、薪酬委员会和提名委员会等关键治理组织。",
    en: "Information regarding FiEE corporate committee structures, charters, responsibilities and appointments. Including audit, compensation and nomination committees.",
    ja: "FiEEの企業委員会構造、憲章、責任範囲、任命に関する情報。監査委員会、報酬委員会、指名委員会などの主要なガバナンス組織を含みます。",
    "zh-TW":
      "了解FiEE公司委員會結構、章程、職責範圍和任命信息。包括審計委員會、薪酬委員會和提名委員會等關鍵治理組織。",
  },
  ogImage: "/assets/image/og-committee.png",
  pageType: "website",
});
</script>

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