<template>
  <div class="h-[272px]">
    <h2 class="heading-02 mb-4">
      {{ t('header.contacts.almaty.title') }}
    </h2>
    <div class="flex gap-10">
      <div class="flex flex-col gap-4">
        <div
          v-for="item in AlmatyItems.slice(0,3)"
          class="flex flex-col gap-2 "
        >
          <div class="heading-04">
            {{ t(item.title) }}
          </div>
          <a
            class="flex items-center gap-1 text-deepblue-900 dark:text-white"
            :href="item.to"
          >
            <component
              :is="item.icon"
              class="shrink-0"
            />
            <div class=" body-400">
              {{ t(item.subtitle) }}
            </div>
          </a>
        </div>
      </div>
      <div class="flex flex-col gap-2 2xl:gap-4">
        <div class="flex flex-col gap-4 h-full justify-between">
          <div class="flex flex-col gap-2 ">
            <div class="heading-04">
              {{ t('header.contacts.almaty.contactUs.title') }}
            </div>
            <div class="grid grid-cols-[repeat(auto-fit,minmax(140px,1fr))] max-w-[484px] gap-x-8 gap-y-2">
              <a
                v-for="link in newContacts"
                :key="link.subtitle"
                class="flex 2xl:items-center gap-1 text-deepblue-900 dark:text-white"
                :href="link.to"
                :target="link.icon === Whatsapp ? '_blank' : '_self'"
              >
                <component :is="link.icon" />
                <div class="body-400 line-clamp-1">
                  {{ link.subtitle }}
                </div>
              </a>
            </div>
          </div>
          <div class="flex flex-col gap-2 ">
            <div class="heading-04 whitespace-nowrap">
              {{ t('header.contacts.almaty.support.title') }}
            </div>
            <div class="flex flex-col lg:gap-y-5">
              <a
                v-for="link in technicalSupport"
                :key="link.subtitle"
                class="flex 2xl:items-center gap-1 text-deepblue-900 dark:text-white"
                :href="link.to"
                target="_blank"
              >
                <div class="body-400 line-clamp-1 text-blue-600">
                  {{ t(link.subtitle) }}
                </div>
                <component
                  :is="link.icon"
                  class="stroke-blue-600"
                />
              </a>
            </div>
          </div>
        </div>
      </div>
<!--      Here is the financial department-->
<!--      <div class="flex flex-col gap-2 self-end">-->
<!--        <div class="heading-04 whitespace-nowrap">-->
<!--          {{ t('header.contacts.almaty.financeDep.title') }}-->
<!--        </div>-->
<!--        <nuxt-link-->
<!--          class="flex gap-1 items-center"-->
<!--          to="https://api.whatsapp.com/send?phone=77713954561"-->
<!--          target="_blank"-->
<!--        >-->
<!--          <div class="body-400 line-clamp-1 text-blue-600">-->
<!--            {{ t('header.contacts.almaty.financeDep.linkTitle') }}-->
<!--          </div>-->
<!--          <a-icon-expand-window class="stroke-blue-600"/>-->
<!--        </nuxt-link>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script setup lang="ts">

import Location from "#adata-ui/icons/location.vue";
import Mail from "#adata-ui/icons/mail.vue";
import Clock from "#adata-ui/icons/clock.vue";
import Whatsapp from "#adata-ui/icons/whatsapp.vue";
import Phone from "#adata-ui/icons/phone.vue";
import ExpandWindow from "#adata-ui/icons/expand-window.vue";
import {useContacts} from "#adata-ui/composables/projectState";

const {t} = useI18n()
const contacts = ref(useContacts())
const AlmatyItems = [
  {
    title: 'header.contacts.almaty.adress.title',
    subtitle: 'header.contacts.almaty.adress.subtitle',
    icon: Location,
    to: 'https://yandex.kz/maps/ru/org/avrora_kholding/1099794306/?ll=76.912479%2C43.208928&z=17.72'
  },
  {
    title: 'header.contacts.almaty.email.title',
    subtitle: 'info@adata.kz',
    icon: Mail,
    to: 'mailto:info@adata.kz'
  },
  {
    title: 'header.contacts.almaty.schedule.title',
    subtitle: 'header.contacts.almaty.schedule.subtitle',
    icon: Clock,
  },
]

const technicalSupport = [
  {
    subtitle: 'header.contacts.almaty.support.linkTitle',
    icon: ExpandWindow,
    to: "https://api.whatsapp.com/send/?phone=77712289041"
  }
]

const newContacts = computed(()=> contacts.value.map(item => ({
  subtitle: item.contact,
  icon: item.platform_code === 'telephone' ? Phone : Whatsapp,
  to: item.platform_code === 'telephone' ? `tel:${item.contact}`
    : `https://api.whatsapp.com/send/?phone=${item.contact.replace(/[^0-9]/g, '')}`
})))
</script>

<style scoped>
</style>
