<script setup>
const { t, locale, setLocale } = useI18n()
const dataList = ref([
  {
    bg: '',
    abg: 'abg1',
    id: 'Beginning',
    wowDelay: '0.3s',
    img: '/picture/012.png',
    title: 'Beginning',
    ageBracket: '6-9 years old',
    subTitle: 'Enlightenment in listening and speaking stimulates interest in Chinese learning.'
  },
  {
    bg: 'bg-2',
    abg: '',
    id: 'Growing',
    wowDelay: '0.5s',
    img: '/picture/021.png',
    title: 'Growing',
    ageBracket: '6-12 years old',
    subTitle:
      'The primary school Chinese textbooks compiled by the deep matching department have reached the domestic primary school Chinese level and improved Chinese literacy.'
  },
  {
    bg: 'bg-5',
    abg: 'abg3',
    id: 'DrawingClass',
    wowDelay: '0.7s',
    img: '/picture/082.png',
    title: 'Drawing Class',
    ageBracket: '9-15 years old',
    subTitle:
      'Comprehensive improvement of listening speaking, reading and writing skills, high-level direct HSK/AP/IB Chinese tests.'
  },
  {
    bg: 'bg-6',
    abg: 'abg4',
    id: 'Expanding',
    wowDelay: '0.9s',
    img: '/picture/083.png',
    title: 'Beginning',
    ageBracket: '12-18years old',
    subTitle:
      'Benchmark HSK and YCT syllabuses to comprehensively improve Chinese listening, speaking, reading and writing skills for overseas students with zero foundation.'
  }
])
</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;
}
::v-deep .abg1 {
  background-color: #70a6b1 !important;
}
::v-deep .abg3 {
  background: #5866eb !important;
}
::v-deep .abg4 {
  background: #f25334 !important;
}
::v-deep .abg1:hover {
  background-color: #385469 !important;
}
::v-deep .abg3:hover {
  background-color: #385469 !important;
}
::v-deep .abg4:hover {
  background-color: #385469 !important;
}
</style>

<template>
  <div class="row">
    <template v-for="(item, index) in dataList" :key="item?.id">
      <div class="col-xl-3 col-lg-6 col-md-6 wow fadeInUp" :data-wow-delay="item?.wowDelay">
        <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>
            <!-- program-details.html -->
            <a href="javascript:(0)" :class="`arrow-icon  ${item?.abg}`">
              <i class="fa-solid fa-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
