function WalkAway() {
	const { isMobile, isTablet } = useBreakpoint();
	const items = [
		{ label: 'Actor Headshot', sub: 'professionally edited' },
		{ label: 'Beauty Image', sub: 'editorial-quality' },
		{ label: 'Full-Body Shot', sub: 'portfolio-ready' },
		{ label: 'On-Camera Training', sub: 'with Debs Howard' },
		{ label: 'Modelling, Posing & Runway', sub: 'with Therés Amee' },
		{ label: 'Real Confidence', sub: 'the kind that lasts' },
	];

	const pad = isMobile ? '64px 20px' : isTablet ? '88px 32px' : '120px 40px';

	return (
		<section style={{ background: 'var(--aubergine)', color: '#fff', padding: pad, position: 'relative', overflow: 'hidden' }}>
			<div aria-hidden style={{
				position: 'absolute',
				inset: 0,
				background: 'radial-gradient(50% 60% at 80% 50%, var(--pink) 0%, transparent 60%)',
				opacity: 0.25,
				pointerEvents: 'none',
			}} />

			<div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 48 : 80, alignItems: 'center' }}>
				<div>
					<Reveal>
						<div className="eyebrow" style={{ color: 'var(--lime)', marginBottom: 24 }}>· You'll walk away with</div>
					</Reveal>
					<Reveal delay={80}>
						<h2 className="display" style={{ fontSize: 'clamp(48px, 7vw, 120px)', margin: 0, color: '#fff' }}>
							More than<br/>
							a <span className="ital" style={{ color: 'var(--pink-2)' }}>portfolio</span>.
						</h2>
					</Reveal>
					<Reveal delay={160}>
						<p style={{ fontSize: isMobile ? 15 : 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.78)', marginTop: 28, maxWidth: 460, textWrap: 'pretty' }}>
							Three professionally edited images. Real industry training. The kind of confidence that doesn't go back in the box on Sunday night.
						</p>
					</Reveal>
				</div>

				<div>
					{items.map((it, i) => (
						<Reveal key={it.label} delay={i * 60}>
							<div style={{
								display: 'grid',
								gridTemplateColumns: isMobile ? '40px 1fr' : '60px 1fr auto',
								alignItems: 'center',
								gap: isMobile ? 12 : 20,
								padding: '20px 0',
								borderBottom: '1px solid rgba(255,255,255,0.12)',
							}}>
								<div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', color: 'rgba(255,255,255,0.5)' }}>
									/{String(i + 1).padStart(2, '0')}
								</div>
								<div>
									<div className="display" style={{ fontSize: isMobile ? 24 : 32, lineHeight: 1.05, color: '#fff' }}>
										{it.label.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 < it.label.split(' ').length - 1 ? ' ' : ''}</span>
										))}
									</div>
									{isMobile && (
										<div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--lime)', textTransform: 'uppercase', marginTop: 4 }}>
											{it.sub}
										</div>
									)}
								</div>
								{!isMobile && (
									<div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'var(--lime)', textTransform: 'uppercase', textAlign: 'right' }}>
										{it.sub}
									</div>
								)}
							</div>
						</Reveal>
					))}
				</div>
			</div>
		</section>
	);
}
window.WalkAway = WalkAway;