<script setup>
import {reactive} from "vue";

const testimonials = reactive([
    {id:1, client:'Judith Black',designation:'CEO of Tuple',client_photo:'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',company_logo:'https://tailwindui.com/plus/img/logos/tuple-logo-gray-900.svg',review:'Amet amet eget scelerisque tellus sit neque faucibus non eleifend. Integer eu praesent at a. Ornare arcu gravida natoque erat et cursus tortor consequat at. Vulputate gravida sociis enim nullam ultricies habitant malesuada lorem ac. Tincidunt urna dui pellentesque sagittis.'},
    {id:2, client:'Joseph Rodriguez',designation:'CEO of Reform',client_photo:'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',company_logo:'https://tailwindui.com/plus/img/logos/reform-logo-gray-900.svg',review:'Amet amet eget scelerisque tellus sit neque faucibus non eleifend. Integer eu praesent at a. Ornare arcu gravida natoque erat et cursus tortor consequat at. Vulputate gravida sociis enim nullam ultricies habitant malesuada lorem ac. Tincidunt urna dui pellentesque sagittis.'},
]);
</script>

<template>
    <section class="bg-white py-24 sm:py-32">
        <div class="mx-auto max-w-7xl px-6 lg:px-8">

            <div class="mx-auto max-w-2xl text-center pb-16">
                <h2 class="text-balance text-4xl font-semibold tracking-tight text-gray-700 sm:text-5xl">What Our Clients Say</h2>
                <p class="mt-6 text-lg/8 text-gray-700">Some of our respected client gave us some awesome review. Let's have look</p>
            </div>

            <div class="mx-auto grid max-w-2xl grid-cols-1 lg:mx-0 lg:max-w-none lg:grid-cols-2">
                <div :class="testimonial.id%2===1?'flex flex-col pb-10 sm:pb-16 lg:pb-0 lg:pr-8 xl:pr-20':'flex flex-col border-t border-gray-900/10 pt-10 sm:pt-16 lg:border-l lg:border-t-0 lg:pl-8 lg:pt-0 xl:pl-20'" v-for="testimonial in testimonials">
                    <img class="h-12 self-start" :src="testimonial.company_logo" alt="" />
                    <figure class="mt-10 flex flex-auto flex-col justify-between">
                        <blockquote class="text-lg/8 text-gray-900">
                            <p>“{{testimonial.review}}”</p>
                        </blockquote>
                        <figcaption class="mt-10 flex items-center gap-x-6">
                            <img class="size-14 rounded-full bg-gray-50" :src="testimonial.client_photo" alt="" />
                            <div class="text-base">
                                <div class="font-semibold text-gray-900">{{testimonial.client}}</div>
                                <div class="mt-1 text-gray-500">{{testimonial.designation}}</div>
                            </div>
                        </figcaption>
                    </figure>
                </div>

<!--                <div class="flex flex-col border-t border-gray-900/10 pt-10 sm:pt-16 lg:border-l lg:border-t-0 lg:pl-8 lg:pt-0 xl:pl-20">-->
<!--                    <img class="h-12 self-start" src="https://tailwindui.com/plus/img/logos/reform-logo-gray-900.svg" alt="" />-->
<!--                    <figure class="mt-10 flex flex-auto flex-col justify-between">-->
<!--                        <blockquote class="text-lg/8 text-gray-900">-->
<!--                            <p>“Excepteur veniam labore ullamco eiusmod. Pariatur consequat proident duis dolore nulla veniam reprehenderit nisi officia voluptate incididunt exercitation exercitation elit. Nostrud veniam sint dolor nisi ullamco.”</p>-->
<!--                        </blockquote>-->
<!--                        <figcaption class="mt-10 flex items-center gap-x-6">-->
<!--                            <img class="size-14 rounded-full bg-gray-50" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />-->
<!--                            <div class="text-base">-->
<!--                                <div class="font-semibold text-gray-900">Joseph Rodriguez</div>-->
<!--                                <div class="mt-1 text-gray-500">CEO of Reform</div>-->
<!--                            </div>-->
<!--                        </figcaption>-->
<!--                    </figure>-->
<!--                </div>-->
            </div>
        </div>
    </section>
</template>

<style scoped></style>
