// Block 6 — Secondary CTA + Form anchor section (for Phase 2 layout)
// Reuses the Field / PillGroup / ChipGroup / WaiverBox / TextareaField / SelectField
// components defined in event-detail.jsx (loaded globally before this file).
const SOURCE_OPTIONS_V2 = ['Instagram', 'School / Coach referral', 'Recruiter', 'Friend / Word of mouth', 'Other'];
const CAREER_OPTIONS_V2 = ['PJ', 'CCT', 'SR', 'TACP', 'EOD', 'SERE', 'Unsure'];
function EventSignupSection({ event, t, user, onSubmit, onOpenAuth, existingReg, onViewConfirmation, isFull, spotsLeft }) {
const splitName = (full) => {
if (!full) return { first: '', last: '' };
const parts = full.trim().split(/\s+/);
return { first: parts[0] || '', last: parts.slice(1).join(' ') || '' };
};
const initialName = splitName(user?.name);
const [form, setForm] = React.useState({
firstName: user?.firstName || initialName.first,
lastName: user?.lastName || initialName.last,
email: user?.email || '',
phone: user?.phone || '',
age: user?.age || '',
source: user?.source || '', recruiter: user?.recruiter || '',
careers: user?.careers || [],
medical: '', notes: '', waiver: false,
saveProfile: !user,
});
const [errors, setErrors] = React.useState({});
const [touched, setTouched] = React.useState({});
const validate = (f) => {
const e = {};
if (!f.firstName.trim()) e.firstName = 'Please enter your first name.';
if (!f.lastName.trim()) e.lastName = 'Please enter your last name.';
if (!f.email.trim()) e.email = 'Please enter your email address.';
else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(f.email)) e.email = 'Please enter a valid email address.';
// Phone is optional. If provided, must look like a US phone: 10 digits,
// optionally with a leading 1 (11 digits total). Formatting chars ok.
if (f.phone && f.phone.trim()) {
const digits = f.phone.replace(/\D/g, '');
if (digits.length < 10 || digits.length > 11) {
e.phone = 'Enter a 10-digit US phone number.';
} else if (digits.length === 11 && digits[0] !== '1') {
e.phone = 'Enter a 10-digit US phone number.';
}
}
const ageNum = parseInt(f.age, 10);
if (!f.age) e.age = 'Please enter your age.';
else if (isNaN(ageNum) || ageNum < 18 || ageNum > 39) e.age = 'Age must be 18–39. Under-18 candidates cannot attend events (contact a recruiter).';
if (!f.waiver) e.waiver = 'Please acknowledge the waiver to continue.';
return e;
};
const isValid = (k) => {
if (!touched[k]) return false;
const errs = validate(form);
if (errs[k]) return false;
const v = form[k];
return typeof v === 'string' ? v.trim().length > 0 : !!v;
};
const handleChange = (k, v) => {
const next = { ...form, [k]: v };
setForm(next);
if (touched[k]) setErrors(validate(next));
};
const handleBlur = (k) => {
setTouched({ ...touched, [k]: true });
setErrors(validate(form));
};
const toggleCareer = (c) => {
const next = form.careers.includes(c)
? form.careers.filter(x => x !== c)
: [...form.careers, c];
setForm({ ...form, careers: next });
};
const [submitting, setSubmitting] = React.useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
if (submitting) return; // belt-and-suspenders against double-fire
const errs = validate(form);
setErrors(errs);
setTouched({ firstName: true, lastName: true, email: true, phone: true, age: true, waiver: true });
if (Object.keys(errs).length !== 0) {
if (window.dataLayer) window.dataLayer.push({ event: 'form_submit_error', event_id: event.id });
return;
}
if (window.dataLayer) window.dataLayer.push({ event: 'form_submit_success', event_id: event.id });
setSubmitting(true);
try {
await onSubmit({ event, form: { ...form, name: `${form.firstName} ${form.lastName}`.trim() } });
} finally {
// If parent flipped the view to confirmation, this component is already
// unmounting and this setState is a no-op. If parent threw or stayed,
// we reset so the candidate can try again.
setSubmitting(false);
}
};
// Already registered — show confirmation panel instead of form
if (existingReg) {
return (
// BLOCK 06 · STATUS
✓ LOCKED IN
You're confirmed for this event. Show up on time and ready.
);
}
return (
// BLOCK 06
{isFull ? 'WAITLIST' : 'RESERVE MY SPOT'}
{isFull
? 'This event is full. Add your name to the waitlist. We release spots as no-shows cancel.'
: 'No hype. No fluff. Fill this out only if you plan to show up.'}