<script lang="ts">
  import { onMount } from 'svelte';
  import Swiper from 'swiper';
  import 'swiper/css';
  import 'swiper/css/grid';
  import 'swiper/css/pagination';
  import { Grid, Pagination } from 'swiper/modules';

  import PaginationEl from '../../pagination/Pagination.svelte';

  import img1 from '../../../assets/images/turnkey-solution/advantages-1.svg';
  import img2 from '../../../assets/images/turnkey-solution/advantages-2.svg';
  import img3 from '../../../assets/images/turnkey-solution/advantages-3.svg';
  import img4 from '../../../assets/images/turnkey-solution/advantages-4.svg';
  import { t } from '$lib/translations';

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

    if (container && pagination) {
      new Swiper(container, {
        modules: [Pagination, Grid],
        spaceBetween: 40,
        pagination: {
          el: pagination,
          clickable: true,
        },
        breakpoints: {
          320: {
            slidesPerView: 1,
            spaceBetween: 15,
          },
          480: {
            slidesPerView: 2,
            spaceBetween: 15,
          },
          768: {
            slidesPerView: 3,
            spaceBetween: 20,
            grid: {
              rows: 1,
              fill: 'row',
            },
          },
          1366: {
            slidesPerView: 4,
            spaceBetween: 32,
            grid: {
              rows: 1,
              fill: 'row',
            },
          },
          1800: {
            slidesPerView: 4,
            spaceBetween: 40,
            grid: {
              rows: 1,
              fill: 'row',
            },
          },
        },
      });
    }
  });
</script>

<div class="block-advantages">
  <div class="container">
    <div class="block-advantages__wrapper">
      <div class="swiper block-advantages__swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="block-advantages__item">
              <div class="block-advantages__icon">
                <img src={img1} alt="" loading="lazy" />
              </div>
              <p class="block-advantages__title">{$t('turnkey-solution.Fast Deployment')}</p>
              <p class="block-advantages__subtitle">{$t('turnkey-solution.Get your broker ready in as less as 2 weeks')}</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="block-advantages__item">
              <div class="block-advantages__icon">
                <img src={img2} alt="" loading="lazy" />
              </div>
              <p class="block-advantages__title">{$t('turnkey-solution.Mobile App')}</p>
              <p class="block-advantages__subtitle">{$t('turnkey-solution.A top-notch mobile app or iOS and Android')}</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="block-advantages__item">
              <div class="block-advantages__icon">
                <img src={img3} alt="" loading="lazy" />
              </div>
              <p class="block-advantages__title">{$t('turnkey-solution.Zero Extra Fees')}</p>
              <p class="block-advantages__subtitle">{$t('turnkey-solution.No hidden fees, pay once for a comprehensive solution')}</p>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="block-advantages__item">
              <div class="block-advantages__icon">
                <img src={img4} alt="" loading="lazy" />
              </div>
              <p class="block-advantages__title">{$t('turnkey-solution.Ready To Go')}</p>
              <p class="block-advantages__subtitle">{$t('turnkey-solution.All in one solution for launching white label brokerage')}</p>
            </div>
          </div>
        </div>
      </div>
      <PaginationEl className="block-advantages__pagination" />
    </div>
  </div>
</div>

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

  .block-advantages {
    padding: 138px 0;

    @include breakpoint-down('deskL') {
      padding: 126px 0;
    }

    @include breakpoint-down('deskS') {
      padding: 64px 0;
    }

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

    &__wrapper {
      width: 100%;
    }

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

      @include breakpoint-down('tabM') {
        margin-bottom: 41px;
      }
    }

    &__item {
      width: 100%;
    }

    &__icon {
      width: 80px;
      height: 80px;
      margin-bottom: 8px;

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

      @include breakpoint-down('tabM') {
        width: 69px;
        height: 69px;
        margin-inline: auto;
        margin-bottom: 11px;
      }
    }

    &__title {
      @include titleM;

      color: $redPrimary;
      margin-bottom: 8px;

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

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

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

    &__subtitle {
      @include breakpoint-down('tabM') {
        max-width: 210px;
        margin-inline: auto;
        text-align: center;
      }
    }

    & :global(.block-advantages__pagination) {
      display: none;

      @include breakpoint-down('deskS') {
        display: flex;
      }
    }
  }
</style>