import LogoQuadBG from "@/components/LogoQuadBG";
import bgDark from "@/assets/unom_Logo_5_Dark.webp";

export default function Landing() {
	return (
		<section className="relative w-full h-[90vh] overflow-hidden">
			<img
				className="absolute inset-0 h-full w-full object-cover"
				src={bgDark}
				width={3840}
				height={2160}
				alt="Ein 3D Rendering des unom Logos"
			/>
			{/* dim layer so the tagline sits on a calmer field */}
			<div className="absolute inset-0 bg-gradient-to-b from-neutral/0 via-neutral/0 to-neutral/80" />

			<div className="relative h-full flex flex-col items-center justify-center gap-10 px-section-main-x text-center">
				<div className="w-[180px] md:w-[220px]">
					<LogoQuadBG />
				</div>
				<p className="max-w-md text-lg md:text-xl text-main/90">
					Kreative Webentwicklung aus Rottweil.
				</p>
			</div>

			{/* subtle scroll hint */}
			<div
				aria-hidden
				className="absolute bottom-6 left-1/2 -translate-x-1/2 text-secondary/60 text-sm tracking-wide"
			>
				↓
			</div>
		</section>
	);
}
