function Instructors() {
	const { isMobile, isTablet } = useBreakpoint();
	const team = [
		{
			key: 'rebekah',
			name: 'Rebekah Asselstine',
			role: 'Founder · Creative Director',
			img: 'assets/rebekah.png',
			tint: 'var(--pink)',
			bio: `A dynamic background in performance, casting, and creative direction. Rebekah began in dance and choreography in her early teens, moved into commercial film and TV, and has worked on the casting side — assisting and running sessions. She blends performance, industry insight, and brand awareness into an approach focused on helping young talent feel prepared and connected, on and off camera.`,
			teaches: 'Casting · Industry Training',
		},
		{
			key: 'theres',
			name: 'Therés Amee',
			role: 'Modelling Director · Posing Coach',
			img: 'assets/theres.png',
			tint: 'var(--lime)',
			bio: `Over a decade in fashion across Vancouver, Toronto, New York and now Los Angeles. Former lead host of Vancouver Fashion Week (5 seasons) and a graduate of the Coco Rocha Model Camp. Walked New York, Paris, and London Fashion Weeks. Therés mentors young performers through Beayoutiful Foundation and Glam Z Gala, building a fun, supportive environment for movement and self-expression.`,
			teaches: 'Modelling · Runway · Posing',
		},
		{
			key: 'debs',
			name: 'Debs Howard',
			role: 'Acting Coach · Performance Director',
			img: 'assets/debs.png',
			tint: 'var(--peri)',
			bio: `Canadian actress, writer, and producer with standout roles in Daughter, Secrets in the Snow, Influence, The Bad Seed Returns and series including The Good Doctor, Riverdale, Nancy Drew and Family Law. Most recently appeared in Die, My Love alongside Jennifer Lawrence and Robert Pattinson — premiered at the Cannes Film Festival. Trained at Victoria Motion Picture School (Acting for Screen, with distinction).`,
			teaches: 'Acting · On-Camera Performance',
		},
	];

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

	return (
		<section id="instructors" 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 }}>· Meet your instructors</div>
				</Reveal>

				<div style={{ display: 'grid', gridTemplateColumns: headerCols, gap: isMobile ? 24 : 60, alignItems: 'end', marginBottom: isMobile ? 48 : 80 }}>
					<Reveal>
						<h2 className="display" style={{ fontSize: 'clamp(48px, 8vw, 132px)', margin: 0 }}>
							Taught by<br/>
							<span className="ital">women</span> who've<br/>
							done it.
						</h2>
					</Reveal>
					<Reveal delay={120}>
						<p style={{ fontSize: isMobile ? 15 : 17, lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: 480, textWrap: 'pretty' }}>
							Three working professionals — actor, model, and creative director — leading every session. A fully female-run workshop building the next generation of confident, creative young people.
						</p>
					</Reveal>
				</div>

				<div style={{ display: 'grid', gridTemplateColumns: cardCols, gap: 24 }}>
					{team.map((t, i) => (
						<Reveal key={t.key} delay={i * 100}>
							<InstructorCard t={t} />
						</Reveal>
					))}
				</div>
			</div>
		</section>
	);
}

function InstructorCard({ t }) {
	const ref = React.useRef(null);
	const m = useMouseOffset(ref);
	return (
		<article ref={ref} style={{
			background: 'transparent',
			color: 'var(--ink)',
			transform: `perspective(1000px) rotateX(${m.y * -2}deg) rotateY(${m.x * 3}deg) translateY(${m.hovering ? -4 : 0}px)`,
			transformStyle: 'preserve-3d',
			transition: m.hovering ? 'none' : 'transform .5s cubic-bezier(.2,.7,.2,1)',
			willChange: 'transform',
		}}>
			<div style={{
				position: 'relative',
				aspectRatio: '0.82',
				overflow: 'hidden',
				borderRadius: 4,
				background: '#1a1a1a',
				transform: 'translateZ(15px)',
			}}>
				<div aria-hidden style={{
					position: 'absolute', inset: 0,
					background: t.tint,
					mixBlendMode: 'multiply',
					opacity: 0.18,
					pointerEvents: 'none',
					zIndex: 2,
				}} />
				<img src={t.img} alt={t.name} style={{
					width: '100%', height: '100%', objectFit: 'cover',
					transform: `scale(1.04) translate(${m.x * -8}px, ${m.y * -8}px)`,
					transition: m.hovering ? 'none' : 'transform .5s cubic-bezier(.2,.7,.2,1)',
				}} />

				<div style={{
					position: 'absolute',
					top: 16, left: 16,
					background: t.tint,
					color: 'var(--ink)',
					padding: '6px 12px',
					borderRadius: 999,
					fontFamily: 'var(--ff-mono)',
					fontSize: 10,
					letterSpacing: '0.16em',
					textTransform: 'uppercase',
					zIndex: 3,
					transform: `translate(${m.x * 6}px, ${m.y * 6}px)`,
				}}>
					{t.teaches}
				</div>
			</div>

			<div style={{ padding: '24px 4px 0' }}>
				<div className="display" style={{ fontSize: 36, lineHeight: 1, marginBottom: 6 }}>
					{t.name.split(' ')[0]}{' '}
					<span className="ital">{t.name.split(' ').slice(1).join(' ')}</span>
				</div>
				<div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--pink)', marginBottom: 16 }}>
					{t.role}
				</div>
				<p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--ink-soft)', margin: 0, textWrap: 'pretty' }}>
					{t.bio}
				</p>
			</div>
		</article>
	);
}
window.Instructors = Instructors;