// login.jsx — splash + login screen — PoolGuyX brand function LoginScreen({ onLogin, lang='en', setLang }) { const t = STRINGS[lang]; const [mode, setMode] = React.useState('login'); // 'login' | 'signup' const [step, setStep] = React.useState(1); // 1 | 2 const [email, setEmail] = React.useState(''); const [pass, setPass] = React.useState(''); const [passConfirm, setPassConfirm] = React.useState(''); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(''); const [showPass, setShowPass] = React.useState(false); const [showPassC, setShowPassC] = React.useState(false); // Signup fields const [name, setName] = React.useState(''); const [phone, setPhone] = React.useState(''); const [region, setRegion] = React.useState(''); const [regionSearch, setRegionSearch] = React.useState(''); const [regionOpen, setRegionOpen] = React.useState(false); const FL = window.FL_COUNTIES || {}; // Build flat list of searchable items: county names + cities const regionItems = React.useMemo(() => { const items = []; Object.entries(FL).forEach(([county, cities]) => { items.push({ label: county + ' County', value: county + ' County', isCounty: true }); cities.forEach(city => items.push({ label: city + ', ' + county, value: city, isCounty: false })); }); return items; }, []); const filteredItems = regionSearch.trim().length > 0 ? regionItems.filter(i => i.label.toLowerCase().includes(regionSearch.toLowerCase())) : regionItems.slice(0, 20); // show first 20 when no search const canSubmit = email.trim().length > 3 && pass.trim().length >= 4; const handleLogin = async () => { if (!canSubmit || loading) return; setLoading(true); setError(''); try { if (!window.sb) throw new Error('No connection to database'); const { data, error: err } = await window.sb.auth.signInWithPassword({ email: email.trim(), password: pass }); if (err) throw err; onLogin(data.user); } catch(e) { setError(e.message || 'Login failed'); setLoading(false); } }; const goSignup = () => { setMode('signup'); setStep(1); }; const goLogin = () => { setMode('login'); setStep(1); }; const passMatch = pass.length >= 4 && passConfirm.length >= 4 && pass === passConfirm; const canStep1 = name.trim().length > 1 && email.trim().length > 3 && pass.trim().length >= 4 && passMatch; const canStep2 = phone.trim().length >= 9 && region !== ''; const handleSignup = async () => { if (!canStep2 || loading) return; setLoading(true); setError(''); try { if (!window.sb) throw new Error('No connection to database'); const { data, error: err } = await window.sb.auth.signUp({ email: email.trim(), password: pass }); if (err) throw err; await window.sb.from('profiles').insert({ id: data.user.id, name, phone, region, role: 'user' }); onLogin(data.user); } catch(e) { setError(e.message || 'Signup failed'); setLoading(false); } }; const langs = [ { id:'en', flag:'🇺🇸', short:'EN' }, { id:'pt', flag:'🇧🇷', short:'PT' }, { id:'es', flag:'🇪🇸', short:'ES' }, ]; // ── Flood Level icon — approved brand icon v2.0 ────────────── const FloodIcon = ({ size = 80 }) => { const u = 'li'; return ( P X P X ); }; return (
{/* ── Hero background — brand navy ── */}
{/* Subtle aqua glow top-right */}
{/* Decorative circles */}
{/* ── Language switcher ── */}
{langs.map(l => ( ))}
{/* ── Hero section ── */}
{/* Logo icon — Flood Level */}
{/* PoolGuyX wordmark */}
Pool Guy X
{/* Tagline with decorative lines */}
Your Pool. Our Priority.
{/* Subtitle */}

{t.loginSub}

