<script lang="ts">
  import icon1 from '../../../assets/images/awards/mag-ic.png';
  import icon2 from '../../../assets/images/awards/fx-daily.png';
  import icon3 from '../../../assets/images/awards/logo_light.png';
  import image1 from '../../../assets/images/awards/image1.png';
  import image2 from '../../../assets/images/awards/image2.png';
  import image3 from '../../../assets/images/awards/image3.png';
  import image4 from '../../../assets/images/awards/image4.png';
  import { browser } from '$app/environment';
  import { t } from '$lib/translations';

  const onMouse = () => {
    const awardsItem = document.querySelectorAll('.awardsItem');

    if (awardsItem.length) {
      awardsItem.forEach((item) => {
        if (!item) return false;

        const hover = item.querySelector('.awardsItemHover');

        if (!hover) return false;

        item.addEventListener('mousemove', (e) => {
          hover.style.left = e.layerX + -20 + 'px';
          hover.style.top = e.layerY + -20 + 'px';
        });
      });
    }
  };

  if (browser) {
    const matches = window.matchMedia('(min-width: 1024px)').matches;

    window.addEventListener('resize', function () {
      if (matches) {
        onMouse();
      }
    });

    if (matches) {
      onMouse();
    }
  }
</script>

<div class="awards">
  <div class="awardsContent">
    <h2 class="awardsTitle">{$t('Awards')}</h2>
    <p class="awardsText">{$t("FintechFuel's recognition motivates us to further refine our platform.")}</p>
  </div>
  <div class="awardsList">
    <div class="awardsItem">
      <div class="awardsItemHover">
        <div class="awardsItemHoverTitle">{$t('Capital Bear')}</div>
        <div class="awardsItemHoverImg">
          <img src={image3} alt="" />
        </div>
      </div>
      <div class="awardsItemCol publication">
        <div class="awardsItemPublication">
          <div class="awardsItemPublicationImage">
            <img src={icon1} alt="" />
          </div>
          <div class="awardsItemPublicationContent">
            <p class="awardsItemPublicationName">{$t('Global Business Magazine Review')}</p>
            <p class="awardsItemPublicationYear">2022</p>
          </div>
        </div>
      </div>
      <div class="awardsItemCol chevron">
        <div class="awardsItemChevron">{$t('Capital Bear')}</div>
      </div>
      <div class="awardsItemCol title">
        <p class="awardsItemTitle">{$t('Best Binary Options Platform Global')}</p>
      </div>
    </div>
    <div class="awardsItem">
      <div class="awardsItemHover">
        <div class="awardsItemHoverTitle">{$t('Exnova')}</div>
        <div class="awardsItemHoverImg">
          <img src={image1} alt="" />
        </div>
      </div>
      <div class="awardsItemCol publication">
        <div class="awardsItemPublication">
          <div class="awardsItemPublicationImage">
            <img src={icon2} alt="" />
          </div>
          <div class="awardsItemPublicationContent">
            <p class="awardsItemPublicationName">{$t('FX Daily Info')}</p>
            <p class="awardsItemPublicationYear">2022</p>
          </div>
        </div>
      </div>
      <div class="awardsItemCol chevron">
        <div class="awardsItemChevron">{$t('Exnova')}</div>
      </div>
      <div class="awardsItemCol title">
        <p class="awardsItemTitle">{$t('Fastest Growing Broker Latin America')}</p>
      </div>
    </div>
    <div class="awardsItem">
      <div class="awardsItemHover">
        <div class="awardsItemHoverTitle">{$t('Capital Bear')}</div>
        <div class="awardsItemHoverImg">
          <img src={image4} alt="" />
        </div>
      </div>
      <div class="awardsItemCol publication">
        <div class="awardsItemPublication">
          <div class="awardsItemPublicationImage">
            <img src={icon2} alt="" />
          </div>
          <div class="awardsItemPublicationContent">
            <p class="awardsItemPublicationName">{$t('FX Daily Info')}</p>
            <p class="awardsItemPublicationYear">2022</p>
          </div>
        </div>
      </div>
      <div class="awardsItemCol chevron">
        <div class="awardsItemChevron">{$t('Capital Bear')}</div>
      </div>
      <div class="awardsItemCol title">
        <p class="awardsItemTitle">{$t('Best Trading App')}</p>
      </div>
    </div>
    <div class="awardsItem">
      <div class="awardsItemHover">
        <div class="awardsItemHoverTitle">{$t('Exnova')}</div>
        <div class="awardsItemHoverImg">
          <img src={image2} alt="" />
        </div>
      </div>
      <div class="awardsItemCol publication">
        <div class="awardsItemPublication">
          <div class="awardsItemPublicationImage">
            <img src={icon3} alt="" />
          </div>
          <div class="awardsItemPublicationContent">
            <p class="awardsItemPublicationName">{$t('International Business Magazine')}</p>
            <p class="awardsItemPublicationYear">2023</p>
          </div>
        </div>
      </div>
      <div class="awardsItemCol chevron">
        <div class="awardsItemChevron">{$t('Exnova')}</div>
      </div>
      <div class="awardsItemCol title">
        <p class="awardsItemTitle">{$t('Best Mobile Trading Platform')}</p>
      </div>
    </div>
  </div>
