<template>
  <div class="procurement wow animated fadeInUp m-auto align-items-center bg-F4F4F4 pa-2 border-box" :class="mobileShow?'width-90':'d-flex  width-80'">
    <div class="border-box" :class="mobileShow?'width-100':'width-40 ml-2'">
      <div class="bg-white" :class="mobileShow?'fixed-width-height-mobile':'fixed-width-height'">
        <h3 class="font-size-24 color-343434 line-height-2 mb-2 text-align-justify"><strong>About MONTIERI</strong></h3>
        <p class="font-size-20 color-343434 line-height-2 text-align-justify">MONTIERI is committed to providing you with one-stop building materials, Hotel FF&E  services, and making your work more convenient.
        </p>
        <router-link to="/about" class="small-button font-size-14" v-show="mobileShow">Read more</router-link>
      </div>
    </div>
    <div class="" :class="mobileShow?'width-100':'width-60'">
      <div class="content-img">
        <div class="fixed-width position-relative">
          <img src="../assets/img/about.jpg" class="procurement-max-width" alt="Procurement & Manufacture" loading="lazy">
          <span @click="goPage" class="font-size-20 read-more pa-2 text-center position-absolute" :class="mobileShow?'read-more-mobile':'read-more-pc'" v-show="!mobileShow">Read more</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

import {onMounted, ref} from "vue";
import router from "../router";

let screenWidth = ref<any>('')
let mobileShow = ref<any>(false)
onMounted(async ()=>{
  screenWidth.value = document.body.offsetWidth;
  if(screenWidth.value<1000){
    mobileShow.value = true
  }else{
    mobileShow.value = false
  }
  window.addEventListener('resize',function(){
    screenWidth.value = document.body.offsetWidth;
    if(screenWidth.value<1000){
      mobileShow.value = true
    }else{
      mobileShow.value = false
    }
  })
})
const goPage = () => {
  localStorage.setItem('scrollPosition', 'aboutus')
  document.documentElement.scrollTop = 0
  router.push({
    path: '/about'
  })
}
</script>

<style scoped>
.fixed-width{
  width:100%;
}
.fixed-width-height{
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  transform: translateX(5%);
  z-index: 99;
  position: relative;
}
.fixed-width-height-mobile{
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  z-index: 99;
  position: relative;
}
.procurement-max-width{
  width: 100%;
  height: 35rem;
}
.second-img{
  top: 50%;
  right: -70%;
  transform: translateX(-50%) translateY(-50%);
  background: #fff;
  width: 50%;
  height: 300px;
}
.read-more{
  background: rgba(255,192,0);
  color: #fff;
  width: 60px;
  display: inline-block;
  top: 74%;
  transform: translateX(-50%) translateY(-50%);
  cursor: pointer;
  box-shadow: 0 4px 10px #333;
  z-index: 999;
}
.read-more-pc{
  left: -4%;
  /* top: 76%; */
}
.read-more-mobile{
  right: 0%;
}
.small-button{
  color: #fff;
  background: #ffc000;
  border: 1px solid #ffc000;
  padding: 10px;
}
.text-align-justify{
  /* text-align: justify; */
  /*text-indent: 20px;*/
}
@media (max-width: 1000px)  {
  .procurement-max-width{
    height: 18rem;
  }
}
</style>