function Experience() {
	const { isMobile, isTablet } = useBreakpoint();
	const stations = [
		{
			tag: '01',
			lead: 'Acting',
			title: 'On Camera',
			copy: 'Scene work, audition prep, and on-camera technique with industry professional Debs Howard. Real takes, real direction, real feedback.',
			bg: 'var(--pink)',
			ink: '#fff',
			icon: '◐',
		},
		{
			tag: '02',
			lead: 'Modelling',
			title: 'Posing',
			copy: 'Movement, posture, and editorial posing led by international model Therés Amee. Build comfort and presence in front of any lens.',
			bg: 'var(--peach)',
			ink: 'var(--aubergine)',
			icon: '✦',
		},
		{
			tag: '03',
			lead: 'Modelling',
			title: 'Runway',
			copy: 'Walk, pace, pose at the mark. Runway technique and stage presence rooted in real fashion-week experience.',
			bg: 'var(--lime)',
			ink: 'var(--ink)',
			icon: '↗',
		},
		{
			tag: '04',
			lead: 'Photo',
			title: 'Day',
			copy: 'Two photographers running simultaneously. Each participant leaves with one actor headshot, one beauty shot, and one full-body image — professionally edited.',
			bg: 'var(--peri)',
			ink: 'var(--aubergine)',
			icon: '◍',
		},
	];

	const pad = isMobile ? '64px 20px' : isTablet ? '88px 32px' : '120px 40px';
	const cardCols = isMobile ? '1fr' : isTablet ? '1fr 1fr' : 'repeat(4, 1fr)';
	const headerCols = isMobile ? '1fr' : '1.2fr 0.8fr';

	return (
		<section id="experience" style={{ background: 'var(--paper)', padding: pad, color: 'var(--ink)' }}>
			<div style={{ maxWidth: 1320, margin: '0 auto' }}>
				<Reveal>
					<div className="eyebrow" style={{ color: 'var(--pink)', marginBottom: 24 }}>· The Experience</div>
				</Reveal>

				<div style={{ display: 'grid', gridTemplateColumns: headerCols, gap: isMobile ? 24 : 60, alignItems: 'end', marginBottom: 64 }}>
					<Reveal>
						<h2 className="display" style={{
							fontSize: 'clamp(48px, 8vw, 132px)',
							margin: 0,
							color: 'var(--ink)',
						}}>
							Learn.<br/>
							Cr<span className="ital">e</span>ate.<br/>
							Sh<span className="ital">i</span>ne.
						</h2>
					</Reveal>
					<Reveal delay={120}>
						<p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: 440, textWrap: 'pretty', marginTop: isMobile ? 0 : undefined }}>
							Four stations across three days. Acting and modelling weighted equally — taught by women who've worked the runway, the red carpet, and the casting room.
						</p>
					</Reveal>
				</div>

				{/* Station cards */}
				<div style={{
					display: 'grid',
					gridTemplateColumns: cardCols,
					gap: 16,
				}}>
					{stations.map((s, i) => (
						<Reveal key={s.tag} delay={i * 80}>
							<StationCard station={s} />
						</Reveal>
					))}
				</div>

				<Reveal>
					<div style={{
						marginTop: 24,
						padding: isMobile ? '16px 20px' : '20px 28px',
						border: '1px solid var(--line)',
						borderRadius: 4,
						display: 'flex',
						flexWrap: 'wrap',
						gap: isMobile ? 12 : 32,
						alignItems: 'center',
					}}>
						<div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.7, flex: isMobile ? '1 1 100%' : '1' }}>
							Two age groups · 6–10 and 11–16 · running side by side
						</div>
						<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
							<Pill text="Female-run" color="var(--pink)" />
							<Pill text="Industry-led" color="var(--coral)" />
							<Pill text="Limited spots" color="var(--lime)" ink="var(--ink)" />
						</div>
					</div>
				</Reveal>
			</div>
		</section>
	);
}

function Pill({ text, color, ink = '#fff' }) {
	return (
		<span style={{
			background: color,
			color: ink,
			padding: '6px 14px',
			borderRadius: 999,
			fontSize: 11,
			fontFamily: 'var(--ff-mono)',
			letterSpacing: '0.18em',
			textTransform: 'uppercase',
		}}>{text}</span>
	);
}

function StationCard({ station: s }) {
	const ref = React.useRef(null);
	const m = useMouseOffset(ref);
	return (
		<article ref={ref} style={{
			background: s.bg,
			color: s.ink,
			borderRadius: 4,
			padding: '28px 24px 32px',
			minHeight: 380,
			display: 'flex',
			flexDirection: 'column',
			justifyContent: 'space-between',
			position: 'relative',
			overflow: 'hidden',
			transform: `perspective(900px) rotateX(${m.y * -3}deg) rotateY(${m.x * 4}deg) translateY(${m.hovering ? -4 : 0}px)`,
			transformStyle: 'preserve-3d',
			transition: m.hovering ? 'none' : 'transform .5s cubic-bezier(.2,.7,.2,1)',
			willChange: 'transform',
			cursor: 'default',
		}}>
			<header style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', position: 'relative' }}>
				<span className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', opacity: 0.6 }}>
					STATION / {s.tag}
				</span>
				<span style={{ fontSize: 22, opacity: 0.8, lineHeight: 1, transform: `translateZ(20px) rotate(${m.x * 12}deg)` }}>{s.icon}</span>
			</header>

			<div style={{ position: 'relative', transform: 'translateZ(15px)' }}>
				<div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', opacity: 0.7, marginBottom: 10, textTransform: 'uppercase' }}>
					{s.lead}
				</div>
				<h3 className="display" style={{
					fontSize: 'clamp(36px, 3.4vw, 56px)',
					margin: '0 0 18px',
					lineHeight: 0.95,
					color: s.ink,
				}}>
					{s.title.split(' ').map((w, idx) => (
						<span key={idx} style={{
							fontStyle: idx === 1 ? 'italic' : 'normal',
							fontFamily: idx === 1 ? 'var(--ff-display-italic)' : 'var(--ff-display)',
							fontWeight: idx === 1 ? 400 : 900,
						}}>{w}{idx < s.title.split(' ').length - 1 ? ' ' : ''}</span>
					))}
				</h3>
				<p style={{ fontSize: 13.5, lineHeight: 1.5, margin: 0, opacity: 0.85, textWrap: 'pretty' }}>
					{s.copy}
				</p>
			</div>
		</article>
	);
}

window.Experience = Experience;