<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",
});

useSeoMeta({
  title: "Annual Reports | Investor Relations | FiEE",
  description:
    "Access FiEE's annual financial reports, shareholder letters, and corporate performance reviews.",
  ogTitle: "FiEE Annual Reports",
});

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

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