export default function Application() { // Where each recommendation lands. Josiane's rule: Essential and Elite // riders go straight to their signup page; The Breakdown and Rise Up riders // continue to the application and the coaching-fit call, which those two // pages own. const REDIRECT_TARGETS = { essentials: '/free-training-offer', elite: '/free-training-elite', masterclass: '/free-training-masterclass', riseup: '/free-training-riseup', } // The Payload form these answers are saved to — "The BREAKDOWN — Coaching // Fit Questionnaire" on the JGPH tenant. Submissions show up under // /office/forms, and the collection's afterChange hook also creates the // contact, tags them, and opens a pipeline deal. Recreate it with // scripts/create-breakdown-questionnaire-form.ts if this id ever goes stale. const FORM_ID = 84 // What the rider sees on the page they land on, stored alongside the raw // answers so submissions can be sorted by outcome rather than re-derived. const TIER_LABELS = { essentials: 'Essentials', elite: 'Elite', masterclass: 'The Breakdown', riseup: 'Rise Up', } // Spelled out once and reused by both the options list and the routing, so // a wording tweak can never silently break a route by making the string // comparison below stop matching. const INVEST_ESSENTIAL = 'Essential, $49 per month' const INVEST_ELITE = 'Elite, $149 per month' const INVEST_MASTERCLASS = 'The Breakdown, $700 per month, weekly video review and a personalized instruction plan' const INVEST_RISEUP = 'Rise Up: premium personalized coaching with limited availability, $2,000 per month' const INVEST_NONE = "I'm not ready to invest at this time" const COMMIT_READY = "Yes, I'm ready to commit and do the work" const COMMIT_HELP = 'Yes, but I may need help staying consistent' const COMMIT_LATER = "I'm interested, but I'm not ready yet" const COMMIT_BROWSING = "I'm only exploring my options right now" const OTHER = 'Other' type Question = { key: string; label: string; q: string; options: string[]; allowOther?: boolean } const questions: Question[] = [ { key: 'level', label: 'Current riding level', q: 'Which best describes you right now?', options: [ "I'm developing my foundation", "I'm a Rookie or Non Pro competitor", "I'm an experienced competitor", "I'm an up-and-coming trainer", 'I ride for personal growth and enjoyment', ], }, { key: 'goal', label: 'Primary goal', q: 'What is your most important riding goal over the next three to six months?', allowOther: true, options: [ 'Improve my position, timing, and feel', 'Become more consistent in specific maneuvers', 'Build confidence in myself and my horse', 'Prepare for an upcoming show', 'Improve my overall performance', ], }, { key: 'challenge', label: 'Current challenge', q: 'What is holding you back the most right now?', allowOther: true, options: [ "I'm not always sure why something works or doesn't", "I don't have consistent feedback on my riding", 'I struggle to recognize what needs to change', 'I need a clearer training plan', 'I need accountability and continued support', ], }, { key: 'support', label: 'Preferred support', q: 'What level of coaching would help you most?', options: [ 'Educational videos I can watch at my own pace', 'More advanced education and coaching resources', 'A structured three-month program with personalized guidance', 'High-level support with weekly planning and direct daily message access', 'I’m not sure, I would like your recommendation', ], }, { key: 'commitment', label: 'Commitment', q: 'Are you prepared to send riding videos, apply feedback, and follow a personalized plan?', options: [COMMIT_READY, COMMIT_HELP, COMMIT_LATER, COMMIT_BROWSING], }, { key: 'investment', label: 'Investment', q: 'Which investment level are you comfortable with right now?', options: [INVEST_ESSENTIAL, INVEST_ELITE, INVEST_MASTERCLASS, INVEST_RISEUP, INVEST_NONE], }, ] // Identity carried from the opt-in. The query string is the primary // channel (?name=...&email=...), with sessionStorage as a backup because // the query string does not survive every route into this page: a shared // link, a bookmark, or landing here directly all arrive bare. When both // miss, the contact step below asks — which is what stops applications // arriving anonymous, as every one of them did before. const [contact] = useState(() => { // `window.location` as well as `window`: the runtime sandbox that // server-renders this section exposes a partial window, so `typeof window` // alone passed during SSR and reading .search threw — the page streamed // its markup but every request answered HTTP 500. if (typeof window === 'undefined' || !window.location) return { name: '', email: '' } const params = new URLSearchParams(window.location.search) let name = params.get('name') || '' let email = params.get('email') || '' if (!name || !email) { try { const saved = JSON.parse(sessionStorage.getItem('jgph:breakdown-contact') || '{}') name = name || saved.name || '' email = email || saved.email || '' } catch (e) {} } return { name: name, email: email } }) const [started, setStarted] = useState(false) const [step, setStep] = useState(0) // Sits between the last question and the result: confirm where the answer // goes. Prefilled when we already know, so for anyone who came through the // opt-in it is one glance and a click. const [contactStep, setContactStep] = useState(false) const [contactError, setContactError] = useState('') const [answers, setAnswers] = useState(() => ({ name: contact.name, email: contact.email })) const [done, setDone] = useState(false) const [redirectTarget, setRedirectTarget] = useState(null) const [tier, setTier] = useState(null) const total = questions.length const cur = questions[step] const isLast = step === total - 1 const val = answers[cur.key] || '' const otherVal = answers[cur.key + '_other'] || '' const otherChosen = val === OTHER const setVal = (v) => setAnswers((a) => ({ ...a, [cur.key]: v })) const setOtherVal = (v) => setAnswers((a) => ({ ...a, [cur.key + '_other']: v })) // Josiane's routing rule, in order of precedence: // // "Riders choosing the Master Class or Rise Up, and indicating that // they're ready to commit, can continue to the application and // coaching-fit call. Essential and Elite riders should go directly to // their respective signup pages." // // Commitment gates the two high-touch tiers rather than merely colouring // them: someone who picks Rise Up but says they're not ready yet is not // sent to an application they won't finish, they're sent to the trial. // Elite is exempt from that gate because it's a self-serve signup, not an // application, so wanting it is enough. const routeTo = () => { const invest = answers.investment const notReady = answers.commitment === COMMIT_LATER || answers.commitment === COMMIT_BROWSING if (invest === INVEST_NONE) return 'essentials' if (notReady) return invest === INVEST_ELITE ? 'elite' : 'essentials' if (invest === INVEST_RISEUP) return 'riseup' if (invest === INVEST_MASTERCLASS) return 'masterclass' if (invest === INVEST_ELITE) return 'elite' return 'essentials' } // Name and email ride along to the destination the same way they arrived // here, so the signup and application pages don't ask a third time. const withContact = (url) => { const p = new URLSearchParams() if (answers.name) p.set('name', answers.name) if (answers.email) p.set('email', answers.email) const qs = p.toString() return qs ? url + '?' + qs : url } const commit = () => { if (!isLast) { setStep(step + 1); return } setContactStep(true) } // Finishing for real: only reachable from the contact step, so name and // email are always present on a submission from here on. const emailOk = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(v).trim()) const finish = () => { if (!String(answers.name || '').trim()) { setContactError('Please add your name.'); return } if (!emailOk(answers.email)) { setContactError('Please enter a valid email address.'); return } setContactError('') // Re-seed the carry-forward so the signup pages downstream get it too, // even if this rider later arrives there without the query string. try { sessionStorage.setItem('jgph:breakdown-contact', JSON.stringify({ name: String(answers.name).trim(), email: String(answers.email).trim(), })) } catch (e) {} const t = routeTo() setTier(t) setRedirectTarget(withContact(REDIRECT_TARGETS[t])) setDone(true) } // "Other" needs its text typed before it counts as answered, and the last // question waits for an explicit submit so Josiane's final CTA has a home. const canNext = otherChosen ? String(otherVal).trim().length > 0 : !!val const next = () => { if (canNext) commit() } const choose = (o) => { setVal(o) if (o === OTHER || isLast) return setTimeout(commit, 170) } // Save the answers, then move the rider on. Two things matter here: // // 1. The save must never be able to strand someone on the thank-you screen. // The redirect runs on a fixed timer regardless of whether the request // succeeded, failed, or is still in flight. // 2. Navigating away normally cancels an in-flight fetch, which would lose // the submission on fast connections. `keepalive` tells the browser to // finish the request even after the page goes away. useEffect(() => { if (!done || !redirectTarget) return let cancelled = false const payload = { formId: FORM_ID, data: { name: answers.name || '', email: answers.email || '', level: answers.level || '', goal: answers.goal || '', goal_other: answers.goal_other || '', challenge: answers.challenge || '', challenge_other: answers.challenge_other || '', support: answers.support || '', commitment: answers.commitment || '', investment: answers.investment || '', recommendation: TIER_LABELS[tier] || '', }, submittedBy: { name: answers.name || '', email: answers.email || '' }, } fetch('/api/form-submissions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload), keepalive: true, }).catch(() => {}) const t = setTimeout(() => { if (!cancelled) window.location.href = redirectTarget }, 1600) return () => { cancelled = true; clearTimeout(t) } }, [done, redirectTarget, tier]) const wrap = { position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', // Top padding clears the absolutely-positioned logo (top 24 + 40 tall). // On a wide screen the centered column misses it anyway, but on a phone // that column is the full width and the heading lands on top of it. padding: '96px 24px 72px', boxSizing: 'border-box', background: 'var(--brand-bg, #0b0c0d)', color: 'var(--brand-text, #ece5d8)', fontFamily: 'var(--brand-font-body, ui-sans-serif, system-ui, sans-serif)', } const logo = { position: 'absolute', top: 24, left: 28, width: 40, height: 40, objectFit: 'contain', } const primaryBtn = { padding: '13px 30px', fontSize: 15, fontWeight: 700, borderRadius: 2, border: '1px solid var(--brand-primary, #1f7a72)', cursor: 'pointer', background: 'var(--brand-primary, #1f7a72)', color: 'var(--brand-primary-fg, #eaf5f3)', fontFamily: 'inherit', } if (!started) { return (

{contact.name ? (

Nice work, {contact.name}

) : null}

Let's find the right coaching option for you

Every rider has different goals and needs a different level of support. Answer these six quick questions, and I'll help guide you toward the option that best fits where you are and where you want to go.

) } if (done) { return (

✓

Thank you{answers.name ? ', ' + answers.name : ''}.

Taking you to your best next step now.

) } // ── Where to send it ────────────────────────────────────────────────── // // Deliberately the LAST step, not the first: for a rider who came through // the opt-in this is a confirmation rather than a question, and putting it // up front would ask for something we already have before we have earned // anything. It is also the only place a typo in the opt-in can be caught. if (contactStep) { const fieldStyle = { width: '100%', marginTop: 6, background: 'transparent', color: 'inherit', border: '1.5px solid rgba(236,229,216,0.25)', borderRadius: 4, padding: '15px 18px', fontSize: 16, fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box', } const labelStyle = { fontSize: 12, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(236,229,216,0.55)', } return (

Last step

{total} of {total}

Where should I send your results?

So I know who this is and can follow up personally.

First name { setContactError(''); setAnswers((a) => ({ ...a, name: e.target.value })) }} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); finish() } }} placeholder="Your first name" style={fieldStyle} />

Email { setContactError(''); setAnswers((a) => ({ ...a, email: e.target.value })) }} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); finish() } }} placeholder="you@example.com" style={fieldStyle} />

{contactError ? (

{contactError}

) : null}

) } const options = cur.allowOther ? cur.options.concat([OTHER]) : cur.options return (

{/* No top padding of its own — the wrap above now reserves the logo space for every screen this component renders. */}

{cur.label}

{step + 1} of {total}

{cur.q}

{options.map((o, i) => { const sel = val === o return ( ) })}

{otherChosen ? ( setOtherVal(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); next() } }} placeholder="Tell me in your own words" style={{ width: '100%', marginTop: 12, background: 'transparent', color: 'inherit', border: '1.5px solid rgba(236,229,216,0.25)', borderRadius: 4, padding: '15px 18px', fontSize: 16, fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box', }} /> ) : null}

{step > 0 ? ( ) : null} {isLast || otherChosen ? ( ) : null}

) }