import Image from "next/image";
import { HeroReadMe } from "@/components/landing/hero-readme";
import { HeroTitle } from "@/components/landing/hero-title";
import { LineFieldBackground } from "@/components/landing/line-field-bg";
import { SignatureMark } from "@/components/landing/signature-mark";
import { getCommunityStats, getContributors } from "@/lib/community-stats";

export default async function HomePage() {
	const contributors = getContributors();
	const communityStats = await getCommunityStats();

	return (
		<div id="hero" className="relative pt-[45px] lg:pt-0">
			<div className="relative text-foreground" data-v="1">
				<div className="flex flex-col lg:flex-row">
					{/* Left side — Hero title */}
					<div className="relative w-full lg:w-[40%] lg:h-dvh border-b lg:border-b-0 lg:border-r border-foreground/[0.06] px-5 sm:px-6 lg:px-7 lg:sticky lg:top-0 z-10 bg-background lg:overflow-clip">
						<LineFieldBackground />
						{/* 3D Logo: WebPs are rendered from the original SVGs at 2x their
						    display size with the grain baked in, so they're `unoptimized` to
						    keep next/image from resampling the grain away. */}
						<div className="hidden lg:flex justify-center h-full absolute items-center left-1/2 -translate-x-1/2 w-full pointer-events-auto select-none animate-logo-reveal z-[1]">
							{/* Dark mode logos */}
							<div className="group max-w-[300px] w-full max-h-[200px] -mt-[30%] hidden dark:flex justify-center opacity-100">
								<Image
									src="/left-3d-logo.webp"
									alt=""
									width={311}
									height={400}
									className="h-auto max-h-[200px] object-contain z-10 animate-logo-snap-left transition-transform duration-300 ease-out group-hover:-translate-x-3 group-hover:-rotate-5"
									unoptimized
									draggable={false}
								/>
								<Image
									src="/right-3d-logo.webp"
									alt=""
									width={321}
									height={400}
									className="h-auto object-contain -ml-28 -mt-3 max-h-[200px] animate-logo-snap-right transition-transform duration-300 ease-out group-hover:translate-x-3 group-hover:rotate-5"
									unoptimized
									draggable={false}
								/>
							</div>
							{/* Light mode logos */}
							<div className="group max-w-[300px] w-full max-h-[200px] -mt-[30%] flex dark:hidden justify-center opacity-100">
								<Image
									src="/left-3d-logo-light.webp"
									alt=""
									width={309}
									height={400}
									className="h-auto max-h-[200px] object-contain z-10 animate-logo-snap-left transition-transform duration-300 ease-out group-hover:-translate-x-3 group-hover:-rotate-5"
									unoptimized
									draggable={false}
								/>
								<Image
									src="/right-3d-logo-light.webp"
									alt=""
									width={302}
									height={400}
									className="h-auto object-contain -ml-28 -mt-3 max-h-[200px] animate-logo-snap-right transition-transform duration-300 ease-out group-hover:translate-x-3 group-hover:rotate-5"
									unoptimized
									draggable={false}
								/>
							</div>
						</div>
						<HeroTitle />
						<div className="hidden lg:block absolute left-5 right-5 lg:left-7 lg:right-3 bottom-4 z-[3]">
							<SignatureMark />
						</div>
					</div>

					{/* Right side — Sign in */}
					<div className="relative z-0 w-full lg:w-[60%] overflow-x-hidden">
						<div className="flex items-start lg:items-center justify-center">
							<HeroReadMe
								contributors={contributors}
								stats={{
									npmDownloads: communityStats.npmDownloads,
									npmWeeklyHistory: communityStats.npmWeeklyHistory,
									githubStars: communityStats.githubStars,
									contributors: communityStats.contributors,
								}}
							/>
						</div>
					</div>
				</div>
			</div>
		</div>
	);
}