/* Application / Apply modal for Rep by Rep.
============================================================
Opens when any "Apply" CTA is clicked.
LOCKED DECISION (2026-05-20, Master Decisions Log):
- Application form gates a Cal.com calendar.
- The calendar is BLURRED behind an overlay until the form is complete.
- A radio lets the applicant choose how to start:
"Schedule a call directly" → blur lifts, they pick a time
"Email me first" → they submit, JP reaches out within 24h
- Form fields: Name, Email, Age, Training experience, Primary goal,
Training availability, 3-month commitment confirmation, How'd you
hear about us, Additional notes (optional).
This file REPLACES the old 3-step wizard (expectations → calendar →
confirm). The blur-to-unlock model is the locked design.
Brand discipline: no em dashes in client copy (periods/commas instead),
no exclamation marks, sapphire as the only accent.
============================================================ */
// ── MailerLite apply-path group tagging ──────────────────────────────────
// One group per path. Do not let either fire for the other.
// email-first → source::apply-email-first (fires automation 189201233924326952)
// call → source::discovery-call (fires automation 189201255363511420)
// Call tag fires on bookingSuccessful only — not on path selection.
const ML_GROUPS = {
emailFirst: '189201167161492983',
discoveryCall: '188557302026995140',
getfitafter40: '191261376391415160',
};
async function addToMailerLiteGroup(groupId, subscriber) {
try {
await fetch('/api/subscribe', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: subscriber.email, name: subscriber.name || '', groupId }),
});
} catch (e) {
console.error('ML group tag error:', e);
}
}
// ─────────────────────────────────────────────────────────────────────────
const ApplyModal = ({ open, onClose }) => {
const BLANK = {
name: '', email: '', age: '',
experience: '', goal: '', availability: '',
commit: false, source: '', notes: '',
};
const [form, setForm] = React.useState(BLANK);
const [startMode, setStartMode] = React.useState(null); // 'call' | 'email' | null
const [selectedDate, setSelectedDate] = React.useState(null);
const [selectedTime, setSelectedTime] = React.useState(null);
const [result, setResult] = React.useState(null); // 'booked' | 'emailed' | null
// Reset when closed
React.useEffect(() => {
if (!open) {
const t = setTimeout(() => {
setForm(BLANK);
setStartMode(null);
setSelectedDate(null);
setSelectedTime(null);
setResult(null);
}, 300);
return () => clearTimeout(t);
}
}, [open]);
// Lock body scroll while open
React.useEffect(() => {
document.body.style.overflow = open ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [open]);
// Required-field validation. Commitment checkbox is a hard gate.
const emailValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email);
const formComplete =
form.name.trim() &&
emailValid &&
form.age.trim() &&
form.experience &&
form.goal &&
form.availability &&
form.commit;
// The calendar unlocks only when the form is complete AND they chose
// the "schedule directly" path.
const calendarUnlocked = formComplete && startMode === 'call';
if (!open) return null;
return (
{startMode === 'email'
? 'You chose email. No calendar needed.'
: !formComplete
? 'Complete the form to unlock your time.'
: 'Choose how you want to start.'}
{startMode === 'email'
? 'Use the button below to send your application.'
: !formComplete
? 'Fill in every required field above, including the 3-month commitment, and the calendar opens.'
: 'Pick "Schedule a call directly" above to open the calendar.'}
)}
)}
)}
);
};
// ---------------- Application form ----------------
const ApplyForm = ({ form, setForm }) => {
const set = (k) => (v) => setForm({ ...form, [k]: v });
return (
Confirmation is on the way to {form.email} with the call link. Put it on your calendar. I never miss a call, and I expect the same from you.
) : (
I read every application myself. Expect a reply at {form.email} within 24 hours. We find a time from there.
)}
Before we talk
{[
'Think about what success looks like for you in 6 months. Be specific.',
'Have your current training and nutrition top of mind. We review both.',
'Bring the honest questions about the process and the cost.',
].map(t => (