<script lang="ts">
  import image from '../../../assets/images/about/contacts/cyprus_office.webp';
  import { t } from '$lib/translations';
</script>

<div class="block-contacts">
  <div class="container">
    <div class="block-contacts__wrapper">
      <img src={image} alt="" class="block-contacts__image" />
      <div class="block-contacts__content">
        <h3 class="block-contacts__title">{$t('about.Contacts')}</h3>
        <p class="block-contacts__text">
          <!-- {$t('about.82nd road, 4 Kato Polemidia, 4153, Limassol, Cyprus')} -->
          {$t('about.Spyrou Kyprianou Avenue & Evgeniou Voulgareos 4153, Kato Polemidia, Limassol, Cyprus')}
        </p>
        <div class="block-contacts__block">
          <p class="block-contacts__blockTitle">{$t('about.General:')}</p>
          <a href="mailto:info@quadcode.com" class="block-contacts__blockLink">{$t('about.info@quadcode.com')}</a>
        </div>
        <div class="block-contacts__block">
          <p class="block-contacts__blockTitle">{$t('about.Business Development:')}</p>
          <a href="mailto:sales@quadcode.com" class="block-contacts__blockLink">{$t('about.sales@quadcode.com')}</a>
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-contacts {
    margin-bottom: 40px;
    height: 680px;

    @include breakpoint-down('deskL') {
      height: 543px;
    }

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

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

    &__wrapper {
      border-radius: 16px;
      overflow: hidden;
      background: $techWhite;
      display: flex;

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

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

    &__image {
      width: 100%;
      max-width: 48.572%;

      @include breakpoint-down('deskS') {
        max-width: 50%;
      }

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

    &__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 52%;
      gap: 40px;

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

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

      @include breakpoint-down('tabM') {
        width: 100%;
        padding: 24px 20px 44px 20px;
        gap: 8px;
      }
    }

    &__title {
      @include titleL;

      width: 100%;
      max-width: 480px;

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

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

      @include breakpoint-down('tabM') {
        max-width: none;
      }
    }

    &__text {
      width: 100%;
      max-width: 480px;

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

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

      @include breakpoint-down('tabM') {
        max-width: none;
      }
    }

    &__block {
      width: 100%;
      max-width: 480px;

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

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

      @include breakpoint-down('tabM') {
        max-width: none;
      }
    }

    &__blockTitle {
      @include xSmallDefault;

      margin-bottom: 4px;
    }

    &__blockLink {
      position: relative;
      color: $linkPrimary;

      &:after {
        content: '';
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 1px;
        background: $linkPrimary;
      }
    }
  }
</style>