<script lang="ts">
  import { t } from '$lib/translations';
  import { investmentCalculator, popupForm } from '../../../store';
  import InvestmentChart from '$components/blocks/investment-calculator/InvestmentChart.svelte';
  import InvestmentAdvancedChart from '$components/blocks/investment-calculator/InvestmentAdvancedChart.svelte';
  import { chartSegments } from '$type/investmentCalculator';

  let nominalValue: number = 0;
  let mode: string = 'basic';

  investmentCalculator.subscribe((data) => {
    nominalValue = data.nominalValue;
    mode = data.mode;
  });
</script>

<div class="block-profit">
  <div class="container">
    <div class="investmentProfitCalculator">
      <div class="investmentProfitCalculator__content">
        <div class="investmentProfitCalculator__header">
          <h2>{$t('IC.Your Monthly Profit')}</h2>
          <p>{$t('IC.Nominal Value')}</p>
        </div>
        <div class="investmentProfitCalculator__value">
          {new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
            maximumFractionDigits: 0
          }).format(nominalValue)}
          <hr />
        </div>
        <div class="investmentProfitCalculator__chart">
          {#if mode === 'basic'}
            <InvestmentChart />
          {:else}
            {#key $chartSegments}
              <InvestmentAdvancedChart />
            {/key}
          {/if}
        </div>
        <div class="investmentProfitCalculator__footer">
          <hr />
          <h5>{$t('IC.Disclaimer')}</h5>
          <p>{$t('IC.Note: These figures are projections, not guarantees. Market volatility is not factored into this linear calculation.')}</p>
          <div class="investmentProfitCalculator__cta">
            <button
              on:click={() => popupForm.set(true)}
              on:keydown={(event) => {
              if (event.key === 'Escape') {
                popupForm.set(false);
              }
            }}>{$t('IC.Talk to us')}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

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

  .block-profit {
    color: #FFFFFF;

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

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

    hr {
      background: linear-gradient(90deg, #cfdae1 0%, rgba(207, 218, 225, 0) 100%);
      border: 0;
      height: 1px;
      width: 100%;
      margin: 26px 0 20px;

      @include breakpoint-down('deskM') {
        margin: 21px 0 20px;
      }

      @include breakpoint-down('tabM') {
        margin: 12px 0 20px;
      }
    }

    .investmentProfitCalculator {
      &__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 64px;
        row-gap: 0;
        overflow: hidden;

        grid-template-areas:
          "header chart"
          "value  chart"
          "footer chart";

        @include breakpoint-down('deskM') {
          grid-template-columns: 1fr;

          grid-template-areas:
            "header"
            "value"
            "chart"
            "footer";
        }
      }

      &__header {
        grid-area: header;

        h2 {
          font-weight: 500;
          font-size: 40px;
          line-height: 46px;

          @include breakpoint-down('tabM') {
            font-weight: 500;
            font-size: 24px;
            line-height: 23px;
          }
        }

        p {
          font-weight: 400;
          font-size: 18px;
          line-height: 26px;
          margin-top: 4px;

          @include breakpoint-down('tabM') {
            font-weight: 400;
            font-size: 16px;
            line-height: 24px;
          }
        }
      }

      &__value {
        grid-area: value;
        font-weight: 400;
        font-size: 48px;
        line-height: 48px;
        margin-top: 12px;
        width: inherit;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

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

        hr {
          display: none;

          @include breakpoint-down('deskM') {
            display: block;
            margin: 35px 0;
          }

          @include breakpoint-down('tabM') {
            margin: 26px 0 16px;
          }
        }
      }

      &__footer {
        grid-area: footer;

        h5 {
          font-weight: 600;
          font-size: 18px;
          line-height: 26px;

          @include breakpoint-down('tabM') {
            font-weight: 500;
            font-size: 16px;
            line-height: 24px;
          }
        }

        p {
          font-weight: 400;
          font-size: 14px;
          line-height: 20px;
          margin-top: 6px;

          @include breakpoint-down('tabM') {
            font-weight: 400;
            font-size: 12px;
            line-height: 14px;
          }
        }
      }

      &__cta {
        background: linear-gradient(125.13deg, #f96c6e 22.41%, rgba(255, 164, 165, 0.42) 80.51%);
        border-radius: 60px;
        padding: 1px;
        margin-top: 20px;

        button {
          background: #141414;
          cursor: pointer;
          border-radius: 60px;
          color: white;
          height: 42px;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          border: 0;
          position: relative;

          font-family: $Suisse;
          font-weight: 400;
          font-size: 14px;
          line-height: 18px;
          text-align: center;
        }
      }

      &__chart {
        grid-area: chart;
        display: flex;
        justify-content: center;
      }
    }
  }
</style>