---
import Layout from '../layouts/Layout.astro';
import SearchBar from '../components/SearchBar.tsx';
---

<Layout title="Er ging iets mis — SneakerPicks" description="Er is een fout opgetreden. Probeer het later opnieuw.">
  <section class="mx-auto max-w-3xl px-4 py-24 text-center sm:px-6">
    <div class="mb-8">
      <span class="text-8xl font-black text-accent/20">500</span>
    </div>
    <h1 class="mb-4 text-3xl font-black tracking-tight sm:text-4xl">Er ging iets mis</h1>
    <p class="mb-10 text-lg text-text-secondary">
      Sorry, er is een onverwachte fout opgetreden. Probeer de pagina opnieuw te laden of zoek hieronder naar sneakers.
    </p>

    <div class="mx-auto mb-12 max-w-xl">
      <SearchBar client:load large={true} />
    </div>

    <div class="flex flex-wrap justify-center gap-4 text-sm">
      <a href="/sneakers" class="font-bold text-accent hover:text-accent-dim">Alle sneakers →</a>
      <a href="/deals" class="font-bold text-deal hover:text-deal-dim">Deals →</a>
      <a href="/" class="font-bold text-text-secondary hover:text-text">Homepage →</a>
    </div>
  </section>
</Layout>