<script setup>
const { t, locale, setLocale } = useI18n()
const dataList = ref([
  {
    bg: '',
    abg: '',
    id: 'Jenny0',
    wowDelay: '0.3s',
    img: '/picture/quote.png',
    title: 'Jenny Wilson',
    subTitle:
      "The 'Cultural Theatre' session is a children's favorite, and it's so fun to learn festival customs with melodrama!"
  },
  {
    bg: 'bg-2',
    abg: 'style-2',
    id: 'Jenny1',
    wowDelay: '0.5s',
    img: '/picture/quote-2.png',
    title: 'Esther Howard',
    subTitle:
      'The pronunciation standard of the Chinese teacher, the child says that it is like learning Chinese with friends~'
  },
  {
    bg: 'bg-3',
    abg: 'style-3',
    id: 'Jenny2',
    wowDelay: '0.7s',
    img: '/picture/quote-3.png',
    title: 'Wade Warren',
    subTitle:
      'There is a video playback of the make-up class, which is too friendly to dual-income families.'
  }
])
</script>
<style lang="css" scoped>
.multi-line {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.h-color {
  color: white;
}
.clamp-1 {
  -webkit-line-clamp: 1;
}
.clamp-2 {
  -webkit-line-clamp: 2;
}
.clamp-3 {
  -webkit-line-clamp: 3;
}
</style>

<template>
  <section class="testimonial-section fix section-padding">
    <div class="tree-shape float-bob-y"><img src="/picture/tree-shape.png" alt="shape-img" /></div>
    <div class="right-shape"><img src="/picture/right.png" alt="shape-img" /></div>
    <div class="bee-shape float-bob-y"><img src="/picture/bee.png" alt="shape-img" /></div>
    <div class="container">
      <div class="section-title text-center">
        <span class="wow fadeInUp">Recommendation</span>
        <h2 class="wow fadeInUp w-50 m-auto" data-wow-delay=".3s">
          Parents' feedback on Happy Chin
        </h2>
      </div>

      <div class="row">
        <template v-for="(item, index) in dataList" :key="item?.id">
          <div class="col-xl-4 col-lg-6 col-md-6 wow fadeInUp" :data-wow-delay="item?.wowDelay">
            <div class="swiper-slide">
              <div style="box-sizing: border-box" class="testimonial-items" :class="item.abg">
                <div class="icon">
                  <img :src="item?.img" alt="img" />
                </div>
                <div class="testimonial-bg" :class="item.bg"></div>
                <div class="testimonial-content">
                  <p class="multi-line clamp-3">
                    {{ item?.subTitle }}
                  </p>
                  <h6 class="">{{ item?.title }}</h6>
                </div>
              </div>
            </div>

            <!-- <div class="program-box-items">
              <div :class="`program-bg ${item?.bg}`"></div>
              <div class="program-image">
                <img :src="item?.img" alt="img" />
              </div>
              <div class="program-content text-center">
                <h4 class="multi-line clamp-1 h-color">
                  {{ item?.title }}
                </h4>
                <span>({{ item?.ageBracket }})</span>
                <p class="multi-line clamp-2">
                  {{ item?.subTitle }}
                </p>
              
                <a href="javascript:(0)" :class="`arrow-icon  ${item?.abg}`">
                  <i class="fa-solid fa-arrow-right"></i>
                </a>
              </div>
            </div> -->
          </div>
        </template>
      </div>
    </div>
  </section>
</template>
