feat(i18n): English localization (phase 3)

- Translate content to English across messages/en.json, data/en, lib/data/en, and public/exemplos/en
- Implement localized routing, slugs, and language negotiation with fallback to en
- Build dedicated search index for English with strict book exclusion
- Update components and pages to dynamically render localized strings and datasets
- Verify full structural parity and exact 1:1 match on Portuguese pages via comparator

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

app/[locale]/frameworks/page.jsx

@@ -3,10 +3,13 @@ import Footer from "@/components/Footer";
 import PageHero from "@/components/PageHero";
 import SectionHead from "@/components/SectionHead";
 import Link from "next/link";
-import frameworksData from "@/public/frameworks.json";
+import frameworksDataPt from "@/public/frameworks.json";
+import frameworksDataEn from "@/data/en/frameworks.json";
+import { paginaMeta } from "@/lib/seo";
+import { getLocalizedHref } from "@/i18n/links";
 import { ArrowRight, ArrowUpRight, Box, Brain, Cloud, GraduationCap, Layers, Mic, Music, Sparkles } from "lucide-react";
 
-const GUIAS = [
+const GUIAS_PT = [
 	{
 		icon: GraduationCap,
 		titulo: "Estou começando",
@@ -39,8 +42,46 @@ const GUIAS = [
 	},
 ];
 
-export default function Frameworks() {
+const GUIAS_EN = [
+	{
+		icon: GraduationCap,
+		titulo: "Getting Started",
+		texto: "Arduino or MicroPython are the fastest routes to test sensors and APIs. For production, go with ESP-IDF or Rust.",
+		links: [
+			["Arduino", "/frameworks/Arduino"],
+			["MicroPython", "/frameworks/MicroPython"],
+			["Rust", "/frameworks/Rust-ESP"],
+		],
+	},
+	{
+		icon: Cloud,
+		titulo: "Cloud and Connected Home",
+		texto: "ESP-Matter for interoperability, ESP-RainMaker for ready-made cloud, and Zigbee for low-power local mesh networks.",
+		links: [
+			["RainMaker", "/frameworks/ESP-RainMaker"],
+			["Matter", "/frameworks/ESP-Matter"],
+			["Zigbee", "/frameworks/ESP-Zigbee-SDK"],
+		],
+	},
+	{
+		icon: Sparkles,
+		titulo: "Audio, Voice and AI",
+		texto: "ESP-ADF for audio processing, ESP-SR for offline speech recognition, and ESP-NN for accelerating TinyML.",
+		links: [
+			["Audio", "/frameworks/ESP-ADF", Music],
+			["Voice", "/frameworks/ESP-SR", Mic],
+			["AI", "/frameworks/ESP-NN", Brain],
+		],
+	},
+];
+
+export default async function Frameworks({ params }) {
+	const { locale } = await params;
+	const isEn = locale === "en";
+	const currentLocale = isEn ? "en" : "pt";
+	const frameworksData = isEn ? frameworksDataEn : frameworksDataPt;
 	const frameworks = Object.entries(frameworksData);
+	const guias = isEn ? GUIAS_EN : GUIAS_PT;
 
 	return (
 		<div className="site-canvas min-h-screen">
@@ -48,16 +89,20 @@ export default function Frameworks() {
 
 			<main id="conteudo">
 				<PageHero
-					trail={[{ label: "Frameworks e SDKs" }]}
+					trail={[{ label: isEn ? "Frameworks & SDKs" : "Frameworks e SDKs" }]}
 					icon={Layers}
-					label={`${frameworks.length} frameworks e SDKs`}
-					title="Frameworks e SDKs do ESP32"
-					lede="Do C/C++ nativo com FreeRTOS ao Rust, passando por nuvem IoT, reconhecimento de voz, áudio e Matter. Escolha pelo que você quer construir."
+					label={isEn ? `${frameworks.length} frameworks and SDKs` : `${frameworks.length} frameworks e SDKs`}
+					title={isEn ? "ESP32 Frameworks and SDKs" : "Frameworks e SDKs do ESP32"}
+					lede={
+						isEn
+							? "From native C/C++ with FreeRTOS to Rust, IoT cloud, speech recognition, audio, and Matter. Choose by what you want to build."
+							: "Do C/C++ nativo com FreeRTOS ao Rust, passando por nuvem IoT, reconhecimento de voz, áudio e Matter. Escolha pelo que você quer construir."
+					}
 				/>
 
-				<section className="shell pt-10 sm:pt-12" aria-label="Por onde começar">
+				<section className="shell pt-10 sm:pt-12" aria-label={isEn ? "Where to begin" : "Por onde começar"}>
 					<div className="grid gap-4 md:grid-cols-3">
-						{GUIAS.map(({ icon: Icon, titulo, texto, links }) => (
+						{guias.map(({ icon: Icon, titulo, texto, links }) => (
 							<div key={titulo} className="card flex flex-col p-5 sm:p-6">
 								<span className="grid h-10 w-10 place-items-center rounded-full bg-accent-soft text-accent">
 									<Icon className="h-5 w-5" aria-hidden="true" />
@@ -67,7 +112,7 @@ export default function Frameworks() {
 								<ul className="mt-5 flex flex-wrap gap-2 border-t border-line pt-4">
 									{links.map(([rotulo, href, Extra]) => (
 										<li key={rotulo}>
-											<Link href={href} className="chip-btn">
+											<Link href={getLocalizedHref(href, currentLocale)} className="chip-btn">
 												{Extra && <Extra className="h-4 w-4" aria-hidden="true" />}
 												{rotulo}
 											</Link>
@@ -84,27 +129,41 @@ export default function Frameworks() {
 						<div className="max-w-2xl">
 							<span className="chip chip-accent">
 								<Box className="h-3.5 w-3.5" aria-hidden="true" />
-								Arquitetura modular
+								{isEn ? "Modular architecture" : "Arquitetura modular"}
 							</span>
 							<h2 className="section-title mt-4">ESP Component Registry</h2>
 							<p className="mt-3 text-base leading-relaxed text-muted">
-								Instale drivers de display (LVGL), pilhas industriais (Modbus), recursos de nuvem e pacotes de placa
-								(BSPs) com uma linha no manifesto <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code>.
+								{isEn ? (
+									<>
+										Install display drivers (LVGL), industrial stacks (Modbus), cloud integrations, and board support packages
+										(BSPs) with a single line in your <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code> manifest.
+									</>
+								) : (
+									<>
+										Instale drivers de display (LVGL), pilhas industriais (Modbus), recursos de nuvem e pacotes de placa
+										(BSPs) com uma linha no manifesto <code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code>.
+									</>
+								)}
 							</p>
 						</div>
-						<Link href="/componentes" className="btn btn-primary shrink-0">
-							Explorar componentes
+						<Link href={getLocalizedHref("/componentes", currentLocale)} className="btn btn-primary shrink-0">
+							{isEn ? "Explore components" : "Explorar componentes"}
 							<ArrowRight className="h-4 w-4" aria-hidden="true" />
 						</Link>
 					</div>
 				</section>
 
 				<section className="shell section" aria-labelledby="todos-titulo">
-					<SectionHead id="todos-titulo" eyebrow="Todos" title="Todos os frameworks" lede="Cada ficha traz recursos, aplicações ideais, exemplo de código e links oficiais." />
+					<SectionHead
+						id="todos-titulo"
+						eyebrow={isEn ? "All" : "Todos"}
+						title={isEn ? "All frameworks" : "Todos os frameworks"}
+						lede={isEn ? "Each page provides features, ideal use cases, code examples, and official links." : "Cada ficha traz recursos, aplicações ideais, exemplo de código e links oficiais."}
+					/>
 
 					<div className="mt-8 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
 						{frameworks.map(([key, framework]) => (
-							<Link key={key} href={`/frameworks/${encodeURIComponent(key)}`} className="card card-interactive group flex flex-col p-5 sm:p-6">
+							<Link key={key} href={getLocalizedHref(`/frameworks/${encodeURIComponent(key)}`, currentLocale)} className="card card-interactive group flex flex-col p-5 sm:p-6">
 								<div className="flex flex-wrap items-start justify-between gap-2">
 									<h3 className="font-display text-xl font-semibold tracking-[-0.03em] text-ink">{framework.nome}</h3>
 									<span className="chip max-w-full">{framework.linguagem}</span>
@@ -121,7 +180,7 @@ export default function Frameworks() {
 								</ul>
 
 								<span className="mt-5 inline-flex items-center gap-1 border-t border-line pt-4 text-sm font-medium text-accent">
-									Ver detalhes e exemplo
+									{isEn ? "View details and example" : "Ver detalhes e exemplo"}
 									<ArrowUpRight className="h-4 w-4 transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5" aria-hidden="true" />
 								</span>
 							</Link>