// src/pages/NotFoundPage.jsx
function NotFoundPage() {
  const { t, navigate } = useApp();

  React.useEffect(() => {
    document.title = `404 — StopCBDC`;
    return () => { document.title = 'StopCBDC'; };
  }, []);

  return (
    <div className="flex flex-col items-center justify-center px-4 sm:px-6" style={{ minHeight: 'calc(100vh - 76px)' }}>
      <div className="max-w-xl text-center">
        <p
          className="text-7xl sm:text-8xl font-bold mb-4 leading-none"
          style={{ color: 'var(--accent)' }}
        >
          404
        </p>
        <h1 className="text-2xl sm:text-3xl font-bold mb-4" style={{ color: 'var(--text)' }}>
          {t.notFound.title}
        </h1>
        <p className="text-base leading-relaxed mb-8" style={{ color: 'var(--text-muted)' }}>
          {t.notFound.desc}
        </p>
        <div className="flex flex-wrap justify-center gap-3">
          <button type="button" className="btn-primary" onClick={() => navigate('home')}>
            {t.notFound.home}
          </button>
          <button type="button" className="btn-outline" onClick={() => navigate('news')}>
            {t.notFound.news}
          </button>
        </div>
      </div>
    </div>
  );
}