import Image from "next/image";

/**
 * Floating brand art for the premium auth pages: the welcome character
 * hovers over a pulsing primary halo with a faint slow-orbiting ring.
 */
export function BrandFrank({ size = 150 }: { size?: number }) {
	return (
		<div className="relative flex items-center justify-center">
			<style>{`@keyframes spin-slow { to { transform: rotate(360deg); } }`}</style>
			<span className="hero-halo h-40 w-40 sm:h-48 sm:w-48" />
			<span
				className="absolute h-52 w-52 rounded-full border border-dashed sm:h-64 sm:w-64"
				style={{
					borderColor: "color-mix(in srgb, #ffffff 16%, transparent)",
					animation: "spin-slow 28s linear infinite",
				}}
			/>
			<div className="animate-float relative z-10 drop-shadow-[0_20px_30px_rgba(0,0,0,0.45)]">
				<Image
					src="/assets/images/FrankwithBag.gif"
					alt=""
					width={size}
					height={Math.round(size * 1.29)}
					className="object-contain"
					unoptimized
					priority
				/>
			</div>
		</div>
	);
}