<script setup lang="ts">
const { t, locale } = useI18n();
const config = useRuntimeConfig();

const { data: settings } = await useAsyncData<any>(
  "general",
  () =>
    $fetch(`${config.public.apiBase}general`, {
      headers: {
        "Content-Language": locale.value,
      },
    }),
  { lazy: true },
);

useSeoMeta({
  title: computed(() => t("aboutSeo.title")),
  description: computed(() => t("aboutSeo.description")),
  ogTitle: computed(() => t("aboutSeo.ogTitle")),
  ogDescription: computed(() => t("aboutSeo.ogDescription")),
  keywords: computed(() => t("aboutSeo.keywords")),
});

if (import.meta.server) {
  useAboutSchema(settings?.value?.data, t);
}
</script>
<template>
  <main>
    <InternalHeaderSection
      :pages="[{ name: $t('about') }]"
      video-url="/videos/about-header.mp4"
    >
      <template #title>
        <h1>{{ $t("aboutHero.title") }}</h1>
      </template>
      <template #button>
        <NuxtLinkLocale to="/contact">
          <MainButton :contnet="$t('aboutHero.button')" />
        </NuxtLinkLocale>
      </template>
    </InternalHeaderSection>
    <LazyAboutCounter />
    <LazyAboutWhoWeAre />
    <LazyAboutCeo />
    <LazyAboutClients />
    <LazyAboutTestimonials />
    <LazyAboutProjectStages />
    <LazyAboutContactSection />
  </main>
</template>
<style scoped></style>
