/* 404 */
function NotFoundPage() {
  return (
    <div className="page-fade" style={{ minHeight: 'calc(100vh - 56px)', display: 'flex', alignItems: 'center' }}>
      <div className="container m-404-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center', paddingTop: 80, paddingBottom: 80 }}>
        <div>
          <div className="label" style={{ marginBottom: 18 }}>FILE NOT FOUND · STATUS 404</div>
          <h1 className="display" style={{ fontSize: 'clamp(96px, 14vw, 220px)', lineHeight: 0.85, letterSpacing: '-0.05em' }}>
            4<span className="serif" style={{ fontStyle: 'italic', fontWeight: 400 }}>0</span>4
          </h1>
          <p className="lede" style={{ marginTop: 24, maxWidth: 560 }}>
            This page is not on file. The good news: nothing on it could have fined you anyway.
          </p>
          <div style={{ display: 'flex', gap: 10, marginTop: 28 }}>
            <button className="btn" onClick={() => go('')}>Back to home</button>
            <button className="btn btn--ghost" onClick={() => go('dashboard')}>Open dashboard</button>
          </div>
        </div>
        {/* Right — fake compliance receipt */}
        <div className="sheet" style={{ padding: 24, position: 'relative' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px solid var(--ink)', paddingBottom: 8 }}>
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.08em' }}>INCIDENT LOG · 404</span>
            <span className="mono" style={{ fontSize: 10, letterSpacing: '0.08em', color: 'var(--ink-3)' }}>NON-MATERIAL</span>
          </div>
          <div style={{ marginTop: 14, display: 'grid', gap: 8 }}>
            {[
              ['REQUEST',     window.location.hash || '/'],
              ['RECEIVED',    new Date().toISOString().slice(0, 19).replace('T', ' ') + ' UTC'],
              ['CLASSIFIED',  'NAVIGATION ERROR · USER-ORIGIN'],
              ['IMPACT',      '$0.00'],
              ['ACTION',      'NONE REQUIRED'],
              ['FOLLOW-UP',   'RETURN TO DASHBOARD'],
            ].map(([k, v], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '110px 1fr', gap: 12, padding: '6px 0', borderBottom: '1px dashed var(--rule)' }}>
                <span className="mono" style={{ fontSize: 10, letterSpacing: '0.06em', color: 'var(--ink-3)' }}>{k}</span>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink)', wordBreak: 'break-all' }}>{v}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 18, display: 'flex', justifyContent: 'space-between' }}>
            <span className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>SIGNED</span>
            <span className="serif" style={{ fontStyle: 'italic', fontSize: 18 }}>D. Marquez</span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.NotFoundPage = NotFoundPage;