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";
	return paginaMeta({
		titulo: isEn ? "About the Project" : "Sobre o projeto",
		descricao: 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: 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 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 features = isPt ? featuresPt : featuresEn;

	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: isPt ? "Início" : "Home", caminho: isPt ? "/" : "/en" },
							{ nome: isPt ? "Sobre o Projeto" : "About the Project", caminho: isPt ? "/sobre" : "/en/about" },
						])
					),
				}}
			/>

			<Header />

			<main id="conteudo">
				<PageHero
					trail={[{ label: isPt ? "Sobre" : "About" }]}
					icon={Info}
					label={isPt ? "Projeto independente" : "Independent project"}
					title={isPt ? "Sobre o ESPDocs" : "About ESPDocs"}
					lede={
						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" />
						{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">{isPt ? "Missão" : "Mission"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{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">{isPt ? "Por que o ESPDocs existe" : "Why ESPDocs exists"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{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">{isPt ? "Como contribuir" : "How to contribute"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{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">
								{(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">{isPt ? "Acessibilidade" : "Accessibility"}</h2>
							<p className="mt-4 text-base leading-relaxed text-muted">
								{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={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">{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">
								{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">
								{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">{isPt ? "Aviso legal" : "Legal notice"}</p>
							<p className="mt-1">
								{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>
	);
}