<script lang="ts">
  import designed from '../../../assets/images/trading-platform/designed/designed.webp';
  import { gsap } from 'gsap';
  import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
  import { browser } from '$app/environment';
  import { isMobile } from '../../../store';
  import { t } from '$lib/translations';

  let mobile = false;

  isMobile.subscribe((value) => {
    mobile = value;
  });

  if (browser) {
    gsap.registerPlugin(ScrollTrigger);

    if (!mobile) {
      gsap.to('.block-designed__image', {
        scrollTrigger: {
          trigger: '.block-designed',
          start: 'top +=300',
          end: 'bottom +=300',
          scrub: 0.5,
        },
        y: -80,
      });
    }
  }
</script>

<div class="block-designed">
  <div class="container">
    <div class="block-designed__wrapper">
      <img src={designed} alt="" class="block-designed__image" />
      <h2 class="block-designed__title">{$t('about.Designed for traders by traders')}</h2>
      <p class="block-designed__text">{$t('about.Our mission is to bring traders real value.')}</p>
      <p class="block-designed__text">{$t('about.The pursuit of excellence leads to excellence - say it in better ways')}</p>
    </div>
  </div>
</div>

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

  .block-designed {
    padding-top: 88px;
    margin-bottom: 40px;

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

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

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

    &__wrapper {
      background: $techBlue1;
      border-radius: 16px;
      padding: 275px 0 235px 82px;
      overflow: hidden;
      position: relative;

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

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

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

    &__title {
      @include titleXL;

      width: 100%;
      max-width: 478px;
      margin-bottom: 24px;

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

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

      @include breakpoint-down('tabM') {
        width: 100%;
        max-width: 291px;
        margin-inline: auto;
        text-align: center;
        margin-top: -12px;
      }
    }

    &__text {
      width: 100%;
      max-width: 478px;

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

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

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

    &__image {
      position: absolute;
      left: 34.4%;
      top: -24%;
      width: 93%;

      @include breakpoint-down('deskL') {
        left: 34.4%;
        top: -20%;
        width: 88%;
      }

      @include breakpoint-down('deskS') {
        width: 96%;
      }

      @include breakpoint-down('tabM') {
        position: relative;
        left: -19%;
        top: auto;
        width: 191%;
        margin-top: -33px;
      }
    }
  }
</style>