<template>
  <footer class="relative bg-light-medium-grey pt-8 pb-6">
    <div class="bottom-auto top-0 left-0 right-0 w-full absolute pointer-events-none overflow-hidden -mt-20" style="height: 80px;">
      <svg
        class="absolute bottom-0 overflow-hidden"
        xmlns="http://www.w3.org/2000/svg"
        preserveAspectRatio="none"
        version="1.1"
        viewBox="0 0 2560 100"
        x="0"
        y="0"
      >
        <polygon
          class="text-light-medium-grey fill-current"
          points="2560 0 2560 100 0 100"
        ></polygon>
      </svg>
    </div>
    <div class="container mx-auto px-4">
      <div class="flex flex-wrap">
        <div class="w-full lg:w-6/12 px-4">
          <a href="/" class="mb-4"><img :src="require(`@/assets/img/logo.png`)" style="max-height: 15vh;" /></a>
          <!-- <h4 class="text-3xl font-semibold">Let's keep in touch!</h4>
          <h5 class="text-lg mt-0 mb-2 text-gray-700">
            Find us on any of these platforms, we respond 1-2 business days.
          </h5> -->
        </div>
        <div class="w-full lg:w-6/12 px-4">
          <div class="flex flex-wrap items-top mb-6">
            <div class="w-full lg:w-8/12 px-4 ml-auto">
              <span class="block uppercase text-dark-grey text-sm font-semibold mb-2">Contacts</span>
              <ul class="list-unstyled">
                <li>
                  <div class="flex items-center">
                    <div>
                      <span class="font-semibold inline-block py-1 px-2 uppercase">
                        <i class="fas fa-map-marker-alt"></i>
                      </span>
                    </div>
                    <div>
                      <h4 class="block uppercase text-dark-grey text-sm font-semibold">
                        9519 Telegraph Rd, # A Pico Rivera, CA 90660
                      </h4>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="flex items-center">
                    <div>
                      <span class="font-semibold inline-block py-1 px-2 uppercase">
                        <i class="fas fa-envelope"></i>
                      </span>
                    </div>
                    <div>
                      <h4 class="block uppercase text-dark-grey text-sm font-semibold">
                        <a href="mailto:medihandacu@gmail.com">medihandacu@gmail.com</a>
                      </h4>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="flex items-center">
                    <div>
                      <span class="font-semibold inline-block py-1 px-2 uppercase">
                        <i class="fas fa-phone-alt"></i>
                      </span>
                    </div>
                    <div>
                      <h4 class="block uppercase text-dark-grey text-sm font-semibold">
                        <a href="tel:562-222-2842">+562-222-2842</a>
                      </h4>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="flex items-center">
                    <div>
                      <span class="font-semibold inline-block py-1 px-2 uppercase">
                        <i class="fas fa-fax"></i>
                      </span>
                    </div>
                    <div>
                      <h4 class="block uppercase text-dark-grey text-sm font-semibold">
                        <a href="tel:562-222-2841">+562-222-2841</a>
                      </h4>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <hr class="my-6 border-dark-grey" />
      <div
        class="flex flex-wrap items-center md:justify-between justify-center"
      >
        <div class="w-full md:w-4/12 px-4 mx-auto text-center">
          <div class="text-sm text-dark-grey font-semibold py-1">
            Copyright © {{date}} Medihand Acupuncture, Inc.
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>
<script>
export default {
  data() {
    return {
      date: new Date().getFullYear()
    }
  }
}
</script>
