<script setup lang="ts">
import StartPageFooter from "@/components/start/StartPageFooter.vue";
import { useTranslation } from "i18next-vue";

const { t } = useTranslation();
</script>

<template>
  <div>
    <div class="mb-10 bg-gray-200 pb-4 lg:pb-10">
      <div class="container-large">
        <nav class="py-4">
          <router-link
            class="btn-text inline-flex items-center pl-0"
            :to="{ name: 'start' }"
          >
            <it-icon-arrow-left />
            <span>{{ $t("general.back") }}</span>
          </router-link>
        </nav>
        <h1 class="mb-4 lg:mb-8" data-cy="hf-title">
          {{ $t("a.Überbetriebliche Kurse") }}
        </h1>
        <p>{{ $t("start.ukDescription") }}</p>
      </div>
    </div>
    <main class="container-large pb-4 lg:pb-10">
      <div class="flex flex-row gap-10">
        <img
          class="hidden object-cover md:block md:h-[350px] md:w-[350px] lg:h-[500px] lg:w-[500px]"
          src="../../assets/images/mood_uk.jpg"
          :alt="t('start.ukTitle')"
        />
        <div>
          <div class="mx-auto mb-8 mt-0 p-0 lg:mt-8 lg:p-4">
            <h2 class="mb-4 text-2xl font-semibold">
              So startest du mit diesem Lehrgang:
            </h2>
            <ol class="circle-numbered-list">
              <li>
                <span class="font-bold">{{ $t("a.Konto erstellen") }}:</span>
                {{ $t("a.Damit du myVBV nutzen kannst, brauchst du ein Konto.") }}
              </li>
              <li class="relative pl-8">
                <span class="font-bold">{{ $t("a.Profil ergänzen") }}:</span>
                {{
                  $t("Füge dein Profilbild hinzu und ergänze die fehlenden Angaben.")
                }}
              </li>
              <li class="relative pl-8">
                <span class="font-bold">{{ $t("a.An Durchführung teilnehmen") }}:</span>
                {{
                  $t("Sobald du einer Durchführung zugewiesen bist, ist alles bereit.")
                }}
              </li>
            </ol>
            <div class="mt-4 flex space-x-2">
              <router-link
                class="btn-primary"
                :to="{ name: 'accountCreate', params: { courseType: 'uk' } }"
              >
                {{ $t("a.Jetzt mit Lehrgang starten") }}
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </main>
    <StartPageFooter>
      {{ $t("uk.contact.title") }}
      <br />
      {{ $t("uk.contact.team") }}
      <br />
      {{ $t("uk.contact.address") }}
      <br />
      <a class="link" href="mailto:uek-support@vbv-afa.ch">uek-support@vbv-afa.ch</a>
    </StartPageFooter>
  </div>
</template>
