---
const faqResp = await fetch('https://management.beanstalkedu.com/items/FAQ?filter[slug][_eq]=faq&filter[property][_eq]=teenybeans_curriculum');
const faqRespJson = await faqResp.json();
const faqRespData = faqRespJson.data;
import Layout from "../layouts/Layout.astro";
import Menu from "../components/Menu.astro";
import Footer from "../components/Footer.vue";
---
<Layout title="">
    <Menu />
    <main>
        <div>
            <section class="bg-gradient-to-t bg3 shadow-2xl container-fluid">
                <div class="flex flex-col xl:flex-row container mx-auto px-3 xl:px-24">
                    <div class="flex flex-col w-full justify-center ">
                        <div >
                            <h1 class="text-blue-700 hero-text font-bold">Teeny Beans <span class="text-color-1">FAQs</span> </h1>
                        </div>
                    </div>
                    <div class="flex  justify-center place-items-center">
                        <img src="/img/frequentlyw.png" alt="Frequently Asked Questions">
                    </div> 
                </div>
            </section>
            <section class="container mx-auto py-20 px-4 xl:px-24" style="font-family: quicksand;">
                <div class="grid grid-cols-1 ">
                    <div class="grid h-fit ">
                        <!-- <h1 class="text-4xl py-6 text-blue-700 font-bold">Frequently Asked <span class="text-color-1">Questions</span></h1> -->
                            {faqRespData.map((data: { title: string | undefined; youtube_thumbnail: string | undefined; about_the_video: string | undefined; }) =>
                                <details>
                                    <summary> 
                                        <div class="flex inline-flex cursor-pointer"> {data.title}</div>
                                    </summary>
                                        <div set:html="data.content"></div>
                                </details>
                            )}
                    </div>
                    <div class="grid place-items-center">
                        <!-- <img src="/img/frequently.png" alt="Frequently Asked Questions"> -->
                    </div> 
                </div>
            </section>
        </div>
    </main>
    <Footer client:visible/>
</Layout>
<style>
    .bg3 {
  background: linear-gradient(0deg, rgb(191, 219, 254, 1) 0%, rgba(255, 255, 255) 100%);}
    @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>