<template>
  <section id="intro">
    <div class="container">
      <div class="form">
        <div class="row">
          <div align="left" class="col-sm-12 col-md-10">
            <div class="intro-content box">
              <div style="margin-top: -40px;">
                <h2>Let us manage your property</h2>
                <p>
                  At Uni-Vate we appreciate the significant and positive
                  relationship between effective Property Management and
                  property prices. We understand that effective management not
                  only relies on administrative processes being intact, but also
                  on a clear plan and good communication with our clients based
                  on respect, trust understanding, openness and accountability.
                  We have access to a comprehensive set of human and other
                  resources to ensure that your property is proactively managed
                  to protect your investment and to ensure the contentedness of
                  occupants. We offer comprehensive property management
                  services, whether it being Sectional Title Management, HOA
                  Management or Rental Property Portfolio Management.
                </p>
                <a href="#" class="btn-white-border">
                  List your property with Uni-vate Properties
                </a>
                <router-link
                  v-if="!isLoggedIn"
                  to="/user/login"
                  class="btn-white-border"
                >
                  Login to owners portal
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <carousel
      :nav="false"
      :dots="false"
      :items="1"
      :autoplay="true"
      :loop="true"
      :autoHeight="true"
      id="intro-carousel"
      style="margin-top: -50px;"
      :responsive="{
        0: { items: 1, nav: false },
        600: { items: 1, nav: false },
      }"
    >
      <img class="item" src="/img/intro-carousel/home-1.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/16.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/comm-1.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/comm-4.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/3.jpg" alt="" />
      <img class="item" src="/img/intro-carousel/home-5.jpg" alt="" />
    </carousel>

    <div id="intro-carousel" class="owl-carousel"></div>
  </section>
</template>

<script>
/* eslint-disable */
import { mapState, mapActions } from 'vuex'
import Log from '../../../assets/Log'
import carousel from 'vue-owl-carousel'
export default {
  components: {
    carousel,
  },
  computed: {
    ...mapState('authentication', [
      'user',
      'flag',
      'status',
      'person',
      'token',
    ]),
    isLoggedIn() {
      console.log(Log.isLoggedIn())
      return Log.isLoggedIn()
    },
  },
}
</script>

<style lang="scss" scoped></style>
