/* global React */ const { useState, useEffect, useMemo, useRef } = React; // ============ Icons ============ const Icon = { arrow: () => , back: () => , check: () => , pulse: () => , spark: () => , shield: () => , copy: () => , x: () => , link: () => , msg: () => , lock: () => , bolt: () => , crown: () => , phone: () => , community: () => , }; // ============ Sport chips ============ const SPORTS = [ { id: 'soccer', name: 'Soccer' }, { id: 'basketball', name: 'Basketball' }, { id: 'football', name: 'Football' }, { id: 'tennis', name: 'Tennis' }, { id: 'baseball', name: 'Baseball' }, { id: 'volleyball', name: 'Volleyball' }, { id: 'rugby', name: 'Rugby' }, { id: 'running', name: 'Running / Track' }, { id: 'cycling', name: 'Cycling' }, { id: 'mma', name: 'MMA / Combat' }, { id: 'swimming', name: 'Swimming' }, { id: 'golf', name: 'Golf' }, { id: 'hockey', name: 'Hockey' }, { id: 'other', name: 'Other' }, ]; const LEVELS = [ { id: 'amateur', name: 'Amateur', meta: 'Train hard. Play for the love.' }, { id: 'semipro', name: 'Semi-Pro', meta: 'Competing at a high level.' }, { id: 'pro', name: 'Professional', meta: 'Pro contract. Pro standards.' }, { id: 'ncaa', name: 'NCAA / College', meta: 'Division I, II or III athlete.' }, { id: 'academy', name: 'Academy / Youth', meta: 'Club academy or development.' }, ]; const WEARABLES = [ { id: 'apple', name: 'Apple Watch', meta: 'Series 6+ / Ultra' }, { id: 'whoop', name: 'WHOOP', meta: '4.0 / MG band' }, { id: 'garmin', name: 'Garmin', meta: 'Forerunner · Fenix · Venu' }, { id: 'oura', name: 'Oura Ring', meta: 'Gen 3 · Gen 4' }, { id: 'polar', name: 'Polar', meta: 'Vantage · H10' }, { id: 'none', name: 'None yet', meta: 'I track manually.' }, ]; const wearableIcon = (id) => { const C = "currentColor"; switch (id) { case 'apple': return ; case 'whoop': return ; case 'garmin': return ; case 'oura': return ; case 'polar': return ; case 'none': return ; default: return null; } }; // ============ Steps ============ const STEPS = [ { id: 'identity', eyebrow: 'Step 01 · Identity' }, { id: 'sport', eyebrow: 'Step 02 · Sport' }, { id: 'level', eyebrow: 'Step 03 · Level' }, { id: 'wearable', eyebrow: 'Step 04 · Hardware' }, { id: 'why', eyebrow: 'Step 05 · Motive' }, { id: 'contact', eyebrow: 'Step 06 · Community' }, ]; // ============ WaitlistForm ============ function WaitlistForm({ onSubmit, submitting, submitError }) { const [step, setStep] = useState(0); const [data, setData] = useState({ name: '', email: '', sport: '', sportOther: '', level: '', wearable: '', why: '', phone: '', }); const setField = (k, v) => setData(d => ({ ...d, [k]: v })); const canAdvance = useMemo(() => { switch (STEPS[step].id) { case 'identity': return data.name.trim().length >= 2 && /\S+@\S+\.\S+/.test(data.email); case 'sport': return data.sport && (data.sport !== 'other' || data.sportOther.trim().length > 1); case 'level': return !!data.level; case 'wearable': return !!data.wearable; case 'why': return data.why.trim().length >= 8; case 'contact': return true; default: return false; } }, [step, data]); const next = () => { if (!canAdvance) return; if (step < STEPS.length - 1) setStep(step + 1); else onSubmit(data); }; const back = () => step > 0 && setStep(step - 1); useEffect(() => { const onKey = (e) => { if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA') { e.preventDefault(); next(); } }; window.addEventListener('keydown', onKey); return () => window.removeEventListener('keydown', onKey); }); const cur = STEPS[step]; return (
// Waitlist · Founding 100
{String(step + 1).padStart(2, '0')} / {String(STEPS.length).padStart(2, '0')}
{STEPS.map((s, i) => (
))}
{cur.eyebrow}
{step === 0 && } {step === 1 && } {step === 2 && } {step === 3 && } {step === 4 && } {step === 5 && }
{submitError && (
{submitError}
)}
PRESS ENTER TO CONTINUE
); } // ============ Step components ============ function StepIdentity({ data, setField }) { return ( <>

Welcome, athlete. What do we call you?

We'll use your name for early access invites and your email to send your onboarding kit. No spam — only when LE-G3N is ready for you.

setField('name', e.target.value)} placeholder="Sofía Hernández" autoFocus />
setField('email', e.target.value)} placeholder="you@team.com" />
); } function StepSport({ data, setField }) { return ( <>

Your sport defines your recovery curve.

LE-G3N adapts its HRV models, load thresholds and game-day protocols to your discipline. Pick the one you compete in most.

{SPORTS.map(s => ( ))}
{data.sport === 'other' && (
setField('sportOther', e.target.value)} placeholder="e.g. Padel, Squash, Climbing…" autoFocus />
)} ); } function StepLevel({ data, setField }) { return ( <>

How seriously do you compete?

Only 100 athletes get in. We prioritize founding access by intensity — but every level shapes the product. Your answer here tells us where your data fits in the model.

{LEVELS.map(l => ( ))}
); } function StepWearable({ data, setField }) { return ( <>

What's on your wrist?

HRV, sleep and load data pipe straight into LE-G3N. Tell us your hardware so we can have your dashboard live the moment you sign in.

{WEARABLES.map(w => ( ))}
); } function StepWhy({ data, setField }) { return ( <>

Why does LE-G3N matter to you?

One or two sentences. What problem are you trying to solve — overtraining, injury recovery, game-day readiness, edge over rivals? Your words shape what we build first.