<script lang="ts">
  import author from '../../../assets/images/prop-firm/vitaly-makarenko.png';
  import { t } from '$lib/translations';
</script>

<section class="quote">
  <div class="container">
    <img class="quote__avatar" src={author} alt="author">
    <div class="quote__textBlock">
      <div class="quote__textBlockContainer">
        <img class="quote__avatar mobile" src={author} alt="author">
        <div class="quote__userInfo">
          <h3 class="quote__name">{$t('prop-firm.Vitaliy Makarenko')}</h3>
          <p class="quote__jobTitle">{$t('prop-firm.CCO Quadcode Brokerage Solutions')}</p>
        </div>
        <a class="quote__platformLink" target="_blank" href="https://www.linkedin.com/in/makvitaly/">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22.224 0H1.77067C0.794667 0 0 0.768551 0 1.71731V22.2827C0 23.2314 0.794667 24 1.77067 24H22.224C23.2053 24 24 23.2314 24 22.2827V1.71731C24 0.768551 23.2053 0 22.224 0ZM7.27467 20.0936H3.648V9.25442H7.27467V20.0936ZM5.46133 7.77032H5.44C4.224 7.77032 3.44 6.93816 3.44 5.89929C3.44 4.83392 4.25067 4.02827 5.488 4.02827C6.73067 4.02827 7.49333 4.83922 7.51467 5.89929C7.51467 6.93816 6.72533 7.77032 5.46133 7.77032ZM20.3467 20.0936H16.72V14.2898C16.72 12.8322 16.1973 11.841 14.8853 11.841C13.8827 11.841 13.2853 12.5088 13.024 13.1608C12.928 13.394 12.9067 13.7173 12.9067 14.0406V20.0936H9.28C9.28 20.0936 9.328 10.2721 9.28 9.25442H12.9067V10.7862C13.3867 10.0495 14.2507 8.9947 16.176 8.9947C18.56 8.9947 20.3467 10.5424 20.3467 13.8763V20.0936Z" fill="#2A7AB9"/>
          </svg>
        </a>
      </div>
      <div class="quote__value">
        <svg width="67" height="57" viewBox="0 0 67 57" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M66.5793 28.8132V57H38.3945V49.6923C38.3945 38.2784 39.2359 29.7875 40.9185 24.2198C42.7414 18.5128 47.4389 10.4396 55.0109 0L67 6.68132C60.69 17.3993 57.0442 24.7766 56.0626 28.8132H66.5793Z" fill="#2B2B2B"/>
          <path d="M28.1848 28.8132V57H0V49.6923C0 38.2784 0.841338 29.7875 2.52401 24.2198C4.34691 18.5128 9.04438 10.4396 16.6164 0L28.6055 6.68132C22.2954 17.3993 18.6497 24.7766 17.6681 28.8132H28.1848Z" fill="#2B2B2B"/>
        </svg>
        <div class="quote__valueText">
          {$t('prop-firm.We offer you an advanced, revolutionary trading platform at no extra cost. This all-in-one solution provides everything you need to establish your prop trading firm from the ground up. We not only assist you in building your platform but also manage it on your behalf. Leave your request and check out the demo!')}
        </div>
      </div>
    </div>
  </div>
</section>

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

  .quote {
    background: $techBlue1;
    padding: 87px 0;
    overflow: hidden;

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

    @include breakpoint-down('tabL') {
      padding: 50px 0;
    }

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

    .container {
      display: flex;
      justify-content: center;
      gap: 40px;
      @include breakpoint-down('tabL') {
        gap: 20px;
        margin-left: -5px;
      }
      @include breakpoint-down('tabM') {
        margin-left: 0;
        position: relative;
      }
    }
    &__avatar {
      width: 200px;
      height: 200px;
      border-radius: 24px;
      @include breakpoint-down('tabL') {
        width: 134px;
        height: 134px;
        border-radius: 16px;
      }
      @include breakpoint-down('tabM') {
        width: 64px;
        height: 64px;
        display: none;
        border-radius: 8px;
      }

      &.mobile {
        display: none;
        @include breakpoint-down('tabM') {
          display: block;
        }
      }
    }
    &__textBlockContainer {
      @include breakpoint-down('tabM') {
        display: flex;
        gap: 20px;
        align-items: center;
        margin-bottom: 15px;
        position: relative;
        width: 334px;
      }
      @include breakpoint-down('mobM') {
        width: 99%;
      }
    }
    &__textBlock {
      width: 536px;

      @include breakpoint-down('tabL') {
        width: 385px;
      }
      @include breakpoint-down('tabM') {
        width: auto;
      }
    }
    &__name {
      @include H3;

      @include breakpoint-down('deskL') {
        @include H2;
      }
    }
    &__jobTitle {
      @include subtext;
      color: rgba(154, 154, 154, 1);
      margin-bottom: 8px;
      @include breakpoint-down('tabM') {
        @include body;
        margin-bottom: 0;
      }
    }
    &__platformLink {
      margin-bottom: 24px;
      width: fit-content;
      height: fit-content;
      display: flex;

      @include breakpoint-down('tabM') {
        margin-bottom: 0;
        position: absolute;
        top: 20px;
        right: 0;
      }

      svg {
        width: 24px;
        height: 24px;
      }
    }

    &__value {
      display: flex;
      gap: 24px;

      @include breakpoint-down('tabM') {
        align-items: center;
        flex-direction: column;
        gap: 12px;
        width: 334px;
      }
      @include breakpoint-down('mobM') {
        width: 99%;
      }

      svg {
        min-width: 66.9990310668945px;
        min-height: 57px;
        max-width: 66.9990310668945px;
        max-height: 57px;

        @include breakpoint-down('deskL') {
          min-width: 50.543128967285156px;
          min-height: 43px;
          max-width: 50.543128967285156px;
          max-height: 43px;
        }

        @include breakpoint-down('tabL') {
          min-width: 42.0002555847168px;
          min-height: 35.73186111450195px;
          max-width: 42.0002555847168px;
          max-height: 35.73186111450195px;
        }

        @include breakpoint-down('tabM') {
          min-width: 29.385826110839844px;
          min-height: 25px;
          max-width: 29.385826110839844px;
          max-height: 25px;
          align-self: start;
        }
      }
    }

    &__valueText {
      @include body;
      padding-left: 24px;
      border-left: thin solid rgba(231, 44, 57, 1);

      @include breakpoint-down('tabM') {
        padding-left: 0;
        padding-top: 12px;
        border-left: none;
        border-top: thin solid rgba(231, 44, 57, 1);
        text-align: center;
      }

    }
  }
</style>