---
// src/pages/404.astro -> dist/404.html (servern svarar med status 404)
import MainLayout from '../layouts/MainLayout.astro';
import WaveBackground from '../components/WaveBackground.astro';

const links = [
  { href: '/', label: 'Startsidan' },
  { href: '/portfolio', label: 'Portfolio' },
  { href: '/tjanster', label: 'Tjänster och bokning' },
  { href: '/contact', label: 'Kontakt' },
];
---

<MainLayout
  title="Sidan hittades inte | Images by Olofsson"
  description="Sidan du letade efter finns inte. Gå till startsidan, portfolion eller tjänsterna hos fotograf Linus Olofsson."
  noindex
>
  <WaveBackground opacity="opacity-60" />

  <div class="container mx-auto px-4 py-20 md:py-32 relative z-10 text-center">
    <p class="text-sm text-gray-400 uppercase tracking-widest mb-4">Fel 404</p>
    <h1 class="text-4xl md:text-6xl font-bold mb-6">Sidan hittades inte</h1>
    <p class="text-gray-300 text-lg max-w-xl mx-auto mb-10">
      Sidan du letade efter finns inte längre, eller så har adressen ändrats. Här kan du hitta tillbaka:
    </p>
    <ul class="flex flex-wrap justify-center gap-4">
      {links.map((l) => (
        <li>
          <a href={l.href} class="inline-block px-6 py-3 rounded-full border border-white/20 text-white hover:bg-white hover:text-black transition-colors">{l.label}</a>
        </li>
      ))}
    </ul>
  </div>
</MainLayout>