export default function PersonalCoachingApplication() { // Shared application for both programs. Deliberately does NOT ask which // program the rider wants, and does NOT lead with price: this form exists // to pre-qualify a rider before Josiane steps in and figures out the right // fit herself, not to have them self-select off a price menu. If a // ?program= arrived from a referring offer page, it's carried along as // silent context on the submission, never surfaced as a question. // // Ends in a confirmation message rather than a redirect. A calendar // redirect on confirmation is coming later; until then this is the last // step. // // Submits to "Personal Coaching Application" (form id 27) on the JGPH // tenant, which has notifications enabled so Josiane is emailed on every // submission. const FORM_ID = 27 const BG = 'https://www.jgperformancehorses.com/api/media/file/IMG_0148-optimized-1-1920x1281.jpg' const PROGRAM_LABELS = { breakdown: 'The Breakdown', riseup: 'Rise Up' } const [initial] = useState(() => { if (typeof window === 'undefined' || !window.location) return { name: '', email: '', program: '' } const params = new URLSearchParams(window.location.search) let name = params.get('name') || '' let email = params.get('email') || '' const programParam = params.get('program') || '' const program = PROGRAM_LABELS[programParam] ? programParam : '' 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, program: program } }) type Step = { key: string; kind: 'textarea' | 'text' | 'contact'; label: string; q?: string; required: boolean } // Riding, then goals, then contact last, same order as the coaching-fit // questionnaire: substantive questions first, so it reads as being asked // about, not filling out a form. Contact info comes once there is // something worth following up on. const steps: Step[] = [ { key: 'experience', kind: 'textarea', label: 'Riding background', q: 'Tell us about your riding background.', required: true }, { key: 'goals', kind: 'textarea', label: 'Goals', q: 'What are your goals?', required: true }, { key: 'current_trainer', kind: 'text', label: 'Current trainer', q: 'Do you currently work with a trainer? Having one is totally fine.', required: false }, { key: 'contact', kind: 'contact', label: 'About you', required: true }, ] const [started, setStarted] = useState(false) const [step, setStep] = useState(0) const [answers, setAnswers] = useState(() => ({ name: initial.name, email: initial.email, phone: '', program: initial.program })) const [error, setError] = useState('') const [done, setDone] = useState(false) const [submitting, setSubmitting] = useState(false) const total = steps.length const cur = steps[step] const isLast = step === total - 1 const setVal = (key, v) => { setError(''); setAnswers((a) => ({ ...a, [key]: v })) } const emailOk = (v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(v).trim()) const canAdvance = () => { if (cur.kind === 'contact') return !!String(answers.name || '').trim() && emailOk(answers.email) if (cur.required) return !!String(answers[cur.key] || '').trim() return true } // Save, then show the confirmation. keepalive lets the request finish even // if the tab is closed right after, and the confirmation never depends on // the request having succeeded, so a submission never strands someone on a // broken screen. const submit = () => { if (submitting) return setSubmitting(true) try { sessionStorage.setItem('jgph:breakdown-contact', JSON.stringify({ name: String(answers.name || '').trim(), email: String(answers.email || '').trim(), })) } catch (e) {} fetch('/api/form-submissions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ formId: FORM_ID, data: { program: answers.program || '', name: answers.name || '', email: answers.email || '', phone: answers.phone || '', experience: answers.experience || '', goals: answers.goals || '', current_trainer: answers.current_trainer || '', }, submittedBy: { name: answers.name || '', email: answers.email || '' }, }), keepalive: true, }).catch(() => {}) setDone(true) } const next = () => { if (!canAdvance()) { setError(cur.kind === 'contact' ? 'Add your name and a valid email.' : 'This one needs an answer before you continue.') return } if (isLast) { submit(); return } setError('') setStep(step + 1) } const heading = { fontFamily: 'var(--brand-font-heading, Georgia, "Iowan Old Style", serif)' } const primaryBtn = { padding: '14px 30px', fontSize: 15, fontWeight: 700, borderRadius: 3, border: '1px solid var(--brand-primary, #1f7a72)', cursor: submitting ? 'default' : 'pointer', background: 'var(--brand-primary, #1f7a72)', color: 'var(--brand-primary-fg, #eaf5f3)', fontFamily: 'inherit', opacity: submitting ? 0.7 : 1, } const fieldStyle = { width: '100%', marginTop: 6, background: 'transparent', color: 'inherit', border: '1.5px solid rgba(236,229,216,0.25)', borderRadius: 4, padding: '14px 16px', 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)', } const css = '@keyframes appq{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}' const shell = { position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '110px 24px 72px', boxSizing: 'border-box', color: 'var(--brand-text, #ece5d8)', fontFamily: 'var(--brand-font-body, ui-sans-serif, system-ui, sans-serif)', backgroundColor: 'var(--brand-bg, #0b0c0d)', } return (

{!started ? (

By application

{initial.program ? 'Apply for ' + PROGRAM_LABELS[initial.program] : 'Apply for Personal Coaching'}

Tell me a bit about you and your riding. I personally review every application and will follow up about the best fit for you.

Programs begin with a 90-day minimum.

) : done ? (

✓

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

I personally review every application and will be in touch soon about the best fit for you.

← Back to all coaching options

) : (

{cur.label}

{step + 1} of {total}

{cur.kind === 'contact' ? ( <>

Last step. Where should I send your confirmation?

Full name setVal('name', e.target.value)} placeholder="Your full name" style={fieldStyle} />

Email setVal('email', e.target.value)} placeholder="you@example.com" style={fieldStyle} />

Phone (optional) setVal('phone', e.target.value)} placeholder="Optional" style={fieldStyle} />

) : ( <>

{cur.q}

{!cur.required ? (

Optional

) : null} {cur.kind === 'textarea' ? (

setVal(cur.key, e.target.value)}
                      rows={5}
                      style={{ ...fieldStyle, resize: 'vertical', marginTop: 18 }}
                    />
                  ) : (
                    <input
                      autoFocus
                      value={answers[cur.key] || ''}
                      onChange={(e) => setVal(cur.key, e.target.value)}
                      placeholder="Name and program if applicable"
                      style={{ ...fieldStyle, marginTop: 18 }}
                    />
                  )}
                </>
              )}

{error ? <p style={{ margin: '14px 0 0', fontSize: 14, color: '#e2725b' }}>{error}</p> : null}
            </div>

<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 16, marginTop: 30 }}>
              {step > 0 ? (
                <button onClick={() => { setError(''); setStep(step - 1) }} style={{ background: 'none', border: 'none', color: 'rgba(236,229,216,0.55)', fontSize: 14, cursor: 'pointer', fontFamily: 'inherit', padding: 0 }}>
                  ← Back
                </button>
              ) : null}
              <button onClick={next} style={primaryBtn}>
                {isLast ? 'Submit application →' : 'Continue →'}
              </button>
            </div>
          </div>
        )}
      </section>
    </div>
  )
}
</article></body></html>