<script lang="ts">
  import { t } from '$lib/translations';
  import icon1 from '../../../assets/images/investment-calculator/howItWorks/icon1.svg';
  import icon2 from '../../../assets/images/investment-calculator/howItWorks/icon2.svg';
  import icon3 from '../../../assets/images/investment-calculator/howItWorks/icon3.svg';
  import icon4 from '../../../assets/images/investment-calculator/howItWorks/icon4.svg';
</script>

<div class="block-howItWorks">
  <div class="container">
    <p class="block-howItWorks__title">{$t('IC.How it Works?')}</p>
    <div class="block-howItWorks__blocks">
      <div class="block-howItWorks__block">
        <div class="howItWorks-block__icon" style="background-image: url({icon1})"></div>
        <div class="howItWorks-block__title">{$t('IC.The Base')}</div>
        <div class="howItWorks-block__text">{$t('IC.We take your starting amount and apply compound interest based on your expected return.')}</div>
      </div>
      <div class="block-howItWorks__block">
        <div class="howItWorks-block__icon" style="background-image: url({icon2})"></div>
        <div class="howItWorks-block__title">{$t('IC.The Growth')}</div>
        <div class="howItWorks-block__text">{$t('IC.We add your monthly contributions. If you use the "Annual Increase" setting, we boost your contributions every year to match your growing income.')}</div>
      </div>
      <div class="block-howItWorks__block">
        <div class="howItWorks-block__icon" style="background-image: url({icon3})"></div>
        <div class="howItWorks-block__title">{$t('IC.The Reality Check')}</div>
        <div class="howItWorks-block__text">{$t('IC.This is where we differ. We subtract estimated taxes and fees, then adjust the final number for inflation.')}</div>
      </div>
      <div class="block-howItWorks__block">
        <div class="howItWorks-block__icon" style="background-image: url({icon4})"></div>
        <div class="howItWorks-block__title">{$t('IC.The Result')}</div>
        <div class="howItWorks-block__text">{$t('IC.You get two numbers - what you’ll have on paper (Nominal) and what that money will actually buy you (Purchasing Power).')}</div>
      </div>
    </div>
  </div>
</div>

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

  .block-howItWorks {

    .container {
      max-width: 1181px;
      padding: 32px;
      background-color: #F8FBFD;
      border-radius: 16px;

      @include breakpoint-down('tabM') {
        border-radius: 32px;
        padding: 20px;
      }
    }

    &__title {
      font-weight: 500;
      font-size: 40px;
      line-height: 46px;
      letter-spacing: 0;
    }

    &__blocks {
      display: flex;
      justify-content: space-between;
      gap: 24px;
      margin-top: 32px;

      @include breakpoint-down('tabM') {
        flex-direction: column;
        justify-content: initial;
      }
    }

    &__block {
      flex: 1;
    }

    .howItWorks-block__icon {
      width: 32px;
      height: 32px;
    }

    .howItWorks-block__title {
      font-weight: 600;
      font-size: 18px;
      line-height: 26px;
      margin: 8px 0 6px;
    }

    .howItWorks-block__text {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
    }
  }
</style>