/* Callback section + Footer */ // ─── Validation helpers ──────────────────────────────────────────────────────── function isValidPhone(raw) { const p = raw.replace(/[\s\-\.]/g, ''); return /^(06|07)\d{8}$/.test(p) || /^\+212[67]\d{8}$/.test(p) || /^00212[67]\d{8}$/.test(p); } function isValidEmail(v) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v); } // ─── Error label style ───────────────────────────────────────────────────────── const ErrStyle = { display: 'block', color: 'var(--danger)', fontSize: 12, fontWeight: 700, marginTop: 4, }; // ─── CallbackSection ─────────────────────────────────────────────────────────── function CallbackSection({ t, lang, onWA }) { const c = t.callbackSection; const f = c.form; const EMPTY = { name: '', phone: '', email: '', city: '', activity: '', prefLang: lang === 'ar' ? 'ar' : 'fr', msg: '', consent: false, _hp: '', // honeypot }; const [data, setData] = React.useState(EMPTY); const [errs, setErrs] = React.useState({}); const [status, setStatus] = React.useState('idle'); // idle | loading | success | error const [errMsg, setErrMsg] = React.useState(''); const [waData, setWaData] = React.useState(null); const loadTime = React.useRef(Date.now()); // Sync default lang on language switch React.useEffect(() => { setData(d => ({ ...d, prefLang: lang === 'ar' ? 'ar' : 'fr' })); }, [lang]); const upd = (k) => (e) => { const v = e.target.type === 'checkbox' ? e.target.checked : e.target.value; setData(d => ({ ...d, [k]: v })); if (errs[k]) setErrs(er => ({ ...er, [k]: '' })); }; const validate = () => { const e = {}; const isFr = lang === 'fr'; if (!data.name.trim()) e.name = isFr ? 'Nom obligatoire' : 'الاسم مطلوب'; if (!data.phone.trim()) e.phone = isFr ? 'Téléphone obligatoire' : 'رقم الهاتف مطلوب'; else if (!isValidPhone(data.phone)) e.phone = isFr ? 'Format invalide — ex : 06XXXXXXXX ou +2126XXXXXXXX' : 'صيغة غير صحيحة — مثال: 06XXXXXXXX'; if (data.email && !isValidEmail(data.email)) e.email = isFr ? 'Email invalide' : 'البريد الإلكتروني غير صحيح'; if (!data.city.trim()) e.city = isFr ? 'Ville obligatoire' : 'المدينة مطلوبة'; if (!data.activity) e.activity = isFr ? 'Type de commerce obligatoire' : 'نوع التجارة مطلوب'; if (!data.consent) e.consent = isFr ? 'Veuillez accepter pour continuer' : 'الموافقة مطلوبة للمتابعة'; return e; }; const submit = async (e) => { e.preventDefault(); // Anti-spam: honeypot if (data._hp) return; // Anti-spam: minimum delay (3 s) if (Date.now() - loadTime.current < 3000) return; const validErrs = validate(); if (Object.keys(validErrs).length > 0) { setErrs(validErrs); // Scroll to first error const first = document.querySelector('.cb-form .fld-err'); if (first) first.scrollIntoView({ behavior: 'smooth', block: 'center' }); return; } setStatus('loading'); setErrMsg(''); const leadPayload = { full_name: data.name.trim(), phone: data.phone.replace(/[\s\-\.]/g, ''), email: data.email.trim() || null, business_type: data.activity, city: data.city.trim(), message: data.msg.trim() || null, preferred_language: data.prefLang, consent_contact: true, _hp: data._hp, // honeypot (devrait être vide) _t: loadTime.current, // timestamp chargement page → anti-spam serveur }; try { const apiUrl = (window.CB3?.apiUrl ?? CB3?.apiUrl ?? ''); const res = await fetch(apiUrl + '/api/leads', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(leadPayload), }); const json = await res.json().catch(() => ({})); if (!res.ok) throw new Error(json.error || `Erreur ${res.status}`); setWaData(leadPayload); setStatus('success'); } catch (err) { console.error('[CB3] Submit error:', err); setStatus('error'); setErrMsg(f.errorMsg); } }; const openWAAfterSubmit = () => { if (!waData) return; const lines = [ lang === 'fr' ? 'Bonjour, je souhaite être rappelé pour ClickBi3.' : 'سلام، بغيت شي حد من ClickBi3 يعاود ليا.', `${lang === 'fr' ? 'Nom' : 'الاسم'} : ${waData.full_name}`, `${lang === 'fr' ? 'Téléphone' : 'الهاتف'} : ${waData.phone}`, `${lang === 'fr' ? 'Type de commerce' : 'نوع التجارة'} : ${waData.business_type}`, `${lang === 'fr' ? 'Ville' : 'المدينة'} : ${waData.city}`, waData.message ? `${lang === 'fr' ? 'Message' : 'رسالة'} : ${waData.message}` : null, ].filter(Boolean).join('\n'); window.open( `https://wa.me/${(window.CB3 || CB3).whatsappPhone || '212662777525'}?text=${encodeURIComponent(lines)}`, '_blank' ); }; const resetForm = () => { setData({ ...EMPTY, prefLang: lang === 'ar' ? 'ar' : 'fr' }); setErrs({}); setStatus('idle'); setErrMsg(''); loadTime.current = Date.now(); }; return (
{c.eyebrow}

{c.title}

{c.lead}

{/* ── Side info ── */}

{c.side.title}

    {c.side.items.map((it, i) => (
  • {I.check()}{it}
    • ))}
{/* ── Form card ── */}
{status === 'success' ? ( /* ── Success state ── */
{I.check()}

{f.sentTitle}

{f.sentSub}

) : ( /* ── Form state ── */

{f.title}

{f.sub}

{/* Honeypot — invisible aux humains, bots le remplissent */}
{/* Nom */}
{errs.name && {errs.name}}
{/* Téléphone */}
{errs.phone && {errs.phone}}
{/* Email */}
{errs.email && {errs.email}}
{/* Ville */}
{errs.city && {errs.city}}
{/* Type de commerce */}
{errs.activity && {errs.activity}}
{/* Langue préférée */}
{[['fr', f.langFr], ['ar', f.langAr]].map(([val, lbl]) => ( ))}
{/* Message */}