function Pricing({ onRegister, pricingMode = 'lead' }) {
	const { isMobile, isTablet } = useBreakpoint();
	const pad = isMobile ? '64px 20px' : isTablet ? '88px 32px' : '120px 40px';

	if (pricingMode === 'hidden') {
		return (
			<section id="pricing" style={{ background: 'var(--bg)', color: 'var(--hero-text, #fff)', padding: pad, textAlign: 'center' }}>
				<div style={{ maxWidth: 900, margin: '0 auto' }}>
					<Reveal>
						<div className="eyebrow" style={{ color: 'var(--lime)', marginBottom: 24 }}>· Investment</div>
					</Reveal>
					<Reveal delay={80}>
						<h2 className="display" style={{ fontSize: 'clamp(48px, 8vw, 132px)', margin: 0, color: '#fff' }}>
							Reserve<br/>your <span className="ital">spot</span>.
						</h2>
					</Reveal>
					<Reveal delay={160}>
						<p style={{ fontSize: isMobile ? 15 : 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.7)', maxWidth: 460, margin: '32px auto 0' }}>
							Pricing and early-bird options revealed at checkout. Limited spots per age group.
						</p>
					</Reveal>
					<Reveal delay={220}>
						<button className="btn btn-primary" onClick={onRegister} style={{ marginTop: 36, padding: '20px 36px', fontSize: 14 }}>
							Begin Registration →
						</button>
					</Reveal>
				</div>
			</section>
		);
	}

	return (
		<section id="pricing" style={{
			background: 'var(--bg)',
			color: 'var(--hero-text, #fff)',
			padding: pad,
			position: 'relative',
			overflow: 'hidden',
		}}>
			<div aria-hidden style={{
				position: 'absolute', inset: 0,
				background: 'radial-gradient(60% 50% at 20% 20%, var(--pink) 0%, transparent 60%)',
				opacity: 0.22,
				pointerEvents: 'none',
			}} />

			<div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto' }}>
				<Reveal>
					<div className="eyebrow" style={{ color: 'var(--lime)', marginBottom: 24 }}>· Investment</div>
				</Reveal>

				<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 40, alignItems: 'end', marginBottom: isMobile ? 40 : 60 }}>
					<Reveal>
						<h2 className="display" style={{ fontSize: 'clamp(48px, 8vw, 132px)', margin: 0, color: '#fff' }}>
							Pick your<br/><span className="ital">spot</span>.
						</h2>
					</Reveal>
					<Reveal delay={120}>
						<p style={{ fontSize: isMobile ? 15 : 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)', maxWidth: 480, textWrap: 'pretty' }}>
							{pricingMode === 'soft'
								? 'A 3-day immersive experience including professional training, 3 edited images, and real on-camera coaching. Limited spots per age group.'
								: 'Lock in early-bird pricing while spots last — limited availability per age group to keep the experience personal.'}
						</p>
					</Reveal>
				</div>

				<div style={{ display: 'grid', gridTemplateColumns: pricingMode === 'soft' ? '1fr' : isMobile ? '1fr' : '1fr 1fr', gap: 24 }}>
					{pricingMode !== 'soft' && (
						<Reveal>
							<div style={{
								background: 'var(--pink)',
								color: '#fff',
								borderRadius: 4,
								padding: isMobile ? '36px 28px' : '48px 44px',
								minHeight: 360,
								display: 'flex',
								flexDirection: 'column',
								justifyContent: 'space-between',
								position: 'relative',
								overflow: 'hidden',
							}}>
								<div style={{
									position: 'absolute', top: 24, right: 24,
									display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 8,
								}}>
									<div style={{
										background: 'var(--lime)', color: 'var(--ink)',
										padding: '6px 12px', borderRadius: 999,
										fontFamily: 'var(--ff-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
									}}>SAVE $100</div>
									<CountdownPill days={9} />
								</div>

								<div>
									<div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', opacity: 0.8, marginBottom: 14 }}>EARLY REGISTRATION</div>
									<div className="display" style={{ fontSize: 'clamp(72px, 10vw, 160px)', lineHeight: 0.9 }}>
										$495
									</div>
									<div style={{ fontSize: 14, opacity: 0.85, marginTop: 8, fontFamily: 'var(--ff-display-italic)', fontStyle: 'italic' }}>
										for the first limited spots
									</div>
								</div>
								<div>
									<ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14 }}>
										<li>— 3 days of professional training</li>
										<li>— 3 professionally edited images</li>
										<li>— On-camera filmed audition</li>
										<li>— All instruction & materials</li>
									</ul>
									<button className="btn btn-light" onClick={onRegister} style={{ width: '100%' }}>
										Reserve Early-Bird →
									</button>
								</div>
							</div>
						</Reveal>
					)}

					<Reveal delay={pricingMode === 'soft' ? 0 : 100}>
						<div style={{
							background: 'transparent',
							color: '#fff',
							borderRadius: 4,
							padding: isMobile ? '36px 28px' : '48px 44px',
							minHeight: 360,
							border: '1.5px solid rgba(255,255,255,0.18)',
							display: 'flex',
							flexDirection: 'column',
							justifyContent: 'space-between',
						}}>
							<div>
								<div className="mono" style={{ fontSize: 11, letterSpacing: '0.22em', opacity: 0.6, marginBottom: 14 }}>STANDARD REGISTRATION</div>
								<div className="display" style={{ fontSize: 'clamp(72px, 10vw, 160px)', lineHeight: 0.9 }}>
									$595
								</div>
								<div style={{ fontSize: 14, opacity: 0.7, marginTop: 8, fontFamily: 'var(--ff-display-italic)', fontStyle: 'italic' }}>
									full registration
								</div>
							</div>
							<div>
								<ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px', display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14, opacity: 0.85 }}>
									<li>— Everything in early-bird</li>
									<li>— Same training & content</li>
									<li>— Same edited photo package</li>
									<li>— Spot held for first-come basis</li>
								</ul>
								<button className="btn btn-ghost-light" onClick={onRegister} style={{ width: '100%' }}>
									Reserve Standard →
								</button>
							</div>
						</div>
					</Reveal>
				</div>

				<div className="mono" style={{ marginTop: 32, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)', textAlign: 'center' }}>
					· 12 spots per age group · personalized experience guaranteed ·
				</div>
			</div>
		</section>
	);
}
window.Pricing = Pricing;

function CountdownPill({ days = 9 }) {
	return (
		<div style={{
			background: '#fff',
			color: 'var(--ink)',
			padding: '6px 12px 6px 10px',
			borderRadius: 999,
			fontFamily: 'var(--ff-mono)',
			fontSize: 10,
			letterSpacing: '0.16em',
			textTransform: 'uppercase',
			display: 'inline-flex',
			alignItems: 'center',
			gap: 8,
			boxShadow: '0 6px 18px rgba(0,0,0,0.18)',
		}}>
			<span style={{
				width: 7, height: 7, borderRadius: '50%',
				background: 'var(--pink)',
				boxShadow: '0 0 0 0 var(--pink)',
				animation: 'pulse-dot 1.6s ease-out infinite',
				flexShrink: 0,
			}} />
			<span style={{ fontWeight: 700, fontSize: 12, letterSpacing: '-0.01em' }}>{days}</span>
			<span style={{ opacity: 0.65 }}>days left</span>
		</div>
	);
}
window.CountdownPill = CountdownPill;