<template>
<section class="py-20 relative overflow-x-hidden">
    <div class="container">
        <div class="text-center">
            <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="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 :modules="[Navigation]" :slides-per-view="1" :space-between="30" :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 class="flex items-center justify-center gap-5 mt-14">
                <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>
</section>
</template>

<script 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]
    }
]
</script>