<script lang="ts">
  import { t } from '$lib/translations';
  import { popupForm } from '../../store';
  import getFaqOptions from '../../data/faq';

  const faqData = getFaqOptions();

  export let faqItems: { titleKey: string; textKey: string }[] = faqData;

  let activeIndex: number | null = null;

  const toggle = (index: number) => {
    if (activeIndex === index) {
      activeIndex = null;
    } else {
      activeIndex = index;
    }
  };
</script>

<div class="block-faq">
  <div class="container">
    <div class="block-faq__wrapper">
      <div class="block-faq__text">
        <div class="block-faq__title">FAQ</div>
        <div class="block-faq__subtitle">
          {$t("Can't find the answer to your question?")}
          <br />
          <button on:click={() => popupForm.set(true)}>{$t('Contact us')}</button>
        </div>
      </div>
      <div class="block-faq__list">
        {#each faqItems as item, index}
          <div class="accordion {activeIndex === index ? 'accordion--active' : ''}">
            <div class="accordion__container">
              <div
                class="accordion__btn"
                on:click={() => toggle(index)}
                on:keydown={(e) => e.key === 'Enter' && toggle(index)}
                role="button"
                tabindex="0"
              >
                <div class="accordion__title">
                  <span class="accordion__title-text">{$t(item.titleKey)}</span>
                </div>
                <div class="accordion__arrow">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                      d="M6 9L12 15L18 9"
                      stroke="#E62334"
                      stroke-width="2"
                      stroke-linecap="round"
                      stroke-linejoin="round"
                    />
                  </svg>
                </div>
              </div>
              <div class="accordion__list" style="max-height: {activeIndex === index ? '500px' : '0'}">
                <div class="accordion__inner">
                  <p>{$t(item.textKey)}</p>
                </div>
              </div>
            </div>
          </div>
        {/each}
      </div>
    </div>
  </div>
</div>

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

  .block-faq {
    padding: 156px 0 80px 0;
    overflow: hidden;

    @media (max-width: 393px) {
      padding: 116px 0 80px 0;
    }

    .container {
      max-width: 1104px;

      @media (max-width: 1366px) {
        max-width: 1070px;
      }

      @media (max-width: 720px) {
        max-width: 600px;
        padding: 0 32px;
      }

      @media (max-width: 720px) {
        max-width: 600px;
        padding: 0 24px;
      }

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

    &__wrapper {
      display: flex;
      gap: 145px;

      @media (max-width: 1023px) {
        justify-content: center;
        gap: 32px;
      }

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

    &__text {
      width: 194px;
      flex-shrink: 0;

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

    &__title {
      font-size: 64px;
      line-height: 72px;
      font-weight: 400;
      margin-bottom: 64px;
      color: $fontPrimary;

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

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

      @include breakpoint-down('mobL') {
        margin-bottom: 32px;
      }

      @include breakpoint-down('mobML') {
        font-size: 36px;
        line-height: 44px;
      }
    }

    &__subtitle {
      color: #525659;
      font-size: 16px;
      line-height: 24px;
      max-width: 194px;

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

      @media (min-width: 375px) and (max-width: 500px) {
        width: 100%;
      }

      button {
        margin-top: 20px;
        display: inline-block;
        padding: 8px 14px;
        border: 1px solid #cdd1d4;
        border-radius: 48px;
        font-size: 14px;
        line-height: 18px;
        color: #1b1b1e;
        background: transparent;
        cursor: pointer;
        transition: all 0.2s ease;

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

        &:active {
          background: #adb1b7;
          border-color: transparent;
        }

        @media (max-width: 719px) {
          margin-bottom: 68px;
        }
      }
    }

    &__list {
      counter-reset: accordion-counter;
      width: 765px;
      flex-shrink: 0;
      padding-left: 16px;
      padding-right: 14px;

      @media (max-width: 1366px) {
        width: 738px;
        padding-left: 8px;
        padding-right: 22px;
      }

      @media (max-width: 1200px) {
        width: 660px;
        padding-left: 8px;
        padding-right: 54px;
      }

      @media (max-width: 1023px) {
        width: 430px;
        padding-left: 8px;
        padding-right: 54px;
      }

      @media (max-width: 720px) {
        padding-left: 0;
        padding-right: 0;
      }
      @media (max-width: 550px) {
        width: 430px;
      }

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

  .accordion {
    padding: 24px 0px 24px 0px;
    border-bottom: 1px solid #e6e6e6;
    overflow: hidden;
    counter-increment: accordion-counter;

    @include breakpoint-down('tabM') {
      padding: 24px 16px;
    }

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      border-bottom: none;
    }

    &__container {
      width: 100%;
    }

    &__btn {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      z-index: 1;
      position: relative;
      transition: 0.3s ease-in-out;
    }

    &__title {
      position: relative;
      padding-left: 40px;

      &::before {
        content: counter(accordion-counter) '.';
        position: absolute;
        left: 0;
        top: 0;
        color: #8e95a0;
        font-size: 20px;
        line-height: 28px;

        @include breakpoint-down('tabL') {
          font-size: 18px;
          line-height: 26px;
        }
      }

      &-text {
        font-size: 20px;
        line-height: 28px;
        font-weight: 400;
        color: $fontPrimary;

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

    &__list {
      width: 100%;
      transition: 0.6s cubic-bezier(0.65, 0.05, 0.36, 1);
      pointer-events: none;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
    }

    &__inner {
      padding-left: 40px;
      color: #525659;
      font-size: 16px;

      @include breakpoint-down('mobM') {
        padding-left: 0;
      }
    }

    &__arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;

      svg {
        transition: transform 0.3s ease;
        transform: rotate(0deg);
      }
    }

    &--active {
      padding-bottom: 32px;

      .accordion__list {
        opacity: 1;
        pointer-events: auto;
      }

      .accordion__btn {
        margin-bottom: 18px;
      }

      .accordion__arrow {
        svg {
          transform: rotate(180deg);
        }
      }
    }
  }
</style>