<script setup>
import { RouterLink } from 'vue-router'
</script>

<template>
  <section class="section nf">
    <div class="container nf__inner">
      <span class="mono dim">ERR · 404</span>
      <h1>Lost in orbit.</h1>
      <p class="muted">The page you're looking for has drifted. Let's get you back.</p>
      <div class="nf__cta">
        <RouterLink to="/" class="btn btn--primary">Home</RouterLink>
        <RouterLink to="/products" class="btn btn--ghost">Products</RouterLink>
        <RouterLink to="/contact" class="btn btn--ghost">Talk to us</RouterLink>
      </div>
    </div>
  </section>
</template>

<style scoped>
.nf { min-height: 60vh; display: flex; align-items: center; }
.nf__inner { text-align: center; max-width: 560px; margin: 0 auto; }
.nf h1 { margin-top: var(--space-3); font-size: clamp(2.5rem, 7vw, 4.5rem); }
.nf__cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
</style>
