import { paginaMeta, jsonLd, SITE } from "@/lib/seo";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import PageHero from "@/components/PageHero";
import Image from "next/image";
import GiteaMark from "@/components/GiteaMark";
import { ArrowUpRight, Code, Globe, GitCompare, Info, Languages } from "lucide-react";

const REPOSITORIO = SITE.repositorio;

export async function generateMetadata({ params }) {
	const { locale } = await params;
	const isEn = locale === "en";
	const isEs = locale === "es";
	const isFr = locale === "fr";
	const isDe = locale === "de";
	const isZh = locale === "zh-CN";
	return paginaMeta({
		titulo: isZh ? "关于本项目" : isDe
			? "Über das Projekt"
			: isFr
			? "À propos du projet"
			: isEs
			? "Acerca del proyecto"
			: isEn
			? "About the Project"
			: "Sobre o projeto",
		descricao: isZh ? "ESPDocs 是一个独立平台，整理 ESP32 生态的技术文档。了解本项目以及如何参与贡献。" : isDe
			? "ESPDocs ist eine unabhängige Plattform, die die technische Dokumentation des ESP32-Ökosystems strukturiert. Erfahren Sie mehr über das Projekt und wie Sie beitragen können."
			: isFr
			? "ESPDocs est une plateforme indépendante qui organise la documentation technique de l'écosystème ESP32. Découvrez le projet et comment contribuer."
			: isEs
			? "ESPDocs es una plataforma independiente que organiza la documentación técnica del ecosistema ESP32. Conozca el proyecto y cómo contribuir."
			: isEn
			? "ESPDocs is an independent platform organizing technical documentation of the ESP32 ecosystem. Learn about the project and how to contribute."
			: "O ESPDocs é uma plataforma independente que reúne a documentação do ecossistema ESP32 em português brasileiro. Saiba como o projeto nasceu e como contribuir.",
		caminho: "/sobre",
		keywords: isZh ? ["ESPDocs", "ESP32 文档", "开源 ESP32 项目"] : isDe
			? ["ESPDocs", "ESP32 Dokumentation", "ESP32 Open-Source-Projekt", "Open Source"]
			: isFr
			? ["ESPDocs", "documentation ESP32", "projet open source ESP32", "open source"]
			: isEs
			? ["ESPDocs", "documentación ESP32", "proyecto open source ESP32", "código abierto"]
			: isEn
			? ["ESPDocs", "ESP32 documentation", "open source ESP32 project"]
			: ["ESPDocs", "documentação ESP32 português", "projeto open source ESP32"],
		locale,
	});
}

