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

	return (
		<section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: pad, position: 'relative', overflow: 'hidden' }}>
			<div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
				<Reveal>
					<div className="display" style={{
						fontSize: 'clamp(28px, 4.5vw, 76px)',
						lineHeight: 1.15,
						color: 'var(--paper)',
						fontStyle: 'italic',
						fontFamily: 'var(--ff-display-italic)',
						fontWeight: 400,
						textWrap: 'balance',
					}}>
						"The kind of weekend where a kid walks in unsure and walks out <span style={{ color: 'var(--pink)', fontStyle: 'normal', fontFamily: 'var(--ff-display)', fontWeight: 800 }}>certain.</span>"
					</div>
				</Reveal>
				<Reveal delay={120}>
					<div className="mono" style={{ marginTop: 36, fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)' }}>
						— Testimonials added as participants share their experience
					</div>
				</Reveal>
			</div>
		</section>
	);
}
window.Testimonial = Testimonial;