<template>
  <UiContainer class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px]">
    <div v-for="(item, index) in component.front_section_lang[0].data" :key="index"
         class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0">
      <!-- xl -->
      <div class="hidden xl:flex xl:h-[330px] flex-col justify-between">
        <div class="space-y-[55px]">
          <h2 class="h2-bold-bounded">
            {{ item.title }}
          </h2>
          <p>{{ item.description }}</p>
        </div>
        <h4 class="h4-uppercase-bold-inter">
          {{ item.sub_title }}
        </h4>
      </div>

      <!-- sm/md -->
      <div class="xl:hidden flex flex-col gap-y-[25px] sm:gap-y-[55px]">
        <h2 class="h2-bold-bounded">
          {{ item.title }}
        </h2>
        <p>{{ item.description }}</p>
        <h4 class="h4-uppercase-bold-inter">
          {{ item.sub_title }}
        </h4>
      </div>
      <UiImgWrapper :src="`/api/public/file/${component.img[index]}_l.webp`">
        <template #button>
          <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: linksInfo[index].id, slug: linksInfo[index].slug } }">
            <UiButtonArrow :arrow="true">
              {{ item.title }}
            </UiButtonArrow>
          </nuxt-link>
        </template>
      </UiImgWrapper>
    </div>

    <!-- Map block with same layout rules -->
    <div class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center">
      <h1 class="text-sm sm:text-xl uppercase">
        Jsme tu pro vás napříč Evropou
      </h1>
      <MapBlock />
      <div class="flex items-center gap-4 w-full justify-end">
        <div class="flex items-center gap-2">
          <div class="w-3 h-3 rounded-[2.8px] bg-button" />
          <p>Partners</p>
        </div>
        <div class="flex items-center gap-2">
          <div class="w-3 h-3 rounded-[2.8px] bg-block" />
          <p>Customers</p>
        </div>
      </div>
    </div>
  </UiContainer>
</template>

<script lang="ts" setup>
type Component = {
  id: number
  name: string
  img: string[]
  component_name: string
  is_no_lang: boolean
  page_name: string
  front_section_lang: {
    data: {
      title: string
      description: string
      sub_title: string
    }[]
    id_front_section: number
    id_lang: number
  }[]
}

defineProps<{
  component: Component
}>()

const menuStore = useMenuStore()

const linksInfo = ref([
  {
    id: menuStore.getInvestitionMenu()?.id,
    slug: menuStore.getInvestitionMenu()?.front_menu_lang.at(0)?.link_rewrite,
  },
  {
    id: menuStore.getAboutGoldMenu()?.id,
    slug: menuStore.getAboutGoldMenu()?.front_menu_lang.at(0)?.link_rewrite,
  },
  {
    id: menuStore.getBusinessMenu()?.id,
    slug: menuStore.getBusinessMenu()?.front_menu_lang.at(0)?.link_rewrite,
  },
  {
    id: menuStore.getAboutUsMenu()?.id,
    slug: menuStore.getAboutUsMenu()?.front_menu_lang.at(0)?.link_rewrite,
  },
  {
    id: menuStore.getContactMenu()?.id,
    slug: menuStore.getContactMenu()?.front_menu_lang.at(0)?.link_rewrite,
  },
])
</script>
