/* ── Zafa — onboarding, role, phone/OTP, profile setup ──────────────── */
/* small EN/AR toggle */
function LangToggle({ dark }) {
const { lang, setLang } = useZafa();
return (
{['en', 'ar'].map((l) =>
)}
);
}
/* numeric keypad */
function Keypad({ onKey, onBack }) {
const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '', '0', 'del'];
return (
{keys.map((k, i) => {
if (k === '') return
;
const del = k === 'del';
return (
);
})}
{/* centered brand logo at top */}
})
{/* decorative floral watermark — right side, under the image */}
})
{/* hero arched art */}
{/* copy */}
{L(lang, s.eyebrowEn, s.eyebrowAr)}
{L(lang, s.titleEn, s.titleAr)}
{L(lang, s.bodyEn, s.bodyAr)}
{/* controls */}
{ONBOARDING.map((_, k) => setI(k)} style={{ display: 'block', height: 7, width: k === i ? 22 : 7, borderRadius: 99, background: k === i ? 'var(--rose)' : 'var(--line)', transition: 'all .25s', cursor: 'pointer' }} />)}
{t('whoSigning')}
{t('whoSub')}
{PERSONAS.map((p) => {
const on = sel === p.id;
return (
{on && p.id !== 'customer' &&
{t('comingSoon')}
}
);
})}
);
}
/* ── Phone entry ── */
function AuthPhone({ onNext, onBack }) {
const { lang, t } = useZafa();
const [num, setNum] = React.useState('');
const fmt = (n) => {const a = n.slice(0, 2),b = n.slice(2, 5),c = n.slice(5, 9);return [a, b, c].filter(Boolean).join(' ');};
const valid = num.length >= 9;
return (
} />
{t('phoneTitle')}
{t('phoneSub')}
🇦🇪+971
{num ? fmt(num) : t('phonePlaceholder')}
setNum((n) => (n + k).slice(0, 9))} onBack={() => setNum((n) => n.slice(0, -1))} />
onNext('+971 ' + fmt(num))} iconR="arrow">{t('sendCode')}
);
}
/* ── OTP ── */
function AuthOTP({ phone, onVerified, onBack }) {
const { lang, t } = useZafa();
const [code, setCode] = React.useState('');
const [status, setStatus] = React.useState('idle');
const [secs, setSecs] = React.useState(38);
const N = 4;
React.useEffect(() => {if (secs <= 0) return;const id = setTimeout(() => setSecs((s) => s - 1), 1000);return () => clearTimeout(id);}, [secs]);
React.useEffect(() => {
if (code.length === N) {
setStatus('verifying');
const id = setTimeout(() => {
if (code === '1234') onVerified();else
{setStatus('error');setTimeout(() => {setCode('');setStatus('idle');}, 1100);}
}, 950);
return () => clearTimeout(id);
}
}, [code]);
const err = status === 'error';
return (
{t('otpTitle')}
{t('otpSub')} {phone}
{Array.from({ length: N }).map((_, i) => {
const ch = code[i];const active = i === code.length && status !== 'verifying';
return (
{ch || (active ? : '')}
);
})}
{status === 'verifying' && <>{t('verifying')}}
{err && {t('wrongCode')}}
{status === 'idle' && (secs > 0 ?
{t('resendIn')} 0:{String(secs).padStart(2, '0')} :
)}
{L(lang, 'Demo code — use 1234', 'رمز التجربة — ١٢٣٤')}
status !== 'verifying' && setCode((c) => (c + k).slice(0, N))} onBack={() => setCode((c) => c.slice(0, -1))} />
);
}
/* ── Profile setup ── */
function ProfileSetup({ onDone }) {
const { lang, t } = useZafa();
const [name, setName] = React.useState('');
const [email, setEmail] = React.useState('');
const [date, setDate] = React.useState('');
const [city, setCity] = React.useState('Dubai');
return (
{/* avatar */}
{t('setupTitle')}
{t('setupSub')}
{/* basic info */}
{t('basicInfo')}
setName(e.target.value)} placeholder={L(lang, 'e.g. Sara Al Mansoori', 'مثال: سارة المنصوري')} />
setEmail(e.target.value)} placeholder="you@email.com" style={{ direction: 'ltr', textAlign: lang === 'ar' ? 'right' : 'left' }} />
{/* planning */}
{t('planningQ')}
{t('optional')}
{t('planningSub')}
{t('finish')}
);
}
function SetupField({ label, children }) {
return ;
}
Object.assign(window, { LangToggle, Keypad, Onboarding, RoleSelect, AuthPhone, AuthOTP, ProfileSetup, SetupField });