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

</script>

<div class="block-revolutionize">
  <div class="container">
    <div class="block-revolutionize__container">
      <p class="block-revolutionize__subtitle">{$t('trading-platform.Innovative')}</p>
      <p class="block-revolutionize__title">{$t('trading-platform.Revolutionize trading with us')}</p>
      <p class="block-revolutionize__text">
        {$t('trading-platform.Quadcode white label solution has integrated all the latest technological advancements and innovative research. Our developers are well-versed in machine learning, AI, cross-service architecture & more, making sure your trading platform always outsmarts competition.')}
      </p>
      <span role="button" tabindex="0" on:keyup={()=>{}} on:click={()=> {popupForm.set(true)}} class="block-revolutionize__link">{$t('trading-platform.More details >')}</span>
    </div>
  </div>
</div>

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

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

    &__container {
      width: 100%;
      max-width: 1160px;
      margin-inline: auto;
      padding: 153px 120px 201px;
      border-radius: 16px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.81) 0%, rgba(244, 244, 244, 0.36) 100%);
      backdrop-filter: blur(15px);

      @include breakpoint-down('deskL') {
        max-width: 928px;
        padding: 141px 96px;
      }

      @include breakpoint-down('deskS') {
        padding: 74px 79px;
      }

      @include breakpoint-down('tabM') {
        padding: 112px 20px;
      }
    }

    &__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: 16px;
      }

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

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

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

    &__link {
      @include baseCTA;

      display: flex;
      width: max-content;
      margin-inline: auto;
      color: $linkPrimary;
    }
  }
</style>