/* Multi-step register flow */ const STEPS = ["Athlete", "Division", "Schedule", "Guardian", "Review"]; const DIVISION_PRICES = { rookie: { 1: 425, 2: 750, 3: 995 }, foundation: { 1: 495, 2: 875, 3: 1175 }, development: { 1: 535, 2: 950, 3: 1275 }, performance: { 1: 565, 2: 995, 3: 1345 }, elite: { 1: 585, 2: 1035, 3: 1395 }, }; const WEEK_RANGES = ["Aug 3 – 7", "Aug 10 – 14", "Aug 17 – 21"]; function computeTotal(divisionId, selectedWeeks) { const n = selectedWeeks ? selectedWeeks.length : 0; if (!divisionId || !n) return 0; const prices = DIVISION_PRICES[divisionId]; if (!prices) return 0; return prices[n] || 0; } const WEB3FORMS_KEY = "b8d90ff4-9ffd-422f-a59d-c0c2d5e120c6"; const REGISTRATION_EMAIL = "coach_ad@londonlogicbasketball.com"; async function submitRegistrationEmail(data) { const division = DIV_FULL.find(d => d.id === data.division); const total = computeTotal(data.division, data.selectedWeeks); const weeksLabel = data.selectedWeeks.length === 0 ? "—" : data.selectedWeeks.length === 3 ? "All 3 weeks (Aug 3 – 21)" : data.selectedWeeks.map(w => `Week ${w} (${WEEK_RANGES[w - 1]})`).join(", "); const isScholarship = data.mode === "scholarship"; const subject = isScholarship ? `[Scholarship] ${data.firstName} ${data.lastName} — ${division?.name || "?"} LOGIC` : `[Registration] ${data.firstName} ${data.lastName} — ${division?.name || "?"} LOGIC · ${data.selectedWeeks.length} wk(s)`; const payload = { access_key: WEB3FORMS_KEY, subject, from_name: "London LOGIC Basketball — Registration Form", "Application Type": isScholarship ? "SCHOLARSHIP APPLICATION (free)" : "PAID REGISTRATION", "Athlete Name": `${data.firstName} ${data.lastName}`, "Grade": data.grade, "Gender": data.gender, "Division": division ? `${division.name} LOGIC` : data.division, "Weeks": weeksLabel, "Total Due": isScholarship ? "Free (scholarship)" : (total ? `$${total.toLocaleString()}` : "—"), "Sponsor-a-Week": data.donateWeek ? `Donating Week ${data.donateWeek} to scholarship fund` : "—", "Aug 22 Community Game (Elite)": data.division === "elite" ? (data.wantsCommunityGame ? "Yes" : "No") : "N/A", "Guardian Name": data.guardianName, "Guardian Email": data.email, "Guardian Phone": data.phone, "Billing Address": data.mode === "scholarship" ? "N/A (scholarship)" : [data.billingStreet, data.billingCity, data.billingProvince, data.billingPostal, data.billingCountry].filter(Boolean).join(", "), "Waiver Accepted": data.waiver ? "Yes" : "No", "Media Consent": data.mediaConsent ? "Yes" : "No", "Player Portfolio Consent": data.portfolioConsent ? "Yes" : "No", "Marketing Email Consent": data.emailConsent ? "Yes" : "No", "Scholarship Statement": isScholarship ? data.scholarshipReason : "—", "Document Package": "Consent Waiver + Emergency Info, Athlete Registration, Medical Information — delivered to family on confirmation", replyto: data.email, }; const res = await fetch("https://api.web3forms.com/submit", { method: "POST", headers: { "Content-Type": "application/json", "Accept": "application/json" }, body: JSON.stringify(payload), }); const json = await res.json().catch(() => ({})); if (!res.ok || !json.success) { throw new Error(json.message || `Submission failed (${res.status})`); } return json; } function RegisterPage() { const [step, setStep] = React.useState(0); const [data, setData] = React.useState(() => { let initialMode = "paid"; let initialWeeks = [1, 2, 3]; try { const stored = localStorage.getItem("logic_register_mode"); if (stored === "scholarship") { initialMode = "scholarship"; localStorage.removeItem("logic_register_mode"); } const w = localStorage.getItem("logic_register_weeks"); if (w) { const parsed = JSON.parse(w); if (Array.isArray(parsed) && parsed.every(x => [1, 2, 3].includes(x)) && parsed.length) { initialWeeks = parsed; } } } catch (e) {} return { firstName: "", lastName: "", grade: "", gender: "", division: "", selectedWeeks: initialWeeks, wantsCommunityGame: false, donateWeek: null, mode: initialMode, scholarshipReason: "", guardianName: "", email: "", phone: "", billingAddress: false, billingStreet: "", billingCity: "", billingProvince: "", billingPostal: "", billingCountry: "Canada", waiver: false, mediaConsent: false, portfolioConsent: false, emailConsent: false, }; }); const [submitted, setSubmitted] = React.useState(false); const [sending, setSending] = React.useState(false); const [submitError, setSubmitError] = React.useState(null); const update = (patch) => setData(d => { const next = { ...d, ...patch }; // Persist selectedWeeks any time they change if (patch.selectedWeeks) { try { localStorage.setItem("logic_register_weeks", JSON.stringify(next.selectedWeeks)); } catch (e) {} } // If donateWeek is no longer in selectedWeeks, clear it if (next.donateWeek && !next.selectedWeeks.includes(next.donateWeek)) { next.donateWeek = null; } return next; }); const canAdvance = () => { if (step === 0) return data.firstName && data.lastName && data.grade && data.gender; if (step === 1) return data.division; if (step === 2) return data.selectedWeeks.length >= 1; if (step === 3) { const billingOk = data.mode === "scholarship" || (data.billingStreet && data.billingCity && data.billingProvince && data.billingPostal && data.billingCountry); return data.guardianName && data.email && data.phone && data.waiver && billingOk && (data.mode !== "scholarship" || data.scholarshipReason.trim().length > 30); } return true; }; if (submitted) return ; return (
Reserve your spot.} kicker="120 spots total — 24 per division. We'll save your place once you complete the steps below." /> {/* Mode toggle — explicit two-track switch (dark theme for visibility) */}
{[ { v: "paid", lbl: "Paid Registration", sub: "1, 2, or 3 weeks", icon: "💳" }, { v: "scholarship", lbl: "Scholarship Application", sub: "1 of 10 fully-funded spots · apply free", icon: "★" }, ].map(o => { const on = data.mode === o.v; const isScholar = o.v === "scholarship"; return ( ); })}
{/* Scholarship application banner — only visible in scholarship mode */} {data.mode === "scholarship" && (
10
You're applying for a Scholarship · Application is FREE
One boy & one girl from every division — full ride.
Awarded on need + character. You'll write a short answer in Step 4. Recipients announced mid-June.
)} i < step && setStep(i)}/>
{step === 0 && } {step === 1 && } {step === 2 && } {step === 3 && } {step === 4 && }
setStep(s => Math.max(0, s - 1))} disabled={step === 0}>← Back {step < STEPS.length - 1 ? ( canAdvance() && setStep(s => s + 1)} disabled={!canAdvance()}> Continue ) : (
{submitError && (
Couldn't send. {submitError} Please try again, or email{" "} coach_ad@londonlogicbasketball.com directly.
)} { setSending(true); setSubmitError(null); try { await submitRegistrationEmail(data); setSubmitted(true); } catch (err) { setSubmitError(err.message || "Network error."); } finally { setSending(false); } }}>{sending ? "Sending…" : "Submit registration"}
)}
); } function Stepper({ step, onJump }) { return (
{STEPS.map((s, i) => { const done = i < step, on = i === step; return ( ); })}
); } function StepAthlete({ data, update }) { return (
update({ firstName: v })}/> update({ lastName: v })}/> update({ wantsCommunityGame: e.target.checked })}/> Confirm participation
)}
); } function StepGuardian({ data, update }) { return (
update({ guardianName: v })}/> update({ phone: v })}/> update({ email: v })} full/>
{data.mode !== "scholarship" && (
Billing address · required

Used on your invoice and receipt.

update({ billingStreet: v })} full/> update({ billingCity: v })}/> update({ billingProvince: v })}/> update({ billingPostal: v })}/> update({ billingCountry: v })}/>
)} {data.mode === "scholarship" && (
Scholarship application · short answer
What would a LOGIC spot mean for your athlete?

A few sentences — character, basketball journey, why the scholarship matters. Reviewed confidentially.