<script lang="ts">
  import PaginationEl from '../../pagination/Pagination.svelte';
  import { onMount } from 'svelte';
  import Swiper from 'swiper';
  import 'swiper/css';
  import 'swiper/css/pagination';
  import { Pagination } from 'swiper/modules';
  import awards from '../../../assets/images/about/awards/awards.webp';
  import imgMobile from '../../../assets/images/about/awards/Awards_mobile.webp';
  import AIO_MEA23 from '../../../assets/images/about/awards/AIO_MEA23.webp';
  import AIO_MEA23SVG from '../../../assets/images/about/awards/AIO_MEA23.svg';
  import BWL_MEA23 from '../../../assets/images/about/awards/BWL_MEA23.webp';
  import BWL_MEA23SVG from '../../../assets/images/about/awards/BWL_MEA23.svg';
  import { t } from '$lib/translations';

  onMount(() => {
    const container: HTMLElement | null = document.querySelector('.block-awards__swiper');
    const pagination: HTMLElement | null = document.querySelector('.block-awards__pagination');

    if (!container || !pagination) return;

    new Swiper(container, {
      modules: [Pagination],
      spaceBetween: 40,
      pagination: {
        el: pagination,
        clickable: true,
      },
      breakpoints: {
        320: {
          slidesPerView: 1,
          spaceBetween: 24,
        },
        480: {
          slidesPerView: 2,
          spaceBetween: 24,
        },
        768: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        1366: {
          slidesPerView: 2,
          spaceBetween: 32,
        },
        1800: {
          slidesPerView: 2,
          spaceBetween: 41,
        },
      },
    });
  });
</script>

<div class="block-awards">
  <picture>
    <source srcset={imgMobile} media="(max-width: 767px)" />
    <img src={awards} alt="" class="block-awards__bg" />
  </picture>
  <div class="container">
    <div class="block-awards__wrapper">
      <div class="block-awards__content">
        <h2 class="block-awards__title">{$t('about.Awards')}</h2>
        <p class="block-awards__text">
          {$t('about.Discover our awards –')}<br /> {$t('about.proof of our hard work and innovation.')}
        </p>
      </div>
      <div class="block-awards__slider">
        <div class="swiper block-awards__swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="block-awards__slide">
                <img src={AIO_MEA23SVG} alt="" class="block-awards__logo" />
                <img src={AIO_MEA23} alt="" class="block-awards__img" />
              </div>
            </div>
            <div class="swiper-slide">
              <div class="block-awards__slide">
                <img src={BWL_MEA23SVG} alt="" class="block-awards__logo" />
                <img src={BWL_MEA23} alt="" class="block-awards__img" />
              </div>
            </div>
          </div>
        </div>
        <PaginationEl className="block-awards__pagination" theme="white" />
      </div>
    </div>
  </div>
</div>

<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .block-awards {
    height: 820px;
    position: relative;

    @include breakpoint-down('deskL') {
      height: 622px;
    }

    @include breakpoint-down('deskS') {
      height: 554px;
      overflow: hidden;
    }

    @include breakpoint-down('tabM') {
      height: 1028px;
    }

    &__bg {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      height: 100%;
      object-fit: cover;
      object-position: bottom;

      @include breakpoint-down('deskS') {
        width: 158%;
        z-index: 0;
        left: 50%;
        transform: translateX(-50%);
      }

      @include breakpoint-down('tabM') {
        width: 103%;
        object-position: top;
      }
    }

    &__wrapper {
      display: flex;
      justify-content: space-between;

      @include breakpoint-down('deskS') {
        gap: 20px;
      }

      @include breakpoint-down('tabM') {
        flex-wrap: wrap;
        gap: 40px;
      }
    }

    &__content {
      max-width: 480px;
      padding-top: 138px;

      @include breakpoint-down('deskL') {
        max-width: 417px;
        padding-top: 76px;
      }

      @include breakpoint-down('deskS') {
        padding-top: 44px;
      }

      @include breakpoint-down('tabM') {
        width: 100%;
        padding-top: 40px;
      }
    }

    &__title {
      @include titleXL;

      margin-bottom: 24px;
      color: $techWhite;

      @include breakpoint-down('deskL') {
        margin-bottom: 16px;
      }

      @include breakpoint-down('deskS') {
        margin-bottom: 8px;
      }

      @include breakpoint-down('tabM') {
        text-align: center;
      }
    }

    &__text {
      color: $techWhite;

      @include breakpoint-down('tabM') {
        text-align: center;
      }

      br {
        @include breakpoint-down('tabM') {
          display: none;
        }
      }
    }

    &__slider {
      max-width: 680px;
      padding-top: 88px;

      @include breakpoint-down('deskL') {
        max-width: 544px;
        padding-top: 62px;
      }

      @include breakpoint-down('deskS') {
        width: 65.7%;
        max-width: none;
        padding-top: 44px;
      }

      @include breakpoint-down('tabM') {
        padding-top: 0;
        margin-left: -20px;
        width: calc(100% + 40px);
      }
    }

    &__swiper {
      @include breakpoint-down('tabM') {
        padding: 0 80px;
      }
    }

    &__slide {
      border-radius: 16px;
      border: 1px solid rgba(255, 255, 255, 0.2);
      background: linear-gradient(180deg, rgba(248, 119, 119, 0.22) 0%, rgba(37, 91, 172, 0.02) 100%);
      backdrop-filter: blur(20px);
      padding-top: 34px;

      @include breakpoint-down('deskL') {
        padding-top: 32px;
      }

      @include breakpoint-down('deskS') {
        padding-top: 24px;
      }
    }

    &__logo {
      height: auto;
      max-width: 205px;
      margin-bottom: 9px;
      margin-inline: auto;

      @include breakpoint-down('deskL') {
        max-width: 169px;
        margin-bottom: 0;
      }

      @include breakpoint-down('deskS') {
        max-width: 131px;
      }
    }

    &__img {
      height: auto;
      max-width: 176px;
      margin-inline: auto;

      @include breakpoint-down('deskL') {
        max-width: 141px;
      }

      @include breakpoint-down('deskS') {
        max-width: 110px;
      }
    }

    & :global(.block-awards__pagination) {
      padding-top: 24px;
    }
  }
</style>