<template>
  <slide-template title="FAQ__title">
    <div
      class="q-pa-md w100 flex justify-center"
      style="max-width: 800px"
      >
      
      <q-list>
        <faq-section-item
          v-for="item in 8"
          :key="item"
          :question="'faq__question_' + item"
          :answer="'faq__answer_' + item"
          class="q-my-md"
        />
      </q-list>
      
      <div
        class="text-h6 text-primary q-py-md text-center"
      >
        {{ $t('faq__description') }}
        <a
          href="mailto:support@tgcrew.ru"
          style="text-decoration: none; color: inherit"
        >
          support@tgcrew.ru
        </a>
      </div>
    </div>
  </slide-template>
</template>

<script setup lang="ts">
  import SlideTemplate from 'components/SlideTemplate.vue'
  import FaqSectionItem from 'components/FAQSectionItem.vue'
  
</script>

<style scoped lang="scss">
  .q-expansion-item--expanded.fix-icon-color:deep(i) {
    color: $primary;
    transition: transform 0.3s ease;
    transform: rotate(45deg);
  }
</style>
