{[1,2,3,4].map(i => (

))}

{labels[score]}

); } /* ── Social / OAuth button ────────────────────────────────── */ function OAuthBtn({ icon, label, onClick }) { const [hover, setHover] = React.useState(false); return ( ); } const GoogleIcon = () => ( ); /* ══════════════════════════════════════════════════════════ AuthPage — main component ════════════════════════════════════════════════════════════ */ function AuthPage({ initialMode = 'signin', redirectTo }) { const { signIn, signUp, nav } = useStore(); const [mode, setMode] = React.useState(initialMode); // signin | signup | reset | magic | sent const [loading, setLoading] = React.useState(false); // Sign in state const [siEmail, setSiEmail] = React.useState(''); const [siPass, setSiPass] = React.useState(''); const [siErr, setSiErr] = React.useState({}); // Sign up state const [suFirst, setSuFirst] = React.useState(''); const [suLast, setSuLast] = React.useState(''); const [suEmail, setSuEmail] = React.useState(''); const [suPass, setSuPass] = React.useState(''); const [suConf, setSuConf] = React.useState(''); const [suErr, setSuErr] = React.useState({}); // Reset state const [rstEmail, setRstEmail] = React.useState(''); const [rstErr, setRstErr] = React.useState(''); // Magic link const [mgEmail, setMgEmail] = React.useState(''); const fake = (ms = 1200) => new Promise(r => setTimeout(r, ms)); /* ── Handlers ── */ const handleSignIn = async (e) => { e.preventDefault(); const errs = {}; if (!siEmail.includes('@')) errs.email = 'Please enter a valid email address.'; if (!siPass) errs.pass = 'Password is required.'; if (Object.keys(errs).length) { setSiErr(errs); return; } setSiErr({}); setLoading(true); await fake(); signIn({ email: siEmail, name: siEmail.split('@')[0] }); setLoading(false); nav(redirectTo || 'account'); }; const handleSignUp = async (e) => { e.preventDefault(); const errs = {}; if (!suFirst.trim()) errs.first = 'First name is required.'; if (!suEmail.includes('@')) errs.email = 'Please enter a valid email address.'; if (suPass.length < 8) errs.pass = 'Password must be at least 8 characters.'; if (suPass !== suConf) errs.conf = 'Passwords do not match.'; if (Object.keys(errs).length) { setSuErr(errs); return; } setSuErr({}); setLoading(true); await fake(); signUp({ firstName: suFirst, lastName: suLast, email: suEmail, name: `${suFirst} ${suLast}`.trim() }); setLoading(false); nav(redirectTo || 'account'); }; const handleReset = async (e) => { e.preventDefault(); if (!rstEmail.includes('@')) { setRstErr('Please enter a valid email address.'); return; } setRstErr(''); setLoading(true); await fake(); setLoading(false); setMode('sent'); }; const handleMagic = async (e) => { e.preventDefault(); if (!mgEmail.includes('@')) return; setLoading(true); await fake(); setLoading(false); setMode('sent'); }; /* ── Layout shell ── */ return (

{/* Left: decorative panel */}

{/* Logo */} {/* Headline */}

Every celebration
made to order.

Create an account to track your orders, save favourites, and check out faster.

{[ ['Track every order', 'From received to delivered — always know where your pieces are.'], ['Save your wishlist', 'Curate your categories and revisit anytime.'], ['Faster checkout', 'Saved details mean less typing, more celebrating.'], ].map(([t, d]) => (

{t}

{d}

))}

{/* Footer */}

{/* Right: form panel */}

{/* ── SIGN IN ── */} {mode === 'signin' && (

Welcome back

Sign in

New here?{' '}

{/* OAuth */} } label="Continue with Google" onClick={() => {}} />

setSiEmail(e.target.value)} placeholder="you@email.com" autocomplete="email" required error={siErr.email} /> setSiPass(e.target.value)} placeholder="••••••••" autocomplete="current-password" required error={siErr.pass} rightSlot={} />

By signing in you agree to our{' '} {' & '} .

)} {/* ── SIGN UP ── */} {mode === 'signup' && (

Join us

Create an account

Already have one?{' '}

} label="Sign up with Google" onClick={() => {}} />

setSuFirst(e.target.value)} placeholder="Alex" autocomplete="given-name" required error={suErr.first} /> setSuLast(e.target.value)} placeholder="Morgan" autocomplete="family-name" />

setSuEmail(e.target.value)} placeholder="you@email.com" autocomplete="email" required error={suErr.email} />

setSuPass(e.target.value)} placeholder="8+ characters" autocomplete="new-password" required error={suErr.pass} />

setSuConf(e.target.value)} placeholder="Re-enter password" autocomplete="new-password" required error={suErr.conf} />

By creating an account you agree to our{' '} {' & '} .

)} {/* ── RESET ── */} {mode === 'reset' && (

Reset your password

Enter the email address associated with your account and we'll send a reset link.

setRstEmail(e.target.value)} placeholder="you@email.com" autocomplete="email" required error={rstErr} /> )} {/* ── MAGIC LINK ── */} {mode === 'magic' && (

Sign in with a magic link

No password needed. We'll email you a secure one-click sign-in link.

setMgEmail(e.target.value)} placeholder="you@email.com" autocomplete="email" required /> )} {/* ── EMAIL SENT ── */} {mode === 'sent' && (

Check your inbox

Email sent!

We've sent a link to your inbox. It will expire in 10 minutes. Don't forget to check your spam folder.

)}

{/* Responsive: stack on mobile */}

); } /* ── AuthGate ───────────────────────────────────────────── Wrap any page — if not signed in, show sign-in prompt ────────────────────────────────────────────────────────── */ function AuthGate({ children, redirectTo }) { const { user, nav } = useStore(); if (user) return children; return (

Members only

Sign in to continue

Please sign in or create a free account to access this page.

); } Object.assign(window, { AuthPage, AuthGate });