<template>
  <footer class="footer">
    <div class="wrapper-footer">
      <div class="wrapper-section">
        <h3 class="title">{{ $t('general.footer.panoramax_title') }}</h3>
        <ul class="link-list">
          <li class="link">
            <Link
              :text="$t('general.footer.panoramax_site')"
              type="external"
              path-external="https://panoramax.fr/"
              look="link"
            />
          </li>
          <li class="link">
            <Link
              :text="$t('general.footer.panoramax_faq')"
              type="external"
              path-external="https://panoramax.fr/foire-aux-questions"
              look="link"
            />
          </li>
        </ul>
      </div>
      <div class="wrapper-section">
        <h3 class="title">{{ $t('general.footer.information_title') }}</h3>
        <ul class="link-list">
          <li class="link">
            <Link
              :text="$t('general.footer.information_forum')"
              type="external"
              path-external="https://forum.geocommuns.fr/c/panoramax/6"
              look="link"
            />
          </li>
          <li class="link">
            <Link
              :text="$t('general.footer.information_gitlab')"
              type="external"
              path-external="https://gitlab.com/geovisio"
              look="link"
            />
          </li>
          <li class="link">
            <Link
              :text="$t('general.footer.information_github')"
              type="external"
              path-external="https://github.com/panoramax-project/"
              look="link"
            />
          </li>
        </ul>
      </div>
      <div class="wrapper-section">
        <h3 class="title">{{ $t('general.footer.rs_title') }}</h3>
        <ul class="logo-list">
          <li class="logo">
            <Link
              :image="{
                url: 'mastodon.svg',
                alt: $t('general.footer.mastodon_alt')
              }"
              type="external"
              path-external="https://mapstodon.space/@panoramax"
            />
          </li>
          <li class="logo">
            <Link
              :image="{
                url: 'linkedin.svg',
                alt: $t('general.footer.linkedin_alt')
              }"
              type="external"
              path-external="https://github.com/panoramax-project/"
            />
          </li>
          <li>
            <Link
              :image="{
                url: 'x.svg',
                alt: $t('general.footer.twitter_alt')
              }"
              type="external"
              path-external="https://twitter.com/panoramax_"
            />
          </li>
        </ul>
      </div>
    </div>
    <div class="ay11-text">
      <Link
        :text="$t('general.footer.ay11_text')"
        :route="{ name: 'ay11' }"
        look="link"
      />
    </div>
  </footer>
</template>

<script setup lang="ts">
import Link from './Link.vue'
</script>

<style scoped lang="scss">
ul {
  padding: 0;
  margin: 0;
}
.footer {
  padding: toRem(2);
  border-top: toRem(0.1) solid var(--grey);
}
.wrapper-footer {
  display: flex;
}
.wrapper-section {
  width: 33%;
  display: flex;
  flex-direction: column;
}
.title {
  @include text(m-regular);
  color: var(--blue);
  margin-bottom: toRem(1.5);
}
.link-list {
  display: flex;
  flex-direction: column;
  align-items: initial;
}
.logo-list {
  display: flex;
  align-items: center;
}
.link {
  margin-bottom: toRem(0.3);
  width: fit-content;
}
.logo {
  margin-right: toRem(2);
  height: toRem(3);
}
.ay11-text {
  display: flex;
  justify-content: center;
  width: 100%;
}
@media (max-width: toRem(50)) {
  .footer {
    padding: toRem(2);
  }
  .wrapper-footer {
    flex-direction: column;
  }
  .ay11-text {
    margin-top: toRem(2);
    justify-content: initial;
  }
}
</style>
