<script lang="ts">
  import { t } from '$lib/translations';
</script>

<div class="timeline">
  <div class="timelineContent">
    <div class="timelineBlock">
      <h2 class="timelineTitle">{$t('Effortless launch timeline')}</h2>
      <p class="timelineText">{$t("We'll guide you through all the steps to realize your vision.")}</p>
    </div>
    <div class="timelineInfo">
      <p class="timelineInfoText">{$t('Launch in as little as')}</p>
      <p class="timelineInfoTitle">{$t('2 weeks')}</p>
      <p class="timelineInfoText">{$t('Brokarege in production')}</p>
    </div>
  </div>
  <div class="timelineScroll">
    <div class="timelineItem active">
      <div class="timelineItemCircle">1</div>
      <p class="timelineItemTitle">{$t('Get started')}</p>
      <p class="timelineItemText">{$t('It only takes a minute')}</p>
    </div>
    <div class="timelineItem">
      <div class="timelineItemCircle">2</div>
      <p class="timelineItemTitle">{$t('Check out the demo')}</p>
      <p class="timelineItemText">{$t('See our product in action')}</p>
    </div>
    <div class="timelineItem">
      <div class="timelineItemCircle">3</div>
      <p class="timelineItemTitle">{$t('Customize your platform')}</p>
      <p class="timelineItemText">{$t('Go ahead and make it your own')}</p>
    </div>
    <div class="timelineItem">
      <div class="timelineItemCircle">4</div>
      <p class="timelineItemTitle">{$t('Sign the contract')}</p>
      <p class="timelineItemText">{$t("You're almost at the finish line")}</p>
    </div>
    <div class="timelineItem">
      <div class="timelineItemCircle">5</div>
      <p class="timelineItemTitle">{$t('Proceed with prepayment')}</p>
      <p class="timelineItemText">{$t('Choose from a a variety of payment methods')}</p>
    </div>
    <div class="timelineItem">
      <div class="timelineItemCircle active">
        <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_1090_2562)">
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M0.404698 1.77542L0.68273 1.66776C1.0057 1.55995 1.35564 1.7216 1.46323 2.03567C6.38835 -1.42896 8.81048 4.42326 13.0719 1.88307C13.4306 1.6857 13.5741 1.90101 13.6369 2.08948L15.9425 8.58807C16.059 8.91104 15.9965 9.18032 15.7721 9.31498C11.5287 11.8822 9.09773 6.01201 4.17245 9.46776L6.24476 15.1763C6.36138 15.4903 6.19982 15.8403 5.88595 15.9479L5.59885 16.0559C5.28495 16.1724 4.93501 16.0108 4.81835 15.6967L0.0368234 2.55629C-0.0798016 2.24223 0.0907922 1.89213 0.404698 1.77542Z"
              fill="#FE4D0D"
            />
          </g>
          <defs>
            <clipPath id="clip0_1090_2562">
              <rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
            </clipPath>
          </defs>
        </svg>
      </div>
      <p class="timelineItemTitle">{$t('Get brokerage solution')}</p>
      <p class="timelineItemText">{$t("We'll be there for you every step of the way")}</p>
    </div>
    <div class="timelineProgress" />
  </div>
</div>

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

  .timeline {
    display: flex;
    gap: 205px;

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

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

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

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

    .timelineContent {
      display: flex;
      flex-direction: column;
      max-width: 641px;
      padding-bottom: 16px;

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

      @include breakpoint-down('tabM') {
        gap: 64px;
        flex-direction: row;
        align-items: center;
        max-width: none;
        padding-bottom: 0;
      }

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

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

    .timelineBlock {
      width: 100%;
      flex: 1;

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

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

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

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

      @include breakpoint-down('tabS') {
        line-height: 62px;
      }

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

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

      @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;
      }
    }

    .timelineInfo {
      border-left: thin solid #d9d7cc;
      padding: 16px 0 16px 32px;

      .timelineInfoText {
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        color: #73726c;
      }

      .timelineInfoTitle {
        font-size: 72px;
        font-weight: 400;
        line-height: 94px;
        margin: 8px 0;

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

    .timelineScroll {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: 56px;
      max-width: 424px;
      width: 100%;
      padding: 32px 0;

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

    .timelineItem {
      padding-left: 86px;
      position: relative;
      z-index: 1;

      @include breakpoint-down('mobM') {
        padding-left: 64px;
      }

      .timelineItemTitle {
        font-size: 24px;
        font-weight: 600;
        line-height: 31px;
        margin-bottom: 4px;

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

      .timelineItemCircle {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        width: 48px;
        height: 48px;
        padding: 6px 0;
        justify-content: center;
        align-items: center;
        border-radius: 100%;
        border: 1px solid #d9d7cc;
        background: #faf9f8;
        box-shadow: 0 0 0 5px #faf9f8;

        @include breakpoint-down('mobM') {
          width: 40px;
          height: 40px;
          top: 0;
          transform: none;
        }

        &.active {
          border-color: #fe4d0d;
        }
      }
    }

    .timelineProgress {
      position: absolute;
      top: 0;
      bottom: 0;
      background: #d9d7cc;
      height: 100%;
      width: 1px;
      left: 24px;

      @include breakpoint-down('mobM') {
        left: 20px;
      }
    }
  }
</style>