<script lang="ts">
  import black from '../../../assets/images/main/hero/HomePage_1st_NEW_black.webp';
  import white from '../../../assets/images/main/hero/HomePage_1st_NEW_white2.webp';
  import blue from '../../../assets/images/main/hero/HomePage_1st_NEW_blue.webp';

  import { onMount } from 'svelte';
  import Swiper from 'swiper';
  import 'swiper/css';
  import 'swiper/css/autoplay';
  import { Autoplay, Pagination } from 'swiper/modules';
  import PaginationEl from '../../pagination/Pagination.svelte';
  import { loadEvent, popupForm } from '../../../store';
  import loadObserver from '../../../utils/loadObserver';

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

    if (!container) return;

    new Swiper(container, {
      modules: [Autoplay],
      loop: true,
      observer: true,
      observeParents: true,
      centeredSlides: true,
      initialSlide: 1,
      speed: 1000,
      autoplay: {
        disableOnInteraction: false,
        stopOnLastSlide: false,
        delay: 3000,
      },
      spaceBetween: 0,
      breakpoints: {
        320: {
          slidesPerView: 1,
        },
        480: {
          slidesPerView: 1,
        },
        768: {
          slidesPerView: 1.63,
        },
        1366: {
          slidesPerView: 1.64,
        },
        1800: {
          slidesPerView: 1.8,
        },
      },
    });
  });

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

    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: 3,
          spaceBetween: 20,
        },
        1366: {
          slidesPerView: 3,
          spaceBetween: 32,
        },
        1800: {
          slidesPerView: 3,
          spaceBetween: 40,
        },
      },
    });
  });

  loadEvent.set(false);

  const onload = loadObserver(() => {
    loadEvent.set(true);
  });
</script>

<div class="block-hero">
  <div class="container">
    <h1 class="block-hero__title">
      <span>READY TO GO SOLUTION</span> <br />
      FOR LAUNCHING YOUR OWN <br />
      BROKERAGE BRAND
    </h1>
  </div>
  <div class="swiper block-hero__swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img use:onload src={white} alt="" />
      </div>
      <div class="swiper-slide">
        <img use:onload src={blue} alt="" />
      </div>
      <div class="swiper-slide">
        <img use:onload src={black} alt="" />
      </div>
      <div class="swiper-slide">
        <img src={white} alt="" />
      </div>
      <div class="swiper-slide">
        <img src={blue} alt="" />
      </div>
      <div class="swiper-slide">
        <img src={black} alt="" />
      </div>
    </div>
  </div>
  <div class="block-hero__list">
    <div class="swiper block-hero__listSwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="block-hero__listItem">
            <div class="block-hero__listItemNumber">200+</div>
            <div class="block-hero__listItemTitle">Team Members</div>
            <div class="block-hero__listItemText">
              Quadcode boasts a team of over 200 highly skilled coders, engineers, and fintech experts. This extensive
              team brings diverse expertise and knowledge to every project, ensuring the development of top-notch
              trading software solutions.
            </div>
            <a href="https://jobs.quadcode.com/" target="_blank" class="block-hero__listItemButton">Join the team</a>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="block-hero__listItem">
            <div class="block-hero__listItemNumber">10+</div>
            <div class="block-hero__listItemTitle">Years of Expertise</div>
            <div class="block-hero__listItemText">
              With more than 10 years of industry experience, Quadcode has honed its skills and knowledge in the trading
              software domain. This extensive expertise enables us to stay ahead of industry trends and deliver
              cutting-edge solutions to our clients.
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="block-hero__listItem">
            <div class="block-hero__listItemNumber">20+</div>
            <div class="block-hero__listItemTitle">Launched Brokers in 2023</div>
            <div class="block-hero__listItemText">
              Quadcode has successfully launched over 20 brokers that operate worldwide. This track record demonstrates
              our ability to deliver effective solutions and provide brokers with the necessary tools to thrive in the
              global market.
            </div>
            <div
              class="block-hero__listItemButton"
              on:click={() => popupForm.set(true)}
              on:keydown={(event) => {
                if (event.key === 'Escape') {
                  popupForm.set(false);
                }
              }}
              role="button"
              tabindex="0"
            >
              Launch your broker
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <PaginationEl className="block-hero__listPagination" />
</div>

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

  .block-hero {
    padding: 191px 0 100px;
    background: linear-gradient(180deg, #f4f9fb 0%, #fafdff 27.6%, #f0f4f7 100%);
    overflow: hidden;
    width: 100%;

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

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

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

    &__title {
      @include titleXXL;

      font-weight: 800;
      text-transform: uppercase;
      margin-inline: auto;
      text-align: center;
      color: rgba(48, 65, 81, 1);

      @include breakpoint-down('deskL') {
        font-size: 56px;
        line-height: 62px;
        margin-bottom: 4px;
      }

      @include breakpoint-down('deskS') {
        font-size: 40px;
        line-height: 44px;
        margin-bottom: 0;
      }

      @include breakpoint-down('tabM') {
        font-size: 28px;
        line-height: 31px;
      }

      > span {
        color: $redPrimary;
      }

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

    &__swiper {
      max-width: 1800px;
      overflow: unset;

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

    .swiper-slide {
      > img {
        position: relative;
        width: 1400px;
        height: 1022px;
        left: 50%;
        transform: translateX(-50%);

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

        @include breakpoint-down('deskS') {
          width: 147%;
          height: auto;
        }

        @include breakpoint-down('tabM') {
          width: 150%;
        }
      }
    }

    .swiper-wrapper {
      transition: 1s cubic-bezier(0.65, 0.05, 0.36, 1);
    }

    &__list {
      width: 100%;
      max-width: 1560px;
      margin-inline: auto;
      padding: 80px 79px;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(20px);
      margin-top: -306px;
      position: relative;
      z-index: 1;

      @include breakpoint-down('deskL') {
        max-width: 1260px;
        padding: 53px 70px;
        margin-top: -244px;
      }

      @include breakpoint-down('deskS') {
        margin-top: -119px;
        padding: 61px 40px;
      }

      @include breakpoint-down('tabM') {
        margin-top: -117px;
        padding: 56px 20px;
        margin-bottom: 27px;
      }
    }

    &__listItem {
      flex: 1;

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

    &__listItemNumber {
      @include titleXXL;

      font-family: $Inter;
      font-weight: 800;
      color: $redPrimary;
      display: flex;
      align-items: center;

      @include breakpoint-down('deskL') {
        font-size: 64px;
        line-height: 70px;
        margin-bottom: 16px;
      }

      @include breakpoint-down('deskS') {
        font-size: 48px;
        line-height: 52px;
        margin-bottom: 8px;
      }
    }

    &__listItemTitle {
      @include titleM;

      margin-bottom: 8px;

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

    &__listItemText {
      @include smallDefault;

      color: $techBluePrimary;

      @include breakpoint-down('deskS') {
        flex: 1;
      }
    }

    &__listItemButton {
      @include smallCTA;

      display: block;
      margin-top: 26px;
      border-radius: 40px;
      background: $fontPrimary;
      color: $techWhite;
      cursor: pointer;
      padding: 8px 24px;
      width: max-content;

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

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

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