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";
	return paginaMeta({
		titulo: isEs ? "Acerca del proyecto" : isEn ? "About the Project" : "Sobre o projeto",
		descricao: 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: 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 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 features = 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: isEs ? "Inicio" : isPt ? "Início" : "Home", caminho: isEn ? "/en" : isEs ? "/es" : "/" },
							{ nome: isEs ? "Acerca del proyecto" : isPt ? "Sobre o Projeto" : "About the Project", caminho: isEn ? "/en/about" : isEs ? "/es/acerca" : "/sobre" },
						])
					),
				}}
			/>

			<Header />

			<main id="conteudo">
				<PageHero
					isEn={isEn}
					isEs={isEs}
					trail={[{ label: isEs ? "Acerca" : isPt ? "Sobre" : "About" }]}
					icon={Info}
					label={isEs ? "Proyecto independiente" : isPt ? "Projeto independente" : "Independent project"}
					title={isEs ? "Acerca de ESPDocs" : isPt ? "Sobre o ESPDocs" : "About ESPDocs"}
					lede={
						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" />
						{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">{isEs ? "Misión" : isPt ? "Missão" : "Mission"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{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">{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">
								{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">{isEs ? "Cómo contribuir" : isPt ? "Como contribuir" : "How to contribute"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{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">
								{(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">{isEs ? "Accesibilidad" : isPt ? "Acessibilidade" : "Accessibility"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{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={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">{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">
								{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">
								{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">{isEs ? "Aviso legal" : isPt ? "Aviso legal" : "Legal notice"}</p>
							<p className="mt-1">
								{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>
	);
}