<script setup lang="ts">
import AdataLogo from '#adata-ui/icons/adata-logo.vue'
import YouTubeIcon from '#adata-ui/icons/socials/youtube.vue'
import InstagramIcon from '#adata-ui/icons/socials/instagram.vue'
import TelegramIcon from '#adata-ui/icons/socials/telegram.vue'
import FaceBookIcon from '#adata-ui/icons/socials/face-book.vue'
import TikTokIcon from '#adata-ui/icons/socials/tik-tok.vue'
import LinkedinIcon from '#adata-ui/icons/linkedin.vue'
import FooterAccordion from './ui/footer-acccordion.vue'
import { PAGES } from '#adata-ui/shared/constans/pages'
import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
import { useFooterInfoLinks, useFooterNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'

const { myLayer }: any = useAppConfig()
const { t, locale } = useI18n()
const year = new Date().getFullYear()

const socialMedia = [
  {
    icon: LinkedinIcon,
    link: 'https://www.linkedin.com/company/adata-kz/?viewAsMember=true',
    name: 'Linkedin'
  },
  {
    icon: YouTubeIcon,
    link: 'https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured',
    name: 'YouTube'
  },
  {
    icon: InstagramIcon,
    link: 'https://www.instagram.com/adata.kz/?igshid=253i4qxg3els',
    name: 'Instagram'
  },
  {
    icon: TelegramIcon,
    link: 'https://t.me/adatakz_official',
    name: 'Telegram'
  },
  {
    icon: FaceBookIcon,
    link: 'https://www.facebook.com/adata.kz',
    name: 'Facebook'
  },
  {
    icon: TikTokIcon,
    link: 'https://www.tiktok.com/@adata.kz?lang=ru-RU',
    name: 'Tiktok'
  }
]

const info = useFooterInfoLinks()

const links = useFooterNavigationLinks()
</script>

<template>
  <div
    id="footer"
    class="bg-deepblue-900 dark:bg-gray-900 lg:pt-10"
  >
    <div class="a-container mobile-padding py-5 text-white">
      <adata-logo
        filled
        :font-controlled="false"
        class="mb-8 h-[26px] w-[92px] lg:hidden"
      />
      <div class="grid gap-5 lg:grid-cols-5 lg:gap-10 xl:grid-cols-6">
        <div
          v-for="(link, key) in links"
          :key="key"
        >
          <footer-accordion
            :content="link.items"
            :label="t(link.title)"
            :link="link.link.replace(/\/$/, '')"
          />
        </div>
      </div>
      <div class="flex grow justify-end gap-8 py-5">
        <nuxt-link
          v-for="(social, idx) in socialMedia"
          :key="idx"
          target="_blank"
          :to="social.link"
          :aria-label="social.name"
        >
          <component
            :is="social.icon"
            filled
            :font-controlled="false"
            class="social-icon h-[28px] w-[28px]"
          />
        </nuxt-link>
      </div>
    </div>
    <div class="relative">
      <div class="a-container mobile-padding py-5">
        <div
          class="flex flex-col gap-10 text-xs text-white before:absolute before:left-0 before:top-0 before:h-[0.5px] before:w-full before:bg-white lg:flex-row lg:items-center lg:gap-5"
        >
          <div class="flex flex-col gap-4 lg:flex-row lg:gap-6">
            <nuxt-link-locale
              v-for="(item, idx) in info"
              :key="idx"
              target="_blank"
              class="text-[10px]"
              :to="item.link"
            >
              {{ t(item.title) }}
            </nuxt-link-locale>
          </div>
          <div class="flex justify-center lg:grow lg:items-center lg:justify-end lg:gap-4">
            <div class="flex flex-col gap-1">
              <span>{{ year }} © {{ t('footer.LLP') }} "Alldata"</span>
            </div>
            <adata-logo
              filled
              :font-controlled="false"
              class="hidden h-[26px] w-[92px] lg:block"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
