<script lang="ts">
  import Button from '../../button/Button.svelte';
  import { popupForm } from '../../../store';
  import { t } from '$lib/translations';
</script>

<section class="brokerage-plan">
  <div class="container container-main">
    <div class="brokerage-plan__content">
      <div class="brokerage-plan__left">
        <h2 class="brokerage-plan__title">
          {$t('A cost-effective solution to launch your own brokerage brand')}
        </h2>
      </div>
      <div class="brokerage-plan__right">
        <p class="brokerage-plan__description">
          {$t('See your potential costs, revenue and break-even point with our one-page brokerage plan')}
        </p>
        <Button onClick={() => popupForm.set(true)} className="brokerage-plan__button">
          {$t('Request business plan')}
        </Button>
      </div>
    </div>
    <div class="brokerage-plan__stats">
      <div class="brokerage-plan__stat">
        <div class="brokerage-plan__stat-label">
          {$t('Average payback period')}
        </div>
        <div class="brokerage-plan__stat-value">{$t('3 months')}</div>
      </div>
      <div class="brokerage-plan__stats-right">
        <div class="brokerage-plan__stat">
          <div class="brokerage-plan__stat-label">
            {$t('Saved on development costs')}
          </div>
          <div class="brokerage-plan__stat-value">{$t('$150K')}</div>
        </div>
        <div class="brokerage-plan__stat">
          <div class="brokerage-plan__stat-label">
            {$t('From zero to launch')}
          </div>
          <div class="brokerage-plan__stat-value">{$t('14 days')}</div>
        </div>
      </div>
    </div>
  </div>
</section>

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

  .brokerage-plan {
    background: #f2f5f7;
    padding: 112px 0;
    overflow: hidden;

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

    &__content {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px;
      margin-bottom: 112px;

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

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

    &__title {
      font-size: 46px;
      font-weight: 400;
      line-height: 56px;
      color: $fontPrimary;

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

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

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

    &__left {
      max-width: 760px;
    }

    &__right {
      display: flex;
      flex-direction: column;
      gap: 26px;
      max-width: 313px;
      justify-self: end;

      @media (max-width: 721px) {
        justify-self: start;
        max-width: 440px;
      }
    }

    &__description {
      font-size: 16px;
      line-height: 24px;
      color: $fontPrimary;
    }

    :global(.brokerage-plan__button.button) {
      padding: 8px 16px;
      font-size: 14px;
      line-height: 20px;
      background: #ff282b;

      &:hover {
        background: #e60019;
      }

      &:active {
        background: #c70214;
      }
    }

    &__stats {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 40px;

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

    &__stats-right {
      display: flex;
      flex-direction: row;
      gap: 72px;
      padding-right: 66px;

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

      @media (max-width: 950px) {
        padding-right: 0;
      }

      @media (max-width: 950px) {
        gap: 30px;
      }

      @media (max-width: 721px) {
        gap: 72px;
      }

      @media (max-width: 481px) {
        flex-direction: column;
        gap: 34px;
      }
    }

    &__stat {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    &__stat-label {
      font-size: 16px;
      line-height: 20px;
      color: #7d8387;
      white-space: nowrap;
      @media (max-width: 481px) {
        font-size: 14px;
        line-height: 20px;
      }
    }

    &__stat-value {
      font-size: 72px;
      line-height: 82px;
      white-space: nowrap;
      color: $fontPrimary;

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

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

      @media (max-width: 393px) {
        font-size: 36px;
        line-height: 44px;
      }
    }
  }
</style>