<script lang="ts">

import Button from '../../button/Button.svelte';
import activeTabMPic from '../../../assets/images/for-traders/telegram375.webp';
import activeTabLPic from '../../../assets/images/for-traders/telegram764.webp';
import activeDeskLPic from '../../../assets/images/for-traders/telegram1366.webp';
import activePic from '../../../assets/images/for-traders/telegram1800.webp';
import { t } from '$lib/translations';


const onButtonClick = () => {
  window.open('https://t.me/quadcode_solutions');
}
</script>

<section class="joinOurCommunity">
  <div class="container">
    <div class="joinOurCommunity__text">
      <h1 class="joinOurCommunity__textTitle">{@html $t('for-traders.Join our Telegram community')}</h1>
      <p class="joinOurCommunity__textDescription">{$t('for-traders.Subscribe to our telegram channel and receive latest updates.')}</p>
      <Button onClick={onButtonClick}>
        {$t('for-traders.Subscribe')}
        <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.23633 16.875L14.1113 10L7.23633 3.125" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </Button>
    </div>
    <picture>
      <source srcset={activeTabMPic} media="(max-width: 767px)">
      <source srcset={activeTabLPic} media="(max-width: 1024px)">
      <source srcset={activeDeskLPic} media="(max-width: 1439px)">
      <img src={activePic} loading="lazy" alt="cards">
    </picture>
  </div>
</section>

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

  .joinOurCommunity {
    overflow: hidden;
    padding-top: 173px;
    padding-bottom: 174px;
    padding-left: 43px;
    background: rgba(245, 245, 245, 1);
    margin-left: -76px;

    @include breakpoint-down('deskL') {
      padding-top: 125px;
      padding-left: 106px;
      padding-bottom: 135px;
    }

    @include breakpoint-down('tabL') {
      padding-top: 80px;
      padding-left: 96px;
      padding-bottom: 65px;
    }
    @include breakpoint-down('tabM') {
      padding-top: 60px;
      padding-left: 83px;
      padding-bottom: 60px;
    }

    .container {
      display: flex;
      gap: 55px;

      @include breakpoint-down('deskL') {
        gap: 30px;
        justify-content: space-between;
      }
      @include breakpoint-down('tabL') {
        gap: 20px;
      }
      @include breakpoint-down('tabM') {
        flex-direction: column-reverse;
        align-items: center;
        gap: 4px;
      }
    }
    &__text {
      padding-top: 90px;
      display: flex;
      flex-direction: column;
      width: 723px;
      @include breakpoint-down('deskL') {
        padding-top: 39px;
        width: 547px;
      }
      @include breakpoint-down('tabL') {
        padding-top: 10px;
      }
      @include breakpoint-down('tabM') {
        padding-top: 0;
        width: 100%;
        align-items: center;
      }
    }
    img {
      width: 655px;
      height: 480px;
      @include breakpoint-down('deskL') {
        width: 440px;
        height: 322px;
      }
      @include breakpoint-down('tabL') {
        width: 286px;
        height: 208px;
      }
      @include breakpoint-down('tabM') {
        width: 311px;
        height: 226px;
      }
    }
    &__textTitle {
      font-size: 72px;
      line-height: 72px;
      font-weight: 700;
      margin-bottom: 18px;

      @include breakpoint-down('deskL') {
        font-size: 42px;
        line-height: 46.2px;
        margin-bottom: 12px;
      }
      @include breakpoint-down('tabL') {
        font-size: 36px;
        line-height: 36px;
        margin-bottom: 8px;
      }
      @include breakpoint-down('tabM') {
        font-size: 31px;
        line-height: 31px;
        width: 70%;
        text-align: center;
      }

      :global(span) {
        color: $redPrimary;
      }
    }

    &__textDescription {
      font-size: 28px;
      font-weight: 700;
      line-height: 33.6px;
      color: $techBluePrimary;
      margin-bottom: 40px;
      width: 476px;

      @include breakpoint-down('deskL') {
        font-size: 18px;
        line-height: 19.8px;
        margin-bottom: 30px;
        width: 297px;
      }
      @include breakpoint-down('tabL') {
        font-size: 16px;
        line-height: 19.49px;
        margin-bottom: 20px;
        width: 277px;
      }
      @include breakpoint-down('tabM') {
        font-size: 12px;
        line-height: 14.4px;
        font-weight: 400;
        width: 203px;
        text-align: center;
      }
    }

  }
  :global(.joinOurCommunity .button) {
    height: 65px;
    width: 347px;
    font-size: 30px;
    font-weight: 700;
    line-height: 33px;
    text-align: center;

    @include breakpoint-down('deskL') {
      font-size: 18px;
      height: 52px;
      width: 37%;
      font-weight: 700;
      line-height: 19.8px;
      text-align: center;
    }
    @include breakpoint-down('tabL') {
      width: 47%;
      height: 38px  ;
      font-size: 12px;
      font-weight: 700;
      line-height: 14.4px;
    }
    @include breakpoint-down('tabM') {
      width: 100%;
      font-size: 12px;
      font-weight: 700;
      line-height: 14.4px;
      text-align: center;
    }
  }
</style>