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

 export let className = '';
 export let large = false;
 export let options: { title: string; text: string }[];
</script>

<div class="block-faq {className} {large ? 'large' : ''}">
  <div class="block-faq__wrapper">
    <div class="block-faq__text">
      <div class="block-faq__title">{@html $t('FAQ')}</div>
      <div class="block-faq__subtitle">
        {$t("Can't find the answer to your question?")} <br />
        <button
          role="button"
          on:click={() => popupForm.set(true)}
              on:keydown={(event) => {
              if (event.key === 'Escape') {
                popupForm.set(false);
              }
          }}
              tabindex="0">{@html $t('Contact Us')}
        </button>
      </div>
    </div>
    <div class="block-faq__list">
      {#each options as option, i}
        <Accordion2 large={large} title={option.title} text={option.text} i={i} />
      {/each}
    </div>
  </div>
</div>

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

  .block-faq {
    padding: 44px 0;

    &__wrapper {
      display: flex;
      justify-content: space-between;
      max-width: 1102px;
      margin: 0 auto;
      gap: 50px;

      @include breakpoint-down('tabL') {
        max-width: 704px;
        gap: 16px;
      }

      @include breakpoint-down('tabM') {
        flex-direction: column;
        max-width: 100%;
        margin: 0 20px;
      }
    }

    &__text {
      align-items: flex-start;
      justify-content: flex-start;
      text-align: left;
      width: 100%;
      max-width: 160px;

      @include breakpoint-down('tabM') {
        max-width: 100%;
        margin-bottom: 45px;
      }
    }

    &__list {
      width: 100%;
      max-width: 768px;

      @include breakpoint-down('tabL') {
        max-width: 519px;
      }

      & :global(.accordion) {
        &:first-of-type {
          padding-top: 0;
        }
      }
    }

    &__title {
      font-family: $Suisse;
      font-weight: 400;
      font-size: 64px;
      line-height: 100%;
      margin-bottom: 65px;

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

    &__subtitle {
      font-family: $Suisse;
      font-weight: 400;
      font-size: 16px;
      line-height: 150%;
      color: #00000099;

      button {
        background: white;
        border: 1px solid #CDD1D4;
        color: #1B1B1E;
        min-width: 99px;
        height: 34px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 48px;

        font-family: $Suisse;
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        cursor: pointer;

        margin-top: 19px;

        @include breakpoint-down('tabM') {
          width: 100%;
        }
      }
    }

    &.large {
        padding: 88px 0 327px 0;

        @include breakpoint-down('deskL') {
          padding: 62px 0 49px 0;
        }

        @include breakpoint-down('deskS') {
          padding: 53px 0 122px 0;
        }

        @include breakpoint-down('tabM') {
          padding: 51px 0 54px 0;
        }

        .container {
          max-width: 1560px;
          justify-content: flex-start;
          @include breakpoint-down('deskL') {
            max-width: 1178px;
          }
        }
       .block-faq__title {
          @include H1;
          margin-bottom: 17px;

          @include breakpoint-down('deskS') {
            text-align: right;
            margin-bottom: 19px;
          }
          @include breakpoint-down('tabM') {
            text-align: center;
            margin-bottom: 8px;
          }
        }
        .block-faq__subtitle {
          @include body;
          line-height: 31px;
          @include breakpoint-down('deskS') {
            text-align: right;
          }
          @include breakpoint-down('tabM') {
            text-align: center;
            font-size: 12px;
            line-height: 14.4px;
          }
          :global(span) {
            @include body;
            @include breakpoint-down('tabM') {
              font-size: 12px;
              line-height: 14.4px;
            }
          }
        }
        .block-faq__text {
          max-width: 574px;
          @include breakpoint-down('deskL') {
            max-width: 519px;
          }
          @include breakpoint-down('deskS') {
            max-width: 177px;
          }
          @include breakpoint-down('tabM') {
            max-width: 80%;
          }
        }
        .block-faq__wrapper {
          gap: 128px;
          justify-content: flex-start;
          margin-left: -4px;
          margin-right: -7px;
          @include breakpoint-down('deskL') {
            gap: 76px;
            margin-left: 0;
          }
          @include breakpoint-down('deskS') {
            flex-direction: row;
            gap: 61px;
            margin-left: 3px;
            margin-right: 11px;
          }
          @include breakpoint-down('tabM') {
            flex-direction: column;
            gap: 25px;
            margin-left: 0;
            margin-right: 0px;
          }
        }
        .block-faq__list {
          max-width: 100%;
          gap: 18px;
          display: flex;
          flex-direction: column;
          @include breakpoint-down('deskL') {
            max-width: 587px;
            gap: 18px;
            padding-top: 3px;
          }
          @include breakpoint-down('deskS') {
            gap: 19px;
            padding-top: 0;
          }
          @include breakpoint-down('tabM') {
            gap: 13px;
            padding-right: 11px;
          }
        }
        :global(.accordion ) {
          padding: 26.5px 0;
          @include breakpoint-down('deskL') {
            padding: 14px 0;
          }
          @include breakpoint-down('deskS') {
            padding: 5px 0;
          }
          @include breakpoint-down('tabM') {
            padding: 16px 0;
          }
        }
        :global(.accordion__title-text) {
          @include body;

          @include breakpoint-down('tabM') {
            font-size: 12px;
            line-height: 14.4px;
          }
        }
        :global(.accordion__arrow svg) {
          width: 47px;
          height: 47px;
          @include breakpoint-down('deskL') {
            width: 24px;
            height: 24px;
          }
          @include breakpoint-down('deskS') {
            width: 24px;
            height: 30px;
          }
          @include breakpoint-down('tabM') {
            width: 16px;
            height: 26px;
          }
        }
        :global(.block-faq__subtitle span) {
          @include baseCTA;

          color: $redPrimary;
          cursor: pointer;
        }
    }
  }
  :global(.block-faq__subtitle span) {
    @include baseCTA;

    color: $redPrimary;
    cursor: pointer;
  }
</style>