<script lang="ts">
  import img1 from '../../../assets/images/turnkey-solution/services/payment-gates.svg';
  import img2 from '../../../assets/images/turnkey-solution/services/trading-platform.svg';
  import img3 from '../../../assets/images/turnkey-solution/services/back-office.svg';
  import img4 from '../../../assets/images/turnkey-solution/services/dealing-desk.svg';
  import img5 from '../../../assets/images/turnkey-solution/services/risk-management.svg';
  import img6 from '../../../assets/images/turnkey-solution/services/client-support.svg';
  import billing from '../../../assets/images/turnkey-solution/services/Billing_Services.webp';
  import tp from '../../../assets/images/turnkey-solution/services/TP_Services.webp';
  import backOffice from '../../../assets/images/turnkey-solution/services/BackOffice_Services.webp';
  import dealing from '../../../assets/images/turnkey-solution/services/Dealing.webp';
  import risk from '../../../assets/images/turnkey-solution/services/Risk_Services.webp';
  import chats from '../../../assets/images/turnkey-solution/services/Chats.webp';
  import Button from '../../button/Button.svelte';
  import { locale, localeLink, t } from '$lib/translations';

  let active = 1;
  let animation = false;
  let stop = true;
  let disabled = false;

  const handleClick = (id: number) => {
    animation = true;
    disabled = true;
    stop = false;

    const timeout = setTimeout(() => {
      active = id;
      animation = false;

      clearTimeout(timeout);
    }, 300);

    const timeoutStop = setTimeout(() => {
      stop = true;

      clearTimeout(timeoutStop);
    }, 600);

    const timeoutDisabled = setTimeout(() => {
      disabled = false;

      clearTimeout(timeoutDisabled);
    }, 900);
  };

  const renderContent = (id: number) => {
    switch (id) {
      case 1:
        return {
          text: $t('turnkey-solution.Get access to 100+ PSP out of the box with our flexible and hassle-free billing system.'),
          img: billing,
          link: `${localeLink()}/back-office#billing`,
        };
      case 2:
        return {
          text: $t("turnkey-solution.This client-facing module provides an intuitive trading environment with an array of investment tools and over 250 assets to trade on. It's available on web, desktop, and mobile (iOS, Android) platforms, ensuring a seamless trading experience no matter where your clients are."),
          img: tp,
          link: `${localeLink()}/trading-platform`,  
        };
      case 3:
        return {
          text: $t('turnkey-solution.Manage your traders, admins and affiliates in one place with ease. Powerful CRM, comprehensive ticket support system, pre-integrated KYC providers and even more within single back office solution.'),
          img: backOffice,
          link: `${localeLink()}/back-office`,        
        };
      case 4:
        return {
          text: $t('turnkey-solution.Set aside dealing and concentrate solely on user acquisition. We handle execution on our side letting you to focus on your business goals.'),
          img: dealing,
          link: `${localeLink()}/back-office#dealing`,
        };
      case 5:
        return {
          text: $t('turnkey-solution.Forget about risk managements. Make sure your platform safe and secure with robust security policies, constant fraud monitoring and management.'),
          img: risk,
          link: `${localeLink()}/back-office#reports`,
        };
      case 6:
        return {
          text: $t("turnkey-solution.Manage your clients' request with robust ticket support system and increase customer satisfaction."),
          img: chats,
          link: `${localeLink()}/back-office#chats`,
        };
      default:
        return {
          text: '',
          img: '',
        };
    }
  };
</script>

