<template>
  <div class="border-t border-border pt-[75px]">
    <UiContainer class="flex flex-col gap-24">
      <div
        class="grid grid-cols-1 md:grid-cols-2 gap-[75px] xl:gap-0 xl:grid-cols-none xl:grid-flow-col auto-cols-max justify-between">
        <div class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
          <div v-for="(item, key) in contact" :key="key">
            <h3 v-if="key == 'header'" class="h4-uppercase-bold-inter">
              {{ item }}
            </h3>
            <div v-else class="transition-all text-inter">
              {{ item }}
            </div>
          </div>
          <a href="/lei_certificate_aurrie.pdf" target="_blank" rel="noopener noreferrer">{{ $t("footer_lei") }}</a>
        </div>

        <div v-for="(section, index) in docs" :key="index" class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">
          <h3 class="h4-uppercase-bold-inter">
            {{ section.translation }}
          </h3>
          <div v-for="(item, key) in section.data" :key="key">
            <div class="cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all text-inter">
              <a target="_blank" :href="`/api/public/document/${item.name}`">{{
                item.translation
              }}</a>
            </div>
          </div>
        </div>
      </div>

      <ClientOnly v-if="!colorMode?.forced">
        <img class="cursor-pointer w-[70%] sm:w-[50%] xl:w-[30%]"
             :src="isDark ? '/logo-footer-dark.svg' : '/logo-footer.svg'" alt="logo" @click="menuStore.navigateToItem()">
      </ClientOnly>
    </UiContainer>
  </div>
</template>

<script lang="ts" setup>
import type { GenericResponse, Footer } from '~/types'

const menuStore = useMenuStore()
const colorMode = useColorMode()

const { data } = await useMyFetch<GenericResponse<Footer>>(
  '/api/public/front/footer',
  {},
)

const contact = ref(data.data.contact)
const docs = ref(data.data.docs)

const isDark = computed(() => colorMode.value === 'dark')
</script>
