<script lang="ts">
  import oneClick from '../../../assets/images/main/platform/one-click.svg';
  import multiplier from '../../../assets/images/main/platform/multiplier.svg';
  import charts from '../../../assets/images/main/platform/9-charts.svg';
  import indicators from '../../../assets/images/main/platform/indicators.svg';
  import tournaments from '../../../assets/images/main/platform/tournaments.svg';
  import tradingPlatform from '../../../assets/images/main/platform/Trading_Platform.webp';
  import tradingPlatformMob from '../../../assets/images/main/platform/Trading_Platform_mob.webp';

  import AIO_MEA23PNG from '../../../assets/images/main/platform/awards/AIO_MEA23.webp';
  import AIO_MEA23SVG from '../../../assets/images/main/platform/awards/AIO_MEA23.svg';
  import BWL_MEA23PNG from '../../../assets/images/main/platform/awards/BWL_MEA23.webp';
  import BWL_MEA23SVG from '../../../assets/images/main/platform/awards/BWL_MEA23.svg';

  import Button from '../../button/Button.svelte';
  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 { localeLink, t } from '$lib/translations';

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

    if (!container || !pagination) return;

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

<div class="block-platform">
  <div class="container">
    <div class="block-platform-awards">
      <div class="block-platform-awards__content">
        <p class="block-platform-awards__title">{$t('Awards')}</p>
        <p class="block-platform-awards__text">
          {@html $t('Quadcode is a recognized leader as an award-winning white label brokerage solution provider. Our expertise and innovation makes us a trusted choice for businesses entering the brokerage industry.')}
        </p>
      </div>
      <div class="block-platform-awards__slider">
        <div class="swiper block-platform-awards__swiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="block-platform-awards__slide">
                <img src={BWL_MEA23SVG} alt="" class="block-platform-awards__logo" loading="lazy" />
                <img src={BWL_MEA23PNG} alt="" class="block-platform-awards__img" loading="lazy" />
              </div>
            </div>
            <div class="swiper-slide">
              <div class="block-platform-awards__slide">
                <img src={AIO_MEA23SVG} alt="" class="block-platform-awards__logo" loading="lazy" />
                <img src={AIO_MEA23PNG} alt="" class="block-platform-awards__img" loading="lazy" />
              </div>
            </div>
          </div>
        </div>
        <PaginationEl className="block-platform-awards__pagination" />
      </div>
    </div>
    <p class="block-platform__title">{@html $t('Next-Generation Trading Platform')}</p>
    <p class="block-platform__subtitle">
      {@html $t('Provide your traders smooth and seamless trading experience with state of art trading platform')}
    </p>
    <div class="block-platform__list">
      <div class="block-platform__listItem">
        <img src={oneClick} alt="" class="block-platform__listItemIcon" loading="lazy" />
        <p class="block-platform__listItemText">{@html $t('One-click trading')}</p>
      </div>
      <div class="block-platform__listItem">
        <img src={multiplier} alt="" class="block-platform__listItemIcon" loading="lazy" />
        <p class="block-platform__listItemText">{@html $t('Leverage trading')}</p>
      </div>
      <div class="block-platform__listItem">
        <img src={charts} alt="" class="block-platform__listItemIcon" loading="lazy" />
        <p class="block-platform__listItemText">
          {@html $t('Up to 9 charts to display')}
        </p>
      </div>
      <div class="block-platform__listItem">
        <img src={indicators} alt="" class="block-platform__listItemIcon" loading="lazy" />
        <p class="block-platform__listItemText">{@html $t('100+ indicators')}</p>
      </div>
      <div class="block-platform__listItem">
        <img src={tournaments} alt="" class="block-platform__listItemIcon" loading="lazy" />
        <p class="block-platform__listItemText">{@html $t('Tournaments')}</p>
      </div>
    </div>
    <Button text={$t('Learn more')} className="block-platform__button" link="{localeLink()}/trading-platform" />
    <picture>
      <source srcset="{tradingPlatformMob}" media="(max-width: 767px)">
      <img src={tradingPlatform} alt="trading platform" class="block-platform__image" loading="lazy" />
    </picture>

  </div>
