<template>
  <section class="min-h-screen px-5 pt-20 pb-10 lg:px-8">
    <div class="mx-auto w-full max-w-3xl">
      <button
        type="button"
        class="mb-8 text-sm text-dark transition hover:text-dark flex items-center justify-center gap-x-1.5"
        @click="$emit('back')"
      >
        <component :is="icons.arrowLeft" class="w-4 h-4" />
        <span>{{ t("Back") }}</span>
      </button>

      <h1
        class="text-4xl font-medium tracking-tight text-dark text-center py-5 mb-5"
      >
        müco <span class="font-handwritten">{{ t("Job Application") }}</span>
      </h1>

      <SectionsContact
        :section="contactSection"
        default-subject="job-application"
      />
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useIcons } from "@/composables/useIcons";

const icons = useIcons();

defineEmits<{
  back: [];
}>();

const { t } = useI18n();

const contactSection = computed(() => ({
  __component: "sections.contact",
  enabled: true,
  title: null,
  description: null,
}));
</script>
