{STEPS.map((s, i) => (

step ? '1.5px solid #ccc' : 'none', }}> {i < step ? '✓' : i + 1}

{s[lang] || s.en}

{i < STEPS.length - 1 && (

)} ))}

); } /* ── Icon tile card ──────────────────────────────────────── */ function Tile({ iconKey, label, active, onClick }) { return ( ); } /* ── Budget row ──────────────────────────────────────────── */ function BudgetRow({ label, active, onClick }) { return ( ); } /* ── Input field wrapper ─────────────────────────────────── */ function Field({ label, children }) { return (

{label} {children}

); } const inp = { width: '100%', padding: '12px 16px', borderRadius: 10, border: '1.5px solid #e2ddd6', fontFamily: 'inherit', fontSize: 14, background: '#fff', color: '#2A1F1A', boxSizing: 'border-box', outline: 'none' }; /* ── Done screen ─────────────────────────────────────────── */ function DoneScreen({ lang, data, onHome }) { const ar = lang === 'ar'; const occ = OCCASIONS.find(o => o.id === data.occasion); const bud = BUDGETS.find(b => b.id === data.budget); const waText = encodeURIComponent(`Hello Saraya Events!\n\nI'd like a quote for:\nOccasion: ${occ?.[lang]||data.occasion}\nServices: ${data.services.join(', ')}\nBudget: ${bud?.[lang]||''}\nName: ${data.name}\nPhone: ${data.phone}`); return (

{ar ? 'تم إرسال طلبك!' : 'Request received!'}

{ar ? 'سيتواصل معك فريق سرايا خلال 24 ساعة.' : 'The Saraya team will be in touch within 24 hours.'}

💬 {ar ? 'واتساب' : 'WhatsApp us'}

); } /* ── Main wizard ─────────────────────────────────────────── */ function QuoteWizard() { const lang = getLang(); const ar = lang === 'ar'; const [step, setStep] = useState(0); const [done, setDone] = useState(false); const [submitting, setSub] = useState(false); const [data, setData] = useState({ occasion: '', venue: '', services: [], budget: '', name: '', phone: '', email: '', date: '', notes: '' }); const set = useCallback((k, v) => setData(p => ({ ...p, [k]: v })), []); const toggleSvc = useCallback((id) => setData(p => ({ ...p, services: p.services.includes(id) ? p.services.filter(x => x !== id) : [...p.services, id] })), []); const canNext = [ () => !!data.occasion, () => !!data.venue, () => data.services.length > 0, () => !!data.budget, () => !!data.name && !!data.phone, ][step]?.() ?? false; const goHome = () => { location.hash = '#home'; }; const goBack = () => { if (step === 0) goHome(); else setStep(s => s - 1); }; const submit = async () => { setSub(true); try { if (window.SarayaDB) { const occ = OCCASIONS.find(o => o.id === data.occasion); const bud = BUDGETS.find(b => b.id === data.budget); await window.SarayaDB.from('leads').insert({ name: data.name, phone: data.phone, email: data.email || null, service: occ?.en || data.occasion, event_date: data.date || null, budget: bud?.en || '', notes: `Venue: ${data.venue}\nServices: ${data.services.join(', ')}\n${data.notes}`, source: 'quote_wizard', status: 'new' }); } } catch (_) {} try { if (typeof gtag === 'function') gtag('event', 'generate_lead', { event_label: data.occasion }); } catch (_) {} setSub(false); setDone(true); }; if (done) return (

); const H1 = { fontFamily: 'var(--font-display, Georgia, serif)', fontSize: 'clamp(30px,4vw,46px)', fontWeight: 400, color: '#2A1F1A', margin: '36px 0 6px', lineHeight: 1.15 }; const SUB = { fontSize: 14, color: 'var(--gold,#C9A961)', margin: '0 0 32px', fontWeight: 500 }; const G4 = { display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12 }; const G3 = { display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }; function NavBar() { return (

{step < STEPS.length - 1 ? ( ) : ( )}

); } return (

{step === 0 && (<>

{ar ? 'ما المناسبة؟' : 'What are we celebrating?'}

{ar ? 'اختر نوع المناسبة.' : 'Pick the type of event.'}

{OCCASIONS.map(o => set('occasion',o.id)} />)}

)} {step === 1 && (<>

{ar ? 'أين ستُقام؟' : 'Where will it be?'}

{ar ? 'اختر نوع المكان.' : 'Choose a venue type.'}

{VENUES.map(v => set('venue',v.id)} />)}

)} {step === 2 && (<>

{ar ? 'ماذا تحتاج؟' : 'What do you need?'}

{ar ? 'اختر كل ما ينطبق.' : 'Select all that apply.'}

{SERVICES.map(s => toggleSvc(s.id)} />)}

)} {step === 3 && (<>

{ar ? 'الميزانية والتاريخ' : 'Budget & date'}

{ar ? 'تقدير تقريبي يساعدنا على التخطيط.' : 'A rough range helps us plan.'}

{BUDGETS.map(b => set('budget',b.id)} />)}

set('date',e.target.value)} style={inp} />

)} {step === 4 && (<>

{ar ? 'كيف نصل إليك؟' : 'Your details'}

{ar ? 'سنعود إليك خلال 24 ساعة.' : "We'll be in touch within 24 hours."}

set('name',e.target.value)} placeholder={ar ? 'اسمك الكامل' : 'Your full name'} style={inp} /> set('phone',e.target.value)} placeholder="+971 5X XXX XXXX" style={inp} /> set('email',e.target.value)} placeholder={ar ? 'بريدك@مثال.com' : 'your@email.com'} style={inp} /> set('date',e.target.value)} style={inp} />