<script setup lang="ts">
const { t } = useI18n();
useSeoMeta({
  title: computed(() => t("servicesSeo.title")),
  description: computed(() => t("servicesSeo.description")),
  ogTitle: computed(() => t("servicesSeo.ogTitle")),
  ogDescription: computed(() => t("servicesSeo.ogDescription")),
  keywords: computed(() => t("servicesSeo.keywords")),
});

useServiceSchema({
  name: t("services.title"),
  serviceType: "Services",
  description: t("servicesSeo.description"),
  url: "/services",
});
</script>
<template>
  <main>
    <InternalHeaderSection
      video-url="/videos/blog-hero.mp4"
      :pages="[{ name: $t('navigationItems.services') }]"
    >
      <template #title>
        <h1>{{ $t("services.title") }}</h1>
      </template>
      <template #button>
        <div class="flex flex-wrap items-center gap-4">
          <NuxtLinkLocale to="/services/web-applications" class="mx-auto">
            <Button
              class="mx-auto cursor-pointer !text-black dark:!text-white"
              variant="wsDefault"
              size="wsDefault"
            >
              {{ $t("services.web") }}
            </Button>
          </NuxtLinkLocale>
          <NuxtLinkLocale to="/services/mobile-applications" class="mx-auto">
            <Button
              class="mx-auto cursor-pointer !text-black dark:!text-white"
              variant="wsDefault"
              size="wsDefault"
            >
              {{ $t("services.mobile") }}
            </Button>
          </NuxtLinkLocale>
        </div>
      </template>
    </InternalHeaderSection>
    <LazyHomeServices :background-even="false" hydrate-on-visible />
    <LazyHomeProjectsHighlights :background-even="true" hydrate-on-visible />
    <LazyHomeAdvantages :background-even="false" hydrate-on-visible />
    <LazyHomeContactSection :background-even="true" hydrate-on-visible />
  </main>
</template>
