// Saraya Events — Design Your Event builder + Partner page. const { useState: useStateF, useEffect: useEffectF } = React; /* ===== Design Your Event — multi-step builder ===== */ function DesignBuilder() { const { t, lang } = useLang(); const { go } = useNav(); const B = window.SARAYA.BUILDER; const [step, setStep] = useStateF(0); const [done, setDone] = useStateF(false); const [photos, setPhotos] = useStateF([]); const [d, setD] = useStateF({ type: '', location: '', services: [], budget: '', date: '', name: '', phone: '', email: '', message: '' }); const steps = [ { key: 'type', label: lang === 'ar' ? 'المناسبة' : 'Occasion' }, { key: 'location', label: lang === 'ar' ? 'المكان' : 'Venue' }, { key: 'services', label: lang === 'ar' ? 'الخدمات' : 'Services' }, { key: 'budget', label: lang === 'ar' ? 'الميزانية' : 'Budget' }, { key: 'details', label: lang === 'ar' ? 'تفاصيلك' : 'Your details' }, ]; const toggleService = (id) => setD((p) => ({ ...p, services: p.services.includes(id) ? p.services.filter((x) => x !== id) : [...p.services, id] })); const canNext = [ () => d.type, () => d.location, () => d.services.length > 0, () => d.budget, () => d.name && d.phone, ][step](); const onFiles = (e) => { const files = Array.from(e.target.files || []).slice(0, 6); setPhotos(files.map((f) => ({ name: f.name, url: URL.createObjectURL(f) }))); }; const labelOf = (arr, id, key) => { const o = arr.find((x) => (x.id === id)); return o ? (o[key] ? o[key][lang] || o[key] : o[lang]) : id; }; const buildSummary = () => { const type = labelOf(B.eventTypes, d.type) || d.type; const loc = labelOf(B.locations, d.location) || d.location; const svc = d.services.map((s) => labelOf(B.services, s)).join(', '); const bud = labelOf(B.budgets, d.budget) || d.budget; return ( `Occasion: ${type}\n` + `Venue: ${loc}\n` + `Services Needed: ${svc}\n` + `Budget: ${bud}\n` + (d.date ? `Event Date: ${d.date}\n` : '') + `\nContact Details\n` + `Name: ${d.name}\n` + `Phone: ${d.phone}\n` + (d.email ? `Email: ${d.email}\n` : '') + (d.message ? `\nAdditional Notes:\n${d.message}\n` : '') + (photos.length ? `\nInspiration photos: ${photos.length} file${photos.length > 1 ? 's' : ''} attached separately.` : '') ); }; const buildMailto = () => { const type = labelOf(B.eventTypes, d.type) || d.type; const subject = encodeURIComponent(`Event Quote Request — ${type}`); const body = encodeURIComponent( `Hello Saraya Events,\n\nI would like to request a quote for my upcoming event.\n\n` + buildSummary() + `\n\nPlease contact me to discuss further.\n\nThank you.` ); return `mailto:sales@sarayaevents.com?subject=${subject}&body=${body}`; }; const submit = () => { // Save lead to Supabase (fails gracefully if DB not configured) if (window.saveLead) { window.saveLead({ leadType: 'customer_quote', source: 'rfq_builder', name: d.name, phone: d.phone, email: d.email || null, eventType: d.type || null, eventDate: d.date || null, message: buildSummary(), }); } setDone(true); }; if (done) return go('home')} onRestart={() => { setDone(false); setStep(0); setD({ type: '', location: '', services: [], budget: '', date: '', name: '', phone: '', email: '', message: '' }); }} />; return (
{/* progress header */}
{steps.map((s, i) => (
{i < step ? '✓' : i + 1} {s.label}
{i < steps.length - 1 && } ))}
{step === 0 && (
{B.eventTypes.map((e) => setD({ ...d, type: e.id })}>{e[lang]})}
)} {step === 1 && (
{B.locations.map((l) => setD({ ...d, location: l.id })}>{l[lang]})}
)} {step === 2 && (
{B.services.map((s) => toggleService(s.id)}>{s[lang]})}
)} {step === 3 && (
{B.budgets.map((b) => setD({ ...d, budget: b.id })}>{b[lang]})}
setD({ ...d, date: e.target.value })} />
)} {step === 4 && (
setD({ ...d, name: e.target.value })} placeholder={lang === 'ar' ? 'اسمك الكامل' : 'Your full name'} /> setD({ ...d, phone: e.target.value })} placeholder="+971 5X XXX XXXX" /> setD({ ...d, email: e.target.value })} placeholder={lang === 'ar' ? 'بريدك الإلكتروني' : 'your@email.com'} />