<script lang="ts">
  import Button from '../../../components/Button/Button.svelte';
  import win from '../../../assets/images/hero/1win.svg';
  import capital from '../../../assets/images/hero/capital.svg';
  import centrum from '../../../assets/images/hero/centrum.svg';
  import exnova from '../../../assets/images/hero/exnova.svg';
  import mango from '../../../assets/images/hero/mango.svg';
  import profit from '../../../assets/images/hero/profit.svg';
  import xtrade from '../../../assets/images/hero/xtrade.svg';
  import xoptions from '../../../assets/images/hero/xoptions.svg';
  import { showForm } from '../../../store.js';
  import { browser } from '$app/environment';
  import Counter from '../../../utils/Counter.js';
  import { t } from '$lib/translations';
  import { GTMEvent } from '../../../utils/events';

  if (browser) {
    Counter('count1', 0, 350, 2500);
    Counter('count2', 0, 8, 2500);
    Counter('count3', 0, 23, 2500);
  }
</script>

<div class="hero">
  <div class="heroContent first">
    <h1 class="heroTitle">{$t('Your all-in-one brokerage solution')}</h1>
    <p class="heroText">{$t('Build your FintechFuel-powered trading platform in as little as 2 weeks.')}</p>
    <Button
      text={$t('Get started')}
      type="primary"
      className="heroBtn"
      onClick={() => {
        showForm.set(true);
        GTMEvent.create({ event: 'fintechfuel_form_open' });
        const timer = setTimeout(() => {
          const input = document.getElementById('name');

          if (!input) {
            return;
          }

          input.focus();
          clearTimeout(timer);
        }, 300);
      }}
    />
  </div>
  <div class="heroContent">
    <div class="heroGrid">
      <div class="heroGridItem">
        <p><span id="count1">350</span>k</p>
        <span>{$t('Average number of traders per month')}</span>
      </div>
      <div class="heroGridItem">
        {#if $t('$8B')}
          <p>$<span id="count2">8</span>B</p>
        {:else}
          <p>$ <span id="count2">8</span> bilhões</p>
        {/if}
        <span>{$t('Average annual turnover')}</span>
      </div>
      <div class="heroGridItem">
        {#if $t('23+')}
          <p><span id="count3">23</span>+</p>
        {:else}
          <p><span id="count3">23</span> ou mais</p>
        {/if}

        <span>{$t('Brokers launched in 2023')}</span>
      </div>
    </div>
  </div>
  <div class="heroContent">
    <div class="heroLine">
      <p class="heroLineText">{$t('Trusted by many leading brokerages')}</p>
      <div class="heroLineBlock">
        <div class="heroLineBlockScroll">
          <div class="heroLineItem" style="padding-bottom: 6px">
            <img src={win} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={xtrade} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={capital} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={centrum} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={exnova} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={mango} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={xoptions} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={profit} alt="" />
          </div>
          <div class="heroLineItem" style="padding-bottom: 6px">
            <img src={win} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={xtrade} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={capital} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={centrum} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={exnova} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={mango} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={xoptions} alt="" />
          </div>
          <div class="heroLineItem">
            <img src={profit} alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

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

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

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

    .heroText {
      font-size: 24px;
      font-weight: 400;
      line-height: 36px;
      margin-bottom: 48px;

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

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

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

    .heroContent {
      margin-bottom: 96px;
      width: 100%;

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

      @include breakpoint-down('tabS') {
        margin-bottom: 64px;
      }

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

      &.first {
        max-width: 640px;

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

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    .heroGrid {
      display: flex;
      gap: 128px;

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

      @include breakpoint-down('tabM') {
        gap: 64px;
      }

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

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

    .heroGridItem {
      padding: 16px 0 16px 32px;
      border-left: thin solid #d9d7cc;
      width: 100%;
      max-width: 310px;

      @include breakpoint-down('tabS') {
        display: flex;
        align-items: center;
        gap: 32px;
        max-width: none;
        padding: 16px 76px 16px 32px;
      }

      @include breakpoint-down('mobM') {
        padding: 8px 6px 8px 16px;
        gap: 20px;
      }

      p {
        font-size: 72px;
        font-weight: 400;
        line-height: 94px;
        margin-bottom: 6px;

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

        @include breakpoint-down('tabS') {
          min-width: 134px;
          margin-bottom: 0;
        }

        @include breakpoint-down('mobM') {
          font-size: 38px;
          min-width: 90px;
          line-height: 49px;
        }
      }

      > span {
        display: block;
        color: #73726c;

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

    .heroLine {
      display: flex;
      align-items: center;
      gap: 72px;

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

      @include breakpoint-down('tabS') {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
      }

      .heroLineText {
        color: #73726c;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        max-width: 151px;

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

      .heroLineBlock {
        overflow: hidden;
        width: 100%;
      }

      .heroLineBlockScroll {
        display: flex;
        align-items: center;
        gap: 96px;
        width: max-content;
        animation: marquee 15s linear infinite;
        position: relative;
        left: -1990px;

        @include breakpoint-down('deskS') {
          gap: 72px;
          left: -1800px;
          animation: marqueeL 15s linear infinite;
        }
      }
    }
  }

  @keyframes marquee {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(2018px, 0);
    }
  }

  @keyframes marqueeL {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(1825px, 0);
    }
  }
</style>