// Inline registration / purchase modal.
// Three flow modes:
//   'inline'  — full inline checkout: details + payment in modal, no redirect
//   'split'   — hybrid: details inline, then route to Stripe-hosted step
//   'reserve' — reserve spot only; payment link sent later

function Checkout({ open, onClose, mode = 'inline', tier = 'early' }) {
	const [step, setStep] = React.useState(0);
	const [data, setData] = React.useState({
		parentName: '',
		parentEmail: '',
		parentPhone: '',
		childName: '',
		childAge: '',
		ageGroup: '',
		tier: tier,
		notes: '',
		card: '',
		expiry: '',
		cvc: '',
		zip: '',
	});
	const [errors, setErrors] = React.useState({});
	const [processing, setProcessing] = React.useState(false);
	const { isMobile } = useBreakpoint();

	React.useEffect(() => {
		if (open) {
			setStep(0);
			setErrors({});
			setProcessing(false);
			document.body.classList.add('lock');
		} else {
			document.body.classList.remove('lock');
		}
	}, [open]);

	React.useEffect(() => {
		setData(d => ({ ...d, tier }));
	}, [tier]);

	if (!open) return null;

	const update = (k, v) => {
		setData(d => ({ ...d, [k]: v }));
		setErrors(e => ({ ...e, [k]: null }));
	};

	const steps = mode === 'reserve'
		? [
			{ key: 'reserve', label: 'Reserve' },
			{ key: 'done', label: 'Confirmed' },
		]
		: mode === 'split'
		? [
			{ key: 'parent', label: 'Parent' },
			{ key: 'child', label: 'Participant' },
			{ key: 'review', label: 'Confirm' },
			{ key: 'redirect', label: 'Pay' },
			{ key: 'done', label: 'Done' },
		]
		: [
			{ key: 'parent', label: 'Parent' },
			{ key: 'child', label: 'Participant' },
			{ key: 'review', label: 'Confirm' },
			{ key: 'pay', label: 'Payment' },
			{ key: 'done', label: 'Done' },
		];

	const cur = steps[step].key;
	const total = data.tier === 'early' ? 495 : 595;
	const tierLabel = data.tier === 'early' ? 'Early-Bird Registration' : 'Standard Registration';

	const validate = (which) => {
		const e = {};
		if (which === 'parent' || which === 'reserve') {
			if (!data.parentName.trim()) e.parentName = 'Required';
			if (!data.parentEmail.trim() || !/.+@.+\..+/.test(data.parentEmail)) e.parentEmail = 'Valid email required';
			if (which === 'parent' && !data.parentPhone.trim()) e.parentPhone = 'Required';
		}
		if (which === 'child' || which === 'reserve') {
			if (!data.childName.trim()) e.childName = 'Required';
			if (!data.ageGroup) e.ageGroup = 'Pick a group';
		}
		if (which === 'child') {
			if (!data.childAge.trim()) e.childAge = 'Required';
		}
		if (which === 'pay') {
			if (data.card.replace(/\s/g, '').length < 14) e.card = 'Card number';
			if (!/^\d{2}\/\d{2}$/.test(data.expiry)) e.expiry = 'MM/YY';
			if (!/^\d{3,4}$/.test(data.cvc)) e.cvc = 'CVC';
			if (!data.zip.trim()) e.zip = 'Required';
		}
		setErrors(e);
		return Object.keys(e).length === 0;
	};

	const next = () => {
		if (cur === 'reserve') {
			if (!validate('reserve')) return;
			setStep(s => s + 1);
			return;
		}
		if (cur === 'parent') {
			if (!validate('parent')) return;
		}
		if (cur === 'child') {
			if (!validate('child')) return;
		}
		if (cur === 'pay') {
			if (!validate('pay')) return;
			setProcessing(true);
			setTimeout(() => { setProcessing(false); setStep(s => s + 1); }, 1400);
			return;
		}
		if (cur === 'redirect') {
			setProcessing(true);
			setTimeout(() => { setProcessing(false); setStep(s => s + 1); }, 1600);
			return;
		}
		setStep(s => s + 1);
	};

	const back = () => setStep(s => Math.max(0, s - 1));

	const Field = ({ k, label, placeholder, type = 'text', mono = false, full = true, hint, autoFocus }) => (
		<label style={{ display: 'block', marginBottom: 18, gridColumn: full ? '1 / -1' : 'auto' }}>
			<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginBottom: 6, display: 'flex', justifyContent: 'space-between' }}>
				<span>{label}</span>
				{errors[k] && <span style={{ color: 'var(--pink)', letterSpacing: '0.1em' }}>{errors[k]}</span>}
			</div>
			<input
				type={type}
				autoFocus={autoFocus}
				value={data[k]}
				onChange={e => update(k, e.target.value)}
				placeholder={placeholder}
				style={{
					width: '100%',
					padding: '14px 16px',
					border: `1.5px solid ${errors[k] ? 'var(--pink)' : 'var(--ink)'}`,
					borderRadius: 4,
					fontFamily: mono ? 'var(--ff-mono)' : 'var(--ff-body)',
					fontSize: 15,
					background: 'var(--paper)',
					color: 'var(--ink)',
					outline: 'none',
					transition: 'border-color .2s ease',
				}}
				onFocus={e => e.target.style.borderColor = 'var(--pink)'}
				onBlur={e => e.target.style.borderColor = errors[k] ? 'var(--pink)' : 'var(--ink)'}
			/>
			{hint && <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 6, opacity: 0.7 }}>{hint}</div>}
		</label>
	);

	return (
		<div
			style={{
				position: 'fixed',
				inset: 0,
				background: 'rgba(14, 6, 18, 0.7)',
				backdropFilter: 'blur(8px)',
				WebkitBackdropFilter: 'blur(8px)',
				zIndex: 100,
				display: 'flex',
				alignItems: isMobile ? 'flex-end' : 'center',
				justifyContent: 'center',
				padding: isMobile ? 0 : 24,
				animation: 'overlay-in .3s ease',
			}}
			onClick={onClose}
		>
			<div
				onClick={e => e.stopPropagation()}
				style={{
					width: '100%',
					maxWidth: isMobile ? '100%' : 920,
					maxHeight: isMobile ? '92dvh' : '92vh',
					background: 'var(--paper)',
					color: 'var(--ink)',
					borderRadius: isMobile ? '16px 16px 0 0' : 6,
					overflow: 'hidden',
					display: 'grid',
					gridTemplateColumns: isMobile ? '1fr' : '1fr 340px',
					animation: 'modal-in .4s cubic-bezier(.2,.8,.2,1)',
					boxShadow: '0 40px 100px rgba(0,0,0,0.5)',
				}}
			>
				{/* LEFT — form */}
				<div style={{ padding: isMobile ? '28px 20px' : '36px 40px', overflowY: 'auto' }}>
					{/* Step indicator */}
					<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 28, flexWrap: 'wrap' }}>
						{steps.map((s, i) => (
							<React.Fragment key={s.key}>
								<div className="mono" style={{
									fontSize: 10,
									letterSpacing: '0.14em',
									textTransform: 'uppercase',
									color: i <= step ? 'var(--pink)' : 'var(--ink-soft)',
									opacity: i <= step ? 1 : 0.5,
									fontWeight: i === step ? 700 : 400,
									whiteSpace: 'nowrap',
								}}>
									{String(i + 1).padStart(2, '0')} {s.label}
								</div>
								{i < steps.length - 1 && (
									<div style={{ flex: '0 0 12px', height: 1, background: i < step ? 'var(--pink)' : 'var(--ink-soft)', opacity: i < step ? 1 : 0.3 }} />
								)}
							</React.Fragment>
						))}
						<div style={{ flex: 1 }} />
						<button onClick={onClose} aria-label="Close" style={{
							background: 'transparent', border: 'none', cursor: 'pointer',
							fontSize: 22, color: 'var(--ink)', padding: 4, lineHeight: 1,
							fontFamily: 'var(--ff-body)',
						}}>×</button>
					</div>

					{cur === 'reserve' && (
						<div>
							<h3 className="display" style={{ fontSize: isMobile ? 36 : 44, margin: '0 0 8px', lineHeight: 0.96 }}>
								Hold a <span className="ital">spot</span>.
							</h3>
							<p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 28, maxWidth: 460 }}>
								Quickest path — give us your name, email and age group. We'll follow up with payment details and venue confirmation within 24 hours.
							</p>
							<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
								<Field k="parentName" label="Parent / Guardian Name" placeholder="Full name" autoFocus />
								<Field k="parentEmail" label="Email" placeholder="you@email.com" type="email" />
								<Field k="childName" label="Participant Name" placeholder="Their full name" />
								<div style={{ marginBottom: 18 }}>
									<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginBottom: 6, display: 'flex', justifyContent: 'space-between' }}>
										<span>Age Group</span>
										{errors.ageGroup && <span style={{ color: 'var(--pink)' }}>{errors.ageGroup}</span>}
									</div>
									<div style={{ display: 'flex', gap: 8 }}>
										{[['6-10','6 – 10'],['11-16','11 – 16']].map(([v,l]) => (
											<button key={v} type="button" onClick={() => update('ageGroup', v)} style={{
												flex: 1, padding: '13px 12px',
												background: data.ageGroup === v ? 'var(--ink)' : 'var(--paper)',
												color: data.ageGroup === v ? 'var(--paper)' : 'var(--ink)',
												border: '1.5px solid var(--ink)',
												borderRadius: 4,
												fontFamily: 'var(--ff-body)',
												fontSize: 14, fontWeight: 600, cursor: 'pointer',
												transition: 'all .15s ease',
											}}>{l}</button>
										))}
									</div>
								</div>
							</div>
						</div>
					)}

					{cur === 'parent' && (
						<div>
							<h3 className="display" style={{ fontSize: isMobile ? 36 : 44, margin: '0 0 8px', lineHeight: 0.96 }}>
								Parent <span className="ital">contact</span>.
							</h3>
							<p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 28, maxWidth: 460 }}>
								We'll send confirmation, venue details, and pre-workshop notes here.
							</p>
							<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 16 }}>
								<Field k="parentName" label="Full Name" placeholder="Your full name" full={false} autoFocus />
								<Field k="parentPhone" label="Phone" placeholder="(250) 555-0184" full={false} />
								<Field k="parentEmail" label="Email" placeholder="you@email.com" type="email" />
							</div>
						</div>
					)}

					{cur === 'child' && (
						<div>
							<h3 className="display" style={{ fontSize: isMobile ? 36 : 44, margin: '0 0 8px', lineHeight: 0.96 }}>
								The <span className="ital">participant</span>.
							</h3>
							<p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 28, maxWidth: 460 }}>
								Tell us a bit about who's joining us in Victoria.
							</p>
							<div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 16 }}>
								<Field k="childName" label="Participant Name" placeholder="Their full name" full={false} autoFocus />
								<Field k="childAge" label="Age" placeholder="e.g. 9" type="number" full={false} />

								<div style={{ marginBottom: 18, gridColumn: '1 / -1' }}>
									<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginBottom: 8, display: 'flex', justifyContent: 'space-between' }}>
										<span>Age Group</span>
										{errors.ageGroup && <span style={{ color: 'var(--pink)' }}>{errors.ageGroup}</span>}
									</div>
									<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
										{[['6-10','Ages 6 – 10','Beginning explorers'],['11-16','Ages 11 – 16','Skill-builders']].map(([v,l,sub]) => (
											<button key={v} type="button" onClick={() => update('ageGroup', v)} style={{
												padding: '16px 14px',
												background: data.ageGroup === v ? 'var(--ink)' : 'var(--paper)',
												color: data.ageGroup === v ? 'var(--paper)' : 'var(--ink)',
												border: '1.5px solid var(--ink)',
												borderRadius: 4,
												fontFamily: 'var(--ff-body)',
												fontSize: 14, fontWeight: 600, cursor: 'pointer', textAlign: 'left',
												transition: 'all .15s ease',
											}}>
												<div>{l}</div>
												<div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 6, opacity: 0.7 }}>{sub}</div>
											</button>
										))}
									</div>
								</div>

								<label style={{ gridColumn: '1 / -1', display: 'block', marginBottom: 18 }}>
									<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginBottom: 6 }}>
										Anything we should know? <span style={{ opacity: 0.6 }}>(optional)</span>
									</div>
									<textarea
										value={data.notes}
										onChange={e => update('notes', e.target.value)}
										placeholder="Allergies, accessibility, prior experience, dietary, anything..."
										rows={3}
										style={{
											width: '100%',
											padding: '14px 16px',
											border: '1.5px solid var(--ink)',
											borderRadius: 4,
											fontFamily: 'var(--ff-body)',
											fontSize: 14,
											background: 'var(--paper)',
											color: 'var(--ink)',
											outline: 'none',
											resize: 'vertical',
										}}
									/>
								</label>
							</div>
						</div>
					)}

					{cur === 'review' && (
						<div>
							<h3 className="display" style={{ fontSize: isMobile ? 36 : 44, margin: '0 0 8px', lineHeight: 0.96 }}>
								Look <span className="ital">good</span>?
							</h3>
							<p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 28, maxWidth: 460 }}>
								Quick double-check before payment.
							</p>
							<div style={{ background: 'var(--paper)', border: '1.5px solid var(--ink)', borderRadius: 4, padding: 24, marginBottom: 16 }}>
								{[
									['Parent', `${data.parentName || '—'} · ${data.parentEmail || '—'}`],
									['Phone', data.parentPhone || '—'],
									['Participant', `${data.childName || '—'} · age ${data.childAge || '—'}`],
									['Group', data.ageGroup === '6-10' ? 'Ages 6 – 10' : data.ageGroup === '11-16' ? 'Ages 11 – 16' : '—'],
									data.notes ? ['Notes', data.notes] : null,
								].filter(Boolean).map(([l, v]) => (
									<div key={l} style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 16, padding: '10px 0', borderBottom: '1px dashed rgba(0,0,0,0.1)', alignItems: 'baseline' }}>
										<div className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-soft)' }}>{l}</div>
										<div style={{ fontSize: 15 }}>{v}</div>
									</div>
								))}
							</div>

							{/* Compact order summary on mobile */}
							{isMobile && (
								<div style={{ background: 'var(--bg)', color: '#fff', borderRadius: 4, padding: '20px 20px', marginBottom: 16 }}>
									<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', opacity: 0.6, marginBottom: 12 }}>· ORDER SUMMARY</div>
									<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
										<div style={{ fontSize: 14 }}>{tierLabel}</div>
										<div className="display" style={{ fontSize: 32 }}>${total}</div>
									</div>
									<div style={{ display: 'flex', gap: 8 }}>
										{[['early','Early-Bird','$495'],['standard','Standard','$595']].map(([v, l, p]) => (
											<button key={v} type="button" onClick={() => update('tier', v)} style={{
												flex: 1, padding: '10px 8px',
												background: data.tier === v ? 'var(--pink)' : 'transparent',
												color: data.tier === v ? '#fff' : 'rgba(255,255,255,0.85)',
												border: `1px solid ${data.tier === v ? 'var(--pink)' : 'rgba(255,255,255,0.25)'}`,
												borderRadius: 4, cursor: 'pointer',
												fontFamily: 'var(--ff-body)', transition: 'all .15s ease',
											}}>
												<div style={{ fontSize: 11, fontWeight: 600 }}>{l}</div>
												<div style={{ fontSize: 13, fontWeight: 800, marginTop: 2 }}>{p}</div>
											</button>
										))}
									</div>
								</div>
							)}
						</div>
					)}

					{cur === 'pay' && (
						<div>
							<h3 className="display" style={{ fontSize: isMobile ? 36 : 44, margin: '0 0 8px', lineHeight: 0.96 }}>
								<span className="ital">Secure</span> payment.
							</h3>
							<p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', marginBottom: 28, maxWidth: 460 }}>
								Encrypted via Stripe. No subscriptions. Full refund up to 30 days before the workshop.
							</p>

							{isMobile && (
								<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '12px 16px', background: 'var(--bg)', borderRadius: 4, color: '#fff', marginBottom: 20 }}>
									<div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', opacity: 0.7 }}>{tierLabel}</div>
									<div className="display" style={{ fontSize: 28 }}>${total}</div>
								</div>
							)}

							<Field k="card" label="Card Number" placeholder="4242 4242 4242 4242" mono autoFocus />
							<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
								<Field k="expiry" label="Expiry" placeholder="MM/YY" mono full={false} />
								<Field k="cvc" label="CVC" placeholder="123" mono full={false} />
								<Field k="zip" label="Postal" placeholder="V8W 1A1" mono full={false} />
							</div>

							<div className="mono" style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginTop: 8, opacity: 0.7 }}>
								<span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999, background: '#1aa15a' }} />
								Encrypted · PCI-DSS compliant · Stripe
							</div>
						</div>
					)}

					{cur === 'redirect' && (
						<div style={{ minHeight: 280, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
							<h3 className="display" style={{ fontSize: isMobile ? 32 : 40, margin: '0 0 16px', lineHeight: 0.96 }}>
								Redirecting to <span className="ital">secure</span> payment.
							</h3>
							<p style={{ fontSize: 14, lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: 460, marginBottom: 24 }}>
								You'll be taken to Stripe to complete payment for {tierLabel}. Confirmation email is automatic on success.
							</p>
							{processing ? (
								<div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 18px', background: 'var(--ink)', color: 'var(--paper)', borderRadius: 4, width: 'fit-content' }}>
									<div style={{
										width: 14, height: 14, borderRadius: '50%',
										border: '2px solid rgba(255,255,255,0.3)',
										borderTopColor: 'var(--lime)',
										animation: 'spin 0.8s linear infinite',
									}} />
									<span className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase' }}>Connecting to Stripe…</span>
								</div>
							) : null}
						</div>
					)}

					{cur === 'done' && (
						<div style={{ minHeight: 280, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
							<div style={{
								width: 56, height: 56, borderRadius: '50%',
								background: 'var(--lime)',
								display: 'flex', alignItems: 'center', justifyContent: 'center',
								marginBottom: 20,
								animation: 'modal-in .5s ease',
							}}>
								<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
									<path d="M5 12.5L10 17L19 7.5" stroke="#0e0a13" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
								</svg>
							</div>
							<h3 className="display" style={{ fontSize: isMobile ? 36 : 44, margin: '0 0 12px', lineHeight: 0.96 }}>
								{mode === 'reserve' ? 'Spot held.' : 'You\'re in.'}
							</h3>
							<p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--ink-soft)', maxWidth: 460, marginBottom: 24 }}>
								{mode === 'reserve'
									? `We've held a ${data.ageGroup === '11-16' ? 'Ages 11–16' : 'Ages 6–10'} spot for ${data.childName || 'your participant'}. A payment link is on its way to ${data.parentEmail}. Spot is held for 48 hours.`
									: `${data.childName || 'Your participant'} is registered for Expression Lab — June 5–7, 2026, Victoria, BC. A confirmation has been sent to ${data.parentEmail}.`}
							</p>
							<div style={{ background: 'var(--paper)', border: '1.5px solid var(--ink)', borderRadius: 4, padding: 20, marginBottom: 24 }}>
								<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--ink-soft)', marginBottom: 8 }}>What's next</div>
								<ol style={{ margin: 0, padding: '0 0 0 18px', fontSize: 14, lineHeight: 1.7 }}>
									<li>Confirmation email{mode === 'reserve' ? ' with secure payment link' : ''} (within 5 mins)</li>
									<li>Venue address & welcome packet (within 7 days)</li>
									<li>Wardrobe & prep guide (2 weeks before)</li>
								</ol>
							</div>
							<button className="btn btn-primary" onClick={onClose} style={{ width: 'fit-content' }}>
								Back to the site →
							</button>
						</div>
					)}

					{cur !== 'done' && cur !== 'redirect' && (
						<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 28, gap: 12 }}>
							<button
								onClick={back}
								disabled={step === 0}
								style={{
									background: 'transparent', border: 'none', cursor: step === 0 ? 'default' : 'pointer',
									color: 'var(--ink)', fontFamily: 'var(--ff-body)', fontSize: 13, fontWeight: 600,
									letterSpacing: '0.06em', textTransform: 'uppercase',
									opacity: step === 0 ? 0.3 : 0.7,
								}}
							>
								← Back
							</button>
							<button
								className="btn btn-primary"
								onClick={next}
								disabled={processing}
								style={{ minWidth: isMobile ? 160 : 200 }}
							>
								{processing
									? 'Processing…'
									: cur === 'review' && mode === 'inline' ? 'Continue to Payment →'
									: cur === 'review' && mode === 'split' ? 'Continue to Stripe →'
									: cur === 'pay' ? `Pay $${total} →`
									: cur === 'reserve' ? 'Hold My Spot →'
									: 'Continue →'}
							</button>
						</div>
					)}
				</div>

				{/* RIGHT — order summary (desktop only) */}
				{!isMobile && (
					<aside style={{
						background: 'var(--bg)',
						color: 'var(--hero-text, #fff)',
						padding: '36px 32px',
						display: 'flex',
						flexDirection: 'column',
						justifyContent: 'space-between',
						position: 'relative',
						overflow: 'hidden',
					}}>
						<div aria-hidden style={{
							position: 'absolute', top: -100, right: -60,
							width: 240, height: 240, borderRadius: '50%',
							background: 'var(--pink)', filter: 'blur(40px)', opacity: 0.5, pointerEvents: 'none',
						}} />

						<div style={{ position: 'relative' }}>
							<div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', opacity: 0.6, marginBottom: 20 }}>
								· YOUR ORDER
							</div>

							<div className="display" style={{ fontSize: 32, lineHeight: 1, marginBottom: 24 }}>
								Expression<br/><span className="ital">Lab</span> 2026
							</div>

							<div style={{ display: 'flex', flexDirection: 'column', gap: 14, fontSize: 13.5 }}>
								<CheckoutRow label="Workshop" v="3 days, June 5 – 7" />
								<CheckoutRow label="Location" v="Apex West, Victoria BC" />
								<CheckoutRow label="Includes" v="3 edited photos · all training" />
								<CheckoutRow label="Tier" v={tierLabel} highlight={data.tier === 'early'} />
							</div>

							<div style={{ marginTop: 24 }}>
								<div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', opacity: 0.6, marginBottom: 8 }}>SELECT TIER</div>
								<div style={{ display: 'flex', gap: 8 }}>
									{[
										['early','Early-Bird','$495'],
										['standard','Standard','$595'],
									].map(([v, l, p]) => (
										<button key={v} type="button" onClick={() => update('tier', v)} style={{
											flex: 1, padding: '12px 8px',
											background: data.tier === v ? 'var(--pink)' : 'transparent',
											color: data.tier === v ? '#fff' : 'rgba(255,255,255,0.85)',
											border: `1px solid ${data.tier === v ? 'var(--pink)' : 'rgba(255,255,255,0.25)'}`,
											borderRadius: 4,
											cursor: 'pointer',
											fontFamily: 'var(--ff-body)',
											transition: 'all .15s ease',
										}}>
											<div style={{ fontSize: 12, fontWeight: 600 }}>{l}</div>
											<div style={{ fontSize: 14, fontWeight: 800, marginTop: 2 }}>{p}</div>
										</button>
									))}
								</div>
							</div>
						</div>

						<div style={{ position: 'relative', borderTop: '1px solid rgba(255,255,255,0.18)', marginTop: 24, paddingTop: 20 }}>
							<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
								<div className="mono" style={{ fontSize: 11, letterSpacing: '0.2em', opacity: 0.7 }}>TOTAL</div>
								<div className="display" style={{ fontSize: 56, lineHeight: 1 }}>${total}</div>
							</div>
							<div className="mono" style={{ fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase', opacity: 0.45, marginTop: 4 }}>
								CAD · one-time · all-inclusive
							</div>
						</div>
					</aside>
				)}
			</div>

			<style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
		</div>
	);
}

function CheckoutRow({ label, v, highlight }) {
	return (
		<div style={{ display: 'grid', gridTemplateColumns: '90px 1fr', gap: 12 }}>
			<span className="mono" style={{ fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55 }}>{label}</span>
			<span style={{ color: highlight ? 'var(--lime)' : 'inherit', fontWeight: highlight ? 600 : 400 }}>{v}</span>
		</div>
	);
}

window.Checkout = Checkout;