<script setup>
import { motion } from 'motion-v'
import { ArrowLeft, Car, Compass, Search } from 'lucide-vue-next'
import { useNotFoundContent } from '~/content/notFound'

const props = defineProps({
  statusCode: {
    type: [Number, String],
    default: 404,
  },
  title: {
    type: String,
    default: '',
  },
  description: {
    type: String,
    default: '',
  },
})

const { localizedPath } = usePublicLocale()
const { notFoundPage, notFoundUi } = useNotFoundContent()

const resolvedStatusCode = computed(() => {
  const parsed = Number(props.statusCode)
  return Number.isFinite(parsed) && parsed > 0 ? parsed : 404
})

const resolvedTitle = computed(() => {
  return String(props.title || '').trim()
    || notFoundUi.value.title
    || notFoundPage.value?.title
    || 'Page Not Found'
})

const resolvedDescription = computed(() => {
  return String(props.description || '').trim()
    || notFoundUi.value.description
    || notFoundPage.value?.excerpt
    || ''
})
</script>

<template>
  <div class="min-h-screen bg-[#0a0a0a] flex items-center justify-center relative overflow-hidden pt-20">
    <div class="absolute inset-0 z-0">
      <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(249,115,22,0.12),transparent_32%),radial-gradient(circle_at_bottom_right,rgba(59,130,246,0.10),transparent_28%),linear-gradient(180deg,#111827_0%,#0a0a0a_100%)]" />
    </div>

    <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 text-center w-full">
      <motion.div
        :initial="{ opacity: 0, scale: 0.9 }"
        :animate="{ opacity: 1, scale: 1 }"
        :transition="{ duration: 0.8 }"
      >
        <div class="relative inline-block mb-8">
          <h1 class="text-[120px] md:text-[200px] font-display font-black text-transparent bg-clip-text bg-gradient-to-b from-white to-white/20 leading-none tracking-tighter">
            {{ resolvedStatusCode }}
          </h1>
          <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full flex items-center justify-center mix-blend-overlay">
            <Compass class="w-32 h-32 md:w-48 md:h-48 text-brand-orange animate-[spin_10s_linear_infinite] opacity-50" />
          </div>
        </div>

        <h2 class="text-3xl md:text-5xl font-display font-black text-white uppercase tracking-tight mb-6">
          {{ resolvedTitle }}
        </h2>

        <p class="text-slate-400 text-lg md:text-xl max-w-2xl mx-auto mb-12">
          {{ resolvedDescription }}
        </p>

        <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
          <NuxtLink
            :to="localizedPath('/')"
            class="w-full sm:w-auto bg-brand-orange text-white px-8 py-4 rounded-full font-bold uppercase tracking-widest hover:bg-amber-500 transition-colors duration-300 flex items-center justify-center gap-2"
          >
            <ArrowLeft class="w-5 h-5" />
            {{ notFoundUi.backHomeLabel }}
          </NuxtLink>

          <NuxtLink
            :to="localizedPath('/vehicles')"
            class="w-full sm:w-auto bg-white/10 backdrop-blur-md text-white border border-white/20 px-8 py-4 rounded-full font-bold uppercase tracking-widest hover:bg-white/20 transition-colors duration-300 flex items-center justify-center gap-2"
          >
            <Car class="w-5 h-5" />
            {{ notFoundUi.fleetLabel }}
          </NuxtLink>
        </div>

        <div class="mt-16 pt-16 border-t border-white/10">
          <p class="text-slate-500 mb-6 uppercase tracking-widest text-sm font-bold">{{ notFoundUi.helperTitle }}</p>
          <div class="flex flex-wrap justify-center gap-4">
            <NuxtLink :to="localizedPath('/services')" class="text-slate-300 hover:text-brand-orange transition-colors flex items-center gap-2">
              <Search class="w-4 h-4" />
              {{ notFoundUi.servicesLabel }}
            </NuxtLink>
            <span class="text-slate-700">•</span>
            <NuxtLink :to="localizedPath('/locations')" class="text-slate-300 hover:text-brand-orange transition-colors flex items-center gap-2">
              <Search class="w-4 h-4" />
              {{ notFoundUi.locationsLabel }}
            </NuxtLink>
            <span class="text-slate-700">•</span>
            <NuxtLink :to="localizedPath('/contact')" class="text-slate-300 hover:text-brand-orange transition-colors flex items-center gap-2">
              <Search class="w-4 h-4" />
              {{ notFoundUi.supportLabel }}
            </NuxtLink>
          </div>
        </div>
      </motion.div>
    </div>
  </div>
</template>
