ESPDocs/app/[locale]/frameworks/[key]/page.jsx

import { paginaMeta, jsonLd } from "@/lib/seo";
import Link from "next/link";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import PageHero from "@/components/PageHero";
import { notFound } from "next/navigation";
import CodeExample from "@/components/CodeExample";
import frameworksDataPt from "@/public/frameworks.json";
import frameworksDataEn from "@/data/en/frameworks.json";
import { getLocalizedHref } from "@/i18n/links";
import { ArrowRight, ArrowUpRight, BookOpen, Box, Check, Code, Layers } from "lucide-react";

export default async function FrameworkDetail({ params }) {
	const { locale, key } = await params;
	const isEn = locale === "en";
	const currentLocale = isEn ? "en" : "pt";
	const frameworksData = isEn ? frameworksDataEn : frameworksDataPt;
	const framework = frameworksData[key];

	if (!framework) {
		notFound();
	}

	const features = framework.caracteristicas || [];
	const useCases = framework.casos_uso || [];
	const isEspIdf = key === "ESP-IDF";

	return (
		<div className="site-canvas min-h-screen">
			{/* Ficha técnica do framework e trilha de navegação para o Google */}
			<script
				type="application/ld+json"
				dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd.framework(key, framework)) }}
			/>
			<script
				type="application/ld+json"
				dangerouslySetInnerHTML={{
					__html: JSON.stringify(jsonLd.trilha([
						{ nome: isEn ? "Home" : "Início", caminho: isEn ? "/en" : "/" },
						{ nome: isEn ? "Frameworks" : "Frameworks", caminho: getLocalizedHref("/frameworks", currentLocale) },
						{ nome: framework.nome, caminho: getLocalizedHref(`/frameworks/${encodeURIComponent(key)}`, currentLocale) },
					])),
				}}
			/>

			<Header />

			<main id="conteudo">
				<PageHero
					trail={[{ label: isEn ? "Frameworks & SDKs" : "Frameworks e SDKs", href: getLocalizedHref("/frameworks", currentLocale) }, { label: framework.nome }]}
					icon={Layers}
					label={framework.tipo}
					title={framework.nome}
					lede={framework.descricao}
				>
					{framework.documentacao && (
						<a href={framework.documentacao} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
							<BookOpen className="h-4 w-4" aria-hidden="true" />
							{isEn ? "Official documentation" : "Documentação oficial"}
							<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
						</a>
					)}
					{framework.repositorio && (
						<a href={framework.repositorio} target="_blank" rel="noopener noreferrer" className="btn btn-ghost">
							<Code className="h-4 w-4" aria-hidden="true" />
							{isEn ? "GitHub repository" : "Repositório no GitHub"}
							<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
						</a>
					)}
				</PageHero>

				<section className="shell mt-10" aria-label={isEn ? "Summary" : "Resumo"}>
					<dl className="grid gap-3 md:grid-cols-3">
						<div className="tile">
							<dt className="text-xs font-medium text-muted">{isEn ? "Language" : "Linguagem"}</dt>
							<dd className="mt-1 font-display text-2xl font-semibold tracking-[-0.03em] text-ink">{framework.linguagem}</dd>
							<dd className="mt-0.5 text-xs text-muted">{framework.nome_completo}</dd>
						</div>
						<div className="tile">
							<dt className="text-xs font-medium text-muted">{isEn ? "Category" : "Categoria"}</dt>
							<dd className="mt-1 font-display text-2xl font-semibold tracking-[-0.03em] text-ink">{framework.tipo}</dd>
						</div>
						<div className="tile">
							<dt className="text-xs font-medium text-muted">{isEn ? "Main purpose" : "Objetivo principal"}</dt>
							<dd className="mt-1 text-sm font-medium leading-relaxed text-ink">{framework.funcao_principal}</dd>
						</div>
					</dl>
				</section>

				<section className="shell mt-12 grid gap-5 lg:grid-cols-2" aria-label={isEn ? "Features and applications" : "Recursos e aplicações"}>
					<div className="card p-5 sm:p-7">
						<h2 className="font-display text-xl font-semibold tracking-[-0.03em] text-ink">
							{isEn ? "Key features" : "Recursos de destaque"}
						</h2>
						<ul className="mt-5 space-y-3">
							{features.map((feature) => (
								<li key={feature} className="flex items-start gap-3 text-sm leading-relaxed text-ink-soft">
									<Check className="mt-0.5 h-4 w-4 shrink-0 text-ok" aria-hidden="true" />
									{feature}
								</li>
							))}
						</ul>
					</div>

					<div className="card p-5 sm:p-7">
						<h2 className="font-display text-xl font-semibold tracking-[-0.03em] text-ink">
							{isEn ? "When to use" : "Quando usar"}
						</h2>
						<ul className="mt-5 space-y-2.5">
							{useCases.map((useCase) => (
								<li key={useCase} className="tile text-sm font-medium text-ink-soft">
									{useCase}
								</li>
							))}
						</ul>
					</div>
				</section>

				{isEspIdf && (
					<section className="shell mt-8">
						<div className="panel flex flex-col items-start justify-between gap-6 p-7 sm:p-10 md:flex-row md:items-center">
							<div className="max-w-2xl">
								<span className="chip chip-accent">
									<Box className="h-3.5 w-3.5" aria-hidden="true" />
									{isEn ? "ESP-IDF 4.4 or higher" : "ESP-IDF 4.4 ou superior"}
								</span>
								<h2 className="section-title mt-4">
									{isEn ? "Modules with the ESP Component Registry" : "Módulos com o ESP Component Registry"}
								</h2>
								<p className="mt-3 text-base leading-relaxed text-muted">
									{isEn ? (
										<>
											In ESP-IDF v4.4+ and v5.x projects, libraries no longer need to be added as Git submodules. Use{" "}
											<code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code> and the command{" "}
											<code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf.py add-dependency</code> to download display drivers (LVGL), industrial stacks (Modbus), RainMaker, and more.
										</>
									) : (
										<>
											Nos projetos ESP-IDF v4.4+ e v5.x, as bibliotecas não precisam mais entrar como submódulos Git. Use o{" "}
											<code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf_component.yml</code> e o comando{" "}
											<code className="rounded bg-surface-2 px-1.5 py-0.5 font-mono text-sm">idf.py add-dependency</code> para baixar drivers de display (LVGL), pilhas industriais (Modbus), RainMaker e mais.
										</>
									)}
								</p>
							</div>
							<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>
				)}

				{framework.exemplo && (
					<section className="shell mt-8">
						<CodeExample framework={framework} />
					</section>
				)}

				<div className="shell section pt-10">
					<Link href={getLocalizedHref("/frameworks", currentLocale)} className="inline-flex min-h-11 items-center gap-2 text-sm font-medium text-accent hover:text-accent-strong">
						<ArrowRight className="h-4 w-4 rotate-180" aria-hidden="true" />
						{isEn ? "View all frameworks" : "Ver todos os frameworks"}
					</Link>
				</div>
			</main>

			<Footer />
		</div>
	);
}

