<script lang="ts" setup>
import SubscribeSection from "~/components/global/SubscribeSection.vue";
import {
  useCountriesQuery,
  useServicesQuery,
  useSocialIconsQuery,
} from "~/queries/contact";

const { data: socialIcons } = useSocialIconsQuery();
const { data: services } = useServicesQuery();
const { branches, isLoading } = useBranches();
</script>

<template>
  <section id="contact">
    <div class="py-section bg-gradient-odd">
      <Contact
        v-if="branches && socialIcons && services"
        :social-icons="socialIcons"
        :branches="branches"
        :branches-loading="isLoading"
        :services="services"
        :form-title="$t('contactSection.title')"
      />
    </div>
    <div class="bg-gradient-even pb-section px-4">
      <SubscribeSection />
    </div>
  </section>
</template>