{/* ── Wave SVG — aqua tones ── */}
{/* ── Form card ── */}
{/* ══ LOGIN MODE ══ */} {mode === 'login' && (<> {/* Email */}
EMAIL
setEmail(e.target.value)} onKeyDown={e=>e.key==='Enter'&&handleLogin()} placeholder="you@email.com" style={{height:48, fontSize:14}}/>
{/* Password */}
{t.passLbl.toUpperCase()}
setPass(e.target.value)} onKeyDown={e=>e.key==='Enter'&&handleLogin()} placeholder="••••••••" style={{height:48, fontSize:14, paddingRight:46}}/>
{error ?
{error}
: null}
{t.orLbl}
{t.noAccount}
)} {/* ══ SIGNUP MODE ══ */} {mode === 'signup' && (<> {/* Header */}
{lang==='pt'?'Criar conta':lang==='es'?'Crear cuenta':'Create account'}
{lang==='pt'?`Passo ${step} de 2`:lang==='es'?`Paso ${step} de 2`:`Step ${step} of 2`}
{/* Progress dots */}
{[1,2].map(i => (
))}
{/* ── Step 1: Name + Email + Password + Confirm Password ── */} {step === 1 && (<>
{lang==='pt'?'NOME COMPLETO':lang==='es'?'NOMBRE COMPLETO':'FULL NAME'}
setName(e.target.value)} placeholder={lang==='pt'?'Seu nome completo':lang==='es'?'Tu nombre completo':'Your full name'} style={{height:48, fontSize:14}}/>
EMAIL
setEmail(e.target.value)} placeholder="you@email.com" style={{height:48, fontSize:14}}/>
{t.passLbl.toUpperCase()}
setPass(e.target.value)} placeholder={lang==='pt'?'Mín. 4 caracteres':lang==='es'?'Mín. 4 caracteres':'Min. 4 characters'} style={{height:48, fontSize:14, paddingRight:46}}/>
{/* Confirm password */}
{lang==='pt'?'CONFIRMAR SENHA':lang==='es'?'CONFIRMAR CONTRASEÑA':'CONFIRM PASSWORD'}
{passConfirm.length >= 4 && ( {passMatch ? (lang==='pt'?'✓ Senhas iguais':lang==='es'?'✓ Contraseñas iguales':'✓ Passwords match') : (lang==='pt'?'✗ Senhas diferentes':lang==='es'?'✗ No coinciden':'✗ Passwords don\'t match')} )}
setPassConfirm(e.target.value)} placeholder="••••••••" style={{ height:48, fontSize:14, paddingRight:46, borderColor: passConfirm.length >= 4 ? (passMatch ? 'var(--pg-green-500,#22c55e)' : 'var(--pg-red-400,#f87171)') : undefined, }}/>
)} {/* ── Step 2: Phone + Region (searchable) ── */} {step === 2 && (<>
{lang==='pt'?'TELEFONE':lang==='es'?'TELÉFONO':'PHONE'}
{ const digits = e.target.value.replace(/\D/g, '').slice(0, 10); let fmt = digits; if (digits.length >= 7) fmt = '(' + digits.slice(0,3) + ') ' + digits.slice(3,6) + '-' + digits.slice(6); else if (digits.length >= 4) fmt = '(' + digits.slice(0,3) + ') ' + digits.slice(3); else if (digits.length > 0) fmt = '(' + digits; setPhone(fmt); }} placeholder="(954) 000-0000" style={{height:48, fontSize:14}}/>
{/* Searchable region picker */}
{lang==='pt'?'REGIÃO / CIDADE':lang==='es'?'REGIÓN / CIUDAD':'REGION / CITY'}
{/* Selected region chip */} {region && (
{region}
)} {/* Search input */}
{setRegionSearch(e.target.value); setRegionOpen(true);}} onFocus={()=>setRegionOpen(true)} placeholder={lang==='pt'?'Buscar cidade ou condado…':lang==='es'?'Buscar ciudad o condado…':'Search city or county…'} style={{height:44, fontSize:13.5, paddingLeft:34}} />
{/* Dropdown */} {regionOpen && (
{filteredItems.length === 0 ? (
{lang==='pt'?'Nenhum resultado':lang==='es'?'Sin resultados':'No results'}
) : filteredItems.map((item, idx) => ( ))}
)}
{/* Close dropdown on outside click */} {regionOpen && (
setRegionOpen(false)}/> )}
{error ?
{error}
: null} )}
{lang==='pt'?'Já tem conta? ':lang==='es'?'¿Ya tienes cuenta? ':'Already have an account? '}
)}
); } Object.assign(window, { LoginScreen });