<template>
  <v-sheet class="pa-0 position-relative">
    <v-carousel
      v-model="model"
      :cycle="true"
      hide-delimiter-background
      :show-arrows="false"
      hide-delimiters
      height="80vh"
    >
      <v-carousel-item cover v-for="n in 4" :key="n">
        <!-- <v-img cover :src="`/Home/slider/${n}.png`"></v-img> -->
        <v-parallax :src="`/Home/slider/${n}.png`"></v-parallax>
      </v-carousel-item>
    </v-carousel>

    <div>
      <v-sheet
        color="transparent"
        class="d-flex justify-center align-center delimiters"
      >
        <v-card
          variant="text"
          class="pagination cursor-pointer"
          v-for="(n, index) in 4"
          :key="n"
          width="100"
          height="4"
          @click="selected(index)"
          :class="index === model ? 'active' : 'disapled'"
        ></v-card>
      </v-sheet>
    </div>
    <v-sheet class="title">
      <v-card
        variant="text"
        color="transparent"
        min-width="50%"
        class="d-flex flex-column justify-center align-center"
      >
        <v-card-title class="pa-0"
          ><h4
            class="text-accent font-weight-regular"
            style="letter-spacing: 5px"
          >
            Industrial Automation
          </h4></v-card-title
        >
        <v-card-title class="pa-0" style="max-width: 700px">
          <h2 class="text-h2 text-white text-wrap text-center">
            Industrial Automation & Control Solutions
          </h2>
        </v-card-title>
        <v-card-subtitle
          class="pa-0 mt-6"
          style="max-width: 500px; opacity: 1 !important"
        >
          <p class="text-wrap text-center text-white text-body-1">
            MNS automation and control products and solutions cover a wide range
            of industrial, infrastructure and construction sectors
          </p>
        </v-card-subtitle>
        <v-card-actions class="mt-8">
          <v-btn
            variant="text"
            class="bg-primary rounded-xl text-body-1 font-weight-regular"
            width="124"
            size="large"
            to="/products"
            >Products</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-sheet>
  </v-sheet>
</template>

<script setup>
import { ref } from "vue";
const model = ref();
const selected = (index) => {
  model.value = index;
};
</script>

<style scoped>
.delimiters {
  position: absolute;
  gap: 39px;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
}
.disapled {
  background-color: #ffffff;
  transition: 1s;
}
.active {
  background-color: #e9ae0c;
  transition: 1s;
}
.title {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.274);
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
}
</style>
