function RegisterPage(){
const D = window.RLJ, F = D.form;
const [sent, setSent] = React.useState(false);
const [errors, setErrors] = React.useState({});
const [consent, setConsent] = React.useState(false);
const required = ['firstName', 'lastName', 'email', 'organisation', 'role', 'city', 'package', 'accommodation', 'likelihood'];
function submit(e){
e.preventDefault();
const fd = new FormData(e.target), errs = {};
required.forEach(k => {if (!String(fd.get(k) || '').trim()) errs[k] = 'Required';});
const email = String(fd.get('email') || '');
if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) errs.email = 'Enter a valid email address';
if (!consent) errs.consent = 'Please confirm you are happy to receive tour updates.';
setErrors(errs);
if (!Object.keys(errs).length) setSent(true);
}
if (sent) return <div>
<Section style={{paddingTop: 'var(--space-24)', paddingBottom: 'var(--space-32)'}}>
<div style={{maxWidth: 'var(--content-narrow)'}}>
<Badge tone="success">Registration received</Badge>
<h1 style={{font: 'var(--text-display-md)', color: 'var(--text-primary)', marginTop: 'var(--space-5)'}}>{F.confirmation[0]}</h1>
<p style={{font: 'var(--text-body-lg)', color: 'var(--text-secondary)', marginTop: 'var(--space-5)', textWrap: 'pretty'}}>{F.confirmation[1]}</p>
<div style={{display: 'flex', gap: 'var(--space-3)', marginTop: 'var(--space-8)', flexWrap: 'wrap'}}>
<Button onClick={() => go('tour')}>Back to the tour</Button>
<Button variant="secondary" onClick={() => go('cpd')}>Read about CPD</Button>
</div>
</div>
</Section>
</div>;
const sel = (name, label, options, req) => <Select name={name} label={label + (req ? ' *' : '')} options={['Please select', ...options]} helpText={errors[name]} defaultValue="Please select" />;
return <div>
<PageHero label="Register interest" title="Register your interest" strap="Register to receive confirmed dates, final pricing, the detailed learning program and priority notice when bookings open." summary="Registration is not a booking and does not create a payment obligation." />
<Section>
<div className="g-form" style={{display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 'var(--space-16)', alignItems: 'start'}}>
<form onSubmit={submit} noValidate style={{display: 'grid', gap: 'var(--space-10)'}}>
<fieldset style={{border: 'none', padding: 0, margin: 0, display: 'grid', gap: 'var(--space-5)'}}>
<legend style={{font: 'var(--text-caption)', letterSpacing: 'var(--letter-caption)', textTransform: 'uppercase', color: 'var(--accent-rust)', padding: 0, marginBottom: 'var(--space-2)'}}>About you</legend>
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-5)'}}>
<Input name="firstName" label="First name *" error={errors.firstName} />
<Input name="lastName" label="Last name *" error={errors.lastName} />
<Input name="email" type="email" label="Email address *" error={errors.email} />
<Input name="phone" label="Phone number" helpText="Optional" />
<Input name="organisation" label="Organisation *" error={errors.organisation} />
<Input name="role" label="Role or professional discipline *" error={errors.role} />
<Input name="city" label="Home city *" error={errors.city} />
<Input name="institution" label="Professional institution" helpText="Optional" />
</div>
</fieldset>
<fieldset style={{border: 'none', padding: 0, margin: 0, display: 'grid', gap: 'var(--space-5)'}}>
<legend style={{font: 'var(--text-caption)', letterSpacing: 'var(--letter-caption)', textTransform: 'uppercase', color: 'var(--accent-rust)', padding: 0, marginBottom: 'var(--space-2)'}}>Your preferences</legend>
<div className="g-2" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-5)'}}>
{sel('package', 'Preferred package', F.packages, true)}
{sel('accommodation', 'Accommodation preference', F.accommodation, true)}
{sel('likelihood', 'Likelihood of attending', F.likelihood, true)}
{sel('funding', 'Employer-funded or self-funded', F.funding)}
{sel('month', 'Preferred travel month', F.months)}
{sel('extensions', 'Interest in private extensions', ['Yes', 'No', 'Not sure'])}
</div>
</fieldset>
<fieldset style={{border: 'none', padding: 0, margin: 0, display: 'grid', gap: 'var(--space-5)'}}>
<legend style={{font: 'var(--text-caption)', letterSpacing: 'var(--letter-caption)', textTransform: 'uppercase', color: 'var(--accent-rust)', padding: 0, marginBottom: 'var(--space-2)'}}>Anything else</legend>
<Input name="dietary" label="Dietary requirements" helpText="Optional" />
<Textarea name="accessibility" rows={2} label="Accessibility considerations" helpText="Is there an accessibility consideration you would like us to discuss with you privately? Please do not include medical details." />
<Textarea name="comments" rows={4} label="Comments or questions" helpText="Optional" />
</fieldset>
<div style={{display: 'grid', gap: 'var(--space-4)', borderTop: '1px solid var(--border-subtle)', paddingTop: 'var(--space-6)'}}>
<Checkbox label="Yes, send me updates about this tour and future programs." checked={consent} onChange={e => setConsent(e.target.checked)} />
{errors.consent && <span style={{font: 'var(--text-body-sm)', color: 'var(--state-error)'}}>{errors.consent}</span>}
<div><Button type="submit" variant="rust" size="lg">Register interest</Button></div>
<p style={{font: 'var(--text-body-sm)', color: 'var(--text-tertiary)', margin: 0}}>We will only use your details to contact you about Rail Learning Journeys programs. You can ask to be removed at any time.</p>
</div>
</form>
<aside style={{background: 'var(--surface-raised)', border: '1px solid var(--border-subtle)', padding: 'var(--space-8)', display: 'grid', gap: 'var(--space-6)', position: 'sticky', top: 'var(--space-24)'}}>
<div>
<Eyebrow>The journey</Eyebrow>
<h3 style={{font: 'var(--text-headline)', color: 'var(--text-primary)', marginTop: 'var(--space-2)'}}>{D.tour.title}</h3>
<p style={{font: 'var(--text-body-sm)', color: 'var(--text-secondary)', marginTop: 'var(--space-3)', marginBottom: 0}}>{D.tour.subtitle}</p>
</div>
<FactTable rows={D.tour.facts.slice(0, 6)} />
<Disclaimer>{D.disclaimers.price}</Disclaimer>
</aside>
</div>
</Section>
</div>;
}
window.RegisterPage = RegisterPage;