<script lang="ts">
import {t} from '$lib/translations';
import Button from '../../button/Button.svelte';
import activePic from '../../../assets/images/trading-platform/innovative/innovative.webp';
import activeDeskLPic from '../../../assets/images/trading-platform/innovative/innovativeDeskL.webp';
import activeTabLPic from '../../../assets/images/trading-platform/innovative/innovativeTabL.webp';
import activeTabMPic from '../../../assets/images/trading-platform/innovative/innovativeTabM.webp';
import { popupForm } from '../../../store';

</script>

<section class="block-innovative">
  <div class="container">
    <div class="block-innovative__wrapper">
      <picture>
        <source srcset={activeTabMPic} media="(max-width: 767px)">
        <source srcset={activeTabLPic} media="(max-width: 1024px)">
        <source srcset={activeDeskLPic} media="(max-width: 1439px)">
        <img src={activePic} loading="lazy" alt="cards">
      </picture>
      <div class="block-innovative__text">
        <p class="block-innovative__underTitle">{$t('trading-platform.Innovative')}</p>
        <h2 class="block-innovative__title">{$t('trading-platform.Revolutionize trading with us')}</h2>
        <p class="block-innovative__description">{$t("trading-platform.Make the most of the platform's wide range of features to offer a seamless trading experience and become the ideal broker for your traders.")}</p>
        <Button text={$t("trading-platform.More Details")} onClick={() => popupForm.set(true)} color="#FFFFFF" ghost />
      </div>
    </div>
  </div>
</section>

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

  .block-innovative {
    padding: 159px 0;
    background: #040E22;
    border-radius: 40px;
    color: $techWhite;
    @include breakpoint-down('deskL') {
      padding: 103px 0;
      border-radius: 20px;
    }
    @include breakpoint-down('tabL') {
      padding: 104px 0;
    }
    @include breakpoint-down('tabM') {
      padding-top: 34px;
      padding-bottom: 44px;
    }

    &__wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 133px;
      @include breakpoint-down('deskL') {
        justify-content: center;

      }
      @include breakpoint-down('tabL') {
        gap: 43px;
      }
      @include breakpoint-down('tabM') {
        flex-direction: column;
        gap: 17px;
      }
    }
    &__text {
      @include breakpoint-down('deskL') {
        width: 435px;
      }
      @include breakpoint-down('tabL') {
        width: 293px;
      }
      @include breakpoint-down('tabM') {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }
    &__underTitle {
      @include underTitle;
      color: $redPrimary;
      margin-bottom: 18px;

      @include breakpoint-down('tabL') {
        margin-bottom: 12px;
      }
    }
    &__title {
      @include titleBlock;
      margin-bottom: 20px;
      @include breakpoint-down('deskL') {
        width: 400px;
      }
      @include breakpoint-down('tabL') {
        width: 325px;
      }
      @include breakpoint-down('tabM') {
        margin-bottom: 12px;
        text-align: center;
        width: 80%;
      }
    }
    &__description {
      @include text;
      margin-bottom: 30px;
      width: 598px;

      @include breakpoint-down('deskL') {
        width: 399px;
      }
      @include breakpoint-down('tabL') {
        margin-bottom: 20px;
        width: 221px;
      }
      @include breakpoint-down('tabM') {
        margin-bottom: 12px;
        text-align: center;
      }
    }
    img {
      width: 695px;
      height: 773px;

      @include breakpoint-down('deskL') {
        width: 494px;
        height: 549px;
      }
      @include breakpoint-down('tabL') {
        width: 256px;
        height: 285px;
      }
      @include breakpoint-down('tabM') {
        width: 299px;
        height: 332px;
      }
    }
  }
  :global(.block-innovative .button) {
    @include heading2;
    padding: 20px 116px;
    @include breakpoint-down('deskL') {
      padding: 16px 54.5px;
    }
    @include breakpoint-down('tabL') {
      padding: 12px 36.5px;
    }
    @include breakpoint-down('tabM') {
      padding-inline: 0;
      width: 80%;
    }
  }
</style>