<script lang="ts">
  import designed from '../../../assets/images/trading-platform/designed/designed.webp';
  import designedMobile from '../../../assets/images/trading-platform/designed/designed-mobile.png';
  import { onMount } from 'svelte';
  import { gsap } from 'gsap';
  import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';
  import { isMobile } from '../../../store.js';
  import { t } from '$lib/translations';

  let mobile = false;

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

  onMount(() => {
    gsap.registerPlugin(ScrollTrigger);

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

<div class="block-designed">
  <div class="block-designed__parallax">
    <div class="container">
      <picture class="block-designed__bg">
        <source srcset={designedMobile} media="(max-width: 767px)" />
        <img src={designed} alt="" class="block-designed__image" loading="lazy" />
      </picture>
    </div>
  </div>
  <div class="block-designed__content">
    <div class="container" style="z-index: 1;">
      <p class="block-designed__subtitle">{$t('trading-platform.Sleek Design')}</p>
      <p class="block-designed__title">{$t('trading-platform.Designed for traders by traders')}</p>
      <p class="block-designed__text">
        {$t("trading-platform.The vast majority of Quadcode's designers and engineers are traders themselves. Combining their experience with market research, they work to build the ideal trading product.")}
      </p>
    </div>
  </div>
</div>

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

  .block-designed {
    &__parallax {
      overflow: hidden;
      height: 774px;
      background: linear-gradient(180deg, #fff 0%, #f2f6f9 100%);

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

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

      @include breakpoint-down('tabM') {
        height: 254px;
      }

      img {
        @include breakpoint-down('deskS') {
          width: 92%;
          margin: 0 auto;
        }

        @include breakpoint-down('tabM') {
          position: relative;
          width: 112%;
          left: -20px;
        }
      }
    }

    &__content {
      padding: 117px 0;
      background: $techWhite;
      position: relative;
      z-index: 2;

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

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

    &__subtitle {
      @include smallDefault;

      color: $techBlueSecondary;
      margin-bottom: 8px;
      text-align: center;

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

    &__title {
      @include titleXL;

      margin-bottom: 24px;
      text-align: center;
      max-width: 550px;
      margin-inline: auto;

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

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

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

    &__text {
      color: $techBluePrimary;
      text-align: center;
      max-width: 820px;
      margin-inline: auto;

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

      @include breakpoint-down('deskS') {
        max-width: 530px;
      }
    }
  }
</style>