<template>
  <div class="border-t border-border pt-[75px]">
    <UiContainer class="flex flex-col gap-24">
      <div class="grid sm:grid-cols-2 sm:gap-[75px] xl:gap-0 xl:grid-flow-col auto-cols-max justify-between">
        <div
          v-for="(item, index) in menuStore.footerItems?.items[0].data"
          :key="index"
          class="flex flex-col gap-7 max-w-[280px]"
        >
          <h3 class="h4-uppercase">{{ item.title }}</h3>
          <div
            class="text-inter cursor-pointer hover:text-text-light/80 dark:hover:text-text-dark/70 transition-all"
            v-for="(el, indexEl) in item.items"
            :key="indexEl"
          >
            {{ el }}
          </div>
        </div>
      </div>

      <img
        class="w-[70%] sm:w-[50%] xl:w-[30%]"
        src="/public/logo-footer.svg"
        alt="logo-footer"
      />
    </UiContainer>
  </div>
</template>

<script lang="ts" setup>
const menuStore = useMenuStore();
</script>