</div>

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

  .awards {
    .awardsContent {
      margin-bottom: 70px;
      max-width: 529px;
      width: 100%;

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

      @include breakpoint-down('tabM') {
        max-width: 424px;
        margin-inline: auto;
      }

      @include breakpoint-down('mobM') {
        margin-bottom: 56px;
      }
    }

    .awardsTitle {
      margin-bottom: 24px;
      font-size: 72px;
      font-weight: 600;
      line-height: 94px;

      @include breakpoint-down('tabM') {
        font-size: 48px;
        line-height: 58px;
        text-align: center;
      }

      @include breakpoint-down('mobM') {
        font-size: 32px;
        line-height: 42px;
      }
    }

    .awardsText {
      font-size: 24px;
      font-weight: 400;
      line-height: 36px;

      @include breakpoint-down('tabM') {
        font-size: 22px;
        line-height: 33px;
        text-align: center;
      }

      @include breakpoint-down('tabS') {
        font-size: 20px;
        line-height: 30px;
      }

      @include breakpoint-down('mobM') {
        font-size: 18px;
        line-height: 27px;
      }
    }

    .awardsList {
      @include breakpoint-down('tabM') {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;
      }

      @include breakpoint-down('tabS') {
        gap: 72px;
      }

      @include breakpoint-down('mobM') {
        gap: 56px;
      }
    }

    .awardsItem {
      display: flex;
      align-items: center;
      padding: 31px 0 31px 16px;
      min-height: 130px;
      border-top: thin solid #d9d7cc;
      cursor: none !important;
      position: relative;

      @include breakpoint-down('tabM') {
        border: none;
        padding: 0;
        width: calc((100% - 32px) / 2);
        flex-direction: column;
        align-items: flex-start;
        cursor: auto !important;
      }

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

      &:last-of-type {
        border-bottom: thin solid #d9d7cc;

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

      &:hover {
        background: #f0ede8;
        transition: 0.3s cubic-bezier(0.65, 0.05, 0.36, 1);

        @include breakpoint-down('tabM') {
          background: transparent;
        }

        .awardsItemHover {
          opacity: 1;
        }
      }
    }

    .awardsItemCol {
      &.publication {
        width: 212px;
        margin-right: 80px;

        @include breakpoint-down('deskS') {
          width: 148px;
          margin-right: 72px;
        }

        @include breakpoint-down('tabM') {
          order: 2;
          width: 100%;
          margin-right: 0;
        }
      }

      &.chevron {
        width: 142px;
        min-width: 142px;
        margin-right: 40px;

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

      &.title {
        @include breakpoint-down('tabM') {
          order: 1;
          border-bottom: thin solid #d9d7cc;
          padding-bottom: 12px;
          margin-bottom: 12px;
          width: 100%;
        }
      }
    }

    .awardsItemPublication {
      display: flex;
      align-items: center;
      gap: 20px;
    }

    .awardsItemPublicationImage {
      background: #f0ede8;
      border-radius: 12px;
      width: 44px;
      height: 44px;
      padding: 8px;

      @include breakpoint-down('deskS') {
        display: none;
      }

      > img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }

    .awardsItemPublicationContent {
      width: 148px;

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

    .awardsItemPublicationName {
      font-weight: 600;
      line-height: 21px;

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

    .awardsItemChevron {
      color: #282929;
      border: thin solid #d9d7cc;
      padding: 10px 20px 10px 20px;
      border-radius: 100px;
      width: max-content;
    }

    .awardsItemTitle {
      font-size: 36px;
      font-weight: 600;
      line-height: 43px;

      @include breakpoint-down('deskS') {
        font-size: 28px;
        line-height: 34px;
      }

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

    .awardsItemHover {
      pointer-events: none;
      opacity: 0;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      background: #f0ede8;
      width: 312px;
      height: 366px;
      border-radius: 24px;

      @include breakpoint-down('tabM') {
        opacity: 1;
        position: unset;
        transform: none;
        order: 0;
        margin-bottom: 24px;
        width: 100%;
        pointer-events: all;
      }
    }

    .awardsItemHoverTitle {
      padding: 24px;
      font-weight: 600;
      line-height: 21px;
    }

    .awardsItemHoverImg {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      padding-bottom: 32px;
      width: 100%;
      height: calc(100% - 69px);

      > img {
        height: 100%;
        width: auto;
      }
    }
  }
</style>