<template>
  <section class="bg-gray-100 relative py-20 overflow-x-hidden" data-aos="fade-up" data-aos-duration="500">
    <div class="absolute top-0 inset-x-0 hidden sm:block">
      <img :src="assets('images/shapes/white-wave.svg')" alt="svg" class="w-full -scale-x-100">
    </div>
    <div class="container relative">

      <div class="relative z-20">
        <div class="flex items-center justify-between pb-14">
          <div>
            <span class="text-sm font-medium py-1 px-3 rounded-full text-primary bg-primary/10">{{ __('Testimonials') }}</span>
            <h2 class="md:text-3xl text-xl font-semibold my-5">{{ __('What people say') }}</h2>
          </div>
          <div class="flex items-center gap-5">
            <div class="button-prev"><i class="fa-solid fa-arrow-left"></i></div>
            <div class="button-next"><i class="fa-solid fa-arrow-right"></i></div>
          </div>
        </div>

        <div class="relative">
          <div class="hidden sm:block">
            <div
                class="before:w-24 before:h-24 before:absolute before:-top-10 before:-end-10 before:bg-[url('@prompt/assets/pattern/dot3.svg')]"></div>
            <div
                class="after:w-24 after:h-24 after:absolute after:-bottom-10 after:-start-10 after:bg-[url('@prompt/assets/pattern/dot3.svg')]"></div>
          </div>

          <!-- Swiper -->
          <Swiper
              :modules="[Navigation]"
              :slides-per-view="1"
              :space-between="30"
              :auto-height="true"
              :navigation="{
                        nextEl: '.button-next',
                        prevEl: '.button-prev'
                }"
              :breakpoints="{
                          768: {slidesPerView: 2},
                          1024: {slidesPerView: 3},
                }"
              class="swiper"
          >

            <SwiperSlide v-for="testimonial in testimonials" :key="testimonial.testimonial">
              <div class="p-6 bg-white rounded">
                <div class="flex gap-1 items-center text-yellow-500 text-base mb-4">
                  <i v-for="n in testimonial.stars" class="fa-solid fa-star"></i>
                </div>
                <p class="text-slate-800">{{ __(testimonial.testimonial) }}</p>
                <div class="flex items-center gap-3 mt-5">
                  <img :src="testimonial.user.image" class="h-10 w-10 rounded-full">
                  <div>
                    <h6 class="text-sm mb-0">{{ __(testimonial.user.name) }}</h6>
                    <p class="text-slate-500 text-sm mb-0">{{ __(testimonial.user.position) }}</p>
                  </div>
                </div>
              </div>
            </SwiperSlide>

          </Swiper>

        </div>

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

<script lang="ts" setup>
import {Swiper, SwiperSlide} from 'swiper/vue'
import {Navigation} from "swiper/modules";
import assets from '@/lib/assets'
import {__} from "@/lib/translate";

const users = [
  {
      name: 'Jerome Bell',
      position: 'Product Manager',
      image: assets('images/avatars/img-1.jpg'),
  },
  {
      name: 'Theresa Boone',
      position: 'Web Designer',
      image: assets('images/avatars/img-2.jpg'),
  }
]

const testimonials = [
  {
    testimonial: 'Have been working with CSS for over ten years and Tailwind just makes my life easier. It is still CSS and you use flex, grid, etc. but just quicker to write and maintain.',
    stars: 5,
    user: users[0]
  },
  {
    testimonial: 'I was bad at front-end until I discovered with Tailwind CSS. I have learnt a lot more about design and CSS itself after I started working with Tailwind.',
    stars: 5,
    user: users[1]
  },
  {
    testimonial: 'Have been working with CSS for over ten years and Tailwind just makes my life easier. It is still CSS and you use flex, grid, etc. but just quicker to write and maintain.',
    stars: 5,
    user: users[0]
  },
  {
    testimonial: 'I was bad at front-end until I discovered with Tailwind CSS. I have learnt a lot more about design and CSS itself after I started working with Tailwind.',
    stars: 5,
    user: users[1]
  },
]
</script>