<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">CLINIC</h2>
					<p class="text-lg leading-relaxed m-4 text-medium-grey">
						comfort
					</p>
				</div>
			</div>
			<div class="flex flex-wrap items-center items-stretch px-4 mr-auto ml-auto">
				<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 clinicItems" :key="item.id">
					<figure class="px-10 pt-10">
						<img :src="require(`@/assets/img/landing/clinic/${item.img}`)" class="w-20 rounded-xl" />
					</figure>
					<div class="card-body items-center text-center">
						<h2 class="card-title">{{item.title}}</h2>
						<p>{{item.s}}</p>
						<div class="card-actions">
							<router-view>
								<router-link v-bind:to="`${item.link}`">
									<a class="btn btn-sm btn-primary" :href="item.link" role="button">Read More</a>
								</router-link>
							</router-view>
						</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: "Clinic",
  data() {
    return {
	  content: "",
	  clinicItems: constant.CLINIC_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>
