From ff6273af6427315705541c40782aedf2acaecc70 Mon Sep 17 00:00:00 2001
From: Simon Axelsson <simon@siax.io>
Date: Thu, 25 Jun 2026 18:22:32 +0200
Subject: [PATCH] feat(i18n): localize 404 not-found page (EN base + SV toggle)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/not-found.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/not-found.tsx b/app/not-found.tsx
index 17ce2c5..35f43bb 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,7 +1,11 @@
-import Link from "next/link";
+"use client";
+
+import Link from "next/link";
 import { Header } from "@/components/header";
+import { useT } from "@/components/locale-provider";
 
 export default function NotFound() {
+  const t = useT();
   return (
     <main id="main-content" className="min-h-screen bg-background text-foreground">
       <Header />
@@ -14,26 +18,26 @@ export default function NotFound() {
             404
           </span>
           <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-muted-foreground">
-            404 — Not found
+            {t({ en: "404 — Not found", sv: "404 — Sidan hittades ej" })}
           </p>
           <h1 className="mt-5 max-w-[14ch] text-[clamp(2.6rem,7vw,5.5rem)] font-medium leading-[0.95] tracking-[-0.035em]">
-            This page doesn&apos;t exist.
+            {t({ en: "This page doesn't exist.", sv: "Den här sidan finns inte." })}
           </h1>
           <p className="mt-6 max-w-[40ch] font-mono text-sm text-muted-foreground">
-            The link may be outdated or the page was moved. Nothing guessed.
+            {t({ en: "The link may be outdated or the page was moved. Nothing guessed.", sv: "Länken kan vara inaktuell eller sidan har flyttats. Inget gissades." })}
           </p>
           <div className="mt-12 flex flex-wrap gap-3">
             <Link
               href="/"
               className="bg-foreground px-7 py-4 font-mono text-[12px] uppercase tracking-[0.14em] text-background transition-colors hover:bg-[var(--accent-red)]"
             >
-              Home →
+              {t({ en: "Home →", sv: "Hem →" })}
             </Link>
             <Link
               href="/katalog"
               className="border border-foreground px-7 py-4 font-mono text-[12px] uppercase tracking-[0.14em] transition-colors hover:bg-foreground hover:text-background"
             >
-              Catalog
+              {t({ en: "Catalog", sv: "Katalog" })}
             </Link>
           </div>
         </div>