<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 img1 from '../../../assets/images/trading-platform/build/brand1.webp';
  import img2 from '../../../assets/images/trading-platform/build/brand2.webp';
  import img3 from '../../../assets/images/trading-platform/build/brand3.webp';
  import img4 from '../../../assets/images/trading-platform/build/brand4.webp';
  import { t } from '$lib/translations';

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

    if (!container || !pagination) return;

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

<div class="block-build">
  <div class="container">
    <p class="block-build__subtitle">{$t('trading-platform.White-label')}</p>
    <p class="block-build__title">{$t('trading-platform.Build the solution you have in mind')}</p>
    <p class="block-build__text">
      {$t("trading-platform.Create a bold and unique brand for your brokerage business, setting everything from color scheme to typography with a few clicks. Offer your clients the smooth and elegant trading experience they'll keep returning to.")}
    </p>
    <div class="swiper block-build__swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="block-build__item">
            <div class="block-build__itemImage">
              <img src={img1} alt="" loading="lazy" />
            </div>
            <div class="block-build__itemContent">
              <p class="block-build__itemSubtitle">{$t('trading-platform.Essentials')}</p>
              <p class="block-build__itemTitle">{$t("trading-platform.Brand Identity *")}</p>
              <p class="block-build__itemText">{$t("trading-platform.Set your broker's logo, favicon, background and even more.")}</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="block-build__item">
            <div class="block-build__itemImage">
              <img src={img2} alt="" loading="lazy" />
            </div>
            <div class="block-build__itemContent">
              <p class="block-build__itemSubtitle">{$t('trading-platform.Skin presets')}</p>
              <p class="block-build__itemTitle">{$t('trading-platform.Color scheme')}</p>
              <p class="block-build__itemText">{$t('trading-platform.Choose one of the 4 pre-designed interface themes or set up your own.')}</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="block-build__item">
            <div class="block-build__itemImage">
              <img src={img3} alt="" loading="lazy" />
            </div>
            <div class="block-build__itemContent">
              <p class="block-build__itemSubtitle">{$t('trading-platform.Style')}</p>
              <p class="block-build__itemTitle">{$t('trading-platform.Iconography')}</p>
              <p class="block-build__itemText">{$t('trading-platform.Personalize your brand with choosing the right set of icons.')}</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="block-build__item">
            <div class="block-build__itemImage">
              <img src={img4} alt="" loading="lazy" />
            </div>
            <div class="block-build__itemContent">
              <p class="block-build__itemSubtitle">{$t('trading-platform.Texts')}</p>
              <p class="block-build__itemTitle">{$t('trading-platform.Typography')}</p>
              <p class="block-build__itemText">{$t('trading-platform.Customize the font and its settings to match your brand guidelines.')}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <PaginationEl className="block-build__pagination" />
    <!-- <p class="block-build__last">
      {$t('trading-platform.Our experienced design team is also ready to help you make the most of your brand.')}
      <a href={'javascript:void(0);'} class="block-build__link">{$t('trading-platform.Find out more >')}</a>
    </p> -->
  </div>
</div>

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

  .block-build {
    background: $techBlue2;
    padding-top: 110px;
    padding-bottom: 140px;
    width: 100%;
    overflow: hidden;

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

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

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

    &__subtitle {
      @include smallDefault;

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

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

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

    &__title {
      @include titleL;

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

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

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

    &__text {
      @include smallDefault;

      width: 100%;
      max-width: 680px;

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

    &__swiper {
      padding-top: 65px;
      padding-bottom: 40px;
      overflow: unset;

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

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

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

    &__item {
      overflow: hidden;
      border-radius: 16px;
      background: $techWhite;

      @include breakpoint-down('deskS') {
        border-radius: 8px;
      }
    }

    &__itemImage {
      width: 100%;
      height: 365px;

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

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

      img {
        height: 100%;
        object-fit: cover;
        object-position: top;
      }
    }

    &__itemContent {
      padding: 25px 40px 68px;

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

      @include breakpoint-down('deskS') {
        padding: 19px 30px;
      }
    }

    &__itemSubtitle {
      @include smallDefault;

      color: $techBlueSecondary;
      margin-bottom: 20px;

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

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

    &__itemTitle {
      @include titleM;

      margin-bottom: 8px;

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

    &__itemText {
      @include smallDefault;
    }

    &__last {
      @include smallDefault;

      color: $techBlueSecondary;
      padding-left: 40px;

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

      @include breakpoint-down('deskS') {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
      }
    }

    &__link {
      @include smallCTA;

      color: $linkPrimary;

      @include breakpoint-down('deskL') {
        margin-left: 17px;
      }

      @include breakpoint-down('deskS') {
        margin-left: 0;
        margin-top: 4px;
      }
    }

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

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

      @include breakpoint-down('tabM') {
        margin-bottom: 26px;
      }
    }
  }
</style>