// @design-system: feedback/EmptyState/illustrations/Page404
/**
 * Page404 - navy disc with "404" in Concert One.
 * Colors use design tokens: --color-illustration-navy, --color-illustration-cream.
 */
import { useT } from '@/lib/i18n/react';

export function Page404() {
  const t = useT('error');
  return (
    <svg
      viewBox="0 0 200 200"
      width="140"
      height="140"
      xmlns="http://www.w3.org/2000/svg"
      aria-label={t('page_404_aria')}
      role="img"
    >
      <circle cx="100" cy="100" r="100" fill="var(--color-illustration-navy)" />
      <text
        x="100"
        y="100"
        textAnchor="middle"
        dominantBaseline="central"
        fontFamily="'Concert One', system-ui, sans-serif"
        fontWeight="400"
        fontSize="96"
        letterSpacing="-3"
        fill="var(--color-illustration-cream)"
      >
        404
      </text>
    </svg>
  );
}