<script setup lang="ts">
import { useTranslation } from "i18next-vue";

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

<template>
  <div class="bg-gray-200">
    <main class="lg:px-12 lg:pb-6">
      <div class="container-medium">
        <div class="pb-10 pt-4">
          <h1 class="text-left text-blue-900">
            {{ $t("start.myvbvDescription") }}
          </h1>
        </div>
        <h3 class="mb-8 text-blue-900">{{ $t("start.chooseCourse") }}</h3>
        <ul>
          <li class="mb-16 flex items-center gap-x-8">
            <img
              class="hidden h-72 md:block"
              src="../../assets/images/mood_vv.jpg"
              :alt="t('a.Versicherungsvermittler/-in')"
            />
            <div class="space-y-2">
              <h4 class="text-lg font-bold">
                {{ $t("a.Versicherungsvermittler/-in") }}
              </h4>
              <p>
                {{ $t("start.vvDescription") }}
              </p>
              <router-link class="btn-primary" :to="{ name: 'vvStart' }">
                {{ $t("a.Mehr erfahren") }}
              </router-link>
            </div>
          </li>
          <li class="flex items-center gap-x-8">
            <div class="space-y-2">
              <h4 class="text-lg font-bold">{{ $t("start.ukTitle") }}</h4>
              <p>
                {{ $t("start.ukDescription") }}
              </p>
              <router-link class="btn-primary" :to="{ name: 'ukStart' }">
                {{ $t("a.Mehr erfahren") }}
              </router-link>
            </div>
            <img
              class="hidden h-72 md:block"
              src="../../assets/images/mood_uk.jpg"
              :alt="t('start.ukTitle')"
            />
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>
