<script lang="ts">
  import hero from '../../../assets/images/turnkey-solution/hero.png';
  import heroMobile from '../../../assets/images/turnkey-solution/heroMobile.png';
  import Ufawards from '../Ufawards.svelte';
  import Button from '../../button/Button.svelte';
  import { popupForm } from '../../../store';
  import { t } from '$lib/translations';

</script>

<div class="block-hero">
  <div id="block-hero__animation_container">
    <canvas id="block-hero__canvas" width="1800" height="780" />
    <div id="block-hero__dom_overlay_container" />
  </div>
  <div class="container">
    <div class="block-hero__wrapper">
      <div class="block-hero__content">
        <h1 class="block-hero__title">{$t('turnkey-solution.Brokerage Platform')} <br /> {$t('turnkey-solution.Software Turnkey')}</h1>
        <p class="block-hero__subtitle">
          {@html $t('turnkey-solution.Ready to go solution for launching your own brokerage business')}
        </p>
        <Button text={$t('turnkey-solution.Get in Touch')} className="block-hero__button" onClick={() => popupForm.set(true)} />
        <Ufawards />
      </div>
      <picture>
        <source srcset={heroMobile} media="(max-width: 767px)">
        <img class="block-hero__img" src={hero} alt="Software Turnkey" />
      </picture>
    </div>
  </div>
</div>

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

  #block-hero__animation_container {
    background-color: rgba(248, 251, 253, 1);
    width: 100% !important;
    height: 100% !important;
    display: block;
    position: absolute;
    top: 0;
    left: 0;

    @include breakpoint-down('deskL') {
      top: 0;
    }

    @include breakpoint-down('tabM') {
      top: 0;
      height: 450px !important;
    }
  }

  #block-hero__canvas {
    position: absolute;
    display: block;
    background-color: rgba(248, 251, 253, 1);
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
  }

  #block-hero__dom_overlay_container {
    pointer-events: none;
    overflow: hidden;
    width: 100% !important;
    height: 100% !important;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
  }

  .block-hero {
    position: relative;
    background: $techBlue1;
    padding-top: 105px;
    padding-bottom: 150px;
    overflow: hidden;

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

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

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

    &__img {
      position: absolute;
      top: 0;
      right: -200px;
      width: 74.286%;

      @include breakpoint-down('deskL') {
        width: 70.536%;
        top: -15px;
        right: -124px;
      }

      @include breakpoint-down('deskS') {
        width: 48.829%;
        top: 22.4%;
        right: 0;
      }

      @include breakpoint-down('tabM') {
        position: static;
        margin-inline: auto;
        width: calc(100% + 40px);
        transform: translateX(-20px);
      }
    }

    &__wrapper {
      display: flex;
      justify-content: space-between;

      @include breakpoint-down('tabM') {
        flex-direction: column-reverse;
        padding-top: 40px;
      }
    }

    &__content {
      width: 100%;
      max-width: 618px;
      padding: 161px 0;

      @include breakpoint-down('deskL') {
        padding-top: 151px;
        padding-bottom: 26px;
        max-width: 560px;
      }

      @include breakpoint-down('deskS') {
        padding-top: 75px;
        padding-bottom: 0;
        max-width: 405px;
      }

      @include breakpoint-down('tabM') {
        padding-top: 0;
        max-width: none;
      }
    }

    &__title {
      @include titleXL;

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

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

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

      @include breakpoint-down('tabM') {
        text-align: center;
      }
    }

    &__subtitle {
      @include defaultM;

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

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

      @include breakpoint-down('tabM') {
        text-align: center;
        margin-bottom: 40px;
      }

      > span {
        @include titleM;

        color: $redPrimary;
      }
    }

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

      margin-bottom: 79px;
      min-width: 260px;

      @include breakpoint-down('deskS') {
        margin-bottom: 40px;
        min-width: auto;
      }

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

    & :global(.logo-ufawards) {
      @include breakpoint-down('tabM') {
        display: none;
      }
    }
    & :global(.block-hero__subtitle span) {

      @include titleM;

      color: $redPrimary;
    }
    
  }
</style>