<div class="block-services">
  <div class="container">
    <div class="block-services__wrapper">
      <p class="block-services__title">{$t('turnkey-solution.All services for brokers in one place')}</p>
      <div class="block-services__header {disabled ? 'animation' : ''}">
        <div class="block-services__headerScroll">
          <div
            class="block-services__headerItem {active === 1 ? 'active' : ''}"
            on:click={() => handleClick(1)}
            on:keydown={() => undefined}
            role="tab"
            tabindex="0"
            aria-label="tab"
          >
            <img src={img1} alt="" class="block-services__headerItemIcon" loading="lazy" />
            <p class="block-services__headerItemText">{$t('turnkey-solution.Payment Gates')}</p>
          </div>
          <div
            class="block-services__headerItem {active === 2 ? 'active' : ''}"
            on:click={() => handleClick(2)}
            on:keydown={() => undefined}
            role="tab"
            tabindex="0"
            aria-label="tab"
          >
            <img src={img2} alt="" class="block-services__headerItemIcon" loading="lazy" />
            <p class="block-services__headerItemText">{$t('turnkey-solution.Trading Platform')}</p>
          </div>
          <div
            class="block-services__headerItem {active === 3 ? 'active' : ''}"
            on:click={() => handleClick(3)}
            on:keydown={() => undefined}
            role="tab"
            tabindex="0"
            aria-label="tab"
          >
            <img src={img3} alt="" class="block-services__headerItemIcon" loading="lazy" />
            <p class="block-services__headerItemText">{$t('turnkey-solution.Back Office')}</p>
          </div>
          <div
            class="block-services__headerItem {active === 4 ? 'active' : ''}"
            on:click={() => handleClick(4)}
            on:keydown={() => undefined}
            role="tab"
            tabindex="0"
            aria-label="tab"
          >
            <img src={img4} alt="" class="block-services__headerItemIcon" loading="lazy" />
            <p class="block-services__headerItemText">{$t('turnkey-solution.Dealing Desk')}</p>
          </div>
          <div
            class="block-services__headerItem {active === 5 ? 'active' : ''}"
            on:click={() => handleClick(5)}
            on:keydown={() => undefined}
            role="tab"
            tabindex="0"
            aria-label="tab"
          >
            <img src={img5} alt="" class="block-services__headerItemIcon" loading="lazy" />
            <p class="block-services__headerItemText">{$t('turnkey-solution.Risk Management')}</p>
          </div>
          <div
            class="block-services__headerItem {active === 6 ? 'active' : ''}"
            on:click={() => handleClick(6)}
            on:keydown={() => undefined}
            role="tab"
            tabindex="0"
            aria-label="tab"
          >
            <img src={img6} alt="" class="block-services__headerItemIcon" loading="lazy" />
            <p class="block-services__headerItemText">{$t('turnkey-solution.Client Support')}</p>
          </div>
        </div>
      </div>
      <div class="block-services__content {animation ? 'animation' : ''} {stop ? 'stop' : ''}">
        <img src={renderContent(active).img} alt="" class="block-services__contentImg" loading="lazy" />
        <div class="block-services__contentBlock">
          <p class="block-services__contentText">{renderContent(active).text}</p>
          <Button text={$t('Learn more')} className="block-services__contentButton" link={renderContent(active).link} ghost />
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-services {
    padding-top: 106px;
    padding-bottom: 116px;

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

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

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

    .container {
      @include breakpoint-down('deskS') {
        padding: 0;
      }
    }

    &__title {
      @include titleL;

      text-align: center;
      margin-bottom: 59px;
      width: 100%;

      @include breakpoint-down('deskL') {
        max-width: 380px;
        margin-inline: auto;
        margin-bottom: 64px;
      }

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

    &__header {
      width: 100%;
      display: flex;
      gap: 44px;
      margin-bottom: 95px;

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

      @include breakpoint-down('deskS') {
        overflow: auto;
        padding: 0 40px;
        margin-bottom: 16px;

        &::-webkit-scrollbar {
          width: 0;
          display: none;
        }
      }

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

      &:global(.animation) {
        pointer-events: none;
      }
    }

    &__headerScroll {
      display: flex;
      gap: 40px;
      min-width: max-content;
      width: 100%;

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

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

    &__headerItem {
      cursor: pointer;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 14px 0;
      width: 200px;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

      @include breakpoint-down('deskL') {
        width: 160px;
        padding: 13px 0 11px;
      }

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

      @include breakpoint-down('tabM') {
        width: 100px;
        padding-top: 0;
        padding-bottom: 16px;
      }

      &:after {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        height: 2px;
        width: 0;
        transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
        background: $redPrimary;
      }

      &:hover {
        background: $techBlue2;
      }
    }

    :global(.block-services__headerItem.active) {
      pointer-events: none;

      &:after {
        width: 100%;
        right: auto;
        left: 0;
      }
    }

    &__headerItemIcon {
      margin-bottom: 4px;
      width: 40px;

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

    &__headerItemText {
      text-align: center;
      @include smallCTA;
    }

    &__content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-right: 120px;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      opacity: 0;

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

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

      @include breakpoint-down('tabM') {
        flex-wrap: wrap;
        padding: 0 20px;
        gap: 16px;
      }

      &:global(.animation) {
        opacity: 0;

        .block-services__contentImg {
          top: 15px;
        }

        .block-services__contentText {
          top: 5px;
        }

        & :global(.block-services__contentButton) {
          top: 5px;
        }
      }
      &:global(.stop) {
        opacity: 1;

        .block-services__contentImg {
          top: 0;
        }

        .block-services__contentText {
          top: 0;
        }

        & :global(.block-services__contentButton) {
          top: 0;
        }
      }
    }

    &__contentImg {
      width: 680px;
      height: 680px;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      position: relative;
      top: -15px;

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

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

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

    &__contentBlock {
      width: 440px;

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

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

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

    &__contentText {
      margin-bottom: 40px;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      position: relative;
      top: -5px;

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

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

      width: 260px;
      transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);
      position: relative;
      top: -5px;

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

      @include breakpoint-down('tabM') {
        margin-inline: auto;
      }
    }
  }
</style>