export async function generateMetadata({ params }) {
	const { locale, key } = await params;
	const isEn = locale === "en";
	const currentLocale = isEn ? "en" : "pt";
	const frameworksData = isEn ? frameworksDataEn : frameworksDataPt;
	const framework = frameworksData[key];

	if (!framework) {
		return { title: isEn ? "Framework not found" : "Framework não encontrado", robots: { index: false, follow: false } };
	}

	return {
		...paginaMeta({
			titulo: isEn ? `${framework.nome} for ESP32 · Technical Guide` : `${framework.nome} para ESP32 · Guia Técnico`,
			descricao: isEn
				? `${framework.nome_completo}: ${framework.descricao} Guide with practical code examples and use cases.`
				: `${framework.nome_completo}: ${framework.descricao} Guia com exemplos práticos de código e casos de uso.`,
			caminho: `/frameworks/${encodeURIComponent(key)}`,
			tipo: "article",
			locale: currentLocale,
			keywords: isEn
				? [
						framework.nome, framework.nome_completo,
						`${framework.nome} ESP32`, `program ESP32 with ${framework.nome}`,
						"ESP32", "ESP32 framework",
					]
				: [
						framework.nome, framework.nome_completo,
						`${framework.nome} ESP32`, `programar ESP32 com ${framework.nome}`,
						"ESP32", "framework ESP32",
					],
		}),
		other: { "article:section": "Frameworks" },
	};
}

export async function generateStaticParams() {
	return Object.keys(frameworksDataPt).map((key) => ({
		key: key,
	}));
}