/* Mobile multi-step register flow */ const REG_STEPS = ["Athlete", "Division", "Schedule", "Guardian", "Review"]; const REG_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 REG_WEEK_RANGES = ["Aug 3 – 7", "Aug 10 – 14", "Aug 17 – 21"]; function regComputeTotal(divisionId, selectedWeeks) { const n = selectedWeeks ? selectedWeeks.length : 0; if (!divisionId || !n) return 0; const prices = REG_DIVISION_PRICES[divisionId]; if (!prices) return 0; return prices[n] || 0; } const REG_WEB3FORMS_KEY = "b8d90ff4-9ffd-422f-a59d-c0c2d5e120c6"; async function regSubmitRegistrationEmail(data) { const division = DIVISIONS.find(d => d.id === data.division); const total = regComputeTotal(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} (${REG_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: REG_WEB3FORMS_KEY, subject, from_name: "London LOGIC Basketball — Registration Form (Mobile)", "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 recommendDivisionId(grade) { const g = parseInt(grade, 10); if (g >= 11) return "elite"; if (g >= 9) return "performance"; if (g >= 7) return "development"; if (g >= 4) return "foundation"; if (g >= 1) return "rookie"; return null; } function RegisterPage({ onGo }) { const [step, setStep] = React.useState(0); const [data, setData] = React.useState(() => { let initialMode = "paid"; let initialDivision = ""; let initialWeeks = [1, 2, 3]; try { const stored = localStorage.getItem("ll_register_mode"); if (stored === "scholarship") { initialMode = "scholarship"; localStorage.removeItem("ll_register_mode"); } const div = localStorage.getItem("ll_register_division"); if (div) { initialDivision = div; localStorage.removeItem("ll_register_division"); } const w = localStorage.getItem("ll_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: initialDivision, 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 }; if (patch.selectedWeeks) { try { localStorage.setItem("ll_register_weeks", JSON.stringify(next.selectedWeeks)); } catch (e) {} } 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; }; // scroll to top on step change React.useEffect(() => { window.scrollTo({ top: 0, behavior: "smooth" }); }, [step, submitted]); if (submitted) return ; return (
{/* Hero */}
Registration · 2026 cohort

Reserve your spot.

120 spots total — 24 per division. We'll save your place once you complete the steps below.

{/* Mode toggle */}
{[ { v: "paid", lbl: "Paid Registration", sub: "1, 2, or 3 weeks", icon: "💳" }, { v: "scholarship", lbl: "Scholarship Application", sub: "1 of 10 fully-funded spots · free", icon: "★" }, ].map(o => { const on = data.mode === o.v; const isScholar = o.v === "scholarship"; return ( ); })}
{/* Scholarship banner */} {data.mode === "scholarship" && (
10
Applying for Scholarship · FREE
1 boy & 1 girl per division — full ride.

Awarded on need + character. Short answer in Step 4. Recipients announced mid-June.

)} {/* Stepper */}
i < step && setStep(i)}/>
{/* Step body */}
{step === 0 && } {step === 1 && } {step === 2 && } {step === 3 && } {step === 4 && }
{/* Submission error banner (above sticky nav) */} {submitError && (
Couldn't send. {submitError}
Try again, or email{" "} coach_ad@londonlogicbasketball.com{" "}directly.
)} {/* Sticky bottom nav */}
{step < REG_STEPS.length - 1 ? ( ) : ( )}
); } function RegStepper({ step, onJump }) { return (
{REG_STEPS.map((s, i) => { const done = i < step, on = i === step; return ( ); })}
); } /* ---------- STEPS ---------- */ function RegStepHead({ n, title }) { return (
Step {n}

{title}

); } function RegField({ label, value, onChange, type = "text", placeholder }) { return ( ); } function RegSelect({ label, value, onChange, options }) { return ( ); } function RegRadio({ label, value, onChange, options }) { return (
{label}
{options.map(([v, l]) => ( ))}
); } function RegCheck({ label, value, onChange }) { return ( ); } function RegStepAthlete({ data, update }) { return (
update({ firstName: v })}/> update({ lastName: v })}/> update({ grade: v })} options={["", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"]}/> update({ gender: v })} options={[["boys", "Boys"], ["girls", "Girls"]]}/>
); } function RegStepDivision({ data, update }) { const recId = recommendDivisionId(data.grade); const recommended = DIVISIONS.find(d => d.id === recId); return (
{recommended && (
Based on Grade {data.grade}, we recommend{" "} {recommended.name} LOGIC.
)}
{DIVISIONS.map(d => { const on = data.division === d.id; return ( ); })}
); } function RegStepSchedule({ data, update }) { const eliteOnly = data.division === "elite"; const division = DIVISIONS.find(d => d.id === data.division); const total = regComputeTotal(data.division, data.selectedWeeks); const allThree = data.selectedWeeks.length === 3; const showSponsor = data.mode !== "scholarship" && data.selectedWeeks.length >= 2; const toggleWeek = (n) => { const has = data.selectedWeeks.includes(n); const next = has ? data.selectedWeeks.filter(w => w !== n) : [...data.selectedWeeks, n].sort((a, b) => a - b); update({ selectedWeeks: next }); }; return (

Families may register for 1, 2, or 3 weeks. The full 3-week experience is recommended for the complete LOGIC pathway and best weekly value.

{[1, 2, 3].map(n => { const on = data.selectedWeeks.includes(n); return ( ); })}
{data.selectedWeeks.length === 0 && (
Select at least one week to continue.
)} {/* Live price summary — paid only */} {data.mode !== "scholarship" && (
{allThree && (
★ Best Value · Full LOGIC
)}
Your selection
Division {division ? `${division.name} LOGIC` : "—"}
Weeks {data.selectedWeeks.length === 0 ? "—" : data.selectedWeeks.length === 3 ? "All 3 weeks" : data.selectedWeeks.map(w => `Wk ${w}`).join(" + ")}
Total {total ? `$${total.toLocaleString()}` : "—"}
{!data.division && (
Choose a division in Step 02 to see your total.
)}
)} {showSponsor && (
Optional · Sponsor-a-Week
Can't make one of your weeks? Donate it.

If your athlete genuinely can't attend one of the weeks you've registered for, you can donate that week to a family in need — the spot funds a London athlete on scholarship instead of being lost.{" "} How it works →

{[ { v: null, label: "Attending all" }, ...data.selectedWeeks.map(w => ({ v: w, label: `Donate Week ${w}` })), ].map(o => { const on = data.donateWeek === o.v; return ( ); })}
)} {eliteOnly && (
Elite athletes
Aug 22 · Community Game

Included for all Elite registrants.

)}
); } function RegStepGuardian({ data, update }) { return (
update({ guardianName: v })}/> update({ phone: v })} type="tel"/> update({ email: v })} type="email"/>
{data.mode !== "scholarship" && (
Billing address · required

Used on your invoice and receipt.

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

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