import Link from "next/link";
import { Shield, Scale, Zap, Database, Server, Code, ArrowRight } from "lucide-react";

export default function HomePage() {
	return (
		<main className="flex flex-1 flex-col">
			{/* Hero Section */}
			<section className="relative overflow-hidden py-24 sm:py-32">
				<div className="absolute top-0 left-1/2 -z-10 h-256 w-512 -translate-x-1/2 mask-[radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-[-10%]">
					<svg
						viewBox="0 0 1108 632"
						aria-hidden="true"
						className="w-277 fill-primary/10"
					>
						<title>Decorative background</title>
						<path d="M410.151 513.506L299.302 153.332L0 443.517L410.151 513.506Z" />
						<path d="M1108 138.337L817.11 0L748.5 549.691L1108 138.337Z" />
					</svg>
				</div>

				<div className="container px-6 lg:px-8 mx-auto">
					<div className="mx-auto max-w-3xl text-center">
						<div className="mb-8 flex justify-center">
							<div className="relative rounded-full px-4 py-1.5 text-sm leading-6 text-muted-foreground ring-1 ring-border hover:ring-accent transition-colors bg-card/50 backdrop-blur-sm">
								Propulsé par une architecture sécurisée{" "}
								<Link href="/docs/security" className="font-semibold text-primary">
									<span className="absolute inset-0" aria-hidden="true" />
									En savoir plus <span aria-hidden="true">&rarr;</span>
								</Link>
							</div>
						</div>
						<h1 className="text-5xl font-extrabold tracking-tight sm:text-7xl mb-8 bg-linear-to-r from-primary via-orange-500 to-amber-500 bg-clip-text text-transparent leading-tight">
							La Bible Technique de MemeGoat 🐐
						</h1>
						<p className="mt-6 text-xl leading-8 text-muted-foreground">
							Parce que partager des MEME de qualité demande une infrastructure qui ne broute pas.
							Découvrez comment nous avons bâti le futur du rire avec une pointe de sérieux (mais pas trop).
						</p>
						<div className="mt-12 flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-x-6">
							<Link
								href="/docs"
								className="w-full sm:w-auto rounded-xl bg-primary px-8 py-4 text-base font-bold text-primary-foreground shadow-lg hover:bg-primary/90 transition-all transform hover:scale-105 active:scale-95"
							>
								Débuter l'exploration
							</Link>
							<Link
								href="/docs/api-reference"
								className="w-full sm:w-auto text-base font-semibold leading-6 text-foreground hover:text-primary transition-colors flex items-center justify-center gap-2 py-4 sm:py-0"
							>
								Référence API <ArrowRight className="h-5 w-5" />
							</Link>
						</div>
					</div>
				</div>
			</section>

			{/* Pillars Section */}
			<section className="py-24 bg-fd-background/50 border-y border-border">
				<div className="container px-6 lg:px-8 mx-auto">
					<div className="mx-auto max-w-2xl lg:text-center mb-16">
						<h2 className="text-base font-bold leading-7 text-primary uppercase tracking-widest">Les Fondations</h2>
						<p className="mt-2 text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl">
							Une plateforme bâtie pour tenir
						</p>
					</div>
					<div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
						<dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-12 lg:max-w-none lg:grid-cols-3">
							{[
								{
									name: "Coffre-Fort Bêêêê-ton",
									description: "Chiffrement PGP au repos et hachage Argon2id. Vos données sont plus en sécurité ici que dans un enclos fermé à double tour.",
									icon: Shield,
								},
								{
									name: "RGPD & Relax",
									description: "Droit à l'oubli et portabilité. On respecte votre vie privée autant que vous respectez un bon mème bien placé.",
									icon: Scale,
								},
								{
									name: "Vitesse Turbo-Chèvre",
									description: "Transcodage WebP/WebM instantané. Vos GIFs se chargent plus vite que votre ombre, même sur le vieux smartphone de mamie.",
									icon: Zap,
								},
							].map((feature) => (
								<div key={feature.name} className="flex flex-col border border-border p-10 rounded-3xl bg-card hover:border-primary/50 transition-all shadow-md hover:shadow-xl group">
									<dt className="flex items-center gap-x-4 text-xl font-bold leading-7 text-foreground">
										<div className="p-3 rounded-xl bg-primary/10 group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
											<feature.icon className="h-6 w-6" aria-hidden="true" />
										</div>
										{feature.name}
									</dt>
									<dd className="mt-6 flex flex-auto flex-col text-base leading-7 text-muted-foreground">
										<p className="flex-auto">{feature.description}</p>
									</dd>
								</div>
							))}
						</dl>
					</div>
				</div>
			</section>

			{/* Tech Stack Section */}
			<section className="py-24 sm:py-32 overflow-hidden">
				<div className="container px-6 lg:px-8 mx-auto">
					<div className="mx-auto max-w-2xl lg:text-center mb-20">
						<h2 className="text-base font-bold leading-7 text-primary uppercase tracking-widest text-center">Stack Technique</h2>
						<p className="mt-2 text-4xl font-extrabold tracking-tight text-foreground sm:text-5xl text-center">
							Technologies de pointe
						</p>
					</div>
					<div className="mx-auto max-w-5xl">
						<div className="grid grid-cols-2 gap-6 md:grid-cols-4">
							{[
								{ name: "Next.js 16", icon: Code, color: "hover:text-black dark:hover:text-white" },
								{ name: "NestJS 11", icon: Server, color: "hover:text-red-500" },
								{ name: "PostgreSQL 15", icon: Database, color: "hover:text-blue-500" },
								{ name: "Chèvre-Power", icon: Zap, color: "hover:text-orange-500" },
							].map((tech) => (
								<div key={tech.name} className="flex flex-col items-center p-8 border border-border rounded-2xl bg-card/50 hover:bg-card hover:border-primary transition-all group">
									<tech.icon className={`h-12 w-12 text-muted-foreground mb-4 transition-colors ${tech.color}`} />
									<span className="font-bold text-lg">{tech.name}</span>
								</div>
							))}
						</div>
					</div>
				</div>
			</section>

			{/* Quick Access Section */}
			<section className="py-24 bg-card border-t border-border">
				<div className="container px-6 lg:px-8 mx-auto">
					<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
						<div>
							<h2 className="text-3xl font-extrabold mb-6 italic text-primary">"On ne rigole pas avec le rire. Surtout quand il s'agit de vous." 🐐</h2>
							<p className="text-lg text-muted-foreground mb-8">
								Memegoat n'est pas qu'un site pour scroller à l'infini. C'est un site qui as pour but de partager des MEME de qualité sans surconsommer les ressources mondiales avec des fichiers beaucoup trop gros et des requêtes trop nombreuses.
							</p>
							<Link
								href="/docs/index"
								className="inline-flex items-center text-primary font-bold hover:gap-3 transition-all gap-2 text-lg"
							>
								Plongez dans le code (garanti sans crottin) <ArrowRight className="h-6 w-6" />
							</Link>
						</div>
						<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
							<Link href="/docs/database" className="p-6 border border-border rounded-2xl hover:bg-accent transition-colors font-bold flex flex-col gap-2">
								<Database className="h-6 w-6 text-primary" />
								Modèle de Données
							</Link>
							<Link href="/docs/security" className="p-6 border border-border rounded-2xl hover:bg-accent transition-colors font-bold flex flex-col gap-2">
								<Shield className="h-6 w-6 text-primary" />
								Sécurité PGP
							</Link>
							<Link href="/docs/api-reference" className="p-6 border border-border rounded-2xl hover:bg-accent transition-colors font-bold flex flex-col gap-2">
								<Code className="h-6 w-6 text-primary" />
								Référence API
							</Link>
							<Link href="/docs/deployment" className="p-6 border border-border rounded-2xl hover:bg-accent transition-colors font-bold flex flex-col gap-2">
								<Server className="h-6 w-6 text-primary" />
								Déploiement
							</Link>
						</div>
					</div>
				</div>
			</section>
		</main>
	);
}