<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>
          <UiButtonArrow :arrow="true">
            {{ item.title }}
          </UiButtonArrow>
        </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
}>()
</script>
