function FAQ() {
	const { isMobile, isTablet } = useBreakpoint();
	const faqs = [
		{
			q: 'My child has no acting or modelling experience. Is this still for them?',
			a: 'Absolutely. No prior experience is required — just a willingness to learn and participate. We meet kids exactly where they are and build confidence through doing.',
		},
		{
			q: 'How are the two age groups (6–10 and 11–16) structured?',
			a: 'Both groups run simultaneously with their own dedicated track. Curriculum is age-appropriate, but every participant gets the same instructors, the same photo package, and the same on-camera experience.',
		},
		{
			q: 'What images does my child take home?',
			a: 'Three professionally edited final images: one actor headshot, one beauty image, and one full-body shot. Two photographers run simultaneously on Camera Day so every participant gets focused attention.',
		},
		{
			q: 'Are parents allowed to attend?',
			a: 'Day 3 ends with a parent wrap and industry-guidance session. During training and shoot days, the space is reserved for participants and instructors so kids can fully step into the experience without performing for the room.',
		},
		{
			q: 'Where exactly will it be held?',
			a: 'Apex West Performing Arts — 2625 Douglas Street, Victoria, BC. Full venue details and a welcome packet will be sent to all registered families ahead of June 5.',
		},
		{
			q: 'What is your refund policy?',
			a: 'Full refund up to 30 days before the workshop. Inside 30 days, the spot can be transferred to another participant. Email us at hello@expressionlab.ca for anything outside this window.',
		},
		{
			q: 'Is this a casting or talent agency?',
			a: 'No. Expression Lab is a workshop and training experience. Participants leave with images and skills — there are no agency contracts, fees, or representation involved.',
		},
	];

	const [open, setOpen] = React.useState(0);
	const pad = isMobile ? '64px 20px' : isTablet ? '88px 32px' : '120px 40px';

	return (
		<section id="faq" style={{ background: 'var(--paper)', padding: pad, color: 'var(--ink)' }}>
			<div style={{ maxWidth: 1100, margin: '0 auto' }}>
				<Reveal>
					<div className="eyebrow" style={{ color: 'var(--pink)', marginBottom: 24 }}>· Questions</div>
				</Reveal>
				<Reveal delay={80}>
					<h2 className="display" style={{ fontSize: 'clamp(44px, 7.5vw, 124px)', margin: '0 0 60px', maxWidth: 820, position: 'relative' }}>
						For the <span className="ital">parents</span>
						<span style={{
							display: 'inline-block',
							fontFamily: 'var(--ff-display-italic)',
							fontStyle: 'italic',
							fontWeight: 400,
							color: 'var(--pink)',
							fontSize: '1.15em',
							lineHeight: 0.8,
							marginLeft: 12,
							transform: 'translateY(0.08em) rotate(8deg)',
							transformOrigin: 'bottom left',
						}}>?</span>
					</h2>
				</Reveal>

				<div>
					{faqs.map((f, i) => (
						<Reveal key={i} delay={i * 40}>
							<div style={{ borderTop: '1px solid var(--ink)' }}>
								<button
									onClick={() => setOpen(open === i ? -1 : i)}
									style={{
										width: '100%',
										background: 'transparent',
										border: 'none',
										cursor: 'pointer',
										padding: isMobile ? '20px 0' : '28px 0',
										display: 'flex',
										alignItems: 'center',
										justifyContent: 'space-between',
										gap: 16,
										color: 'var(--ink)',
										textAlign: 'left',
										fontFamily: 'var(--ff-display)',
										fontWeight: 600,
										fontSize: isMobile ? 17 : 22,
										letterSpacing: '-0.01em',
									}}
								>
									<span style={{ display: 'flex', gap: isMobile ? 14 : 24 }}>
										<span className="mono" style={{ fontSize: 12, letterSpacing: '0.18em', color: 'var(--pink)', fontWeight: 500, paddingTop: 4, flexShrink: 0 }}>
											{String(i + 1).padStart(2, '0')}
										</span>
										<span>{f.q}</span>
									</span>
									<span style={{
										flexShrink: 0,
										width: 32, height: 32,
										borderRadius: '50%',
										background: open === i ? 'var(--pink)' : 'var(--ink)',
										color: 'white',
										display: 'flex',
										alignItems: 'center',
										justifyContent: 'center',
										fontSize: 20,
										fontFamily: 'var(--ff-body)',
										fontWeight: 300,
										transition: 'transform .25s ease, background .2s ease',
										transform: open === i ? 'rotate(45deg)' : 'none',
									}}>+</span>
								</button>
								<div style={{
									maxHeight: open === i ? 300 : 0,
									overflow: 'hidden',
									transition: 'max-height .35s ease, padding .35s ease',
									padding: open === i ? `0 0 24px ${isMobile ? 32 : 60}px` : `0 0 0 ${isMobile ? 32 : 60}px`,
								}}>
									<p style={{ fontSize: isMobile ? 15 : 16, lineHeight: 1.6, color: 'var(--ink-soft)', maxWidth: 720, margin: 0, textWrap: 'pretty' }}>
										{f.a}
									</p>
								</div>
							</div>
						</Reveal>
					))}
					<div style={{ borderTop: '1px solid var(--ink)' }}></div>
				</div>
			</div>
		</section>
	);
}
window.FAQ = FAQ;