<template>
  <div class="app-resume" v-once>
    <div class="columns is-multiline text-description is-centered">
      <div class="column is-one-third">
        <div class="main-icon">
          <img class="icon" src="../assets/icons/baseline-cloud_off-24px.svg" alt="offline" />
        </div>
        <p>
          Vos données sont hors-lignes.
          Utilisez Vaquant où vous voulez, seul ou en groupe.
          Les données seront sauvegardées sur internet dès qu'une connexion est disponible
          afin de les synchroniser avec vos amis.
        </p>
      </div>
      <div class="column is-one-third">
        <div class="main-icon">
          <awe-icon icon="users"></awe-icon>
        </div>
        <p>Choisissez de rendre le compte privé ou public.</p>
        <p>Lorsque le compte est privé, seules les personnes du compte accéderont aux dépenses.</p>
        <p>Lorsque le compte est public, toutes les personnes accédant au lien pourront voir, modifier ou supprimer les dépenses.</p>
      </div>
      <!-- <div class="column is-one-third">
        <div class="main-icon">
          <awe-icon icon="user-lock"/>
        </div>
        <p>
          Les informations sensibles de vos comptes et transactions sont chiffrées de bout en bout.
          Seuls les membres d'un compte peuvent visualiser ses données.
        </p>
      </div>-->
      <div class="column is-one-third">
        <div class="main-icon">
          <awe-icon icon="euro-sign" />&nbsp;
          <awe-icon icon="exchange-alt" />&nbsp;
          <awe-icon icon="dollar-sign" />
        </div>
        <p>
          Vaquant vous permet d'enregistrer les dépenses dans la monnaie locale de vos vacances
          et se charge de faire la conversion pour vous au jour le jour. 😙
        </p>
      </div>
      <div class="column is-one-third">
        <div class="main-icon">
          <awe-icon icon="sync-alt" />
        </div>
        <p>
          Vaquant se met à jour en direct. Vous recevez automatiquement les
          nouveaux comptes et dépenses sans même vous en rendre compte. 🎉
        </p>
      </div>
      <div class="column is-one-third">
        <div class="main-icon">
          <awe-icon icon="mobile" />
        </div>
        <p>
          Vaquant est simple, sécurisée, rapide et accessible depuis un simple lien internet&nbsp;!
          Votre partenaire idéal pour vos voyages&nbsp;! ⛺
        </p>
      </div>
      <div class="column is-one-third">
        <div class="main-icon">
          <awe-icon icon="hand-holding-usd" />
        </div>
        <p>
          Vaquant propose une offre gratuite sans publicité.
          Si vous souhaitez encourager son développement, vous pouvez toujours
          <a
            target="_blank"
            rel="noreferrer"
            :href="coffee"
          >offrir un ☕</a>&nbsp;!
        </p>
        <p>
          Ou vous pouvez également me supporter sur
          <a
            target="_blank"
            rel="noreferrer"
            :href="brave"
          >Brave</a>&nbsp;!
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { COFFEE_LINK, BRAVE_LINK } from '@/utils/constants'

export default Vue.extend({
  data() {
    return {
      coffee: COFFEE_LINK,
      brave: BRAVE_LINK
    }
  }
})
</script>


<style lang="scss" scoped>
.main-icon {
  font-size: 34pt;
  text-align: center;
}

.text-description {
  font-size: 14pt;
  text-align: justify;
  text-align-last: center;

  .column {
    padding: 30px;
    .emoji {
      font-size: 20pt;
      text-align: center;
    }
  }
}
</style>
