<template>
  <footer class="footer-BG">
    <div class="container">
      <div class="footer-body">
        <div class="row">
          <div class="col-12 col-xl-4 col-lg-3 col-md-12 col-sm-12 d-flex flex-column logoFooter paddingCol">
            <img src="/img/logo.svg" alt="" />
            <a class="negareh" href="https://negarehagency.com" target="_blank">{{ content.t1 }}</a>
          </div>

          <div class="col-12 col-xl-4 col-lg-6 col-md-12 col-sm-12 textCenter">
            <nuxt-link :to="{ name: 'lang-about', params: { lang: $route.params.lang } }">
              {{ content.t2 }}
            </nuxt-link>
            <i class="fas fa-circle"></i>
            <nuxt-link :to="{ name: 'lang-activities', params: { lang: $route.params.lang } }">
              {{ content.t3 }}
            </nuxt-link>
            <i class="fas fa-circle"></i>
            <nuxt-link
              :to="{ name: 'lang-projects', params: { lang: $route.params.lang }, query: { category: 'all' } }"
            >
              {{ content.t4 }}
            </nuxt-link>
          </div>
          <div class="col-12 col-xl-4 col-lg-3 col-md-12 col-sm-12 phone-footer paddingCol">
            <i class="fas fa-phone-alt"></i>
            <a class="phoneNum" href="tel:021-88612602">021-88612602</a>
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  mounted() {
    let f = this.$gsap.timeline()
    f.fromTo($('.footer-body'), { opacity: 0 }, { opacity: 1, duration: 1 })
  },

  computed: {
    content() {
      return this.$store.state.content.footer[this.$route.params.lang]
    }
  }
}
</script>
