<script lang="ts">
  import { t } from '$lib/translations';

  import browser from '../../../assets/images/main/ng-platform/browser.svg';
  import android from '../../../assets/images/main/ng-platform/android.svg';
  import apple from '../../../assets/images/main/ng-platform/apple.svg';
  import appStore from '../../../assets/images/main/ng-platform/appStore.webp';
  import appStore2x from '../../../assets/images/main/ng-platform/appStore_2x.webp';
  import windows from '../../../assets/images/main/ng-platform/windows.svg';
  import chrome from '../../../assets/images/main/ng-platform/chrome.webp';
  import chrome2x from '../../../assets/images/main/ng-platform/chrome_2x.webp';
  import safari from '../../../assets/images/main/ng-platform/safari.webp';
  import safari2x from '../../../assets/images/main/ng-platform/safari_2x.webp';
  import edge from '../../../assets/images/main/ng-platform/edge.webp';
  import edge2x from '../../../assets/images/main/ng-platform/edge_2x.webp';
  import firefox from '../../../assets/images/main/ng-platform/firefox.webp';
  import firefox2x from '../../../assets/images/main/ng-platform/firefox_2x.webp';

  import slide1__thumb from '../../../assets/images/main/ng-platform/slide1_thumb.webp';
  import slide2__thumb from '../../../assets/images/main/ng-platform/slide2_thumb.webp';
  import slide3__thumb from '../../../assets/images/main/ng-platform/slide3_thumb.webp';
  import slide4__thumb from '../../../assets/images/main/ng-platform/slide4_thumb.webp';

  import slide1 from '../../../assets/images/main/ng-platform/slide1.webp';
  import slide21 from '../../../assets/images/main/ng-platform/slide2-1.webp';
  import slide22 from '../../../assets/images/main/ng-platform/slide2-2.webp';
  import slide3 from '../../../assets/images/main/ng-platform/slide3.webp';
  import slide4 from '../../../assets/images/main/ng-platform/slide4.webp';

  let activeIndex = 1;
  const setIndex = (index: number) => {
    activeIndex = index;
  };
</script>

