<template>
  <NuxtLayout name="error">
    <Container>
      <div
        class="text-primary-500 flex flex-col items-center text-center px-4 py-24 md:flex-row md:justify-start md:items-start md:text-left md:px-0 md:py-[200px]"
      >
        <h1
          class="text-9xl font-bold md:text-[200px] lg:text-[240px] xl:text-[270px] md:leading-[300px]"
        >
          {{ nuxtErr?.statusCode }}
        </h1>
        <div class="mt-8 md:mt-0 md:ml-40 md:pt-10">
          <h2 class="text-3xl md:text-7xl">
            {{ $texts('error.error_title', 'Hoppla!') }}
          </h2>
          <p class="text-base mt-4 md:text-3xl md:mt-12 md:font-bold">
            {{
              $texts(
                'error.error_subtitle',
                'Hier ist wohl eine Seite verloren gegangen. Nutzen Sie unsere Suchfunktion.',
              )
            }}
          </p>
        </div>
      </div>
    </Container>
  </NuxtLayout>
</template>

<script setup lang="ts">
const nuxtErr = useError()
</script>
