<script setup lang="ts">
import type { ApiResponse, Settings } from "./types/Contact";

const { t, locale } = useI18n();
const config = useRuntimeConfig();
useSeoMeta({
  title: computed(() => t("homeSeo.title")),
  description: computed(() => t("homeSeo.description")),
  ogTitle: computed(() => t("homeSeo.ogTitle")),
  ogDescription: computed(() => t("homeSeo.ogDescription")),
  keywords: computed(() => t("homeSeo.keywords")),
});
const { data: settings } = await useAsyncData<ApiResponse<Settings>>(
  "general",
  () =>
    $fetch(`${config.public.apiBase}general`, {
      headers: {
        "Content-Language": locale.value,
      },
    }),
  { lazy: true },
);
const staticReviews = [
  {
    author: "بدر الحمدان",
    rating: 5,
    body: "بفخر نشهد لتجربتنا مع ويب ستدي في مجال تطوير المواقع والتطبيقات حيث قدموا لنا حلول متميزة وخدمة عملاء ممتازة",
  },
  {
    author: "محمد القحطاني",
    rating: 4,
    body: "فريق ويب ستدي محترف وساعدنا على تسليم المشروع في الوقت المحدد بجودة عالية",
  },
];
if (import.meta.server) {
  useOrganizationSchema(settings?.value?.data, staticReviews, t);
}
</script>
<template>
  <main>
    <HomeHero />
    <LazyHomeServices :background-even="true" hydrate-on-visible />
    <LazyHomeProjectsHighlights :background-even="false" hydrate-on-visible />
    <LazyHomeCounter hydrate-on-visible />
    <LazyHomeTestimonials hydrate-on-visible />
    <LazyHomeAdvantages hydrate-on-visible />
    <LazyHomeProjectStages hydrate-on-visible />
    <LazyHomeContactSection hydrate-on-visible />
  </main>
</template>
