function Hero() {
	return (
		<section id="top" style={{ position: 'relative', width: '100%', height: '100vh', minHeight: 620, overflow: 'hidden', background: '#000' }}>
			<img
				src={window.HERO_IMG}
				alt="Featured 3D render — Koelet3D artwork"
				fetchpriority="high"
				style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'saturate(1.02)' }}
			/>
			<div style={{
				position: 'absolute', inset: 0,
				background: 'linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.85) 100%)',
			}}/>
			<div style={{
				position: 'absolute', inset: 0,
				background: 'radial-gradient(90% 70% at 25% 60%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 70%)',
			}}/>

			<div className="container" style={{
				position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 2,
				padding: '0 40px 72px',
			}}>
				<div style={{ maxWidth: 1100, color: '#fff' }}>
					<div className="eyebrow" style={{ color: 'rgba(255,255,255,0.82)', marginBottom: 22 }}>
						KOELET3D
					</div>
					<h1
						className="display hero-title"
						style={{
							fontFamily: 'Poppins',
							fontSize: 120,
							lineHeight: 0.95,
							fontWeight: 800,
							letterSpacing: '-0.04em',
							margin: 0,
							color: '#fff',
							textShadow: '0 2px 40px rgba(0,0,0,0.35)',
							maxWidth: '100%',
						}}
					>
						Where art meets <span style={{ color: 'var(--accent)' }}>desire</span><span style={{ fontSize: 160, color: '#fff' }}>.</span>
					</h1>
				</div>
			</div>

			<a href="#work" aria-label="Scroll to work" style={{
				position: 'absolute', right: 40, bottom: 44, zIndex: 3,
				color: 'rgba(255,255,255,0.8)',
				display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10,
				writingMode: 'vertical-rl',
				fontFamily: 'ui-monospace, SF Mono, Menlo, monospace',
				fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
			}}>
				Scroll
				<span style={{ width: 1, height: 56, background: 'rgba(255,255,255,0.55)', display: 'block' }}/>
			</a>

			<style>{`
				@media (max-width: 720px) {
					.hero-title { font-size: clamp(44px, 14vw, 84px) !important; }
				}
				@media (max-width: 480px) {
					.hero-title span:last-child { font-size: inherit !important; }
				}
			`}</style>
		</section>
	);
}

window.Hero = Hero;