<script lang="ts">
  import { t } from '$lib/translations';
  import { getLocaleUrl } from '$lib/translations';
  import bookOpenIcon from '$assets/images/main/guiding/book-open.svg';
  import percent from '$assets/images/main/guiding/percent.svg';
  import pdf from '$assets/images/main/guiding/pdf.svg';

  const items = [
    {
      title: $t('Marketing guide'),
      readTime: $t('15 min read'),
      description: $t(
        'Explore our marketing guide for brokers to learn the best channels and tools for client acquisition.'
      ),
      buttonText: $t('Download guide'),
      buttonLink: getLocaleUrl('/marketing-guide'),
      icon: pdf,
    },
    {
      title: $t('Business plan'),
      readTime: $t('1 min read'),
      description: $t(
        'Explore our one-page brokerage business plan to understand costs, revenue and when you can break even'
      ),
      buttonText: $t('Get a plan'),
      buttonLink: getLocaleUrl('/business-plan'),
      icon: pdf,
    },
    {
      title: $t('Brokerage launch checklist'),
      readTime: $t('1 min read'),
      description: $t('Follow our step-by-step brokerage launch checklist to see every stage of your launch with us'),
      buttonText: $t('Get a checklist'),
      buttonLink: 'https://fsms.quadcode.com/storage/public/d0/q3/akhmsj7oc3be3cog/Checklist.pdf',
      icon: pdf,
    },
    {
      title: $t('Profit calculator'),
      readTime: null,
      description: $t(
        'Calculate your potential revenue and key metrics for any timeframe using our advanced brokerage profit calculator'
      ),
      buttonText: $t('Calculate profit'),
      buttonLink: getLocaleUrl('/brokerage-profit-calculator'),
      icon: percent,
    },
  ];
</script>

<section class="guiding">
  <div class="container container-main">
    <div class="guiding__container">
      <div class="guiding__left">
        <h2 class="guiding__title">
          {$t('Guiding you through the entire journey')}
        </h2>
      </div>
      <div class="guiding__right">
        {#each items as item, index}
          <div class="guiding__item">
            {#if index > 0}
              <div class="guiding__divider" />
            {/if}
            <div class="guiding__item-content">
              <div class="guiding__item-row">
                <h3 class="guiding__item-title">{item.title}</h3>
                <p class="guiding__item-description">{item.description}</p>
              </div>
              <div class="guiding__item-row guiding__item-row--actions">
                {#if item.readTime}
                  <div class="guiding__read-time">
                    <img src={bookOpenIcon} alt="book-open" width="16" height="16" />
                    <span>{item.readTime}</span>
                  </div>
                {:else}
                  <div />
                {/if}
                <a
                  href={item.buttonLink}
                  class="guiding__item-button"
                  class:guiding__item-button--profit={item.title === $t('Profit calculator')}
                  target={item.buttonLink.startsWith('http') ? '_blank' : undefined}
                >
                  <img src={item.icon} alt="" />
                  <span>{item.buttonText}</span>
                </a>
              </div>
            </div>
          </div>
        {/each}
      </div>
    </div>
  </div>
</section>

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

  .guiding {
    background: #f2f5f7;
    padding: 112px 0;

    .container-main {
      position: relative;
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 56px;

      @media (max-width: 1366px) {
        padding: 0 40px;
      }
      @media (max-width: 1024px) {
        padding: 0 32px;
      }

      @media (max-width: 480px) {
        padding: 0 24px;
      }
      @media (max-width: 393px) {
        padding: 0 20px;
      }
    }

    &__container {
      background: $techWhite;
      border-radius: 32px;
      padding: 56px;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 52px;

      @media (max-width: 1366px) {
        grid-template-columns: 1fr 553px;
      }

      @media (max-width: 1210px) {
        grid-template-columns: 1fr;
      }

      @media (max-width: 1024px) {
        padding: 56px;
      }

      @media (max-width: 480px) {
        padding: 56px 32px;
      }

      @media (max-width: 393px) {
        padding: 56px 20px;
      }
    }

    &__left {
      max-width: 760px;
    }

    &__title {
      font-size: 64px;
      font-weight: 400;
      line-height: 72px;
      max-width: 451px;
      color: $fontPrimary;

      @media (max-width: 1210px) {
        max-width: 614px;
      }

      @media (max-width: 1024px) {
        font-size: 56px;
        line-height: 68px;
      }

      @media (max-width: 550px) {
        font-size: 52px;
        line-height: 64px;
      }

      @media (max-width: 520px) {
        font-size: 46px;
        line-height: 56px;
      }

      @media (max-width: 480px) {
        font-size: 52px;
        line-height: 64px;
      }

      @media (max-width: 479px) {
        font-size: 36px;
        line-height: 44px;
      }
    }

    &__right {
      padding-top: 20px;
      display: flex;
      flex-direction: column;
      max-width: 600px;
      width: 100%;

      @media (max-width: 1210px) {
        padding-top: 0;
        padding-bottom: 0;
        max-width: 100%;
      }
    }

    &__item {
      display: flex;
      flex-direction: column;
    }

    &__divider {
      height: 1px;
      background: #e5e5e5;
      margin-bottom: 40px;
    }

    &__item-content {
      display: flex;
      flex-direction: column;
      gap: 24px;
      padding-bottom: 40px;
    }

    &__item:last-child &__item-content {
      padding-bottom: 20px;

      @media (max-width: 479px) {
        padding-bottom: 0px;
      }
    }

    &__item-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: start;

      @media (max-width: 1024px) {
        gap: 24px;
      }

      @media (max-width: 479px) {
        grid-template-columns: 1fr;
      }

      @media (max-width: 393px) {
        gap: 8px;
      }

      &--actions {
        align-items: center;
        grid-template-columns: 1fr 1fr;

        @media (max-width: 520px) {
          grid-template-columns: 1fr 1fr;
          justify-items: flex-start;
          gap: 24px;
          white-space: nowrap;
        }
      }
    }

    &__item-title {
      font-size: 32px;
      font-weight: 400;
      line-height: 40px;
      color: $fontPrimary;

      @media (max-width: 1024px) {
        font-size: 28px;
        line-height: 36px;
      }

      @media (max-width: 480px) {
        font-size: 24px;
        line-height: 28px;
      }

      @media (max-width: 393px) {
        font-size: 20px;
        line-height: 26px;
      }
    }

    &__read-time {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      line-height: 16px;
      white-space: nowrap;
      color: #1b1c1d;

      img {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        display: block;
      }
    }

    &__item-description {
      font-size: 14px;
      line-height: 20px;
      color: #525659;

      @media (max-width: 720px) {
        max-width: 256px;
      }

      @media (max-width: 480px) {
        max-width: 168px;
      }

      @media (max-width: 479px) {
        max-width: 100%;
      }
    }

    &__item-button {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 48px;
      color: #1b1c1d;
      border: 1px solid #d4d8db;
      font-size: 14px;
      line-height: 20px;
      width: fit-content;
      transition: all 0.2s ease;
      cursor: pointer;
      position: relative;

      &:hover {
        border-color: transparent;
        background-color: #eaecef;
      }

      img {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
      }

      &--profit {
        img {
          @media (max-width: 1366px) {
            display: none;
          }
        }
      }

      &:hover {
        background: #d4d8db;
      }

      &:active {
        background: #adb1b7;
      }

      &::after {
        content: '';
        display: none;
        width: 10px;
        height: 10px;
        background: url('../../../assets/icons/arrow-right.svg') center/contain no-repeat;
      }

      @media (max-width: 1366px) {
        &::after {
          display: block;
        }
      }
    }
  }
</style>