<template>
    <section class="faqs">
        <div class="container">
            <img class="cloud-faqs" src="@/assets/images/cloud.png" alt="Cloud">
            <h3 class="faqs__title">FAQs</h3>
            <VueFaqAccordion 
                  :items="myItems"
                />
        </div>
    </section>
</template>

<script>
import VueFaqAccordion from 'vue-faq-accordion'

export default {
  name: "Faqs",
  components: {
    VueFaqAccordion,
  },
  data() {
    return {
      myItems: [
          {
            title: 'What is the #CUDL movement?',
            value: '<p>You can find more information about the fund here.</p>',
          },
          {
            title: 'What are Cuddle Dogs?',
            value: '<p>You can find more information about the fund here.</p>',
          },
          {
            title: 'What is the Impact Fund?',
            value: '<p>You can find more information about the fund here.</p>',
          },
          {
            title: 'What is the mint date?',
            value: '<p>You can find more information about the fund here.</p>',
          },
          {
            title: 'How much is each Cuddle Dog?',
            value: '<p>You can find more information about the fund here.</p>',
          },
          {
            title: 'What is the best way to get involved?',
            value: '<p>You can find more information about the fund here.</p>',
          },
         
        ]
    };
  },
  created: function () { 
     document.title = this.$route.name + " - Cuddle";
  }
};
</script>

<style lang="scss">


$black: #2E3240;
$pink: #D551AD;
$bg: #ffe2d1;
$green: #97D26F;


.faqs {
    position: relative;
    padding: 145px 0 60px;
    .cloud-faqs {
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 60%;
        z-index: -1;
    }
    &__title {
        font-size: 65px;
        line-height: 75px;
        color: $pink;
        text-align: center;
        margin-bottom: 100px;
    }
    .faq-wrapper {
      max-width: 100% !important;
      width: 100%;
      .accordion {
        border: none;
        border-radius: 0;
        margin-top: 0;
        .accordion__item {
          border: none;
          background: #fff;
          border-radius: 50px;
          margin-bottom: 15px;
          .accordion__title {
            font-size: 20px;
            line-height: 32px;
            color: $black;
            padding: 25px 35px;
            .accordion__toggle-button {
              background: url('../assets/images/plus.svg') center/cover no-repeat;
              width: 23px;
              height: 23px;
              &:before, &:after {
                display: none;
              }
              &.accordion__toggle-button_active {
                background: url('../assets/images/minus.svg') center/cover no-repeat;
                height: 11px;
                transform: rotate(0);
              }
            }
          }
          .accordion__value {
            padding: 0 35px 25px;
            p {
              font-family: 'filsonproregularregular';
              font-size: 18px;
              line-height: 28px;
              color: #000;
            }
          }
        }
      }
    }
}

@media(max-width: 768px) {
  .faqs__title {
    font-size: 40px;
    line-height: 55px;
    color: #D551AD;
    text-align: center;
    margin-bottom: 60px;
  }
  .faqs {
      padding: 70px 0 60px;
  }
  .faqs .cloud-faqs {
    top: 54px;
    width: 270px;
  }
  .faq {
    padding: 0 15px 0 0!important;
  }
  .faqs .faq-wrapper .accordion .accordion__item {
    border-radius: 0 20px 20px 0;
  }
  .faqs .faq-wrapper .accordion .accordion__item .accordion__title {
    font-size: 18px;
    line-height: 32px;
    padding: 25px 20px;
    align-items: flex-start;
  }
  .faqs .faq-wrapper .accordion .accordion__item .accordion__value {
    padding: 0 20px 25px;
  }
}

</style>