---
import Layout from '../layouts/Layout.astro';
import { getSiteSettings } from '../lib/directus';

const s = await getSiteSettings();
const ts = new Date().toISOString();
---
<Layout title="404 // LAUREL & VOW // FILE NOT FOUND" description="Page introuvable.">
  <main class="err-wrap">
    <div class="err-bar">ERROR &middot; 404 &middot; {s.studio_name.toUpperCase()} &middot; {s.city} &middot; {s.country}</div>
    <p class="err-code">404<span class="cursor" aria-hidden="true">▌</span></p>
    <h1 class="err-msg">FILE_NOT_FOUND.<br /><span class="ital">page introuvable.</span></h1>
    <div class="err-line"></div>
    <p class="err-meta">
      &gt; LA PAGE QUE VOUS CHERCHEZ N'EXISTE PAS OU A ETE DEPLACEE.<br />
      &gt; SI C'EST UN BUG, ON L'ECOUTE. ECRIVEZ-NOUS.<br />
      &gt; STATUS_CODE: 404 / NOT_FOUND<br />
      &gt; TIMESTAMP: {ts}
    </p>
    <div class="err-actions">
      <a class="cta cta--big" href="/">[ RETOUR A L'ACCUEIL ]</a>
      <a class="cta cta--big" href={`mailto:${s.email}?subject=404`}>[ {s.email.toUpperCase()} ]</a>
    </div>
  </main>
</Layout>

<style>
  .err-wrap {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 2.5vw, 1.75rem);
    gap: 2rem;
  }
  .err-bar {
    font-family: var(--mono);
    font-size: 0.625rem;
    letter-spacing: 0.18em;
    background: var(--ink);
    color: var(--paper);
    padding: 0.4rem clamp(1rem, 2.5vw, 1.75rem);
    margin: -2rem -1rem 0;
  }
  .err-code {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(6rem, 22vw, 18rem);
    line-height: 0.85;
    letter-spacing: -0.05em;
    color: var(--accent);
    margin: 0;
  }
  .err-msg {
    font-family: var(--mono);
    font-weight: 500;
    font-size: clamp(1.5rem, 4vw, 3rem);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1;
  }
  .err-meta {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--ink-2);
    letter-spacing: 0.06em;
    max-width: 60ch;
    line-height: 1.65;
    text-transform: uppercase;
  }
  .err-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
  .err-line { border-top: 2px solid var(--ink); margin: 1rem 0; }
</style>
