<script setup lang="ts"></script>

<template>
  <div class="bg-gray-200">
    <section class="bg-blue-900 text-white">
      <div class="container-medium px-4 pb-16 pt-10 lg:px-8">
        <h2>{{ $t("start.myvbvDescription") }}</h2>
      </div>
    </section>
    <main class="lg:px-12 lg:py-12">
      <div class="container-medium">
        <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="Versicherungsvermittler"
            />
            <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="Versicherungsvermittler"
            />
          </li>
        </ul>
      </div>
    </main>
  </div>
</template>
