<template>
  <v-sheet color="transparent" class="py-9">
    <v-row class="ma-0">
      <v-col cols="12" md="6">
        <v-card variant="text" max-width="517">
          <v-card-title>
            <h5 class="text-primary font-weight-regular text-h6">WHO ARE WE</h5>
          </v-card-title>
          <v-card-title
            ><h4 class="text-h4 text-wrap">
              We assist individuals with product solutions for industrial
              automation.
            </h4>
          </v-card-title>
          <v-card-subtitle>
            <p class="text-wrap text-body-1">
              MNS specializes in manufacturing and supplying electrical products
              and low voltage lighting products. They provide reliable products
              and end-to-end solutions to customers all over the world.
            </p>
          </v-card-subtitle>
        </v-card>
        <v-sheet class="d-flex flex-column ga-5 my-9">
          <v-card
            v-for="n in 2"
            :key="n"
            variant="text"
            class="rounded-xl"
            max-width="400"
            style="box-shadow: 4px 10px 30px 0px #0000000f"
          >
            <template v-slot:title>
              <v-card-title>
                <h4 class="text-h6 font-weight-regular text-primary">value</h4>
              </v-card-title>
            </template>
            <template v-slot:subtitle>
              <v-card-subtitle style="opacity: 1" class="mt-1">
                <p class="text-wrap text-body-1 font-weight-regular">
                  What makes our services indispensable are our services: we are
                  with you at any time
                </p>
              </v-card-subtitle>
            </template>
            <template v-slot:prepend>
              <v-icon size="x-large" class="mr-2 text-accent">mdi-phone</v-icon>
            </template>
          </v-card>
        </v-sheet>
      </v-col>
      <v-col cols="12" md="6" class="pa-0 position-relative pt-16">
        <v-row class="ma-0 h-100">
          <v-col class="h-100 pa-0">
            <v-hover>
              <template v-slot="{ isHovering, props }">
                <v-card
                  variant="text"
                  v-bind="props"
                  class="w-100 h-100 d-flex align-end"
                >
                  <v-img
                    style="height: 90%"
                    src="@/assets/about/about_1.png"
                    :class="
                      isHovering ? 'animate__animated animate__pulse' : ''
                    "
                  ></v-img>
                </v-card>
              </template>
            </v-hover>
          </v-col>
          <v-col class="d-flex flex-column justify-center pa-0">
            <v-hover>
              <template v-slot="{ isHovering, props }">
                <v-card
                  v-bind="props"
                  variant="text"
                  class="w-100 position-relative"
                  style="z-index: 1"
                >
                  <v-img
                    :class="
                      isHovering ? 'animate__animated animate__pulse' : ''
                    "
                    src="@/assets/about/about_2.png"
                  ></v-img>
                </v-card>
              </template>
            </v-hover>

            <v-hover>
              <template v-slot="{ isHovering, props }">
                <v-card
                  v-bind="props"
                  variant="text"
                  class="w-100 position-relative"
                >
                  <v-img
                    :class="
                      isHovering ? 'animate__animated animate__pulse' : ''
                    "
                    style="z-index: 1"
                    src="@/assets/about/about_3.png"
                  ></v-img>
                  <div
                    style="
                      width: 100px;
                      position: absolute;
                      left: 0;
                      bottom: 0;
                      z-index: 0;
                    "
                  >
                    <v-img
                      class="gear"
                      height="100"
                      src="@/assets/decorations/gear.svg"
                    ></v-img>
                  </div>
                </v-card>
              </template>
            </v-hover>
          </v-col>
        </v-row>
        <div class="decor">
          <v-img
            class="decor_anmated"
            height="400"
            src="@/assets/decorations/decore_1.svg"
          ></v-img>
        </div>
      </v-col>
    </v-row>
  </v-sheet>
</template>

<script setup></script>

<style scoped>
.decor {
  width: 400px;
  position: absolute;
  left: 50%;
  top: -50px;
  z-index: 0;
  transform: translateX(-50%);
  transition: 1s;
}
.decor_anmated {
  animation: rotate_decore 30s linear infinite;
  z-index: 0;
}

@keyframes rotate_decore {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.gear {
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(360deg);
  }
  50% {
    transform: rotate(360deg);
  }
  90% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1.05, 1.05, 1.05) !important;
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);

    transform: scale3d(1.05, 1.05, 1.05) !important;
  }
}
</style>
