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";
	return paginaMeta({
		titulo: isDe
			? "Über das Projekt"
			: isFr
			? "À propos du projet"
			: isEs
			? "Acerca del proyecto"
			: isEn
			? "About the Project"
			: "Sobre o projeto",
		descricao: 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: 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 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 features = 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: isDe ? "Startseite" : isFr ? "Accueil" : isEs ? "Inicio" : isPt ? "Início" : "Home", caminho: isDe ? "/de" : isFr ? "/fr" : isEn ? "/en" : isEs ? "/es" : "/" },
							{ nome: isDe ? "Über das Projekt" : isFr ? "À propos du projet" : isEs ? "Acerca del proyecto" : isPt ? "Sobre o Projeto" : "About the Project", caminho: 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}
					trail={[{ label: isDe ? "Über uns" : isFr ? "À propos" : isEs ? "Acerca" : isPt ? "Sobre" : "About" }]}
					icon={Info}
					label={isDe ? "Unabhängiges Projekt" : isFr ? "Projet indépendant" : isEs ? "Proyecto independiente" : isPt ? "Projeto independente" : "Independent project"}
					title={isDe ? "Über ESPDocs" : isFr ? "À propos d'ESPDocs" : isEs ? "Acerca de ESPDocs" : isPt ? "Sobre o ESPDocs" : "About ESPDocs"}
					lede={
						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" />
						{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">{isDe ? "Mission" : isFr ? "Mission" : isEs ? "Misión" : isPt ? "Missão" : "Mission"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{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">{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">
								{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">{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">
								{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">
								{(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">{isDe ? "Barrierefreiheit" : isFr ? "Accessibilité" : isEs ? "Accesibilidad" : isPt ? "Acessibilidade" : "Accessibility"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{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={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">{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">
								{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">
								{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">{isDe ? "Rechtlicher Hinweis" : isFr ? "Mentions légales" : isEs ? "Aviso legal" : isPt ? "Aviso legal" : "Legal notice"}</p>
							<p className="mt-1">
								{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>
	);
}