---
import BaseLayout from '../layouts/BaseLayout.astro';
import { getDict, getLocaleFromUrl, localizedPath } from '../lib/i18n';
import type { Locale } from '../lib/i18n';

const locale: Locale = Astro.locals.locale ?? getLocaleFromUrl(Astro.url);
const dict = getDict(locale);
const user = Astro.locals.user;
---

<BaseLayout
  locale={locale}
  dict={dict}
  pagePath="/404"
  user={user}
  title={`${dict.meta.notFoundTitle} — ${dict.meta.siteName}`}
  description={dict.meta.notFoundDescription}
>
  <section class="section">
    <div class="container" style="text-align:center;">
      <span class="eyebrow">404</span>
      <h1>{dict.meta.notFoundTitle}</h1>
      <p class="text-muted">{dict.meta.notFoundDescription}</p>
      <p>
        <a class="btn btn--primary" href={localizedPath(locale, '/')}>{dict.nav.home}</a>
      </p>
    </div>
  </section>
</BaseLayout>