<template>
  <v-sheet color="transparent" class="position-relative">
    <div class="decore">
      <gear />
    </div>
    <v-card class="pa-5" rounded="xl">
      <div class="mb-10">
        <v-card-title
          class="text-center d-flex justify-center py-0"
          style="border-bottom: 1px solid #aaaaaa"
        >
          <h4
            class="text-primary pb-2 font-weight-medium"
            style="border-bottom: 3px solid #2d5284"
          >
            Contact Sales
          </h4>
        </v-card-title>
      </div>

      <v-form>
        <v-row class="ma-0">
          <v-col
            class="py-0"
            cols="6"
            v-for="(item, index) in items"
            :key="index"
          >
            <v-text-field
              variant="solo-filled"
              :placeholder="item.placeholder"
              class="rounded-xl"
              bg-color="#D4D4D433"
              rounded="lg"
              flat
            ></v-text-field>
          </v-col>
          <v-col cols="12" class="py-0">
            <v-textarea
              flat
              variant="solo-filled"
              rounded="lg"
              placeholder="Your Message"
              bg-color="#D4D4D433"
            ></v-textarea>
          </v-col>
        </v-row>
        <v-card-actions class="justify-center">
          <v-btn
            variant="elevated"
            color="#2D5284"
            width="258"
            size="large"
            rounded="xl"
            >Submit</v-btn
          >
        </v-card-actions>
      </v-form>
    </v-card>
  </v-sheet>
</template>

<script setup>
import gear from "@/core/components/decorations/gear.vue";
const items = [
  {
    placeholder: "First Name",
  },
  {
    placeholder: "Last Name",
  },
  {
    placeholder: "Email Adress",
  },
  {
    placeholder: "Phone Number",
  },
  {
    placeholder: "Country",
  },
  {
    placeholder: "Phone Number",
  },
  {
    placeholder: "Country",
  },
  {
    placeholder: "Company Name",
  },
];
</script>

<style scoped>
.decore {
  position: absolute;
  right: -50px;
  top: -50px;
}
</style>
