<template>
  <section
    id="contact"
    :class="backgroundEven ? 'bg-gradient-even' : 'bg-gradient-odd'"
    class="py-section"
  >
    <Contact
      :social-icons="safeSocialIcons"
      :branches="branches"
      :branches-loading="isLoading"
      :services="safeServices"
      :form-title="$t('contactSection.title')"
    />
  </section>
</template>

<script setup lang="ts">
import { useServicesQuery, useSocialIconsQuery } from "~/queries/contact";
import { useBranches } from "~/composables/useBranches";
defineProps({
  backgroundEven: {
    type: Boolean,
    default: true,
  },
});
const { branches, isLoading } = useBranches();
const { data: socialIcons } = useSocialIconsQuery();
const { data: services } = useServicesQuery();

// Safe fallbacks to ensure SSR-friendly rendering and satisfy prop types
const safeSocialIcons = computed(() => socialIcons.value ?? []);
const safeServices = computed(() => services.value ?? []);
</script>

<style scoped></style>
