// NotFoundPage.jsx — soft 404
//
// The SPA fallback (_redirects) serves index.html for unknown paths, so this
// is a soft 404 rendered in-app: it returns 200 but is marked noindex.

const notFoundStyles = {
  wrap: {
    minHeight: '60vh',
    display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
    textAlign: 'center',
    padding: '96px 32px',
    background: 'var(--brand-cream)',
  },
  code: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 96, lineHeight: 1, color: 'var(--brand-leaf)',
    margin: 0, letterSpacing: '-0.02em',
  },
  title: {
    fontFamily: 'var(--font-serif)', fontWeight: 700,
    fontSize: 36, lineHeight: 1.15, color: 'var(--color-fg-strong)',
    margin: '20px 0 12px', textWrap: 'balance',
  },
  sub: {
    fontFamily: 'var(--font-sans)', fontSize: 17, lineHeight: 1.6,
    color: 'var(--color-fg-muted)', maxWidth: '44ch', margin: '0 0 32px',
  },
  links: { display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' },
};

function NotFoundPage() {
  const lang = React.useContext(LangContext);
  const copy = lang === 'es'
    ? { title: 'Página no encontrada',
        sub: 'No encontramos lo que buscabas. Quizá se movió o el enlace está incompleto.',
        home: 'Volver al inicio', diario: 'Ver el diario', search: 'Buscar' }
    : { title: 'Page not found',
        sub: "We couldn't find what you were looking for. It may have moved, or the link is incomplete.",
        home: 'Back to home', diario: 'Browse the journal', search: 'Search' };

  React.useEffect(() => {
    updateSeo({
      title: copy.title,
      description: copy.sub,
      ogType: 'website',
      lang,
      noindex: true,
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [lang]);

  return (
    <main style={notFoundStyles.wrap}>
      <p style={notFoundStyles.code}>404</p>
      <h1 style={notFoundStyles.title}>{copy.title}</h1>
      <p style={notFoundStyles.sub}>{copy.sub}</p>
      <div style={notFoundStyles.links}>
        <a className="btn btn--primary" href={hrefFor({ view: 'home' })}>{copy.home}</a>
        <a className="btn btn--secondary" href={hrefFor({ view: 'archive' })}>{copy.diario}</a>
        <button className="btn btn--secondary"
                onClick={() => window.dispatchEvent(new CustomEvent('app:open-search'))}>
          {copy.search}
        </button>
      </div>
    </main>
  );
}

window.NotFoundPage = NotFoundPage;