<script lang="ts">
  import image from '../../../assets/images/trading-platform/flexibility/image.png';

  import Button from '../../button/Button.svelte';
  import { popupForm } from '../../../store.js';
  import { t } from '$lib/translations';
</script>

<div class="block-flexibility">
  <div class="container">
    <div class="block-flexibility__wrapper">
      <img src={image} alt="" class="block-flexibility__image" loading="lazy" />
      <p class="block-flexibility__subtitle">{$t('trading-platform.Cross-platform')}</p>
      <p class="block-flexibility__title">
        {$t('trading-platform.Ultimate flexibility')} <br />
        {$t('trading-platform.of trading from any device')}
      </p>
      <p class="block-flexibility__text">
        {$t('trading-platform.Your clients can trade from iOS, Android, Desktop, or PWA without detracting from the experience.')}
      </p>
      <Button text={$t('trading-platform.Book a demo')} className="block-flexibility__button" onClick={() => popupForm.set(true)} />
    </div>
  </div>
</div>

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

  .block-flexibility {
    padding-bottom: 204px;

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

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

    &__wrapper {
      width: 100%;
      max-width: 920px;
      margin-inline: auto;
    }

    &__image {
      display: none;

      @include breakpoint-down('tabM') {
        display: block;
        width: 110%;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    &__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;

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

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

    &__text {
      color: $techBluePrimary;
      margin-bottom: 40px;
      text-align: center;

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

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

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

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

      min-width: 260px;
      margin-inline: auto;

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