<template>
  <div class="experience-cta-buttons-container">
    <div class="item experiences">
      <Title tag="h4">{{ $_tr('experiences.label') }}</Title>

      <Link
        :href="{
          name: 'ExperiencesPage'
        }"
        direction="row reverse"
        class="link"
      >
        {{ $_tr('experiences.action') }}
      </Link>
    </div>

    <div class="item questions bordered">
      <Title tag="h4">{{ $_tr('questions.label') }}</Title>

      <Link :href="{ name: 'FaqPage' }" direction="row reverse" class="link">
        {{ $_tr('questions.action') }}
      </Link>
    </div>

    <div class="item contacts bordered">
      <Title tag="h4">{{ $_tr('contacts.label') }}</Title>

      <Link
        :href="{
          name: 'FormPage',
          params: {
            slug: 'contacter-l-equipe-de-l-observatoire'
          }
        }"
        direction="row reverse"
        class="link"
      >
        {{ $_tr('contacts.action') }}
      </Link>
    </div>

    <div class="item bordered image">
      <img :src="experienceImg" alt="Logo L'Académie" />
    </div>
  </div>
</template>

<script>
import { Link } from 'inside-collection/components'
import { Title } from 'inside-collection/atoms'

import experienceImg from '../../assets/img/experiences/academy.png'

export default {
  name: 'ExperienceCTAButtons',
  $_i18nRootPath: 'customs.EXPERIENCES.CTA_BUTTONS',
  components: { Link, Title },
  data() {
    return {
      experienceImg
    }
  }
}
</script>
