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

<Layout title="Pagina niet gevonden — SneakerPicks" description="Deze pagina bestaat niet. Zoek sneakers of bekijk populaire merken.">
  <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">404</span>
    </div>
    <h1 class="mb-4 text-3xl font-black tracking-tight sm:text-4xl">Sneaker niet gevonden</h1>
    <p class="mb-10 text-lg text-text-secondary">
      Sorry, deze pagina bestaat niet (meer). Zoek hieronder naar de sneaker die je zocht.
    </p>

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

    <div class="mb-8">
      <h2 class="mb-4 text-sm font-bold uppercase tracking-widest text-text-muted">Populaire merken</h2>
      <div class="flex flex-wrap justify-center gap-2">
        {['Nike', 'adidas', 'New Balance', 'PUMA', 'ASICS', 'Converse', 'Vans', 'HOKA'].map(brand => {
          const slug = brand.toLowerCase().replace(/[^a-z0-9]+/g, '-');
          return (
            <a
              href={`/merken/${slug}`}
              class="rounded-full border border-border/50 bg-bg-card px-4 py-2 text-sm font-semibold text-text-secondary transition-all hover:border-accent/40 hover:text-accent"
            >
              {brand}
            </a>
          );
        })}
      </div>
    </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>