<script setup lang="ts">
import { ArrowLeft, Home, Stars } from '@lucide/vue'
import { useRouter } from 'vue-router'

import './notFoundView.css'

const router = useRouter()
</script>

<template>
  <div class="not-found">
    <div class="not-found__sky"></div>
    <div class="not-found__glow not-found__glow--violet"></div>
    <div class="not-found__glow not-found__glow--peach"></div>
    <div class="not-found__glow not-found__glow--pink"></div>
    <span class="not-found__star not-found__star--1">✦</span>
    <span class="not-found__star not-found__star--2">✧</span>
    <span class="not-found__star not-found__star--3">★</span>
    <span class="not-found__star not-found__star--4">✦</span>
    <span class="not-found__star not-found__star--5">✧</span>

    <div class="not-found__content">
      <div class="not-found__badge">
        <Stars class="h-4 w-4" />
        Sternenroute verloren
      </div>
      <div class="not-found__pillow-wrap">
        <span class="not-found__pillow-spark not-found__pillow-spark--one">✦</span>
        <span class="not-found__pillow-spark not-found__pillow-spark--two">✧</span>
        <span class="not-found__pillow-spark not-found__pillow-spark--three">★</span>
        <div class="not-found__pillow-shadow"></div>
        <div class="not-found__mobile">
          <div class="not-found__mobile-bar"></div>
          <div class="not-found__mobile-hanger not-found__mobile-hanger--left">
            <span class="not-found__mobile-thread"></span>
            <span class="not-found__mobile-number not-found__mobile-number--left">4</span>
          </div>
          <div class="not-found__mobile-hanger not-found__mobile-hanger--center">
            <span class="not-found__mobile-thread not-found__mobile-thread--long"></span>
            <span class="not-found__mobile-number not-found__mobile-number--center">0</span>
          </div>
          <div class="not-found__mobile-hanger not-found__mobile-hanger--right">
            <span class="not-found__mobile-thread"></span>
            <span class="not-found__mobile-number not-found__mobile-number--right">4</span>
          </div>
          <div class="not-found__mobile-cloud not-found__mobile-cloud--left"></div>
          <div class="not-found__mobile-cloud not-found__mobile-cloud--center"></div>
          <div class="not-found__mobile-cloud not-found__mobile-cloud--right"></div>
        </div>
      </div>
      <p class="not-found__eyebrow">Oopsie im Sternenhimmel</p>
      <h1 class="not-found__title">Diese Seite wurde nicht gefunden</h1>
      <p class="not-found__text">
        Die Route ist wohl in einem Pastell-Nebel verschwunden. Lass uns dich zurück zur Award-Galaxie bringen.
      </p>

      <div class="not-found__actions">
        <button class="not-found__primary" @click="router.push('/')">
          <Home class="h-4 w-4" />
          Zur Startseite
        </button>
        <button class="not-found__secondary" @click="router.back()">
          <ArrowLeft class="h-4 w-4" />
          Zurück
        </button>
      </div>
    </div>
  </div>
</template>
