<template>
	<section class="relative pt-16 pb-32 flex content-center items-center justify-center">
		<div class="container mx-auto px-1 lg:px-4">
			<div class="flex flex-wrap justify-end text-center">
				<Breadcrumbs :currentPage="currentRouteName" />
			</div>
          	<div class="flex flex-wrap justify-center text-center mb-12 pt-8">
				<div class="w-full lg:w-6/12 px-4">
					<h2 class="text-4xl font-semibold">TESTIMONIAL</h2>
					<p class="text-lg leading-relaxed m-4 text-medium-grey">
						reliability
					</p>
				</div>
			</div>

			<div class="text-center px-4 mr-auto ml-auto mb-8 pb-16" v-for="items in testimonialItem" :key="items.id">
				<div class="text-center mb-8">
					<div class="text-white p-3 text-center inline-flex items-center justify-center w-12 h-12 mb-5 shadow-lg rounded-full bg-green-medium">
                    	<i class="fa-regular fa-file-zipper"></i>
					</div>
					<p class="text-4xl font-semibold">{{ items.title }}</p>
				</div>
				<div class="flex flex-wrap items-stretch justify-center items-center">
					<div class="card lg:w-3/12 shadow-xl w-full border-x border-y border-light-grey hover:border-medium-grey" v-for="item in items.contents" :key="item.id">
						<div class="card">
							<div class="card-body">
								<div class="card-actions justify-end">
									<router-view>
										<router-link v-bind:to="`${item.link}`">
											<a class="btn btn-xs btn-primary" :href="item.link" role="button">Read More</a>
										</router-link>
									</router-view>
								</div>
								<h2 class="card-title">{{item.s}}</h2>
								<p>{{item.u}}</p>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</section>

</template>

<script>
import UserService from "@/services/user.service";
import * as constant from '@/assets/js/constant.js'

import Breadcrumbs from "@/components/utils/Breadcrumbs.vue";
import AOS from "aos";
import { mapState } from "vuex";


export default {
  name: "Testimonial",
  data() {
    return {
	  content: "",
	  testimonialItem: constant.TESTIMONIAL_ITEMS
    };
  },
//   computed: {
//     ...mapState(["isRTL"]),
//   },
  mounted() {
	AOS.init();
	this.$nextTick(function () {
		window.scrollTo(0, 0);
		// this.$refs.target?.scrollIntoView();
	});
    UserService.getPublicContent().then(
      (response) => {
        this.content = response.data;
      },
      (error) => {
        this.content =
          (error.response &&
            error.response.data &&
            error.response.data.message) ||
          error.message ||
          error.toString();
      }
	);
  },
  methods: {
  },
  components: {
	Breadcrumbs,
  },
  computed: {
    ...mapState(["isRTL", "isAbsolute"]),

	currentRouteName() {
      	return this.$route.path.split("/")[1];
    },
  },

};
</script>
