<template>
  <UiContainer
    class="flex flex-wrap items-center justify-between gap-[30px] sm:gap-y-[55px] xl:gap-y-[100px]"
  >
    <div
      class="w-full flex flex-col gap-[25px] xl:max-w-[48%] md:mx-10 xl:m-0"
      v-for="(item, index) in component.section_lang_data"
      :key="index"
    >
      <!-- 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>

      <div
        class="h-[235px] sm:h-[350px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block relative"
        :style="{
          backgroundImage: `url('/api/files/${component.image_collection}/${component.section_id}/${component.section_img[index]}?thumb=640x0')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
        }"
      >
        <div
          class="hidden sm:block absolute bottom-0 right-0 pt-2 pl-2 bg-bg-light dark:bg-bg-dark rounded-tl-2xl"
        >
          <UiButtonArrow :arrow="true">{{ item.title }}</UiButtonArrow>
        </div>
      </div>
      <UiButtonArrow :arrow="true" class="sm:hidden mx-auto">{{
        item.title
      }}</UiButtonArrow>
    </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"></div>
          <p>Partners</p>
        </div>
        <div class="flex items-center gap-2">
          <div class="w-3 h-3 rounded-[2.8px] bg-block"></div>
          <p>Customers</p>
        </div>
      </div>
    </div>
  </UiContainer>
</template>

<script lang="ts" setup>
type Component = {
  image_collection: string;
  section_id: string;
  section_img: string;
  section_lang_data: [
    {
      title: string;
      description: string;
      sub_title: string;
    }
  ];
};

defineProps<{
  component: Component;
}>();
</script>
