<script lang="ts">
  import { t } from '$lib/translations';
  import careers from '../../../assets/images/about/information/careers.webp';
  import team from '../../../assets/images/about/information/team.webp';
</script>

<div class="block-information">
  <div class="container">
    <div class="block-information__grid">
      <div class="block-information__gridItem">
        <div class="block-information__card">
          <a href="https://jobs.quadcode.com/" class="block-information__cardLink" />
          <div class="block-information__cardHeader">
            <img src={careers} alt="" class="block-information__cardImage" />
          </div>
          <div class="block-information__cardBody">
            <h4 class="block-information__cardTitle">{$t('about.Careers')}</h4>
            <p class="block-information__cardText">
              {$t('about.Join us! Explore career opportunities at Quadcode. Become a part of a friendly team, where your skills matter. Discover careers that fit you.')}
            </p>
          </div>
        </div>
      </div>
      <div class="block-information__gridItem">
        <div class="block-information__card">
          <a href="/team" class="block-information__cardLink" />
          <div class="block-information__cardHeader">
            <img src={team} alt="" class="block-information__cardImage" />
          </div>
          <div class="block-information__cardBody">
            <h4 class="block-information__cardTitle">{$t('about.Team')}</h4>
            <p class="block-information__cardText">
              {$t('about.Meet our team! The minds behind Quadcode are A1 business experts, architects, and problem-solvers from a wide range of backgrounds.')}
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-information {
    padding-bottom: 172px;

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

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

    &__grid {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 40px;

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

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

    &__gridItem {
      width: calc((100% - 40px) / 2);

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

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

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

    &__card {
      border-radius: 16px;
      overflow: hidden;
      background: $techWhite;
      position: relative;
      transition: 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);

      @include breakpoint-down('deskS') {
        border-radius: 8px;
      }

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

      &:hover {
        box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.15);
      }
    }

    &__cardLink {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    &__cardHeader {
      overflow: hidden;
      height: 100%;
      max-height: 420px;

      @include breakpoint-down('deskS') {
        max-height: 207px;
      }
    }

    &__cardImage {
      height: 100%;
      object-fit: cover;
    }

    &__cardBody {
      padding: 47px 80px 33px 80px;

      @include breakpoint-down('deskL') {
        padding: 24px 64px 33px 64px;
      }

      @include breakpoint-down('deskS') {
        padding: 17px 17px 33px 17px;
      }

      @include breakpoint-down('tabM') {
        padding: 24px 20px 33px 20px;
      }
    }

    &__cardTitle {
      @include titleM;

      margin-bottom: 8px;
    }

    &__cardText {
      @include smallDefault;

      color: $techBluePrimary;
    }
  }
</style>