<script lang="ts">
  import img from '../../../assets/images/white-label-broker/sales/sales.webp';
  import imgMobile from '../../../assets/images/white-label-broker/sales/salesMobile.webp';
  import notification from '../../../assets/images/white-label-broker/sales/notification.svg';
  import salesModule from '../../../assets/images/white-label-broker/sales/sales-module.svg';
  import growth from '../../../assets/images/white-label-broker/sales/growth.svg';
  import tracking from '../../../assets/images/white-label-broker/sales/tracking.svg';
  import { t } from '$lib/translations';
</script>

<div class="block-sales">
  <div class="container">
    <p class="block-sales__title">{@html $t('white-label-broker.All you need for sales & marketing')}</p>
    <p class="block-sales__text">{$t('white-label-broker.Make the most of every opportunity for engagement and retention.')}</p>
    <div class="block-sales__wrapper">
      <div class="block-sales__list">
        <div class="block-sales__listItem">
          <img src={notification} alt="notification" class="block-sales__listItemIcon" />
          <p class="block-sales__listItemText">{$t('white-label-broker.Utilize email, push and pop-up notofications')}</p>
        </div>
        <div class="block-sales__listItem">
          <img src={salesModule} alt="salesModule" class="block-sales__listItemIcon" />
          <p class="block-sales__listItemText">{$t('white-label-broker.Enhance your broker with a comprehensive sales module')}</p>
        </div>
        <div class="block-sales__listItem">
          <img src={growth} alt="growth" class="block-sales__listItemIcon" />
          <p class="block-sales__listItemText">{$t('white-label-broker.Grow with a 20% conversion rate using proven tactics')}</p>
        </div>
        <div class="block-sales__listItem">
          <img src={tracking} alt="tracking" class="block-sales__listItemIcon" />
          <p class="block-sales__listItemText">{$t('white-label-broker.Get insights via pre-integrated web and mobile tracking systems')}</p>
        </div>
      </div>
      <picture>
        <source srcset={imgMobile} media="(max-width: 767px)">
        <img src={img} alt="sales" class="block-sales__img" loading="lazy" />
      </picture>
    </div>
  </div>
</div>

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

  .block-sales {
    padding: 93px 0;

    @include breakpoint-down('deskL') {
      padding: 112px 0;
    }

    @include breakpoint-down('deskS') {
      padding: 64px 0 60px;
    }

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

    &__title {
      @include titleXL;

      width: 100%;
      max-width: 920px;
      margin-inline: auto;
      text-align: center;
      margin-bottom: 24px;

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

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

      span {
        color: $redPrimary;
      }
    }

    &__text {
      margin-bottom: 24px;
      width: 100%;
      max-width: 920px;
      margin-inline: auto;
      text-align: center;

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

    &__wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      padding-left: 120px;

      @include breakpoint-down('deskL') {
        padding-left: 96px;
        gap: 32px;
      }

      @include breakpoint-down('deskS') {
        padding-left: 0;
        gap: 20px;
      }

      @include breakpoint-down('tabM') {
        flex-wrap: wrap;
        gap: 40px;
      }
    }

    &__img {
      width: 100%;
      max-width: 920px;

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

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

      @include breakpoint-down('tabM') {
        width: calc(100% + 20px * 2);
        position: relative;
        left: 50%;
        transform: translateX(-50%);
      }
    }

    &__list {
      display: flex;
      flex-direction: column;
      gap: 24px;

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

    &__listItem {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    &__listItemIcon {
      width: 70px;
      min-width: 70px;
      height: 70px;
    }

    &__listItemText {
      @include smallDefault;
    }
  }
  :global(.block-sales__title span) {
    color: $redPrimary;
  }
</style>