<script lang="ts">
  import img from '../../../assets/images/back-office/hero/Backoffice_1st3.webp';
  import imgMobile from '../../../assets/images/back-office/hero/Backoffice_1st_mobile.webp';
  import imgMobile2x from '../../../assets/images/back-office/hero/Backoffice_1st_mobile_2x.webp';

  import analytics from '../../../assets/images/back-office/hero/analytics.svg';
  import customisable from '../../../assets/images/back-office/hero/customisable.svg';
  import marketing from '../../../assets/images/back-office/hero/marketing.svg';
  import secure from '../../../assets/images/back-office/hero/secure.svg';

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


</script>

<div class="block-hero">
  <div class="container">
    <h1 class="block-hero__title">{$t('back-office.Forex CRM & Back Office Software for Brokers')}</h1>
    <p class="block-hero__text">
      {$t('back-office.Seize complete control over your brokerage with a comprehensive one-stop back office solution')}
    </p>
    <Button className="block-hero__button" text={$t("back-office.Request demo")} onClick={() => popupForm.set(true)} />
    <picture>
      <source srcset="{imgMobile} 1x, {imgMobile2x} 2x" media="(max-width: 767px)" />
      <img src={img} class="block-hero__image" loading="eager" alt="back-office"  />
    </picture>
    <div class="block-hero__list">
      <div class="block-hero__listItem">
        <img src={customisable} alt="" class="block-hero__listItemIcon" />
        <p class="block-hero__listItemText">{$t('back-office.Fully Customizable')}</p>
      </div>
      <div class="block-hero__listItem">
        <img src={marketing} alt="" class="block-hero__listItemIcon" />
        <p class="block-hero__listItemText">{$t('back-office.Marketing Automation')}</p>
      </div>
      <div class="block-hero__listItem">
        <img src={secure} alt="" class="block-hero__listItemIcon" />
        <p class="block-hero__listItemText">{$t('back-office.Comprehensive Security')}</p>
      </div>
      <div class="block-hero__listItem">
        <img src={analytics} alt="" class="block-hero__listItemIcon" />
        <p class="block-hero__listItemText">{$t('back-office.Powerful Analytics')}</p>
      </div>
    </div>
  </div>
</div>

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

  .block-hero {
    background: $techBlue2;
    padding-top: 92px;
    padding-bottom: 103px;

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

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

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

    &__title {
      @include titleXL;

      text-align: center;
      max-width: 919px;
      margin: 0 auto 8px;

      @include breakpoint-down('deskL') {
        max-width: 736px;
      }

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

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

    &__text {
      max-width: 595px;
      text-align: center;
      margin: 0 auto 40px;

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

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

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

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

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

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

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

    &__image {
      width: 100%;
      height: 840px;

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

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

      @include breakpoint-down('tabM') {
        margin-left: -20px;
        margin-bottom: 40px;
        width: auto;
        height: 375px;
      }
    }

    &__list {
      background: $techBlue1;
      padding: 56px 70px;
      border-radius: 16px;
      gap: 40px;
      display: flex;
      align-items: center;
      margin-left: -70px;
      width: calc(100% + 140px);

      @include breakpoint-down('deskL') {
        margin-left: -40px;
        width: calc(100% + 80px);
        padding: 30px 40px 63px 40px;
        gap: 32px;
      }

      @include breakpoint-down('deskS') {
        column-gap: 20px;
        row-gap: 40px;
        flex-wrap: wrap;
        justify-content: center;
        padding: 31px 0 29px 0;
        margin-left: 0;
        width: 100%;
      }

      @include breakpoint-down('tabM') {
        margin-left: -20px;
        width: calc(100% + 40px);
        padding-top: 63px;
        padding-bottom: 63px;
      }
    }

    &__listItem {
      width: calc((100% - 40px * 3) / 4);
      display: flex;
      flex-direction: column;
      align-items: center;

      @include breakpoint-down('deskL') {
        width: calc((100% - 32px * 3) / 4);
      }

      @include breakpoint-down('deskS') {
        width: calc((100% - 20px * 2) / 3);
      }

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

    &__listItemIcon {
      width: 90px;
      height: 90px;

      @include breakpoint-down('deskS') {
        width: 70px;
        height: 70px;
      }
    }

    &__listItemText {
      @include baseTitle;
    }

    picture {
      @include breakpoint-down('tabM') {
        display: flex;
        justify-content: end;
        margin-right: -20px;
      }
    }
  }
</style>