<template>
  <v-footer color="#E1E5EA" class="pa-0">
    <v-row justify="center" class="w-100 ma-0">
      <v-col cols="11">
        <v-card-title
          class="w-100 py-6"
          style="border-bottom: 1px solid rgb(0 0 0 / 8%)"
        >
          <div style="width: 100px">
            <v-img src="@/assets/logo.svg"> </v-img>
          </div>
        </v-card-title>
        <v-list
          class="px-0 py-3 bg-transparent d-flex flex-wrap align-start justify-space-between"
        >
          <v-list-item class="px-0">
            <v-list-item-title
              class="py-3"
              v-for="(link, index) in links"
              :key="index"
            >
              <v-btn :to="link.path" variant="text">{{ link.name }}</v-btn>
            </v-list-item-title>
          </v-list-item>

          <v-list-item class="px-0">
            <h4 class="px-5 py-3">Blogs</h4>
            <v-list-item-title class="py-3 px-0">
              <v-btn to="/automation" variant="text">Automation</v-btn>
            </v-list-item-title>
            <v-list-item-title class="py-3 px-0">
              <v-btn to="/lighting" variant="text">Lighting</v-btn>
            </v-list-item-title>
          </v-list-item>
          <v-list-item class="px-0">
            <h4 class="px-5 py-3">Documents</h4>

            <v-list-item-title class="py-3 px-0">
              <v-btn to="/quality-certificates" variant="text"
                >Quality Certificates</v-btn
              >
            </v-list-item-title>
          </v-list-item>
          <v-list-item>
            <h4 class="mb-2 py-3">Contact</h4>
            <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-item
            ><h4 class="py-3">Social Media</h4>
            <v-card-actions class="px-0 ga-2">
              <v-btn
                variant="text"
                color="white"
                class="bg-accent"
                icon="mdi-twitter"
              ></v-btn>
              <v-btn
                variant="text"
                color="white"
                class="bg-accent"
                icon="mdi-facebook"
              ></v-btn>
              <v-btn
                variant="text"
                color="white"
                class="bg-accent"
                icon="mdi-instagram"
              ></v-btn>
            </v-card-actions>
          </v-list-item>
        </v-list>
        <v-card-title
          style="border-top: 1px solid rgb(0 0 0 / 8%)"
          class="d-flex justify-space-between align-center"
        >
          <h5 class="text-body-1">© MNS – All Rights Reserved</h5>
          <v-card-actions>
            <v-btn to="/terms-and-conditions" variant="text"
              >Terms and Conditions</v-btn
            >
            <v-btn to="/privacy-policy" variant="text">Privacy Policy</v-btn>
          </v-card-actions>
        </v-card-title>
      </v-col>
    </v-row>
  </v-footer>
</template>

<script setup>
const links = [
  {
    name: "Home",
    path: "/",
  },
  {
    name: "Products",
    path: "/products",
  },
  {
    name: "Distributors",
    path: "/distributors",
  },
  {
    name: "Services",
    path: "/services",
  },
  {
    name: "About",
    path: "/about",
  },
];
</script>

<style scoped></style>
