<script lang="ts">
    import { t, locale } from '$lib/translations';

    import downloads from '$assets/icons/download.svg';
    import icon01 from '$assets/icons/useful-materials/icon-01.svg';
    import icon02 from '$assets/icons/useful-materials/icon-02.svg';
    import icon03 from '$assets/icons/useful-materials/icon-03.svg';
</script>

<section class="usefulMaterials {$locale}">
  <h2>{$t('useful-materials.Header')}</h2>
  <div class="usefulMaterials__container">
    <div class="usefulMaterialsCard usefulMaterialsCard__fullWidth">
      <div class="usefulMaterialsCard__header">
        <div class="usefulMaterialsCard__icon">
          <img src={icon01} alt="icon01" />
        </div>
        <div class="usefulMaterialsCard__title">
          {$t('useful-materials.Card1_title')}
        </div>
      </div>
      <div class="usefulMaterialsCard__description">
        {$t('useful-materials.Card1_text')}
      </div>
      <div class="usefulMaterialsCard__button">
        <a href="https://fsms.quadcode.com/storage/public/d0/q3/akhmsj7oc3be3cog/Checklist.pdf" target="_blank" class="usefulMaterialsCard__button--download">
          <span>{$t('useful-materials.Card1_button')}</span>
          <img src={downloads} alt="download" />
        </a>
      </div>
    </div>
    <div class="usefulMaterialsCard">
      <div class="usefulMaterialsCard__header">
        <div class="usefulMaterialsCard__icon">
          <img src={icon02} alt="icon02" />
        </div>
        <div class="usefulMaterialsCard__title">
          {$t('useful-materials.Card2_title')}
        </div>
      </div>
      <div class="usefulMaterialsCard__description">
        {$t('useful-materials.Card2_text')}
      </div>
      <div class="usefulMaterialsCard__button">
        <a href="https://quadcode.com/business-plan" class="usefulMaterialsCard__button--download">
          <span>{$t('useful-materials.Card2_button')}</span>
          <img src={downloads} alt="download" />
        </a>
      </div>
    </div>
    <div class="usefulMaterialsCard">
      <div class="usefulMaterialsCard__header">
        <div class="usefulMaterialsCard__icon">
          <img src={icon03} alt="icon03" />
        </div>
        <div class="usefulMaterialsCard__title">
          {$t('useful-materials.Card3_title')}
        </div>
      </div>
      <div class="usefulMaterialsCard__description">
        {$t('useful-materials.Card3_text')}
      </div>
      <div class="usefulMaterialsCard__button">
        <a href="https://quadcode.com/marketing-guide" class="usefulMaterialsCard__button--download">
          <span>{$t('useful-materials.Card3_button')}</span>
          <img src={downloads} alt="download" />
        </a>
      </div>
    </div>
  </div>
</section>
<style lang="scss">
  @import 'src/scss/variables';
  @import 'src/scss/media';
  @import 'src/scss/mixins';

  .usefulMaterials {
    background: $qc-bg;
    width: 100%;
    padding-top: 67px;

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

    h2 {
      font-family: $Suisse;
      font-weight: 500;
      font-size: 64px;
      line-height: 64px;
      letter-spacing: 0;
      text-align: center;
      margin-bottom: 64px;

      @include breakpoint-down('tabL') {
        font-size: 48px;
        line-height: 48px;
        margin-bottom: 29px;
      }
    }

    &__container {
      display: flex;
      flex-wrap: wrap;
      width: 967px;
      column-gap: 24px;
      row-gap: 31px;
      margin: 0 auto;

      @include breakpoint-down('tabL') {
        margin: 0 20px;
        row-gap: 19px;
        width: calc(100% - 40px);
      }

      @include breakpoint-down('mobL') {
        margin: 0 20px;
      }
    }

    .usefulMaterialsCard {
      background: white;
      box-shadow: 1px 1px 12px 0 #00000040;
      gap: 20px;
      border-radius: 24px;
      padding: $sp-xxl;
      width: calc((100% - 24px) / 2);
      display: flex;
      flex-direction: column;

      @include breakpoint-down('tabL') {
        padding: $sp-xl;
      }

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

      &__fullWidth {
        width: 100%;
      }

      &__header {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: $sp-lg;
        margin-bottom: $sp-lg;
      }

      &__title {
        font-family: $Suisse;
        font-weight: 500;
        font-size: 24px;
        line-height: 18px;
        letter-spacing: 0;
        vertical-align: middle;

        @include breakpoint-down('mobL') {
          font-size: 26px;
        }
      }

      &__icon {
        display: flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid $qc-accent;
        border-radius: 8px;
        width: 42px;
        height: 42px;

        img {
          height: 26px;
        }
      }

      &__description {
        font-family: $Suisse;
        font-weight: 400;
        font-size: 18px;
        line-height: 26px;
        vertical-align: middle;

        margin-bottom: 20px;

        @include breakpoint-down('tabL') {
          font-size: 16px;
          line-height: 24px;
        }
      }

      &__button {
        margin: auto 0 0;
        &--download {
          border: 1px solid $qc_tech_grey;
          color: $qc_tech_grey;
          border-radius: 60px;
          gap: 8px;
          padding: 11px $sp-xxl;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;

          font-family: $Suisse;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          text-align: center;

          img {
            width: 18px;
            height: 18px;
          }
        }
      }
    }

  }
</style>