function Hero({ onRegister, copyVariant = 'act', fontVariant = 'serif' }) {
	const collageRef = React.useRef(null);
	const m = useMouseOffset(collageRef);
	const { isMobile, isTablet } = useBreakpoint();

	const COPIES = {
		act: {
			eyebrow: 'June 5–7, 2026  ·  Victoria, BC',
			script: 'Confidence looks good on you',
			head1: 'Act.',
			head2: <>P<span className="ital">o</span>se.</>,
			head3: <>Expr<span className="ital">e</span>ss.</>,
			sub: 'A 3-day immersive workshop for kids & teens. Acting, modelling, runway, and on-camera training — taught by working professionals. Walk away with portfolio images and the confidence that comes from doing it for real.',
			cta: 'Reserve a Spot',
		},
		step: {
			eyebrow: 'June 5–7, 2026  ·  Victoria, BC',
			script: 'For the kids ready to be seen',
			head1: <>St<span className="ital">e</span>p</>,
			head2: <>i<span className="ital">n</span>to</>,
			head3: <>th<span className="ital">e</span> light.</>,
			sub: 'Three days of acting, modelling, runway, and on-camera training led by working professionals. Walk away with portfolio images and the confidence that comes from doing it for real.',
			cta: 'Claim Your Spot',
		},
		raise: {
			eyebrow: 'June 5–7, 2026  ·  Victoria, BC',
			script: 'A workshop for the next generation',
			head1: <>Ra<span className="ital">i</span>se</>,
			head2: <>your</>,
			head3: <>ha<span className="ital">n</span>d.</>,
			sub: 'Acting. Modelling. Runway. Confidence. A real industry experience built for kids and teens — taught by women who\'ve walked the runway, the red carpet, and the casting room.',
			cta: 'Sign Up Now',
		},
	};
	const c = COPIES[copyVariant] || COPIES.act;
	const displayClass = fontVariant === 'sans' ? 'display alt-sans' : 'display';
	const showCollage = !isMobile;

	return (
		<section id="top" style={{
			position: 'relative',
			minHeight: '100vh',
			background: 'var(--bg)',
			color: 'var(--hero-text, #fff)',
			overflow: 'hidden',
			padding: isMobile ? '96px 20px 60px' : '120px 40px 60px',
		}}>
			<div aria-hidden style={{
				position: 'absolute', inset: 0,
				background: 'radial-gradient(60% 50% at 80% 30%, var(--pink) 0%, transparent 60%), radial-gradient(40% 40% at 20% 90%, var(--peach) 0%, transparent 70%)',
				opacity: 0.55,
				mixBlendMode: 'screen',
				pointerEvents: 'none',
			}} />

			<div style={{
				position: 'relative',
				maxWidth: 1320,
				margin: '0 auto',
				display: 'grid',
				gridTemplateColumns: showCollage ? '1.1fr 0.9fr' : '1fr',
				gap: 40,
				alignItems: 'center',
				minHeight: isMobile ? 'auto' : 'calc(100vh - 180px)',
			}}>
				{/* LEFT — copy */}
				<div style={{ paddingTop: isMobile ? 0 : 30 }}>
					<div className="eyebrow" style={{ opacity: 0.72, marginBottom: 28 }}>
						<span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: 999, background: 'var(--lime)', marginRight: 10, transform: 'translateY(1px)' }} />
						{c.eyebrow}
					</div>

					<div style={{
						fontFamily: 'var(--ff-display-italic)',
						fontStyle: 'italic',
						fontSize: isMobile ? 20 : 26,
						color: 'var(--lime)',
						marginBottom: 18,
						letterSpacing: '-0.01em',
					}}>
						"{c.script}."
					</div>

					<h1 className={displayClass} style={{
						fontSize: isMobile ? 'clamp(56px, 18vw, 80px)' : 'clamp(64px, 9.2vw, 156px)',
						margin: 0,
						color: 'var(--hero-text, #fff)',
					}}>
						<div>{c.head1}</div>
						<div>{c.head2}</div>
						<div>{c.head3}</div>
					</h1>

					<p style={{
						fontSize: isMobile ? 15 : 17,
						lineHeight: 1.5,
						maxWidth: 480,
						marginTop: 32,
						color: 'rgba(255,255,255,0.82)',
						textWrap: 'pretty',
					}}>
						{c.sub}
					</p>

					<div style={{ display: 'flex', gap: 14, alignItems: 'center', marginTop: 36, flexWrap: 'wrap' }}>
						<button className="btn btn-primary" onClick={onRegister}>
							{c.cta} →
						</button>
						<a href="#experience" className="btn btn-ghost-light">
							The Experience
						</a>
					</div>

					<div style={{ display: 'flex', gap: isMobile ? 20 : 32, marginTop: 56, flexWrap: 'wrap' }}>
						{[
							['3', 'days'],
							['2', 'age groups'],
							['3', 'instructors'],
							['∞', 'confidence'],
						].map(([n, l]) => (
							<div key={l}>
								<div className="display" style={{ fontSize: isMobile ? 28 : 36, color: 'var(--lime)' }}>{n}</div>
								<div className="mono" style={{ fontSize: 10, opacity: 0.6, textTransform: 'uppercase', letterSpacing: '0.2em', marginTop: 2 }}>{l}</div>
							</div>
						))}
					</div>
				</div>

				{/* RIGHT — collage (desktop/tablet only) */}
				{showCollage && (
					<div ref={collageRef} style={{ position: 'relative', height: isTablet ? 520 : 680, display: 'flex', alignItems: 'center', justifyContent: 'center', perspective: 1200 }}>
						{/* Pink circle stamp */}
						<div style={{
							position: 'absolute',
							top: 30, right: 0,
							width: 140, height: 140,
							borderRadius: '50%',
							background: 'var(--pink)',
							display: 'flex',
							alignItems: 'center',
							justifyContent: 'center',
							color: 'white',
							fontFamily: 'var(--ff-display-italic)',
							fontStyle: 'italic',
							fontSize: 16,
							lineHeight: 1.1,
							textAlign: 'center',
							transform: `translate(${m.x * 28}px, ${m.y * 28}px) rotate(${-8 + m.x * 6}deg)`,
							zIndex: 3,
							boxShadow: '0 18px 40px rgba(255,61,139,0.35)',
							transition: 'box-shadow .3s ease',
							willChange: 'transform',
						}}>
							<div>3 Days<br/>Confidence<br/>Creativity<br/>Connection</div>
						</div>

						{/* Main image — clapperboard editorial */}
						<div style={{
							position: 'absolute',
							top: 50, left: 30,
							width: isTablet ? 260 : 340, height: isTablet ? 360 : 460,
							borderRadius: 6,
							overflow: 'hidden',
							zIndex: 2,
							boxShadow: '0 30px 80px rgba(0,0,0,0.4)',
							background: '#222',
							transform: `translate(${m.x * -10}px, ${m.y * -10}px) rotateY(${m.x * 3}deg) rotateX(${m.y * -3}deg)`,
							transformStyle: 'preserve-3d',
							willChange: 'transform',
						}}>
							<img src="assets/clapperboard.png" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', filter: 'contrast(1.05)' }} />
						</div>

						{/* Secondary — performer with script */}
						<div style={{
							position: 'absolute',
							bottom: 40, right: 20,
							width: isTablet ? 200 : 280, height: isTablet ? 250 : 330,
							borderRadius: 6,
							overflow: 'hidden',
							zIndex: 1,
							boxShadow: '0 20px 50px rgba(0,0,0,0.35)',
							background: '#111',
							border: '6px solid var(--paper)',
							transform: `translate(${m.x * 16}px, ${m.y * 16}px) rotate(${m.x * 1.5}deg)`,
							willChange: 'transform',
						}}>
							<img src="assets/audition.png" alt="" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
						</div>

						{/* Lime tag */}
						<div style={{
							position: 'absolute',
							bottom: 0, left: 0,
							background: 'var(--lime)',
							color: 'var(--ink)',
							padding: '10px 16px',
							borderRadius: 4,
							fontFamily: 'var(--ff-mono)',
							fontSize: 10,
							letterSpacing: '0.2em',
							zIndex: 3,
							transform: `translate(${m.x * -18}px, ${m.y * -10}px) rotate(${-3 + m.x * 2}deg)`,
							willChange: 'transform',
						}}>
							ACT · POSE · WALK
						</div>
					</div>
				)}
			</div>
		</section>
	);
}
window.Hero = Hero;