// Fin45 — 404 page
const { FinMascot, Wordmark } = window;

function Page404() {
  return (
    <main className="page" style={{ paddingTop: 80, paddingBottom: 96, textAlign: 'center' }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
        <FinMascot pose="alarm" size={280} />
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, letterSpacing: '0.2em', color: 'var(--accent)', textTransform: 'uppercase', marginTop: 8 }}>
          404 · not found
        </div>
        <h1 style={{ fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 64, letterSpacing: '-0.025em', lineHeight: 1, margin: 0 }}>
          Fin can't find that page.
        </h1>
        <p style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 19, color: 'var(--text-body)', maxWidth: '48ch', margin: '12px 0 24px' }}>
          The page you tried to open either doesn't exist yet or moved when the agent rewrote its routing. Try one of these.
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center', fontFamily: 'JetBrains Mono, monospace', fontSize: 12 }}>
          <a href="#/" className="btn-subscribe">Today's edition</a>
          <a href="#/archive" className="btn-subscribe">Archive</a>
          <a href="#/portfolio" className="btn-subscribe">Portfolio</a>
          <a href="#/about" className="btn-subscribe">About</a>
        </div>
      </div>
    </main>
  );
}

window.Page404 = Page404;