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

	return (
		<section style={{ background: 'var(--paper)', padding: pad, color: 'var(--ink)' }}>
			<div style={{ maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 24 }}>
				<Reveal>
					<div style={{
						background: 'var(--peach)',
						color: 'var(--aubergine)',
						borderRadius: 4,
						padding: isMobile ? '36px 28px' : '48px 44px',
						minHeight: isMobile ? 'auto' : 480,
						display: 'flex',
						flexDirection: 'column',
						justifyContent: 'space-between',
						gap: isMobile ? 32 : 0,
					}}>
						<div className="eyebrow" style={{ color: 'var(--aubergine)', marginBottom: 24, opacity: 0.7 }}>· Details</div>
						<div className="display" style={{ fontSize: isMobile ? 52 : 64, lineHeight: 0.95 }}>
							June 5–7,<br/><span className="ital">2026</span>
						</div>
						<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: isMobile ? 20 : 28, marginTop: isMobile ? 0 : 32 }}>
							<div>
								<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', opacity: 0.6, marginBottom: 6 }}>WHEN</div>
								<div style={{ fontSize: isMobile ? 14 : 16, fontWeight: 600, lineHeight: 1.4 }}>Friday – Sunday<br/>9:00 AM – 5:00 PM</div>
							</div>
							<div>
								<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', opacity: 0.6, marginBottom: 6 }}>WHERE</div>
								<div style={{ fontSize: isMobile ? 14 : 16, fontWeight: 600, lineHeight: 1.4 }}>
									Apex West Performing Arts<br/>
									2625 Douglas Street<br/>
									<span style={{ opacity: 0.7, fontWeight: 400 }}>Victoria, BC</span>
								</div>
							</div>
							<div>
								<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', opacity: 0.6, marginBottom: 6 }}>AGES</div>
								<div style={{ fontSize: isMobile ? 14 : 16, fontWeight: 600, lineHeight: 1.4 }}>6–10 years<br/>11–16 years</div>
							</div>
							<div>
								<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', opacity: 0.6, marginBottom: 6 }}>SPOTS</div>
								<div style={{ fontSize: isMobile ? 14 : 16, fontWeight: 600, lineHeight: 1.4 }}>Limited per group<br/><span style={{ opacity: 0.6, fontWeight: 400 }}>for personal attention</span></div>
							</div>
						</div>
					</div>
				</Reveal>

				<Reveal delay={120}>
					<div style={{
						background: 'var(--lime)',
						color: 'var(--ink)',
						borderRadius: 4,
						padding: isMobile ? '36px 28px' : '48px 44px',
						minHeight: isMobile ? 'auto' : 480,
						display: 'flex',
						flexDirection: 'column',
						justifyContent: 'space-between',
						gap: isMobile ? 24 : 0,
					}}>
						<div className="eyebrow" style={{ marginBottom: 24, opacity: 0.6 }}>· The Heart Behind it</div>
						<div className="display" style={{ fontSize: isMobile ? 40 : 56, lineHeight: 0.95 }}>
							This is more than<br/>
							a workshop.<br/>
							<span className="ital" style={{ color: 'var(--pink)' }}>It's a movement.</span>
						</div>
						<p style={{ fontSize: isMobile ? 14 : 16, lineHeight: 1.55, marginTop: isMobile ? 0 : 24, maxWidth: 460, textWrap: 'pretty' }}>
							A fully female-run company and workshop, creating space for the next generation of confident, creative, fearless young women and men. Built by women who have been in the room, on the runway, and on the call sheet — for the kids who are just getting started.
						</p>
					</div>
				</Reveal>
			</div>
		</section>
	);
}
window.Details = Details;