<template>
    <div>
        <section class="mt-16">
            <div class="flex flex-col lg:flex-row place-content-between gap-x-4">
                <div class="flex flex-col w-full">
                <h1 class="text-[#47ae6a] hero-text font-bold">Frequently Asked <span class="text-[#3084b5]">Questions</span> </h1>
                <div class="grid h-fit" v-for="data in faqData" :key="data.questionNumber">
                    <details>
                        <summary> 
                            <div class="flex inline-flex cursor-pointer">{{ data.question }}</div>
                        </summary>
                            <div v-html="data.answer"></div>
                    </details>
                </div>
            </div>
            <div class="flex justify-center place-items-center">
                <img class="max-w-lg rounded-full border-2 shadow-xl" src="/img/faq.jpg" alt="">
            </div>
            </div>
        </section>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                faqData: "",
            }
        },
        mounted(){
            fetch(`/assets/faq.json`)
            .then(response => response.json())
            .then(data => {
                this.faqData = data.faqs
                console.log(this.faqData)
            })
        }
    }
</script>
<style>
    .bg3 {
  background: linear-gradient(0deg, rgb(226, 239, 255) 0%, rgba(255, 255, 255) 40%);}
    @media screen and (min-width: 1500px) {
  .hero-text {
    font-size: 50px;
    
    
  }
}

@media screen and (max-width: 1499px) {
  .hero-text {
    font-size: 40px;
    
  }
}
@media screen and (max-width: 1199px) {
  .hero-text {
    font-size: 30px;
    
  }
}
    .text-color-1 {
        color: #7c4c23;
    }
    details {
    font-weight: lighter;
    border-bottom: 1px solid #d4d4d4;
    border-color: #d4d4d4;    
    padding: .75em .75em 0;
    font-size: 17px;
    width: 100%;
	/* margin-top: 10px; */
	/* box-shadow:0 0 8px #d4d4d4; */
}

summary {	
    margin: -.75em -.75em 0;
    padding: .75em;
    
}

details[open] {
    padding: .75em;
	  border-bottom: 1px solid #d4d4d4;
}

details[open] summary {
    border-bottom: 1px solid #d4d4d4;
    margin-bottom: 10px;
}
</style>
