/* ── Zafa — Vendor funnel: Verify → Create Account → Business Details → Choose plan ── */ /* numbered step list (shown on Become page) */ const VFLOW = [ ['phone', 'Verification', 'التحقق'], ['user', 'Create Account', 'إنشاء حساب'], ['store', 'Business Details', 'تفاصيل النشاط'], ['card', 'Choose Plan', 'اختر الباقة']]; /* progress dots for the funnel (4 steps) */ function VSteps({ i, n = 4 }) { return (
{Array.from({ length: n }).map((_, k) => )}
); } /* two-part tab stepper used inside Business Details */ function VTabSteps({ active, labels }) { const { lang } = useZafa(); return (
{labels.map(([en, ar], i) => { const on = i === active;const done = i < active; return (
{done ? : i + 1} {L(lang, en, ar)}
{i < labels.length - 1 && } ); })}
); } /* 0 ── Become a vendor (intro + 4-step summary) */ function VBecome({ onNext, onExit }) { const { lang } = useZafa(); return (
{L(lang, 'Grow your business', 'نمِّ نشاطك')}

{L(lang, 'List your services & reach thousands of couples', 'اعرض خدماتك وتواصل مع آلاف المقبلين على الزواج')}

{L(lang, 'A paid marketplace for wedding professionals. Just four quick steps to get published.', 'منصّة مدفوعة لمحترفي الأعراس. أربع خطوات سريعة لنشر ملفك.')}

{/* 4-step summary */}

{L(lang, 'How it works', 'كيف تعمل')}

{VFLOW.map(([ic, en, ar], i) =>
{i + 1} {i < VFLOW.length - 1 && }

{L(lang, en, ar)}

{L(lang, ['Verify by phone or email — or continue with Google / Apple.', 'Set your name, email & password.', 'Add company info, then upload your documents.', 'Pick Standard or Upper, pay, and go live.'][i], ['تحقّق عبر الهاتف أو البريد — أو تابع بجوجل / آبل.', 'حدّد اسمك وبريدك وكلمة المرور.', 'أضف معلومات الشركة ثم ارفع مستنداتك.', 'اختر الأساسية أو المتقدّمة، ادفع، وانطلق.'][i])}

)}
{L(lang, 'Get started', 'لنبدأ')}
); } /* ── Step 1: Phone OR Email verification (+ Google / Apple) ── */ function VVerify({ onNext, onBack }) { const { lang } = useZafa(); const [method, setMethod] = React.useState('phone'); // phone | email const [value, setValue] = React.useState(''); const [sent, setSent] = React.useState(false); const [code, setCode] = React.useState(''); const [status, setStatus] = React.useState('idle'); const N = 4; React.useEffect(() => { if (code.length === N) { setStatus('verifying'); const id = setTimeout(() => {if (code === '1234') onNext();else {setStatus('error');setTimeout(() => {setCode('');setStatus('idle');}, 1100);}}, 850); return () => clearTimeout(id); } }, [code]); const valid = method === 'phone' ? value.replace(/\D/g, '').length >= 9 : /\S+@\S+\.\S+/.test(value); return (
{!sent && }
{!sent ? <>

{L(lang, 'Let\u2019s verify you', 'لنتحقّق منك')}

{L(lang, 'Verify with your phone or email to continue.', 'تحقّق عبر هاتفك أو بريدك للمتابعة.')}

{/* method toggle */}
{method === 'phone' ?
🇦🇪+971
setValue(e.target.value.replace(/\D/g, '').slice(0, 9))} placeholder="50 123 4567" style={{ direction: 'ltr', textAlign: lang === 'ar' ? 'right' : 'left' }} />
: setValue(e.target.value)} placeholder="name@business.com" style={{ direction: 'ltr', textAlign: lang === 'ar' ? 'right' : 'left' }} /> }
{/* social login */}
{L(lang, 'or continue with', 'أو تابع عبر')}
: <>

{L(lang, 'Enter the code', 'أدخل الرمز')}

