<script lang="ts">
  import img from '../../../assets/images/turnkey-solution/start.png';
  import imgMobile from '../../../assets/images/turnkey-solution/startMobile.png';
  import Button from '../../button/Button.svelte';
  import { popupForm } from '../../../store.js';
  import { t } from '$lib/translations';
</script>

<div class="block-start">
  <div class="container">
    <div class="block-start__wrapper">
      <div class="block-start__content">
        <p class="block-start__text">
          {@html $t('turnkey-solution.The easiest way to start your brokerage business')}
        </p>
        <Button text={$t('turnkey-solution.Start now')} className="block-start__button" onClick={() => popupForm.set(true)} />
      </div>
      <picture>
        <source srcset={imgMobile} media="(max-width: 767px)">
        <img src={img} alt="block start img" class="block-start__img" loading="lazy" />
      </picture>
    </div>
  </div>
</div>

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

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

    &__wrapper {
      background: $techBlue2;
      border-radius: 16px;
      padding: 178px 120px 164px 120px;

      @include breakpoint-down('deskL') {
        padding: 176px 96px 166px 96px;
      }

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

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

    &__content {
      width: 439px;

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

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

    &__text {
      @include titleL;

      color: $techBluePrimary;
      margin-bottom: 40px;

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

      @include breakpoint-down('tabM') {
        text-align: center;
        max-width: 330px;
        margin-inline: auto;
      }

      > span {
        color: $redPrimary;
      }
    }

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

      width: 260px;

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

      @include breakpoint-down('tabM') {
        margin-inline: auto;
      }
    }

    &__img {
      position: absolute;
      width: auto;
      bottom: 0;
      right: 240px;

      @include breakpoint-down('deskL') {
        right: 88px;
      }

      @include breakpoint-down('deskS') {
        width: 30.32%;
        right: 90px;
        max-width: 300px;
      }

      @include breakpoint-down('tabM') {
        position: static;
        width: 69.5%;
        margin-inline: auto;
      }
    }
  }
</style>