
<template>
<section class="container mx-auto xl:px-24"> 
    <div class="flex md:justify-center justify-center hero-text font-bold mt-8 text-color-1 py-14">Discover our solutions</div>
    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-3 text-center ">
        <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
            <img draggable="false" src="/img/plan.png" alt="">
            <h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
            <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
            <button  @click="showAbModal('abModal')" class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button>
        </div>
        <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
            <img draggable="false" src="/img/report.png" alt="">
            <h1 class="text-3xl text-color-1 font-semibold py-2">Lesson Plans</h1>
            <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Teach toddlers significant lessons which are necessary for their holistic development. Our preschool curriculum is instilled with essential lesson plans necessary for early childhood education.</p>
            <a target="_blank" href="/lesson-plan/dailyplan"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
        </div>
        <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
            <img draggable="false" src="/img/classroom.png" alt="">
            <h1 class="text-3xl text-color-1 font-semibold py-2">Themes</h1>
            <p class="  font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Know how to improve preschooling experience by promoting different themes regularly in your preschool and engage your little audience.</p>
            <a target="_blank" href="/themes"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-1 lg:grid-cols-2  mt-12">
        <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
            <img draggable="false" src="/img/popular.png" alt="">
            <h1 class="text-3xl text-color-1 font-semibold py-2">Event Ideas</h1>
            <p class="   font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">There’s no need to spend hours researching exciting events for your preschool. Our playschool curriculum contains many suggestions for different innovative activities you can organize in the preschool.</p>
            <a target="_blank" href="/celebrationstories#submitCelebration"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
        </div>
        <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
            <img draggable="false" src="/img/event.png" alt="">
            <h1 class="text-3xl text-color-1 font-semibold py-2">Videos</h1>
            <p class="   font-20px text-justify text-color-2 xl:px-24 xl:line-clamp-3 hover:line-clamp-none">See videos related to ideas for class management, seamless teaching techniques, several activities for preschoolers and many other relevant videos associated with preschool.</p>
            <a target="_blank" href="/videos"><button class="bg-blue-700 text-white px-6 py-2 text-xl rounded-tl-md rounded-br-md">Discover Now</button></a>
        </div>


        <div v-if="abModal" id="ytModal" class="flex justify-center abModal">
            <div class="modal-content" @click="doNothing()">
                <span  @click="hideAbModal" class="close">&times;</span>
                <div>
                    <div class="grid place-items-center pb-8 px-6 w-fit h-fit">
                        <img draggable="false" src="/img/plan.png" alt="">
                        <h1 class="text-3xl text-color-1 font-semibold py-2">Worksheets</h1>
                        <p class="font-20px text-justify text-color-2 xl:line-clamp-3 hover:line-clamp-none">Get access to well-structured worksheets that are prepared as per the growth needs of children and respond to their stimulating cells.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
</template>

<!-- <template>
    <div>
      <div @click="showAbModal('abModal')"> Show Modal</div>
        <div v-if="abModal" id="ytModal" class="flex justify-center abModal">
            <div class="modal-content" @click="doNothing()">
                <span  @click="hideAbModal" class="close">&times;</span>
                <div>
                  Modal text    Modal text    Modal text<br>  Modal text    Modal text    Modal text 
                </div>
            </div>
        </div>
    </div>
  </template> -->
  
  <script>
  
  export default {
  
    data() {
        return {
          abModal:false,
            abID:''
  
        }
    },
    methods: {
        showAbModal(abID){
            this.abModal=true
            this.abID=abID
        },
        hideAbModal(){
            this.abModal=false
        //     // this.abID=abID
        },
        doNothing(){
          // alert();
        }
   
    },
        mounted: function () {
          //   this.getVideos()
        }   
  }
  </script>
  
  <style scoped>
  
  .abModal {
  /* display: none;  */
  position: fixed;
  width: 80%;
  z-index: 999991;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  }
  .modal-content{
    background-color: aliceblue;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    margin: 0 auto;
  }
  .close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }
  
  .close:hover,
  .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
  }
  </style>