feat(i18n): French and German localization (phase 5)

- Add full message catalogs and content for French (fr) and German (de)
- Implement ASCII canonical slugs for French and German routes
- Add language-specific search endpoints (/api/busca/fr, /api/busca/de)
- Configure strict 404 responses for /fr/livro and /de/livro
- Localize SEO, OpenGraph (fr_FR, de_DE), Twitter and JSON-LD schemas
- Add localized code example comments across 14 examples for fr and de
- Enable 'fr' and 'de' in ENABLED_LOCALES with root negotiation and redirect
- Extend test suite in check-i18n, smoke-imagem and verifica-vazamentos

Co-Authored-By: Antigravity <noreply@google.com>

components/Header.jsx

@@ -118,6 +118,66 @@ const MENUS_ES = [
 	},
 ];
 
+const MENUS_FR = [
+	{
+		id: "hardware",
+		label: "Matériel",
+		items: [
+			{ href: "/series", label: "Séries ESP32", desc: "12 puces, brochages et spécifications", icon: Cpu },
+			{ href: "/comparacao", label: "Comparateur", desc: "Jusqu'à quatre séries côte à côte", icon: Scale },
+			{ href: "/catalogo", label: "Catalogue de cartes", desc: "DevKits, broches et où acheter", icon: Box },
+		],
+	},
+	{
+		id: "tools",
+		label: "Outils",
+		items: [
+			{ href: "/seletor", label: "Sélecteur intelligent", desc: "La puce idéale pour votre projet", icon: SlidersHorizontal },
+			{ href: "/diagnostico", label: "Diagnostic", desc: "Brownout, bootloop, WDT et plus", icon: AlertTriangle },
+			{ href: "/componentes", label: "Component Registry", desc: "Pilotes et manifestes idf_component.yml", icon: Search },
+		],
+	},
+	{
+		id: "library",
+		label: "Bibliothèque",
+		items: [
+			{ href: "/frameworks", label: "Frameworks et SDKs", desc: "ESP-IDF, Arduino, Rust et Matter", icon: BookOpen },
+			{ href: "/glossario", label: "Glossaire technique", desc: "Les termes des fiches techniques", icon: BookA },
+			{ href: "/sobre", label: "À propos du projet", desc: "Auteur, méthode et open source", icon: Sparkles },
+		],
+	},
+];
+
+const MENUS_DE = [
+	{
+		id: "hardware",
+		label: "Hardware",
+		items: [
+			{ href: "/series", label: "ESP32-Serien", desc: "12 Chips, Pinbelegungen und Spezifikationen", icon: Cpu },
+			{ href: "/comparacao", label: "Vergleich", desc: "Bis zu vier Serien nebeneinander", icon: Scale },
+			{ href: "/catalogo", label: "Board-Katalog", desc: "DevKits, Pins und Bezugsquellen", icon: Box },
+		],
+	},
+	{
+		id: "tools",
+		label: "Werkzeuge",
+		items: [
+			{ href: "/seletor", label: "Intelligente Auswahl", desc: "Der richtige Chip für Ihr Projekt", icon: SlidersHorizontal },
+			{ href: "/diagnostico", label: "Diagnose", desc: "Brownout, Bootloops, WDT und mehr", icon: AlertTriangle },
+			{ href: "/componentes", label: "Component Registry", desc: "Treiber und idf_component.yml-Manifeste", icon: Search },
+		],
+	},
+	{
+		id: "library",
+		label: "Bibliothek",
+		items: [
+			{ href: "/frameworks", label: "Frameworks & SDKs", desc: "ESP-IDF, Arduino, Rust und Matter", icon: BookOpen },
+			{ href: "/glossario", label: "Technisches Glossar", desc: "Begriffe aus den Datenblättern", icon: BookA },
+			{ href: "/sobre", label: "Über das Projekt", desc: "Autorschaft, Methode und Open Source", icon: Sparkles },
+		],
+	},
+];
+
 const MOBILE_LINKS_PT = [
 	{ href: "/series", label: "Séries ESP32" },
 	{ href: "/comparacao", label: "Comparador" },
@@ -155,6 +215,30 @@ const MOBILE_LINKS_ES = [
 	{ href: "/sobre", label: "Acerca de" },
 ];
 
+const MOBILE_LINKS_FR = [
+	{ href: "/series", label: "Séries ESP32" },
+	{ href: "/comparacao", label: "Comparateur" },
+	{ href: "/seletor", label: "Sélecteur intelligent" },
+	{ href: "/diagnostico", label: "Diagnostic" },
+	{ href: "/frameworks", label: "Frameworks et SDKs" },
+	{ href: "/componentes", label: "Component Registry" },
+	{ href: "/glossario", label: "Glossaire" },
+	{ href: "/catalogo", label: "Catalogue de cartes" },
+	{ href: "/sobre", label: "À propos" },
+];
+
+const MOBILE_LINKS_DE = [
+	{ href: "/series", label: "ESP32-Serien" },
+	{ href: "/comparacao", label: "Vergleich" },
+	{ href: "/seletor", label: "Intelligente Auswahl" },
+	{ href: "/diagnostico", label: "Diagnose" },
+	{ href: "/frameworks", label: "Frameworks & SDKs" },
+	{ href: "/componentes", label: "Component Registry" },
+	{ href: "/glossario", label: "Glossar" },
+	{ href: "/catalogo", label: "Board-Katalog" },
+	{ href: "/sobre", label: "Über uns" },
+];
+
 function isActivePath(pathname, href, currentLocale) {
 	const localized = getLocalizedHref(`/${currentLocale}${href}`, currentLocale);
 	if (href === "/" || localized === `/${currentLocale}/` || localized === `/${currentLocale}`) {
@@ -177,6 +261,8 @@ export default function Header() {
 	const isPt = currentLocale === "pt";
 	const isEn = currentLocale === "en";
 	const isEs = currentLocale === "es";
+	const isFr = currentLocale === "fr";
+	const isDe = currentLocale === "de";
 
 	const getLinkHref = (href) => getLocalizedHref(`/${currentLocale}${href}`, currentLocale);
 
@@ -216,19 +302,55 @@ export default function Header() {
 		};
 	}, [drawerOpen]);
 
-	const visibleMobileLinks = isPt ? MOBILE_LINKS_PT : isEs ? MOBILE_LINKS_ES : MOBILE_LINKS_EN;
-	const MENUS = isPt ? MENUS_PT : isEs ? MENUS_ES : MENUS_EN;
+	const visibleMobileLinks = isPt
+		? MOBILE_LINKS_PT
+		: isEs
+		? MOBILE_LINKS_ES
+		: isFr
+		? MOBILE_LINKS_FR
+		: isDe
+		? MOBILE_LINKS_DE
+		: MOBILE_LINKS_EN;
+	const MENUS = isPt ? MENUS_PT : isEs ? MENUS_ES : isFr ? MENUS_FR : isDe ? MENUS_DE : MENUS_EN;
 
 	return (
 		<header className="sticky top-0 z-50 pt-3 sm:pt-4">
 			<div className="shell">
 				<div className="nav-pill flex h-16 items-center justify-between gap-3 rounded-full px-3 sm:px-4">
-					<Link href={getLinkHref("/")} className="flex min-h-11 shrink-0 items-center gap-2.5 rounded-full pl-1 pr-2" aria-label={isPt ? "ESPDocs, página inicial" : isEs ? "ESPDocs, página de inicio" : "ESPDocs, homepage"}>
+					<Link
+						href={getLinkHref("/")}
+						className="flex min-h-11 shrink-0 items-center gap-2.5 rounded-full pl-1 pr-2"
+						aria-label={
+							isPt
+								? "ESPDocs, página inicial"
+								: isEs
+								? "ESPDocs, página de inicio"
+								: isFr
+								? "ESPDocs, page d'accueil"
+								: isDe
+								? "ESPDocs, Startseite"
+								: "ESPDocs, homepage"
+						}
+					>
 						<Logo className="h-[30px] w-[30px]" />
 						<span className="font-display text-[1.3rem] font-semibold leading-none tracking-[-0.045em] text-ink">ESPDocs</span>
 					</Link>
 
-					<nav ref={navRef} className="hidden items-center gap-0.5 lg:flex" aria-label={isPt ? "Navegação principal" : isEs ? "Navegación principal" : "Main navigation"}>
+					<nav
+						ref={navRef}
+						className="hidden items-center gap-0.5 lg:flex"
+						aria-label={
+							isPt
+								? "Navegação principal"
+								: isEs
+								? "Navegación principal"
+								: isFr
+								? "Navigation principale"
+								: isDe
+								? "Hauptnavigation"
+								: "Main navigation"
+						}
+					>
 						{MENUS.map((menu) => {
 							const active = menu.items.some((item) => isActivePath(pathname, item.href, currentLocale));
 							const expanded = openMenu === menu.id;
@@ -281,23 +403,33 @@ export default function Header() {
 							</Link>
 						)}
 						<Link href={getLinkHref("/sobre")} className={`nav-link ${isActivePath(pathname, "/sobre", currentLocale) ? "is-active" : ""}`} aria-current={isActivePath(pathname, "/sobre", currentLocale) ? "page" : undefined}>
-							{isPt ? "Sobre" : isEs ? "Acerca de" : "About"}
+							{isPt ? "Sobre" : isEs ? "Acerca de" : isFr ? "À propos" : isDe ? "Über uns" : "About"}
 						</Link>
 					</nav>
 
 					<div className="flex items-center gap-1.5">
 						<Link href={getLinkHref("/seletor")} className="btn btn-primary btn-sm hidden lg:inline-flex">
 							<SlidersHorizontal className="h-4 w-4" aria-hidden="true" />
-							{isPt ? "Selecionar chip" : isEs ? "Seleccionar chip" : "Select chip"}
+							{isPt ? "Selecionar chip" : isEs ? "Seleccionar chip" : isFr ? "Choisir une puce" : isDe ? "Chip auswählen" : "Select chip"}
 						</Link>
 						<SearchDialog />
 						<LanguageSelector />
-						<ThemeToggle isPt={isPt} isEs={isEs} />
+						<ThemeToggle isPt={isPt} isEs={isEs} isFr={isFr} isDe={isDe} />
 						<button
 							ref={menuButtonRef}
 							type="button"
 							className="grid h-11 w-11 place-items-center rounded-full border border-line text-ink transition-colors hover:bg-surface-2 lg:hidden"
-							aria-label={isPt ? "Abrir menu de navegação" : isEs ? "Abrir menú de navegación" : "Open navigation menu"}
+							aria-label={
+								isPt
+									? "Abrir menu de navegação"
+									: isEs
+									? "Abrir menú de navegación"
+									: isFr
+									? "Ouvrir le menu de navigation"
+									: isDe
+									? "Navigationsmenü öffnen"
+									: "Open navigation menu"
+							}
 							aria-expanded={drawerOpen}
 							onClick={() => setDrawerOpen(true)}
 						>
@@ -320,7 +452,17 @@ export default function Header() {
 						<div
 							role="dialog"
 							aria-modal="true"
-							aria-label={isPt ? "Menu de navegação" : isEs ? "Menú de navegación" : "Navigation menu"}
+							aria-label={
+								isPt
+									? "Menu de navegação"
+									: isEs
+									? "Menú de navegación"
+									: isFr
+									? "Menu de navigation"
+									: isDe
+									? "Navigationsmenü"
+									: "Navigation menu"
+							}
 							aria-hidden={!drawerOpen}
 							inert={!drawerOpen}
 							className={`fixed inset-y-0 right-0 z-[101] flex w-[min(23rem,94vw)] flex-col rounded-l-[2rem] border-l border-line bg-canvas transition-transform duration-300 ${
@@ -329,15 +471,19 @@ export default function Header() {
 						>
 							<div className="flex items-start justify-between px-5 py-5">
 								<div>
-									<p className="text-xs font-semibold text-muted">{isPt ? "Navegação" : isEs ? "Navegación" : "Navigation"}</p>
-									<p className="mt-1 font-display text-2xl font-semibold tracking-[-0.04em] text-ink">{isPt ? "Para onde ir" : isEs ? "A dónde ir" : "Where to go"}</p>
+									<p className="text-xs font-semibold text-muted">
+										{isPt ? "Navegação" : isEs ? "Navegación" : isFr ? "Navigation" : isDe ? "Navigation" : "Navigation"}
+									</p>
+									<p className="mt-1 font-display text-2xl font-semibold tracking-[-0.04em] text-ink">
+										{isPt ? "Para onde ir" : isEs ? "A dónde ir" : isFr ? "Où aller" : isDe ? "Wohin möchten Sie" : "Where to go"}
+									</p>
 								</div>
 								<button
 									ref={closeRef}
 									type="button"
 									onClick={() => setDrawerOpen(false)}
 									className="grid h-10 w-10 place-items-center rounded-full border border-line text-ink transition-colors hover:bg-surface-2"
-									aria-label={isPt ? "Fechar menu" : isEs ? "Cerrar menú" : "Close menu"}
+									aria-label={isPt ? "Fechar menu" : isEs ? "Cerrar menú" : isFr ? "Fermer le menu" : isDe ? "Menü schließen" : "Close menu"}
 								>
 									<X className="h-5 w-5" aria-hidden="true" />
 								</button>
@@ -369,7 +515,10 @@ export default function Header() {
 								</div>
 							)}
 
-							<nav className="flex-1 overflow-y-auto px-3 py-2" aria-label={isPt ? "Navegação móvel" : isEs ? "Navegación móvil" : "Mobile navigation"}>
+							<nav
+								className="flex-1 overflow-y-auto px-3 py-2"
+								aria-label={isPt ? "Navegação móvel" : isEs ? "Navegación móvil" : isFr ? "Navigation mobile" : isDe ? "Mobile Navigation" : "Mobile navigation"}
+							>
 								{visibleMobileLinks.map((link) => (
 									<Link
 										key={link.href}
@@ -387,7 +536,7 @@ export default function Header() {
 							<div className="p-4 pt-2">
 								<Link href={getLinkHref("/seletor")} onClick={() => setDrawerOpen(false)} className="btn btn-primary w-full">
 									<SlidersHorizontal className="h-4 w-4" aria-hidden="true" />
-									{isPt ? "Selecionar meu chip" : isEs ? "Seleccionar mi chip" : "Select my chip"}
+									{isPt ? "Selecionar meu chip" : isEs ? "Seleccionar mi chip" : isFr ? "Choisir ma puce" : isDe ? "Meinen Chip auswählen" : "Select my chip"}
 								</Link>
 							</div>
 						</div>
@@ -398,7 +547,7 @@ export default function Header() {
 	);
 }
 
-function ThemeToggle({ isPt = true, isEs = false }) {
+function ThemeToggle({ isPt = true, isEs = false, isFr = false, isDe = false }) {
 	const { resolvedTheme, setTheme } = useTheme();
 	const [mounted, setMounted] = useState(false);
 
@@ -415,8 +564,48 @@ function ThemeToggle({ isPt = true, isEs = false }) {
 			type="button"
 			onClick={() => setTheme(dark ? "light" : "dark")}
 			className="grid h-11 w-11 place-items-center rounded-full border border-line text-ink transition-colors hover:bg-surface-2"
-			aria-label={dark ? (isPt ? "Ativar tema claro" : isEs ? "Activar tema claro" : "Switch to light theme") : (isPt ? "Ativar tema escuro" : isEs ? "Activar tema oscuro" : "Switch to dark theme")}
-			title={dark ? (isPt ? "Tema claro" : isEs ? "Tema claro" : "Light theme") : (isPt ? "Tema escuro" : isEs ? "Tema oscuro" : "Dark theme")}
+			aria-label={
+				dark
+					? isPt
+						? "Ativar tema claro"
+						: isEs
+						? "Activar tema claro"
+						: isFr
+						? "Activer le thème clair"
+						: isDe
+						? "Helles Design aktivieren"
+						: "Switch to light theme"
+					: isPt
+					? "Ativar tema escuro"
+					: isEs
+					? "Activar tema oscuro"
+					: isFr
+					? "Activer le thème sombre"
+					: isDe
+					? "Dunkles Design aktivieren"
+					: "Switch to dark theme"
+			}
+			title={
+				dark
+					? isPt
+						? "Tema claro"
+						: isEs
+						? "Tema claro"
+						: isFr
+						? "Thème clair"
+						: isDe
+						? "Helles Design"
+						: "Light theme"
+					: isPt
+					? "Tema escuro"
+					: isEs
+					? "Tema oscuro"
+					: isFr
+					? "Thème sombre"
+					: isDe
+					? "Dunkles Design"
+					: "Dark theme"
+			}
 		>
 			{dark ? <Sun className="h-4 w-4" aria-hidden="true" /> : <Moon className="h-4 w-4" aria-hidden="true" />}
 		</button>