<section class="ng-platform">
  <div class="container">
    <div class="ng-platform__header">
      <div class="ng-platform__left">
        <h1 class="ng-platform__title">{@html $t('Next-Generation Trading Platform')}</h1>
        <p class="ng-platform__subtitle">
          {$t('Give your traders a seamless, top-notch trading experience with our state-of-the-art platform')}
        </p>
      </div>
      <div class="ng-platform__right">
        <div class="ng-platform__right__description">
          {$t('All the popular assets your traders need')}
        </div>
        <div class="ng-platform__numbers">
          <div class="ng-platform__number">
            <span class="number">6</span>
            <span class="note">{$t('Markets')}</span>
          </div>
          <div class="ng-platform__number">
            <span class="number">700+</span>
            <span class="note">{$t('Instruments')}</span>
          </div>
          <div class="ng-platform__number">
            <span class="number">100+</span>
            <span class="note">{$t('Indicators')}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="ng-platform__slider">
      <div class="ng-platform__slider__controls">
        <div class="ng-platform__slider__controls__scale-wrapper">
          <div
            role="button"
            tabindex="0"
            class="ng-platform__slider__control slide1 {activeIndex === 1 ? 'active' : ''}"
            on:click={() => setIndex(1)}
            on:keydown={() => setIndex(1)}
          >
            <img src={slide1__thumb} alt="pwa" />
            <div class="exclusive_badge">{$t('Exclusive')}</div>
            <div class="pwa_badge"><img src={browser} alt="browser-icon" /> {$t('PWA')}</div>
          </div>
          <div
            role="button"
            tabindex="0"
            class="ng-platform__slider__control slide2 {activeIndex === 2 ? 'active' : ''}"
            on:click={() => setIndex(2)}
            on:keydown={() => setIndex(2)}
          >
            <img src={slide2__thumb} alt="mobile" />
            <div class="badges">
              <div class="badge"><img src={android} alt="android-icon" /></div>
              <div class="badge"><img src={apple} alt="apple-icon" /></div>
            </div>
          </div>
          <div
            role="button"
            tabindex="0"
            class="ng-platform__slider__control slide3 {activeIndex === 3 ? 'active' : ''}"
            on:click={() => setIndex(3)}
            on:keydown={() => setIndex(3)}
          >
            <img src={slide3__thumb} alt="desktop" />
            <div class="badges">
              <div class="badge"><img src={appStore} alt="appStore-icon" /></div>
              <div class="badge"><img src={windows} alt="windows-icon" /></div>
            </div>
          </div>
          <div
            role="button"
            tabindex="0"
            class="ng-platform__slider__control slide4 {activeIndex === 4 ? 'active' : ''}"
            on:click={() => setIndex(4)}
            on:keydown={() => setIndex(4)}
          >
            <img src={slide4__thumb} alt="browser" />
            <div class="badges">
              <div class="badge"><img src={chrome} alt="chrome-icon" /></div>
              <div class="badge"><img src={safari} alt="safari-icon" /></div>
              <div class="badge"><img src={edge} alt="edge-icon" /></div>
              <div class="badge"><img src={firefox} alt="firefox-icon" /></div>
            </div>
          </div>
        </div>
      </div>
      <div class="ng-platform__slider__slides">
        <div class="ng-platform__slider__slides__slide slide1 {activeIndex === 1 ? 'active' : ''}">
          <img src={slide1} alt="pwa" />
        </div>
        <div class="ng-platform__slider__slides__slide slide2 {activeIndex === 2 ? 'active' : ''}">
          <img src={slide21} alt="mobile-portrait" />
          <img src={slide22} alt="mobile-landscape" />
        </div>
        <div class="ng-platform__slider__slides__slide slide3 {activeIndex === 3 ? 'active' : ''}">
          <img src={slide3} alt="desktop" />
        </div>
        <div class="ng-platform__slider__slides__slide slide4 {activeIndex === 4 ? 'active' : ''}">
          <img src={slide4} alt="browser" />
        </div>
      </div>
      <div class="ng-platform__slider__instructions">
        <div class="ng-platform__slider__instruction slide1 {activeIndex === 1 ? 'active' : ''}">
          <div class="ng-platform__slider__instruction__title">{$t('PWA')}</div>
          <div class="ng-platform__slider__instruction__details">
            <div class="ng-platform__slider__instruction__detail">
              {$t('No need to download app')}
            </div>
            <div class="ng-platform__slider__instruction__detail">
              <img src={browser} alt="browser-icon" />
              {$t('Instant mobile app')}
            </div>
          </div>
        </div>
        <div class="ng-platform__slider__instruction slide2 {activeIndex === 2 ? 'active' : ''}">
          <div class="ng-platform__slider__instruction__title">{$t('Mobile apps')}</div>
          <div class="ng-platform__slider__instruction__details">
            <div class="ng-platform__slider__instruction__detail">
              {$t('Available platforms')}
            </div>
            <div class="ng-platform__slider__instruction__detail">
              <img src={android} alt="android-icon" />
              {$t('Android')}
            </div>
            <div class="ng-platform__slider__instruction__detail">
              <img src={apple} alt="apple-icon" />
              {$t('iOS')}
            </div>
          </div>
        </div>
        <div class="ng-platform__slider__instruction slide3 {activeIndex === 3 ? 'active' : ''}">
          <div class="ng-platform__slider__instruction__title">{$t('Standalone apps')}</div>
          <div class="ng-platform__slider__instruction__details">
            <div class="ng-platform__slider__instruction__detail">
              {$t('Available platforms')}
            </div>
            <div class="ng-platform__slider__instruction__detail">
              <img src={windows} alt="android-icon" />
              <div>
                {$t('Windows')}<br />
                <span>.msi</span>
              </div>
            </div>
            <div class="ng-platform__slider__instruction__detail">
              <img src={appStore2x} alt="apple-icon" />
              <div>
                {$t('MacOS')}<br />
                <span>.dmg</span>
              </div>
            </div>
          </div>
        </div>
        <div class="ng-platform__slider__instruction slide4 {activeIndex === 4 ? 'active' : ''}">
          <div class="ng-platform__slider__instruction__title">{$t('Any browser')}</div>
          <div class="ng-platform__slider__instruction__details">
            <div class="ng-platform__slider__instruction__detail">
              <img src={chrome2x} alt="chrome-icon" />
            </div>
            <div class="ng-platform__slider__instruction__detail">
              <img src={safari2x} alt="safari-icon" />
            </div>
            <div class="ng-platform__slider__instruction__detail">
              <img src={edge2x} alt="edge-icon" />
            </div>
            <div class="ng-platform__slider__instruction__detail">
              <img src={firefox2x} alt="firefox-icon" />
            </div>
            <div class="ng-platform__slider__instruction__detail">
              and<br />
              etc.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

  .ng-platform {
    background: $headerDark;
    padding: 120px 56px;
    overflow-x: hidden;

    @media (max-width: 1799px) {
      padding: 120px 40px;
    }

    @media (max-width: 1365px) {
      padding: 120px 32px;
    }

    @media (max-width: 719px) {
      padding: 120px 24px;
    }

    @media (max-width: 479px) {
      padding: 88px 20px;
    }

    .container {
      @media (max-width: 1365px) {
        max-width: 1286px;
        padding: 0;
      }
    }

    &__header {
      display: flex;
      margin-bottom: 55px;

      @media (max-width: 1023px) {
        flex-direction: column;
      }

      @media (max-width: 719px) {
        margin-bottom: 43px;
      }
    }

    &__title {
      flex: 1;
      font-weight: 400;
      font-size: 64px;
      line-height: 72px;
      max-width: 77%;
      background: linear-gradient(180deg, #f9fbfc 0%, #adb1b7 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      margin-bottom: 20px;

      @media (max-width: 1365px) {
        font-size: 56px;
        line-height: 68px;
        max-width: 80%;
      }

      @media (max-width: 1023px) {
        font-size: 52px;
        line-height: 64px;
        max-width: 100%;
      }

      @media (max-width: 479px) {
        font-size: 36px;
        line-height: 44px;
      }
    }

    &__subtitle {
      color: $textSecondaryDefault;
      font-weight: 400;
      font-size: 16px;
      line-height: 24px;
      max-width: 90%;

      @media (max-width: 1365px) {
        max-width: 80%;
      }

      @media (max-width: 1023px) {
        max-width: 100%;
      }
    }

    &__left {
      width: calc(100% - 377px);

      @media (max-width: 1023px) {
        width: 100%;
      }
    }

    &__right {
      display: flex;
      flex-direction: column;
      width: 377px;
      justify-content: space-between;

      @media (max-width: 479px) {
        width: 100%;
      }

      &__description {
        color: $textPrimaryDefault;
        font-size: 16px;
        line-height: 20px;
        margin-top: 32px;
        width: 50%;

        :global(body.th) & {
          margin-bottom: 16px;
        }

        :global(body.vi) & {
          margin-bottom: 16px;
        }

        @media (max-width: 1365px) {
          margin-top: 48px;
        }

        @media (max-width: 1023px) {
          margin-top: 32px;
          font-size: 14px;
          width: 100%;
        }
      }
    }

    &__numbers {
      display: flex;
      justify-content: space-between;

      @media (max-width: 1023px) {
        margin-top: 32px;
      }
    }

    &__number {
      span {
        &.number {
          background: linear-gradient(180deg, #ff564b 0%, #ff282b 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
          font-size: 40px;
          line-height: 0.93;
          font-weight: 500;
          font-family: $Suisse;
          display: block;
          height: 37px;
          margin-bottom: 4px;
        }

        &.note {
          color: $textTertiaryDefault;
          font-size: 16px;
          line-height: 20px;
          display: block;
          height: 20px;
        }
      }
    }

    &__slider {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;

      &__controls {
        width: 150px;

        @media (max-width: 1365px) {
          width: 120px;
          height: 511px;
        }

        @media (max-width: 1023px) {
          width: 98px;
          height: 414px;
        }

        @media (max-width: 719px) {
          order: 2;
          width: 100%;
          height: 102px;
        }

        @media (max-width: 479px) {
          width: 100vw;
          margin: 0 -20px;
          padding: 3px 0 3px 20px;
          overflow: hidden;
          height: 106px;
        }

        &__scale-wrapper {
          display: flex;
          flex-direction: column;
          gap: 12px;
          width: 150px;
          transform-origin: top left;

          @media (max-width: 1365px) {
            transform: scale(0.8);
          }

          @media (max-width: 1023px) {
            transform: scale(0.653);
          }

          @media (max-width: 719px) {
            flex-direction: row;
            width: 636px;
            transform: scale(0.673);
          }
        }
      }

      &__control {
        display: flex;
        justify-content: center;
        position: relative;
        cursor: pointer;
        width: 100%;
        aspect-ratio: 1;
        background: #28282c;
        border-radius: 28px;
        overflow: hidden;

        &::before {
          content: '';
          border-radius: 28px;
          position: absolute;
          inset: 0;
          border: 1px solid rgba(249, 251, 252, 0.3);
          pointer-events: none;
          mix-blend-mode: soft-light;
        }

        &:after {
          position: absolute;
          content: '';
          bottom: 1px;
          border-bottom-left-radius: 28px;
          border-bottom-right-radius: 28px;
          background: linear-gradient(360deg, #161618 0%, rgba(22, 22, 24, 0) 100%);
          height: 48px;
          width: 100%;
        }

        &.active {
          outline: 3px solid #ff282b;
        }

        &.slide1 {
          & > img {
            width: 104px;
            margin-top: 16px;
          }
        }

        &.slide2 {
          & > img {
            width: 104px;
            margin-top: 16px;
          }
        }

        &.slide4 {
          & > img {
            margin: 13px 0 0 16px;
          }
        }
      }

      &__slides {
        background: #28282c;
        border-radius: 40px;
        width: calc(100% - 170px);
        height: 667px;
        overflow: hidden;

        @media (max-width: 1365px) {
          width: calc(100% - 140px);
          height: 511px;
        }

        @media (max-width: 1023px) {
          width: calc(100% - 118px);
          height: 414px;
        }

        @media (max-width: 719px) {
          order: 1;
          width: 100%;
          height: 414px;
        }

        &__slide {
          display: none;
          justify-content: center;
          position: relative;
          overflow: hidden;

          &.active {
            display: flex;
          }

          &.slide1 {
            & > img {
              margin-top: 35px;
              width: 401px;

              @media (max-width: 479px) {
                width: 301px;
              }
            }
          }

          &.slide2 {
            height: 100%;

            & > img {
              &:nth-child(1) {
                margin-top: 62px;
                width: 432px;
                left: 7%;
                position: absolute;

                @media (max-width: 1365px) {
                  left: -74px;
                  width: 368px;
                }

                @media (max-width: 1023px) {
                  margin-top: 32px;
                  left: -174px;
                }

                @media (max-width: 719px) {
                  left: -214px;
                }

                @media (max-width: 479px) {
                  width: 268px;
                  left: -154px;
                  margin-top: 32px;
                }
              }

              &:nth-child(2) {
                margin-top: 114px;
                width: 593px;
                height: 436px;
                right: 0;
                position: absolute;

                @media (max-width: 1365px) {
                  right: -124px;
                  height: 368px;
                  width: 500px;
                  margin-top: 94px;
                }

                @media (max-width: 1023px) {
                  right: -304px;
                  margin-top: 64px;
                }

                @media (max-width: 719px) {
                  right: -354px;
                  margin-top: 44px;
                }

                @media (max-width: 479px) {
                  height: 268px;
                  width: 364px;
                  right: -154px;
                  margin-top: 84px;
                }
              }
            }
          }

          &.slide3 {
            & > img {
              margin-top: 54px;
              width: 948px;

              @media (max-width: 1365px) {
                margin-top: 46px;
                width: 701px;
              }

              @media (max-width: 1023px) {
                margin-top: 39px;
                width: 493px;
              }

              @media (max-width: 719px) {
                margin-top: 35px;
                margin-left: 131px;
                width: 490px;
              }

              @media (max-width: 479px) {
                margin-left: 199px;
                margin-top: 33px;
              }
            }
          }

          &.slide4 {
            & > img {
              margin-top: 40px;
              width: 1040px;

              @media (max-width: 1365px) {
                width: 780px;
              }

              @media (max-width: 1023px) {
                width: 500px;
                margin-top: 60px;
              }

              @media (max-width: 719px) {
                width: 400px;
                margin-top: 90px;
              }

              @media (max-width: 479px) {
                width: 340px;
                margin-top: 110px;
              }
            }
          }
        }
      }

      &__instructions {
        width: calc(100% - 170px);
        margin-left: auto;
        height: 56px;

        @media (max-width: 1365px) {
          width: 100%;
        }

        @media (max-width: 719px) {
          order: 0;
          height: 116px;
          margin-bottom: 24px;
        }
      }

      &__instruction {
        height: 56px;
        display: none;
        justify-content: space-between;
        align-items: center;
        margin-top: 12px;

        @media (max-width: 719px) {
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          gap: 32px;
          height: 116px;
        }

        &.active {
          display: flex;
        }

        &__title {
          flex: 1;
          font-weight: 400;
          font-size: 36px;
          line-height: 40px;
          background: linear-gradient(180deg, #f9fbfc 0%, #adb1b7 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;

          @media (max-width: 1365px) {
            font-size: 32px;
            line-height: 36px;
          }

          @media (max-width: 1023px) {
            max-width: 210px;
            font-size: 28px;
            line-height: 28px;
          }

          @media (max-width: 719px) {
            max-width: 100%;
          }

          @media (max-width: 479px) {
            font-size: 22px;
            line-height: 26px;
          }
        }

        &__details {
          display: flex;
          height: 100%;
        }

        &__detail {
          font-size: 16px;
          line-height: 20px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        &.slide1 {
          .ng-platform__slider__instruction__detail {
            &:nth-child(1) {
              border-right: 1px solid #353539;
              color: #7d8387;
              width: 141px;
            }

            &:nth-child(2) {
              width: 171px;
              color: #ffffff;
              display: flex;
              gap: 12px;
              padding-left: 24px;

              img {
                width: 48px;
                height: 48px;
              }
            }
          }
        }

        &.slide2 {
          .ng-platform__slider__instruction__details {
            @media (max-width: 393px) {
              width: 100%;
            }
          }

          .ng-platform__slider__instruction__detail {
            @media (max-width: 393px) {
              flex: 1;
              width: 0;
            }

            &:nth-child(1) {
              color: #7d8387;
              width: 80px;
              padding-right: 48px;

              @media (max-width: 720px) {
                padding-right: 48px;
              }

              @media (max-width: 719px) {
                padding-right: 0;
              }
            }

            &:nth-child(2) {
              border-right: 1px solid #353539;
              width: 171px;
              color: #ffffff;
              display: flex;
              gap: 12px;
              padding-right: 24px;

              img {
                border-radius: 50%;
                backdrop-filter: blur(48px);
                background: #f9fbfc1a;
                width: 48px;
                height: 48px;
              }
            }

            &:nth-child(3) {
              color: #ffffff;
              display: flex;
              gap: 12px;
              padding: 0 24px;

              img {
                border-radius: 50%;
                backdrop-filter: blur(48px);
                background: #f9fbfc1a;
                width: 48px;
                height: 48px;
              }
            }
          }
        }

        &.slide3 {
          .ng-platform__slider__instruction__details {
            @media (max-width: 393px) {
              width: 100%;
            }
          }

          .ng-platform__slider__instruction__detail {
            @media (max-width: 1023px) {
              font-size: 14px;
            }

            @media (max-width: 393px) {
              flex: 1;
              width: 0;
            }

            &:nth-child(1) {
              color: #7d8387;
              width: 80px;
              padding-right: 48px;

              @media (max-width: 1023px) {
                padding-right: 76px;
                width: auto;
              }

              @media (max-width: 720px) {
                width: 93px;
                padding-right: 48px;
              }

              @media (max-width: 719px) {
                padding-right: 0;
              }
            }

            span {
              color: #7d8387;
            }

            img {
              border-radius: 50%;
              backdrop-filter: blur(48px);
              background: #f9fbfc1a;
              width: 48px;
              height: 48px;

              @media (max-width: 1023px) {
                width: 32px;
                height: 32px;
              }
            }

            &:nth-child(2) {
              border-right: 1px solid #353539;
              width: 171px;
              color: #ffffff;
              display: flex;
              gap: 12px;
              padding-right: 6px;

              @media (max-width: 1023px) {
                padding-right: 16px;
                width: auto;
              }

              @media (max-width: 393px) {
                padding-right: 16px;
              }
            }

            &:nth-child(3) {
              color: #ffffff;
              display: flex;
              gap: 12px;
              padding: 0 2px 0 24px;

              @media (max-width: 1023px) {
                padding: 0 7px 0 16px;
              }

              @media (max-width: 719px) {
                padding-right: 95px;
              }

              @media (max-width: 479px) {
                padding-right: 16px;
              }

              @media (max-width: 393px) {
                padding-right: 8px;
              }
            }
          }
        }

        &.slide4 {
          .ng-platform__slider__instruction__detail {
            padding-right: 24px;

            img {
              border-radius: 50%;
              width: 48px;
              height: 48px;
            }

            &:nth-child(5) {
              color: #7d8387;
              padding-right: 24px;
            }
          }
        }
      }
    }
  }

  .exclusive_badge {
    position: absolute;
    top: 14px;
    left: 14px;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0 6px;
    height: 17px;
    background: #f9fbfc1a;
    backdrop-filter: blur(20px);
    border-radius: 6px;

    color: #6ce9a6;
    font-family: $Suisse;
    font-weight: 500;
    font-size: 10px;
    line-height: 90%;
    text-transform: uppercase;
  }

  .badges {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: flex;
    gap: 6px;

    .badge {
      backdrop-filter: blur(20px);
      background: #f9fbfc1a;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      z-index: 10;

      img {
        width: 20px;
        height: 20px;
      }
    }
  }

  .pwa_badge {
    position: absolute;
    bottom: 14px;
    left: 14px;

    backdrop-filter: blur(20px);
    background: #ffffff1a;
    border-radius: 10px;
    height: 20px;
    padding: 2px 6px;
    gap: 3px;
    z-index: 10;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #ffffff;
    font-family: $Suisse;
    font-weight: 500;
    font-size: 10px;
    line-height: 90%;
    text-transform: uppercase;

    & > img {
      width: 12px;
      height: 12px;
    }
  }
</style>