// Saraya Events — Leads, tracking, featured cards, banners, trust
const { useState: useStateLd } = React;
/* ================================================================
TRACKING HELPER
Phase 1: console-only. Wire analytics in Phase 2.
================================================================ */
// GA4 standard event name map
var _GA4_EVENTS = {
lead_form_submit: 'generate_lead',
checkout_start: 'begin_checkout',
subscription_selected: 'add_to_cart',
vendor_package_click: 'select_item',
join_vendor_click: 'generate_lead',
request_quote_click: 'generate_lead',
whatsapp_click: 'whatsapp_click',
campaign_lead_submit: 'generate_lead',
rental_inquiry_click: 'view_item',
vendor_contact_click: 'select_item',
category_click: 'select_content',
browse_marketplace_click: 'select_content',
browse_services_click: 'select_content',
};
// Meta Pixel standard event map
var _PIXEL_EVENTS = {
lead_form_submit: ['Lead', true],
checkout_start: ['InitiateCheckout', true],
subscription_selected: ['AddToCart', true],
join_vendor_click: ['Lead', true],
request_quote_click: ['Lead', true],
campaign_lead_submit: ['Lead', true],
whatsapp_click: ['Contact', true],
vendor_contact_click: ['Contact', true],
rental_inquiry_click: ['ViewContent', true],
};
window.sarayaTrack = function(event, props) {
try {
// Google Analytics 4
var ga4Event = _GA4_EVENTS[event] || event;
if (typeof gtag === 'function') {
gtag('event', ga4Event, Object.assign({ event_category: 'saraya', saraya_event: event }, props || {}));
}
// Meta Pixel
var pixelMap = _PIXEL_EVENTS[event];
if (pixelMap && typeof fbq === 'function') {
var pixelEventName = pixelMap[0];
var isStandard = pixelMap[1];
if (isStandard) {
fbq('track', pixelEventName, props || {});
} else {
fbq('trackCustom', pixelEventName, props || {});
}
}
} catch (e) {}
};
/* ================================================================
LEAD DATA MODEL
================================================================ */
window.LEAD_TYPES = [
{ value: 'customer_quote', en: 'Customer Quote Request', ar: 'طلب عرض سعر' },
{ value: 'rental_inquiry', en: 'Rental Inquiry', ar: 'استفسار إيجار' },
{ value: 'service_booking', en: 'Service Booking Inquiry', ar: 'استفسار حجز خدمة' },
{ value: 'vendor_application', en: 'Vendor Application', ar: 'طلب انضمام كمورد' },
{ value: 'support', en: 'Support Request', ar: 'طلب دعم' },
{ value: 'complaint', en: 'Complaint', ar: 'شكوى' },
];
window.EVENT_TYPES = [
{ value: 'wedding', en: 'Wedding', ar: 'زفاف' },
{ value: 'engagement', en: 'Engagement', ar: 'خطوبة' },
{ value: 'corporate', en: 'Corporate Event', ar: 'فعالية شركات' },
{ value: 'birthday', en: 'Birthday', ar: 'عيد ميلاد' },
{ value: 'graduation', en: 'Graduation', ar: 'تخرج' },
{ value: 'kids_party', en: "Kids Party", ar: 'حفلة أطفال' },
{ value: 'other', en: 'Other', ar: 'أخرى' },
];
/* ================================================================
SAVE LEAD TO SUPABASE
Falls back to WhatsApp if DB not configured.
================================================================ */
window.saveLead = async function(data) {
const db = window.SarayaDB;
if (!db) return { ok: false, fallback: true };
const { error } = await db.from('leads').insert({
lead_type: data.leadType || 'customer_quote',
status: 'new',
name: data.name || null,
phone: data.phone || null,
email: data.email || null,
event_type: data.eventType || null,
event_date: data.eventDate || null,
location: data.location || null,
message: data.message || null,
source: data.source || 'website',
campaign: data.campaign || null,
account_type: data.accountType || null,
marketing_consent: data.marketingConsent ? true : false,
marketing_consent_date: data.marketingConsent ? new Date().toISOString() : null,
marketing_source: data.campaign || data.source || 'website',
});
return { ok: !error, error };
};
/* ================================================================
LEAD CAPTURE — reusable form
Props: leadType, source, campaign, compact, title, subtitle,
onDone, ar
================================================================ */
function LeadCapture({ leadType, source, campaign, compact, title, subtitle, onDone, ar }) {
const blank = { name: '', phone: '', email: '', eventType: '', eventDate: '', location: '', message: '', marketingConsent: false };
const [form, setForm] = useStateLd(blank);
const [busy, setBusy] = useStateLd(false);
const [done, setDone] = useStateLd(false);
const [err, setErr] = useStateLd('');
const set = (k, v) => setForm((p) => ({ ...p, [k]: v }));
const inp = {
width: '100%', padding: '10px 13px', borderRadius: 9,
border: '1.5px solid var(--line)', fontFamily: 'var(--font-body)',
fontSize: 14, outline: 'none', background: 'var(--white)', boxSizing: 'border-box',
};
const submit = async (e) => {
e.preventDefault();
if (!form.name.trim()) { setErr(ar ? 'الاسم مطلوب' : 'Name is required'); return; }
if (!form.phone.trim()) { setErr(ar ? 'رقم الهاتف مطلوب' : 'Phone is required'); return; }
if (form.email.trim() && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email.trim())) { setErr(ar ? 'البريد الإلكتروني غير صالح' : 'Please enter a valid email address'); return; }
setBusy(true); setErr('');
window.sarayaTrack('lead_form_submit', { lead_type: leadType, source, campaign });
const result = await window.saveLead({ ...form, leadType, source, campaign });
if (result.fallback) {
const msg = "Hello Saraya Events" +
"\nName: " + form.name +
"\nPhone: " + form.phone +
(form.eventType ? "\nEvent: " + form.eventType : '') +
(form.message ? "\nMessage: " + form.message : '');
window.open(window.SARAYA.waLink(msg), '_blank');
}
setBusy(false);
setDone(true);
onDone && onDone(form);
};
if (done) {
return (
{ar ? 'شكراً لتواصلك!' : 'Thank you!'}
{ar ? 'سيتواصل معك فريق سرايا قريبًا.' : 'The Saraya Events team will contact you shortly.'}
window.sarayaTrack('whatsapp_click', { source: 'lead_done' })}
style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '10px 18px', borderRadius: 10, background: '#25D366', color: 'white', fontWeight: 600, fontSize: 14, textDecoration: 'none' }}>
{ar ? 'تابع عبر واتساب' : 'Continue on WhatsApp'}
);
}
return (