export default async function Sobre({ params }) {
	const { locale } = await params;
	const isPt = locale === "pt";
	const isEn = locale === "en";
	const isEs = locale === "es";
	const isFr = locale === "fr";
	const isDe = locale === "de";
	const isZh = locale === "zh-CN";

	const featuresPt = [
		{ icon: Languages, title: "Em português", desc: "Dados técnicos organizados e apresentados em português do Brasil." },
		{ icon: GitCompare, title: "Comparações visuais", desc: "Tabelas e diagramas para escolher a série certa sem abrir dez datasheets." },
		{ icon: Globe, title: "Acesso centralizado", desc: "Links diretos para a documentação oficial, repositórios e exemplos." },
		{ icon: Code, title: "Código aberto", desc: "Contribuições são bem-vindas no Gitea." },
	];

	const featuresEn = [
		{ icon: Languages, title: "Curated Content", desc: "Structured technical data presented clearly without datasheet noise." },
		{ icon: GitCompare, title: "Visual comparisons", desc: "Tables and diagrams to select the right series without opening ten datasheets." },
		{ icon: Globe, title: "Centralized access", desc: "Direct links to official documentation, repositories and examples." },
		{ icon: Code, title: "Open source", desc: "Contributions are welcome on Gitea." },
	];

	const featuresEs = [
		{ icon: Languages, title: "En español", desc: "Datos técnicos organizados y presentados de forma clara en español neutro." },
		{ icon: GitCompare, title: "Comparaciones visuales", desc: "Tablas y diagramas para elegir la serie adecuada sin abrir diez hojas de datos." },
		{ icon: Globe, title: "Acceso centralizado", desc: "Enlaces directos a la documentación oficial, repositorios y ejemplos." },
		{ icon: Code, title: "Código abierto", desc: "Las contribuciones son bienvenidas en Gitea." },
	];

	const featuresFr = [
		{ icon: Languages, title: "En français", desc: "Données techniques organisées et présentées clairement en français." },
		{ icon: GitCompare, title: "Comparaisons visuelles", desc: "Tableaux et schémas pour choisir la bonne série sans ouvrir dix datasheets." },
		{ icon: Globe, title: "Accès centralisé", desc: "Liens directs vers la documentation officielle, les dépôts et les exemples." },
		{ icon: Code, title: "Open source", desc: "Les contributions sont les bienvenues sur Gitea." },
	];

	const featuresDe = [
		{ icon: Languages, title: "Auf Deutsch", desc: "Technische Daten übersichtlich und strukturiert auf Deutsch aufbereitet." },
		{ icon: GitCompare, title: "Visuelle Vergleiche", desc: "Tabellen und Diagramme zur Auswahl der richtigen Serie, ohne zehn Datenblätter zu öffnen." },
		{ icon: Globe, title: "Zentraler Zugang", desc: "Direkte Links zu offizieller Dokumentation, Repositories und Beispielen." },
		{ icon: Code, title: "Open Source", desc: "Beiträge sind auf Gitea herzlich willkommen." },
	];
	const featuresZh = [
		{ icon: Languages, title: "精心整理的内容", desc: "结构化的技术数据，清晰呈现，没有数据手册的冗余。" },
		{ icon: GitCompare, title: "可视化对比", desc: "用表格和图示选出合适的系列，无需翻阅十份数据手册。" },
		{ icon: Globe, title: "集中入口", desc: "直达官方文档、代码仓库与示例的链接。" },
		{ icon: Code, title: "开源", desc: "欢迎在 Gitea 上贡献。" },
	];

	const features = isZh ? featuresZh : isDe ? featuresDe : isFr ? featuresFr : isEs ? featuresEs : isEn ? featuresEn : featuresPt;

	return (
		<div className="site-canvas min-h-screen">
			{/* Metadados E-E-A-T de autoria e organização para o Google */}
			<script
				type="application/ld+json"
				dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd.paginaSobre(locale)) }}
			/>
			<script
				type="application/ld+json"
				dangerouslySetInnerHTML={{
					__html: JSON.stringify(
						jsonLd.trilha([
							{ nome: isZh ? "首页" : isDe ? "Startseite" : isFr ? "Accueil" : isEs ? "Inicio" : isPt ? "Início" : "Home", caminho: isZh ? "/zh-CN" : isDe ? "/de" : isFr ? "/fr" : isEn ? "/en" : isEs ? "/es" : "/" },
							{ nome: isZh ? "关于本项目" : isDe ? "Über das Projekt" : isFr ? "À propos du projet" : isEs ? "Acerca del proyecto" : isPt ? "Sobre o Projeto" : "About the Project", caminho: isZh ? "/zh-CN/about" : isDe ? "/de/ueber-uns" : isFr ? "/fr/a-propos" : isEn ? "/en/about" : isEs ? "/es/acerca" : "/sobre" },
						])
					),
				}}
			/>

			<Header />

			<main id="conteudo">
				<PageHero
					isEn={isEn}
					isEs={isEs}
					isFr={isFr}
					isDe={isDe} isZh={isZh}
					trail={[{ label: isZh ? "关于" : isDe ? "Über uns" : isFr ? "À propos" : isEs ? "Acerca" : isPt ? "Sobre" : "About" }]}
					icon={Info}
					label={isZh ? "独立项目" : isDe ? "Unabhängiges Projekt" : isFr ? "Projet indépendant" : isEs ? "Proyecto independiente" : isPt ? "Projeto independente" : "Independent project"}
					title={isZh ? "关于 ESPDocs" : isDe ? "Über ESPDocs" : isFr ? "À propos d'ESPDocs" : isEs ? "Acerca de ESPDocs" : isPt ? "Sobre o ESPDocs" : "About ESPDocs"}
					lede={
						isZh ? "一个非官方平台，整理 ESP32 的技术信息，并直接链接到乐鑫官方文档。为开源硬件社区而做。" : isDe
							? "Eine inoffizielle deutschsprachige Plattform, die technische Informationen zum ESP32 strukturiert und Sie mit der offiziellen Dokumentation von Espressif verbindet. Entwickelt für die Open-Hardware-Community."
							: isFr
							? "Une plateforme non officielle en français qui organise les informations techniques de l'ESP32 et vous oriente vers la documentation officielle d'Espressif. Conçue pour la communauté du matériel libre."
							: isEs
							? "Una plataforma no oficial, en español, que organiza la información técnica del ESP32 y le conecta con la documentación oficial de Espressif. Creada para la comunidad de hardware abierto."
							: isPt
							? "Uma plataforma não oficial, em português, que organiza as informações técnicas do ESP32 e leva você à documentação oficial da Espressif. Feita para a comunidade de hardware livre."
							: "An unofficial platform organizing technical information about the ESP32 and linking directly to official Espressif documentation. Built for the open hardware community."
					}
				>
					<a href={REPOSITORIO} target="_blank" rel="noopener noreferrer" className="btn btn-primary">
						<GiteaMark className="h-4 w-4" />
						{isZh ? "查看代码仓库" : isDe ? "Repository ansehen" : isFr ? "Voir le dépôt" : isEs ? "Ver el repositorio" : isPt ? "Ver o repositório" : "View repository"}
						<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
					</a>
				</PageHero>

				<div className="shell section grid grid-cols-1 gap-10 pt-12 sm:pt-16 lg:grid-cols-[1fr_22rem] lg:gap-14">
					<div className="min-w-0 max-w-3xl space-y-12">
						<section aria-labelledby="missao">
							<h2 id="missao" className="section-title">{isZh ? "使命" : isDe ? "Mission" : isFr ? "Mission" : isEs ? "Misión" : isPt ? "Missão" : "Mission"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{isZh ? "通过一个整理规格、对比系列、介绍框架并集中官方文档链接的界面，让 ESP32 生态更易获取、更易理解。目标是节省固件与物联网项目的开发时间。" : isDe
									? "Den Zugang zum und das Verständnis für das ESP32-Ökosystem durch eine deutsche Oberfläche erleichtern, die Spezifikationen bündelt, Serien vergleicht, Frameworks vorstellt und offizielle Dokumentationslinks zentralisiert. Ziel ist es, Entwicklungszeit bei Firmware und IoT-Projekten zu sparen."
									: isFr
									? "Faciliter l'accès et la compréhension de l'écosystème ESP32 avec une interface en français qui organise les spécifications, compare les séries, présente les frameworks et centralise les liens vers la documentation officielle. L'objectif est de vous faire gagner du temps dans le développement de firmware et d'IoT."
									: isEs
									? "Facilitar el acceso y la comprensión del ecosistema ESP32 con una interfaz en español que organiza especificaciones, compara series, presenta frameworks y centraliza los enlaces a la documentación oficial. El objetivo es ahorrar tiempo en el desarrollo de firmware e IoT."
									: isPt
									? "Facilitar o acesso e a compreensão do ecossistema ESP32 com uma interface em português que organiza especificações, compara séries, apresenta frameworks e centraliza os links da documentação oficial. O objetivo é economizar o seu tempo no desenvolvimento de firmware e IoT."
									: "Facilitate access and understanding of the ESP32 ecosystem with an interface organizing specifications, comparing series, presenting frameworks and centralizing links to official documentation. The goal is to save development time in firmware and IoT projects."}
							</p>
						</section>

						<section aria-labelledby="porque">
							<h2 id="porque" className="section-title">{isZh ? "ESPDocs 为什么存在" : isDe ? "Warum es ESPDocs gibt" : isFr ? "Pourquoi ESPDocs existe" : isEs ? "¿Por qué existe ESPDocs?" : isPt ? "Por que o ESPDocs existe" : "Why ESPDocs exists"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{isZh ? "ESP32 的信息常常分散在冗长的数据手册、技术参考手册（TRM）和零散的代码仓库中。ESPDocs 把这些数据浓缩并结构化，便于在深入工程文档之前快速评估。" : isDe
									? "Informationen über den ESP32 sind oft über dichte Datenblätter, technische Referenzhandbücher (TRM) und sekundäre Repositories verstreut. ESPDocs verdichtet und strukturiert diese Daten für eine schnelle Vorabauswahl, bevor Sie tiefer in die offizielle Technik einsteigen."
									: isFr
									? "Les informations sur l'ESP32 sont souvent dispersées entre des fiches techniques denses, des manuels de référence technique (TRM) et des dépôts secondaires. ESPDocs condense et structure ces données pour une évaluation rapide avant d'approfondir l'ingénierie officielle."
									: isEs
									? "La información sobre el ESP32 suele estar dispersa entre hojas de datos densas, manuales de referencia técnica (TRM) y repositorios secundarios. ESPDocs condensa y estructura estos datos para una evaluación rápida antes de profundizar en la ingeniería oficial."
									: isPt
									? "As informações sobre os ESP32 costumam estar espalhadas entre datasheets densos, manuais de referência (TRM) e repositórios secundários, tudo em inglês. O ESPDocs condensa e estrutura esses dados para a triagem rápida, antes de você aprofundar na engenharia oficial."
									: "Information regarding the ESP32 is often scattered across dense datasheets, Technical Reference Manuals (TRM), and secondary repositories. ESPDocs condenses and structures this data for rapid evaluation before diving into in-depth engineering documentation."}
							</p>
							<ul className="mt-6 grid gap-3 sm:grid-cols-2">
								{features.map(({ icon: Icon, title, desc }) => (
									<li key={title} className="card flex items-start gap-4 p-5">
										<span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-soft text-accent">
											<Icon className="h-5 w-5" aria-hidden="true" />
										</span>
										<div>
											<h3 className="font-semibold text-ink">{title}</h3>
											<p className="mt-1 text-sm leading-relaxed text-muted">{desc}</p>
										</div>
									</li>
								))}
							</ul>
						</section>

						<section aria-labelledby="contribuir">
							<h2 id="contribuir" className="section-title">{isZh ? "如何参与贡献" : isDe ? "Wie Sie beitragen können" : isFr ? "Comment contribuer" : isEs ? "Cómo contribuir" : isPt ? "Como contribuir" : "How to contribute"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{isZh ? "欢迎提交翻译修正、表格改进和新的代码示例。项目与社区一同成长。" : isDe
									? "Übersetzungskorrekturen, Tabellenanpassungen und neue Codebeispiele sind herzlich willkommen. Das Projekt wächst gemeinsam mit der Community."
									: isFr
									? "Les corrections de traduction, les ajustements de tableaux et les nouveaux exemples de code sont très appréciés. Le projet grandit avec la communauté."
									: isEs
									? "Las correcciones de traducción, ajustes en tablas y nuevos ejemplos de código son muy bienvenidos. El proyecto crece junto con la comunidad."
									: isPt
									? "Correções de tradução, ajustes em tabelas e novos exemplos de código são muito bem-vindos. O projeto cresce com a comunidade."
									: "Translation fixes, table refinements and new code examples are welcome. The project grows with the community."}
							</p>
							<ol className="mt-6 space-y-3">
								{(isZh ? ["在 Gitea 上 Fork 本仓库。", "实现改进，并核对官方技术资料。", "发起 Pull Request 并说明改动。"] : isDe
									? [
											"Erstellen Sie einen Fork des Repositories auf Gitea.",
											"Implementieren Sie die Verbesserungen und prüfen Sie die offiziellen technischen Referenzen.",
											"Eröffnen Sie einen Pull Request mit einer Beschreibung der vorgenommenen Änderungen.",
									  ]
									: isFr
									? [
											"Forkez le dépôt sur Gitea.",
											"Apportez les améliorations et vérifiez les références techniques officielles.",
											"Ouvrez une Pull Request décrivant les modifications apportées.",
									  ]
									: isEs
									? [
											"Haga un fork del repositorio en Gitea.",
											"Implemente las mejoras y verifique las referencias técnicas oficiales.",
											"Abra una solicitud de extracción (Pull Request) describiendo los cambios realizados.",
									  ]
									: isPt
									? [
											"Faça o fork do repositório no Gitea.",
											"Implemente as melhorias e confira as referências técnicas oficiais.",
											"Abra um Pull Request descrevendo os ajustes feitos.",
									  ]
									: [
											"Fork the repository on Gitea.",
											"Implement improvements and verify official technical references.",
											"Open a Pull Request describing the changes.",
									  ]
								).map((passo, i) => (
									<li key={passo} className="card flex items-center gap-4 px-5 py-4">
										<span className="grid h-8 w-8 shrink-0 place-items-center rounded-full bg-ink text-sm font-semibold text-canvas" aria-hidden="true">
											{i + 1}
										</span>
										<span className="text-sm text-ink-soft sm:text-base">{passo}</span>
									</li>
								))}
							</ol>
						</section>

						<section aria-labelledby="acessibilidade">
							<h2 id="acessibilidade" className="section-title">{isZh ? "无障碍" : isDe ? "Barrierefreiheit" : isFr ? "Accessibilité" : isEs ? "Accesibilidad" : isPt ? "Acessibilidade" : "Accessibility"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{isZh ? "ESPDocs 重视可读性、高对比度（WCAG AAA 级）和完整的键盘导航。如果你遇到任何无障碍或导航上的障碍，请在代码仓库中提交 issue。" : isDe
									? "ESPDocs legt großen Wert auf Lesbarkeit, hohen Kontrast (WCAG-Stufe AAA) und vollständige Tastaturnavigation. Wenn Sie auf Lese- oder Navigationsbarrieren stoßen, eröffnen Sie bitte ein Issue im Repository."
									: isFr
									? "ESPDocs privilégie la lisibilité, un contraste élevé (niveau AAA du WCAG) et une navigation complète au clavier. Si vous rencontrez un obstacle de lecture ou de navigation, ouvrez un ticket dans le dépôt."
									: isEs
									? "ESPDocs prioriza la legibilidad, el alto contraste (nivel AAA de WCAG) y la navegación completa por teclado. Si encuentra alguna barrera de lectura o navegación, abra un issue en el repositorio."
									: isPt
									? "O ESPDocs prioriza a legibilidade, o contraste alto (nível AAA da WCAG) e a navegação completa por teclado. Se encontrar alguma barreira de leitura ou navegação, abra uma issue no repositório."
									: "ESPDocs prioritizes readability, high contrast (WCAG AAA level), and full keyboard navigation. If you encounter any accessibility or navigation hurdles, please open an issue in the repository."}
							</p>
						</section>
					</div>

					<aside className="space-y-5 lg:sticky lg:top-28 lg:self-start" aria-label={isZh ? "作者与法律声明" : isDe ? "Autor und rechtlicher Hinweis" : isFr ? "Auteur et mentions légales" : isEs ? "Autor y aviso legal" : isPt ? "Autor e aviso legal" : "Author and legal notice"}>
						<div className="panel p-6 sm:p-7">
							<div className="flex items-center gap-4">
								<span className="grid h-16 w-16 shrink-0 place-items-center rounded-2xl border border-line bg-white">
									<Image src="/logo.png" alt="" aria-hidden="true" width={48} height={48} className="h-12 w-12 object-contain" />
								</span>
								<div>
									<h2 className="font-display text-lg font-semibold text-ink">Lucas Rayan Guerra</h2>
									<p className="text-sm text-muted">{isZh ? "Ciência Embarcada 创始人" : isDe ? "Gründer von Ciência Embarcada" : isFr ? "Créateur de Ciência Embarcada" : isEs ? "Creador de Ciência Embarcada" : isPt ? "Criador do Ciência Embarcada" : "Creator of Ciência Embarcada"}</p>
								</div>
							</div>
							<div className="mt-5 space-y-3 text-sm leading-relaxed text-muted">
								{isZh ? (
<>
<p>
系统开发技术员，UFRPE 计算机科学在读，区块链与密码学研究者。
</p>
<p>
Semine AgriTech 软件总监，并在 REC&apos;n&apos;Play 等活动中作演讲，分享硬件、物联网和网络安全方面的见解。
</p>
</>
) : isDe ? (
									<>
										<p>
											Systementwicklungstechniker, Informatikstudent an der UFRPE und Forscher im Bereich Blockchain und Kryptographie.
										</p>
										<p>
											Software-Direktor bei Semine AgriTech und Referent bei Veranstaltungen wie REC&apos;n&apos;Play, der Inhalte zu Hardware, IoT und Cybersicherheit vermittelt.
										</p>
									</>
								) : isFr ? (
									<>
										<p>
											Technicien en développement de systèmes, étudiant en informatique à l'UFRPE et chercheur en blockchain et cryptographie.
										</p>
										<p>
											Directeur logiciel chez Semine AgriTech et conférencier lors d'événements comme REC&apos;n&apos;Play, partageant des connaissances sur le matériel, l'IoT et la cybersécurité.
										</p>
									</>
								) : isEs ? (
									<>
										<p>
											Técnico en Desarrollo de Sistemas, estudiante de Ciencias de la Computación en la UFRPE e investigador en Blockchain y Criptografía.
										</p>
										<p>
											Director de Software en Semine AgriTech y ponente en eventos como REC&apos;n&apos;Play, compartiendo contenido sobre hardware, IoT y ciberseguridad.
										</p>
									</>
								) : isPt ? (
									<>
										<p>
											Técnico em Desenvolvimento de Sistemas, estudante de Ciência da Computação na UFRPE e pesquisador de
											Blockchain e Criptografia.
										</p>
										<p>
											Diretor de Software na Semine AgriTech e palestrante em eventos como o REC&apos;n&apos;Play, compartilha
											conteúdo sobre hardware, IoT e cibersegurança.
										</p>
									</>
								) : (
									<>
										<p>
											Systems development technician, Computer Science student at UFRPE, and researcher in Blockchain and Cryptography.
										</p>
										<p>
											Software Director at Semine AgriTech and speaker at events like REC&apos;n&apos;Play, sharing insights on hardware, IoT, and cybersecurity.
										</p>
									</>
								)}
							</div>
							<a href="https://cienciaembarcada.com.br" target="_blank" rel="noopener noreferrer" className="btn btn-ghost mt-6 w-full">
								{isZh ? "访问 Ciência Embarcada" : isDe ? "Ciência Embarcada besuchen" : isFr ? "Visiter Ciência Embarcada" : isEs ? "Visitar Ciência Embarcada" : isPt ? "Visitar o Ciência Embarcada" : "Visit Ciência Embarcada"}
								<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
							</a>
						</div>

						<div className="callout callout-warn">
							<p className="font-semibold text-ink">{isZh ? "法律声明" : isDe ? "Rechtlicher Hinweis" : isFr ? "Mentions légales" : isEs ? "Aviso legal" : isPt ? "Aviso legal" : "Legal notice"}</p>
							<p className="mt-1">
								{isZh ? "ESPDocs 是一个聚合与整理平台。所引用的手册和代码仓库归乐鑫系统（Espressif Systems）所有。在关键任务或商业设计中，请始终查阅官方文档。" : isDe
									? "ESPDocs ist ein Aggregator und Kurator. Die referenzierten Handbücher und Repositories sind Eigentum von Espressif Systems. Konsultieren Sie bei geschäftskritischen oder kommerziellen Projekten stets die offizielle Dokumentation."
									: isFr
									? "ESPDocs est une plateforme d'agrégation et de synthèse. Les manuels et dépôts référencés appartiennent à Espressif Systems. Pour les projets critiques ou commerciaux, consultez systématiquement la documentation officielle."
									: isEs
									? "ESPDocs es un agregador y organizador. Los manuales y repositorios referenciados pertenecen a Espressif Systems. En proyectos críticos o comerciales, consulte siempre la documentación oficial."
									: isPt
									? "O ESPDocs é um agregador e organizador. Os manuais e repositórios referenciados pertencem à Espressif Systems. Em projetos críticos ou comerciais, consulte sempre a documentação oficial."
									: "ESPDocs is an aggregator and curation platform. Referenced manuals and repositories are property of Espressif Systems. In mission-critical or commercial designs, always consult official documentation."}
							</p>
						</div>
					</aside>
				</div>
			</main>

			<Footer />
		</div>
	);
}