<template>
  <UContainer
    class="mx-auto w-full max-w-[360px] px-[16px] sm:max-w-[768px] sm:px-[17px] md:max-w-[1000px] md:px-[24px] xl:max-w-[1920px] xl:px-[80px]"
  >
    <div class="">
      <div class="py-[75px] space-y-[30px] sm:space-y-[53px]">
        <h1 class="h1">
          {{ component.section_lang_data.title }}
        </h1>
        <div
          class="hidden h-[509px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 xl:block"
          :style="{
            backgroundImage: `url('/header-hero-desc.png')`,
          }"
        />
        <div
          class="h-[465px] w-full rounded-[20px] bg-cover bg-center transition-transform duration-300 group-hover:scale-105 sm:h-[509px] xl:hidden"
          :style="{
            backgroundImage: `url('/header-hero.png')`,
          }"
        />
        <div
          class="flex flex-col items-center space-y-[30px] sm:flex-row sm:items-start md:space-y-0 xl:items-center"
        >
          <h3 class="h4-uppercase sm:min-w-[45%]">
            {{ component.section_lang_data.title_second }}
          </h3>
          <div class="flex w-full items-start justify-center sm:justify-end">
            <ButtonArrow type="fill">{{ component.section_lang_data.button }}</ButtonArrow>
          </div>
        </div>
      </div>
    </div>
  </UContainer>
</template>

<script lang="ts" setup>
const props = defineProps<{ component: Component }>();
type Component = {
  image_collection: string;
  section_id: string;
  section_img: string;
  section_lang_data: {
    title: string;
    title_second: string;
    button: string;
  };
};
</script>