<script setup lang="ts">
import { useUserStore } from "@/stores/user";

const user = useUserStore();
</script>

<template>
  <div>
    <h2 class="mb-12">
      <i18next
        :translation="$t('a.Hallo {userFirstName}, wähle jetzt deinen Lehrgang aus')"
      >
        <template #userFirstName>{{ user.first_name }}</template>
      </i18next>
    </h2>

    <div class="grid grid-cols-1 gap-12 md:grid-cols-2">
      <div>
        <img
          src="../../assets/images/mood_vv.jpg"
          :alt="$t('a.Versicherungsvermittler/-in')"
        />
        <h3 class="mb-4 mt-8">{{ $t("a.Versicherungsvermittler/-in") }}</h3>
        <p class="mb-4">
          {{ $t("start.vvDescription") }}
        </p>
        <a href="/start/vv" class="btn-primary">{{ $t("a.Mehr erfahren") }}</a>
      </div>

      <div>
        <img
          src="../../assets/images/mood_uk.jpg"
          :alt="$t('Überbetriebliche Kurse')"
        />
        <h3 class="mb-4 mt-8">{{ $t("a.Überbetriebliche Kurse") }}</h3>
        <p class="mb-4">
          {{ $t("start.ukDescription") }}
        </p>
        <router-link
          :to="{ name: 'accountProfile', params: { courseType: 'uk' } }"
          class="btn-primary"
        >
          {{ $t("a.Jetzt mit Lehrgang starten") }}
        </router-link>
      </div>
    </div>
  </div>
</template>
