<script lang="ts">
  import lock from '../../../assets/images/white-label-broker/security/lock.svg';
  import userdata from '../../../assets/images/white-label-broker/security/userdata.svg';
  import detection from '../../../assets/images/white-label-broker/security/detection.svg';
  import rickManagement from '../../../assets/images/white-label-broker/security/rick-management.svg';
  import backup from '../../../assets/images/white-label-broker/security/backup.svg';
  import compliant from '../../../assets/images/white-label-broker/security/compliant.svg';
  import { t } from '$lib/translations';
</script>

<div class="block-security">
  <div class="container">
    <p class="block-security__title">{@html $t('white-label-broker.Security built into DNA')}</p>
    <p class="block-security__text">{$t('white-label-broker.Be confident in the security of your brokerage business')}</p>
    <div class="block-security__list">
      <div class="block-security__listItem">
        <img src={lock} alt="" class="block-security__listItemIcon" />
        <p class="block-security__listItemText">{$t('white-label-broker.PCI DSS')}</p>
      </div>
      <div class="block-security__listItem">
        <img src={userdata} alt="" class="block-security__listItemIcon" />
        <p class="block-security__listItemText">{$t('white-label-broker.Data Privacy')}</p>
      </div>
      <div class="block-security__listItem">
        <img src={detection} alt="" class="block-security__listItemIcon" />
        <p class="block-security__listItemText">{$t('white-label-broker.Monitoring and Intrusion Detection')}</p>
      </div>
      <div class="block-security__listItem">
        <img src={rickManagement} alt="" class="block-security__listItemIcon" />
        <p class="block-security__listItemText">{$t('white-label-broker.Third-Party Risk Management')}</p>
      </div>
      <div class="block-security__listItem">
        <img src={backup} alt="" class="block-security__listItemIcon" />
        <p class="block-security__listItemText">{$t('white-label-broker.Data Backups and Disaster Recovery')}</p>
      </div>
      <div class="block-security__listItem">
        <img src={compliant} alt="" class="block-security__listItemIcon" />
        <p class="block-security__listItemText">{$t('white-label-broker.GDPR compliant')}</p>
      </div>
    </div>
  </div>
</div>

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

  .block-security {
    background: $techBlue1;
    padding: 258px 0;

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

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

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

    &__title {
      @include titleXL;

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

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

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

      > span {
        color: $redPrimary;
      }
    }

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

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

    &__list {
      display: flex;
      gap: 40px;

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

      @include breakpoint-down('deskS') {
        width: 100%;
        max-width: 528px;
        margin-inline: auto;
        flex-wrap: wrap;
        column-gap: 20px;
        row-gap: 7px;
      }

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

    &__listItem {
      width: calc((100% - 40px * 5) / 6);

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

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

      @include breakpoint-down('tabM') {
        width: calc((100% - 16px) / 2);
      }
    }

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

    &__listItemText {
      @include smallDefault;

      text-align: center;
    }
  }
  :global(.block-security__title span) {
    color: $redPrimary;
  }
</style>