</div>

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

  .block-platform {
    padding: 110px 0 0;
    background: linear-gradient(0deg, #1e232a 0%, #101318 100%);

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

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

    @include breakpoint-down('tabM') {
      padding-top: 38px;
      overflow: hidden;
    }

    &__title {
      @include titleXL;

      color: $techWhite;
      text-align: center;
      max-width: 920px;
      width: 100%;
      margin-inline: auto;
      margin-bottom: 24px;

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

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

      > span {
        color: $redPrimary;
      }
    }

    &__subtitle {
      width: 100%;
      max-width: 560px;
      margin-inline: auto;
      text-align: center;
      margin-bottom: 44px;
      color: $techWhite;

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

      @include breakpoint-down('deskS') {
        max-width: 445px;
        margin-bottom: 24px;
      }

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

    &__list {
      width: 100%;
      max-width: 1160px;
      margin-inline: auto;
      display: flex;
      align-items: flex-start;
      gap: 40px;
      margin-bottom: 64px;

      @include breakpoint-down('deskL') {
        max-width: 928px;
        gap: 32px;
        margin-bottom: 80px;
      }

      @include breakpoint-down('deskS') {
        flex-wrap: wrap;
        gap: 20px;
        row-gap: 24px;
        justify-content: center;
        margin-bottom: 40px;
      }
    }

    &__listItem {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;

      @include breakpoint-down('deskS') {
        width: calc((100% - 20px * 2) / 3);
        flex: none;
      }

      @include breakpoint-down('tabM') {
        width: calc((100% - 20px) / 2);
      }
    }

    &__listItemIcon {
      width: 90px;
      height: 90px;

      @include breakpoint-down('deskS') {
        width: 70px;
        height: 70px;
      }
    }

    &__listItemText {
      @include baseTitle;

      text-align: center;
      color: $techWhite;

      > span {
        font-weight: 400;
      }
    }

    & :global(.block-platform__button) {
      @include baseCTA;

      margin-inline: auto;
      padding: 12px 50px;
    }

    &__image {
      @include breakpoint-down('deskS') {
        width: calc(100% + 40px * 2);
        margin-left: -40px;
      }

      @include breakpoint-down('tabM') {
        width: calc((100% + 83px * 2));
        margin-left: -83px;
      }
    }
  }

  .block-platform-awards {
    margin-bottom: 172px;
    display: flex;
    align-items: flex-start;
    gap: 40px;

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

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

    @include breakpoint-down('tabM') {
      flex-direction: column;
      gap: 30px;
    }

    &__content {
      max-width: 440px;
      width: 100%;

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

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

      @include breakpoint-down('tabM') {
        max-width: none;
      }
    }

    &__title {
      @include titleXL;

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

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

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

    &__text {
      @include smallDefault;

      color: $techWhite;

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

    &__slider {
      width: calc(100% - (440px + 40px));

      @include breakpoint-down('deskL') {
        width: calc(100% - (352px + 32px));
      }

      @include breakpoint-down('deskS') {
        width: calc(100% - (219px + 20px));
      }

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

    &__swiper {
      width: 100%;

      @include breakpoint-down('tabM') {
        padding: 0 63px;
        margin-bottom: 31px;
      }
    }

    &__slide {
      width: 100%;
      position: relative;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(248, 251, 253, 0.1) 0%, rgba(248, 251, 253, 0.02) 100%);
      padding-top: 70px;

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

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

      @include breakpoint-down('tabM') {
        padding-top: 63px;
      }
    }

    &__logo {
      position: absolute;
      top: 48px;
      left: 50%;
      transform: translateX(-50%);
      max-width: 260px;

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

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

      @include breakpoint-down('tabM') {
        max-width: 220px;
        top: 38px;
      }
    }

    &__img {
      position: relative;
      left: 50%;
      transform: translateX(-50%);
      max-width: 199px;

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

      @include breakpoint-down('tabM') {
        max-width: 153px;
      }
    }
  }

  :global(.block-platform__title span) {
    color: $redPrimary;
  } :global(.block-platform__listItemText span) {
    font-weight: 400;
  }
</style>