---
  import Layout from "../../layouts/Layout.astro";
  import Menu from "../../components/Menu.astro";
  import ShareSideSticky from "../../components/ShareSideSticky.astro";
  import BlogGetinTouch from "../../components/BlogGetinTouch.vue";

export async function getStaticPaths() {
  const response = await fetch('https://management.beanstalkedu.com/items/blog?filter[property][_eq]=teenybeans_curriculum');
  const data = await response.json();
  const finalData = data.data.map((n: { slug: string | undefined; })=>{
      return {params: {id:n.slug}}
  })
  return finalData;
}

const response = await fetch('https://management.beanstalkedu.com/items/blog?filter[property][_eq]=teenybeans_curriculum');
const data = await response.json();
const { id } = Astro.params;
const idx = data.data.findIndex((n: { slug: string | undefined; }) => n.slug ===id);

const faqresponse = await fetch('https://management.beanstalkedu.com/items/FAQ?filter[property][_eq]=teenybeans_curriculum&filter[slug][_eq]=blog');
const faqdata = await faqresponse.json();
const faq = faqdata.data;

import Footer from "../../components/Footer.vue";
---


<Layout title={data.data[idx].title} 
        metaTitle={data.data[idx].meta} 
        description={data.data[idx].meta_description} 
        ogImg={'https://management.beanstalkedu.com/assets/'+data.data[idx].img+'/'+data.data[idx].slug+'.jpg?width=1200&quality=50'} 
        schema={data.data[idx].schema} >
  <Menu/>
    <main>
        <div class="grid grid-cols-1 xl:grid-cols-6 xl:px-24">
          <div class="grid xl:col-span-4 container mx-auto">
            <div class="bg-white mt-3">
              <!-- <h2 class="ml-28 text-4xl">Loading ...</h2> -->
              <div>
                <div  ></div>
                <!-- <p>{{ page[0].meta }}</p> -->
                <figure class=" p-4 xl:pl-20 2xl:pl-32">
                    <h1 class="text-3xl lg:text-4xl font-semibold text-color-1 py-4">{data.data[idx].title}</h1>
                    <!-- <img class="w-full" v-if="page[0].img" :src="'https://management.beanstalkedu.com/assets/'+page[0].img" alt="" style="width:100%;"> -->
                    <!-- <img src="" alt="">{data.data[idx].img} -->
                    <img src={ 'https://management.beanstalkedu.com/assets/'+data.data[idx].img} alt="image description" style="width:100%;"/>
                    <div class="pt-6 space-y-4">
                        <blockquote>
                        </blockquote>
                        <figcaption class="font-medium">
                            <!-- <div class="text-color-2 text-justify text-lg" >{{page[0].preview_text }}</div> -->
                            <div class="text-color-2 text-lg text-justify" set:html={data.data[idx].preview_text}></div>
                        </figcaption>
                    </div>
                </figure>
                <!-- <div v-html="page[0].content" class="container mx-auto">
                </div> -->
            </div>
            </div>
          </div>
          <ShareSideSticky />
            <section class="container z-40">
              <div class="grid xl:col-span-2 place-items-center">
                  <div class="xl:fixed top-40 xl:right-24">
                      <BlogGetinTouch client:visible/>
                  </div>
              </div>
          </section>
        </div>
        <!-- <section class="container mx-auto py-20 px-4 xl:px-24">
          <div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
              <div class="grid h-fit ">
                  <h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
                  <div  v-for="faqAdministrators in faqAdministrators" :key="faqAdministrators.id" class="">
                      <details>
                          <summary> 
                              <div class="flex inline-flex cursor-pointer" v-if="faqAdministrators"> &nbsp;{data.data[idx].title}</div>
                          </summary>
                              <div  set:html="faqAdministrators.content"></div>
                      </details>
                  </div>
              </div>
              <div class="grid place-items-center"><img src="/img/frequently.png" alt=""></div> 
          </div>
      </section> -->

      {faq.length >0 &&
        <section class="container mx-auto py-20 px-4 xl:px-24" style="font-family: quicksand;">
          <div class="grid grid-cols-1 xl:grid-cols-2 xl:space-x-48">
            <!-- <div set:html={faq[0].title}></div> -->
              <div class="grid h-fit ">
                  <h1 class="text-4xl py-6 text-blue-700 font-semibold">Frequently Asked <span class="text-color-1">Questions</span></h1>
                      {faq.map((data: { title: 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/.png" alt=""/>
              </div> 
          </div>
        </section>
      }
        
      </main>
      <Footer client:visible/>
</Layout>
<style scoped>
  details {
    font-weight: lighter;
    border-bottom: 1px solid #d4d4d4;
    border-color: #d4d4d4;    
    padding: .75em .75em 0;
    font-size: 18px;
	/* margin-top: 10px; */
	/* box-shadow:0 0 8px #d4d4d4; */
}

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

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

details[open] summary {
    border-bottom: 1px solid #d4d4d4;
    margin-bottom: 10px;
}
  .text-color-1 {
      color: #7C4C23;
  }
  .text-color-2 {
      color: #333333
  }
</style>