<template>
  <v-sheet color="#2D5284" class="py-5">
    <v-card variant="text" color="transparent" class="py-5">
      <v-card-title class="text-center py-0">
        <h6
          class="text-h6 text-accent font-weight-light"
          style="letter-spacing: 3px !important"
        >
          Contact Us
        </h6>
      </v-card-title>
      <v-card-title class="text-center py-0 text-white">
        <h4 class="text-h3 font-weight-medium">Contact Us we are everywhere</h4>
      </v-card-title>
    </v-card>

    <v-row justify="center">
      <v-col cols="11" md="10">
        <v-row class="ma-0">
          <v-col cols="12" md="6" class="d-flex align-center">
            <v-row class="ma-0">
              <v-col cols="12" md="8">
                <v-list
                  class="px-0 py-3 bg-transparent d-flex align-start justify-space-between"
                >
                  <v-list-item>
                    <v-list-item-title class="py-3">
                      <v-icon class="text-accent mr-2">mdi-map-marker</v-icon>
                      Piazza Napoleone, Lucca, Tuscany
                    </v-list-item-title>
                    <v-list-item-title class="py-3">
                      <v-icon class="text-accent mr-2">mdi-phone</v-icon>
                      +39 346 368 5708
                    </v-list-item-title>
                    <v-list-item-title class="py-3">
                      <v-icon class="text-accent mr-2">mdi-email</v-icon>
                      italiainlimo@gmail.com
                    </v-list-item-title>
                  </v-list-item>
                </v-list>
                <v-sheet color="transparent" class="position-relative">
                  <div class="decore_2">
                    <gear height="60" />
                  </div>
                  <v-card height="249" rounded="lg"> </v-card>
                </v-sheet>
              </v-col>
            </v-row>
          </v-col>
          <v-col cols="12" md="6">
            <formContactUs />
          </v-col>
        </v-row>
      </v-col>
    </v-row>
  </v-sheet>
</template>

<script setup>
import formContactUs from "./formContactUs.vue";
import gear from "@/core/components/decorations/gear.vue";
</script>

<style scoped>
.decore_2 {
  position: absolute;
  left: -50px;
  bottom: -30px;
}
</style>