{L(lang, 'We sent a 4-digit code to', 'أرسلنا رمزاً من ٤ أرقام إلى')} {method === 'phone' ? '+971 ' + value : value}

{Array.from({ length: N }).map((_, i) => { const ch = code[i];const active = i === code.length && status !== 'verifying';const err = status === 'error'; return
{ch || ''}
; })}
{status === 'verifying' && <>{L(lang, 'Verifying…', 'جارٍ التحقق…')}} {status === 'error' && {L(lang, 'Wrong code. Try again.', 'رمز خاطئ. حاول مجدداً.')}} {status === 'idle' && }
{L(lang, 'Demo code — use 1234', 'رمز التجربة — ١٢٣٤')}
status !== 'verifying' && setCode((c) => (c + k).slice(0, N))} onBack={() => setCode((c) => c.slice(0, -1))} />
}
{!sent &&
setSent(true)}>{L(lang, 'Send code', 'إرسال الرمز')}
}
); } /* ── Step 2: Create Account ── */ function VCreateAccount({ onNext, onBack }) { const { lang } = useZafa(); const [f, setF] = React.useState({ name: '', email: '', phone: '', pw: '', cpw: '' }); const [waToggle, setWaToggle] = React.useState(true); const [agree, setAgree] = React.useState(false); const [done, setDone] = React.useState(false); const set = (k) => (e) => setF((s) => ({ ...s, [k]: e.target.value })); const valid = f.name.trim() && /\S+@\S+\.\S+/.test(f.email) && f.phone.trim() && f.pw.length >= 6 && f.pw === f.cpw && agree; if (done) { return (

{L(lang, 'Account created!', 'تم إنشاء الحساب!')}

{L(lang, 'Welcome aboard. Next, tell us about your business.', 'أهلاً بك. التالي، أخبرنا عن نشاطك.')}

{L(lang, 'Add business details', 'أضف تفاصيل النشاط')}
); } return (
{f.cpw && f.pw !== f.cpw && {L(lang, 'Passwords don\u2019t match', 'كلمتا المرور غير متطابقتين')}} {/* terms checkbox */}
setDone(true)}>{L(lang, 'Sign Up', 'إنشاء الحساب')}
); } /* upload row for documents */ function VUpload({ id, label, optional }) { const { lang } = useZafa(); return (

{label} {optional && · {L(lang, 'optional', 'اختياري')}}

{L(lang, 'Tap or drag to upload', 'اضغط أو اسحب للرفع')}
); } /* ── Step 3: Business Details (2 parts) ── */ function VBusiness({ onNext, onBack, profile, setProfile }) { const { lang } = useZafa(); const [part, setPart] = React.useState(0); // 0 = details, 1 = documents const labels = [['Business Details', 'تفاصيل النشاط'], ['Verification & Documents', 'التحقق والمستندات']]; const [b, setB] = React.useState(profile.biz || { company: '', cats: ['flowers'], license: '', desc: '', web: '', years: '', building: '', city: 'Dubai', post: '', region: '' }); const [pick, setPick] = React.useState('photography'); const set = (k) => (e) => setB((s) => ({ ...s, [k]: e.target.value })); const addCat = () => setB((s) => s.cats.includes(pick) ? s : { ...s, cats: [...s.cats, pick] }); const removeCat = (id) => setB((s) => ({ ...s, cats: s.cats.filter((x) => x !== id) })); const p1valid = b.company.trim() && b.license.trim() && b.city.trim() && b.cats.length > 0; return (
setPart(0)} />
{part === 0 ?

{L(lang, 'Company logo', 'شعار الشركة')}

{L(lang, 'Upload your logo', 'ارفع شعارك')}

{L(lang, 'PNG or JPG · square works best', 'PNG أو JPG · يُفضّل مربّع')}

{/* chosen categories */} {b.cats.length > 0 &&
{b.cats.map((id) => {const c = catOf(id) || CATEGORIES[0];return ( {L(lang, c.en, c.ar)} ); })}
}