<template>
  <div class="nedvizhimost-page">
    <UPageHero
      title="Недвижимость вашей мечты"
      description="Помогаем найти, купить или продать недвижимость с полным юридическим сопровождением и гарантией безопасности сделки в Кыргызстане (Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак и Узген)."
      class="nedvizhimost-page__hero"
      :ui="{
        description: 'text-lg sm:text-xl/8 text-property',
      }"
    >
      <template #footer>
        <div class="flex gap-2 place-content-center h-[48px]">
          <UButton
            size="xl"
            label="Смотреть услуги"
            href="#main-services"
          />

          <UButton
            size="xl"
            label="Смотреть варианты"
            href="#variations"
            color="neutral"
            variant="subtle"
          />
        </div>
      </template>
    </UPageHero>

    <UContainer class="flex flex-col gap-12 mt-12">
      <MainServices :services="services" />

      <MainCarusel :preview-items="previewItems" />

      <Contacts />
    </UContainer>
  </div>
</template>

<script setup lang="ts">
const services = [
  {
    icon: 'i-lucide:home',
    title: 'Аренда жилой недвижимости',
    description:
        'Подбираем квартиры, дома и апартаменты для краткосрочной и долгосрочной аренды',
    items: [
      { title: 'Проверка юридической чистоты' },
      { title: 'Согласование условий договора' },
      { title: 'Сопровождение сделки' },
      { title: 'Помощь с переездом' },
    ],
  },
  {
    icon: 'i-lucide:shopping-bag',
    title: 'Покупка недвижимости',
    description:
        'Полное сопровождение процесса покупки от поиска до получения ключей',
    items: [
      { title: 'Анализ рынка и оценка' },
      { title: 'Проверка документов' },
      { title: 'Согласование ипотеки' },
      { title: 'Регистрация сделки' },
    ],
  },
  {
    icon: 'i-lucide:package',
    title: 'Продажа недвижимости',
    description:
        'Профессиональная подготовка и продажа вашей недвижимости',
    items: [
      { title: 'Оценка и фотосъёмка' },
      { title: 'Маркетинг и реклама' },
      { title: 'Показы объекта' },
      { title: 'Юридическое оформление' },
    ],
  },
  {
    icon: 'i-lucide:building',
    title: 'Коммерческая недвижимость',
    description:
        'Работа с офисами, торговыми и складскими помещениями',
    items: [
      { title: 'Аренда офисов' },
      { title: 'Покупка коммерческих объектов' },
      { title: 'Инвестиционные проекты' },
      { title: 'Due diligence' },
    ],
  },
]

const { cartByCategory } = useMock()
const previewItems = computed(() => cartByCategory('nedvizhimost'))

useHead({
  title: 'Недвижимость в Кыргызстане — покупка, продажа и аренда с полным сопровождением',
  meta: [
    {
      name: 'description',
      content: 'АТ Голден помогает найти, купить, продать или арендовать недвижимость в Бишкеке, Оше, Джалал-Абаде, Караколе и других городах Кыргызстана. Полное юридическое сопровождение и безопасные сделки.',
    },
    {
      name: 'keywords',
      content: 'недвижимость Кыргызстан, покупка недвижимости, продажа недвижимости, аренда жилья, коммерческая недвижимость, квартиры, дома, апартаменты, безопасные сделки, юридическая проверка, сопровождение сделок, Бишкек, Ош, Джалал-Абад, Каракол, Балыкчы, Талас, Токмак, Узген',
    },
    { property: 'og:title', content: 'Недвижимость в Кыргызстане — покупка, продажа и аренда с полным сопровождением' },
    { property: 'og:description', content: 'АТ Голден помогает найти, купить, продать или арендовать недвижимость в Бишкеке, Оше, Джалал-Абаде, Караколе и других городах Кыргызстана. Полное юридическое сопровождение и безопасные сделки.' },
  ],
})
</script>

<style lang="scss">
.nedvizhimost-page {
  display: flex;
  flex-direction: column;

  &__hero {
    width: 100%;
    height: 100vh;

    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('/nedvizhimost.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
}
</style>
