/* Screens 1-4 + helpers, i18n-aware */ // ═════════════════════════════════════════════════════════ // SCREEN 1 — Language Selector // ═════════════════════════════════════════════════════════ function ScreenLanguage({ navigate, state, setState, t, setLang }) { const langs = [ { code: 'en', label: 'English', flag: '🇬🇧' }, { code: 'es', label: 'Español', flag: '🇪🇸' }, { code: 'it', label: 'Italiano', flag: '🇮🇹' }, { code: 'fr', label: 'Français', flag: '🇫🇷' }, ]; const pick = (c) => { setLang(c); setState(s => ({ ...s, lang: c })); setTimeout(() => navigate('activity'), 180); }; return (
{[...Array(14)].map((_, i) => (
))}
Atlas
ATLANTIS
DIVING LANZAROTE
{t('welcome')}
{t('chooseLang')}
{t('chooseLangSub')}
{langs.map(l => ( ))}
atlantislanzarote.com
); } // ═════════════════════════════════════════════════════════ // SCREEN 2 — Activity Type // ═════════════════════════════════════════════════════════ function ScreenActivity({ navigate, state, setState, t }) { const pick = (type) => { setState(s => ({ ...s, activity: type })); setTimeout(() => navigate('personal'), 150); }; return (
navigate('language')} />
ATLANTIS DIVING LANZAROTE
{t('step01')}

{t('whatToday')}

{t('whatTodaySub')}

pick('beginner')} label={t('beginnerLabel')} title={t('beginnerTitle')} desc={t('beginnerDesc')} tag={t('beginnerTag')} icon={} /> pick('advanced')} label={t('advancedLabel')} title={t('advancedTitle')} desc={t('advancedDesc')} tag={t('advancedTag')} icon={} />
💡
{t('notSure')} {t('notSureBody')}
); } function ActivityCard({ bg, onClick, label, title, desc, icon, accent, tag }) { return ( ); } function MaskIcon() { return ( ); } function FinIcon() { return ( ); } // ═════════════════════════════════════════════════════════ // SCREEN 3 — Personal // ═════════════════════════════════════════════════════════ function ScreenPersonal({ navigate, state, setState, t }) { const [focused, setFocused] = React.useState(null); const p = state.personal || {}; const set = (k, v) => setState(s => ({ ...s, personal: { ...s.personal, [k]: v } })); const filled = p.firstName && p.lastName && p.email && p.dob && p.emName && p.emPhone; const isAdv = state.activity === 'advanced'; const totalSteps = isAdv ? 6 : 5; return (
navigate('activity')} step={1} totalSteps={totalSteps} label={`${t('continue')} · 1/5`} />
setFocused(null)}>
{t('personal')}

{t('personalTitle')}

{t('personalSub')}

set('firstName', v)} placeholder="Maya" filled={!!p.firstName} onFocus={e => { e.stopPropagation(); setFocused('firstName'); }}/> set('lastName', v)} placeholder="Ruiz" filled={!!p.lastName} onFocus={e => { e.stopPropagation(); setFocused('lastName'); }}/>
set('email', v)} placeholder="maya@mail.com" filled={!!p.email} icon={} onFocus={e => { e.stopPropagation(); setFocused('email'); }}/> set('dob', v)}/>
set('phone', v)} placeholder="612 345 678" filled={!!p.phone}/>
set('emName', v)} placeholder={t('partnerPlaceholder')} filled={!!p.emName}/> set('emPhone', v)} placeholder="+34 612 345 678" filled={!!p.emPhone}/>
{focused && }
); } // ═════════════════════════════════════════════════════════ // SCREEN 4 — Physical // ═════════════════════════════════════════════════════════ function ScreenPhysical({ navigate, state, setState, t }) { const ph = state.physical || { height: 170, weight: 70, shoe: '42' }; const set = (k, v) => setState(s => ({ ...s, physical: { ...s.physical, [k]: v } })); const isAdv = state.activity === 'advanced'; const totalSteps = isAdv ? 6 : 5; const shoeSizes = []; for (let i = 35; i <= 47; i++) shoeSizes.push(String(i)); return (
navigate('personal')} step={2} totalSteps={totalSteps} label={`${t('physical')} · 2/5`} />
{t('physical')}

{t('physicalTitle')}

{t('physicalSub')}

{t('atlasSays')} {t('atlasSaysBody')}
{ph.height}
cm
set('height', v)}/>
{ph.weight}
kg
set('weight', v)}/>
{shoeSizes.map(s => ( ))}
{t('suggestedSuit')}
{suggestSuit(ph.height, ph.weight)}
{t('canaryWater')}
20–23 °C
 ); } function HeightScale({ value, onChange }) { const min = 120, max = 220; const pct = ((value - min) / (max - min)) * 100; return (
{[140, 170, 200].map(m => (
{m}
))} onChange(Number(e.target.value))} style={{ position: 'absolute', top: 6, left: -4, right: -4, width: 'calc(100% + 8px)', height: 20, opacity: 0, cursor: 'pointer', margin: 0 }}/>
); } function WeightScale({ value, onChange }) { const min = 35, max = 180; const pct = ((value - min) / (max - min)) * 100; return (
{[50, 80, 110, 140].map(m => (
{m}
))} onChange(Number(e.target.value))} style={{ position: 'absolute', top: 6, left: -4, right: -4, width: 'calc(100% + 8px)', height: 20, opacity: 0, cursor: 'pointer', margin: 0 }}/>
); } function suggestSuit(h, w) { if (h < 160 && w < 65) return 'XS / S'; if (h < 170 && w < 75) return 'S / M'; if (h < 180 && w < 85) return 'M / L'; if (h < 190 && w < 95) return 'L / XL'; return 'XL / XXL'; } Object.assign(window, { ScreenLanguage, ScreenActivity, ScreenPersonal, ScreenPhysical, suggestSuit, });