<script setup lang="ts">
import { useTranslation } from "i18next-vue";
import StartPageFooter from "@/components/start/StartPageFooter.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.Versicherungsvermittler/-in") }}
        </h1>
        <p>{{ $t("start.vvDescription") }}</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_vv.jpg"
          :alt="t('a.Versicherungsvermittler/-in')"
        />
        <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.Lehrgang kaufen") }}:</span>
                {{
                  $t(
                    "Der Preis für den Lehrgang «Versicherungsvermittler-/in VBV» beträgt CHF 300 exkl. MWSt.. Mit dem Kauf erhältst du Zugang zum Lernpfad und den Lernmedien."
                  )
                }}
              </li>
            </ol>
            <div class="mt-4">
              <p class="mb-2">{{ $t("Sprache wählen und Lehrgang starten") }}:</p>
              <div class="flex flex-col gap-4 md:flex-row">
                <router-link
                  class="btn-primary"
                  :to="{ name: 'accountCreate', params: { courseType: 'vv-de' } }"
                >
                  {{ $t("a.Deutsch") }}
                </router-link>
                <router-link
                  class="btn-primary"
                  :to="{ name: 'accountCreate', params: { courseType: 'vv-fr' } }"
                >
                  {{ $t("a.Franzosisch") }}
                </router-link>
                <router-link
                  class="btn-primary"
                  :to="{ name: 'accountCreate', params: { courseType: 'vv-it' } }"
                >
                  {{ $t("a.Italienisch") }}
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <StartPageFooter>
      {{ $t("uk.contact.title") }}
      <br />
      {{ $t("vv.contact.team") }}
      <br />
      {{ $t("uk.contact.address") }}
      <br />
      <a class="link" href="mailto:vermittler@vbv-afa.ch">vermittler@vbv-afa.ch</a>
    </StartPageFooter>
  </div>
</template>
