// Modals.jsx — Global modal components for Sanad Platform // Exports: TrialExpiredModal, CheckoutModal, AuthModal, AboutModal, TermsModal /* ── Shared Modal Backdrop ───────────────────────────── */ function ModalBackdrop({ onClose, children, wide }) { React.useEffect(() => { const h = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', h); return () => document.removeEventListener('keydown', h); }, []); return (
e.stopPropagation()} style={{ background: sanadColors.bgElevated, borderRadius: 20, boxShadow: '0 0 0 1px rgba(239,231,214,0.10), 0 24px 64px rgba(0,0,0,0.22)', width: '100%', maxWidth: wide ? 780 : 480, maxHeight: '92vh', overflowY: 'auto', direction: 'rtl', fontFamily: sanadFonts.arabic, animation: 'modalIn 280ms cubic-bezier(0.16,1,0.3,1) both', position: 'relative', }}> {children}
); } /* ── Trial Expired Modal ─────────────────────────────── */ function TrialExpiredModal({ onClose, onViewPlans }) { return ( {/* Close */} {/* Hero section */}
{/* Decorative rings */}
{/* Icon */}
انتهت التجربة المجانية

باقتك الحالية انتهت

اشترك الآن واستمتع بمزايا منصة ليكسا القانونية في النظام السعودي

ليكسا: أكبر وأذكى منصة قانونية سعودية
{/* Mini pricing preview */}
اختر الباقة المناسبة لك
{[ { name:'الاحترافية', price:'٣٩', period:'ر.س/شهر', badge:'الأكثر شيوعاً', highlight:true, features:['أسئلة غير محدودة', 'تحليل المستندات', 'بحث متكامل'] }, { name:'الأعمال', price:'١٥٩', period:'ر.س/شهر', badge:null, highlight:false, features:['كل مزايا الاحترافية', 'مستخدمون متعددون', 'دعم أولوية'] }, ].map((p, i) => (
e.currentTarget.style.transform='translateY(-2px)'} onMouseLeave={e => e.currentTarget.style.transform='none'} > {p.badge && (
{p.badge}
)}
{p.name}
{p.price} {p.period}
{p.features.map((f, j) => (
{f}
))}
))}
عرض الباقات
); } /* ── Checkout Modal ──────────────────────────────────── */ function CheckoutModal({ plan, billing, onClose, onSuccess }) { const [coupon, setCoupon] = React.useState(''); const [couponApplied, setCouponApplied] = React.useState(false); const [couponError, setCouponError] = React.useState(''); const [payMethod, setPayMethod] = React.useState('mada'); const [card, setCard] = React.useState({ num:'', exp:'', cvv:'', name:'' }); const [agreeTerms, setAgreeTerms] = React.useState(false); const [loading, setLoading] = React.useState(false); const [done, setDone] = React.useState(false); const rawPrice = plan?.id === 'pro' ? 49 : plan?.id === 'business' ? 199 : 0; const annualDiscount = billing === 'annual' ? 0.6 : 1; const couponDiscount = couponApplied ? 0.9 : 1; const finalMonthly = Math.round(rawPrice * annualDiscount * couponDiscount); const finalTotal = billing === 'annual' ? finalMonthly * 12 : finalMonthly; const applyCoupon = () => { if (coupon.trim().toUpperCase() === 'SANAD10') { setCouponApplied(true); setCouponError(''); } else { setCouponError('الكوبون غير صحيح'); } }; const handlePay = () => { if (!agreeTerms) return; setLoading(true); setTimeout(() => { setLoading(false); setDone(true); }, 1800); }; if (done) return (

تم الاشتراك بنجاح!

مرحباً بك في باقة {plan?.name}. ستصلك رسالة تأكيد على بريدك الإلكتروني.

العودة للمنصة
); return (
{/* Left: Summary */}
ملخص الطلب
باقة {plan?.name}
{billing === 'annual' ? 'اشتراك سنوي' : 'اشتراك شهري'}
{billing === 'annual' && } {couponApplied && }
الإجمالي
{finalTotal} ر.س
{billing === 'annual' &&
{finalMonthly} ر.س/شهر
}
{/* Coupon */}
كوبون خصم
setCoupon(e.target.value)} placeholder="أدخل الكوبون" disabled={couponApplied} style={{ flex:1, padding:'9px 12px', borderRadius:8, border:'1px solid rgba(255,255,255,0.1)', background:'rgba(255,255,255,0.06)', color:sanadColors.textInverted, fontFamily:sanadFonts.arabic, fontSize:13, outline:'none', direction:'rtl' }} />
{couponError &&
{couponError}
} {couponApplied &&
تم تطبيق الخصم بنجاح
}
{/* Right: Payment */}
وسيلة الدفع
{/* Payment method toggle */}
{[['mada', 'مدى'], ['visa', 'Visa']].map(([id, label]) => ( ))}
{/* Card fields */}
setCard(c => ({ ...c, name:v }))} /> setCard(c => ({ ...c, num:v }))} />
setCard(c => ({ ...c, exp:v }))} /> setCard(c => ({ ...c, cvv:v }))} />
{/* Terms */} {loading ? 'جارٍ المعالجة…' : `ادفع ${finalTotal} ر.س`}
مدفوعات مشفّرة وآمنة بالكامل
); } function Row({ label, value, light, highlight }) { return (
{label} {value}
); } function CardInput({ label, placeholder, value, onChange }) { return (
{label}
onChange(e.target.value)} placeholder={placeholder} style={{ width:'100%', padding:'10px 12px', borderRadius:9, border:`1px solid ${sanadColors.border}`, background:sanadColors.bg, fontFamily:sanadFonts.arabic, fontSize:13, color:sanadColors.textPrimary, outline:'none', direction:'rtl', transition:'border 150ms' }} onFocus={e => e.target.style.border=`1px solid ${sanadColors.brand}`} onBlur={e => e.target.style.border=`1px solid ${sanadColors.border}`} />
); } /* ── Auth Modal (Signup / Login) ─────────────────────── */ function AuthModal({ mode: initMode, onClose }) { const [mode, setMode] = React.useState(initMode || 'signup'); // signup | login | otp const [phone, setPhone] = React.useState(''); const [otp, setOtp] = React.useState(['','','','','','']); const [loading, setLoading] = React.useState(false); const sendOtp = () => { if (!phone.trim()) return; setLoading(true); setTimeout(() => { setLoading(false); setMode('otp'); }, 1000); }; const verifyOtp = () => { setLoading(true); setTimeout(() => { setLoading(false); onClose(); }, 1200); }; return (
{/* Logo */}
{mode === 'otp' ? ( <>

أدخل رمز التحقق

أرسلنا رمزاً مؤلفاً من ٦ أرقام إلى
{phone}

{otp.map((v, i) => ( { const val = e.target.value.replace(/\D/,''); const next = [...otp]; next[i] = val; setOtp(next); if (val && i < 5) document.getElementById(`otp-${i+1}`)?.focus(); }} id={`otp-${i}`} style={{ width:44, height:52, borderRadius:10, border:`2px solid ${v ? sanadColors.brand : sanadColors.border}`, background:sanadColors.bg, textAlign:'center', fontSize:22, fontWeight:700, color:sanadColors.textPrimary, outline:'none', fontFamily:sanadFonts.arabic }} /> ))}
{loading ? 'جارٍ التحقق…' : 'تأكيد الرمز'} ) : ( <>

{mode === 'signup' ? 'ابدأ التجربة المجانية' : 'مرحباً بعودتك'}

{mode === 'signup' ? 'جرّب ليكسا مجاناً' : 'سجّل دخولك لمتابعة جلساتك القانونية'}

{/* Google */}
أو برقم الجوال
رقم الجوال
🇸🇦 +966
setPhone(e.target.value)} placeholder="5XXXXXXXX" style={{ flex:1, padding:'10px 12px', borderRadius:9, border:`1px solid ${sanadColors.border}`, background:sanadColors.bg, fontFamily:sanadFonts.arabic, fontSize:13, color:sanadColors.textPrimary, outline:'none', direction:'ltr' }} onFocus={e => e.target.style.border=`1px solid ${sanadColors.brand}`} onBlur={e => e.target.style.border=`1px solid ${sanadColors.border}`} />
{loading ? 'جارٍ الإرسال…' : 'إرسال رمز التحقق'}

{mode === 'signup' ? 'لديك حساب؟ ' : 'ليس لديك حساب؟ '} setMode(mode === 'signup' ? 'login' : 'signup')}> {mode === 'signup' ? 'تسجيل الدخول' : 'إنشاء حساب'}

)}
); } /* ── About Modal ─────────────────────────────────────── */ function AboutModal({ onClose }) { const [tab, setTab] = React.useState('about'); // about | contact const [form, setForm] = React.useState({ name:'', email:'', msg:'' }); const [sent, setSent] = React.useState(false); const send = () => { if (!form.name || !form.msg) return; setSent(true); }; return ( {/* Tabs */}
{[['about','من نحن'],['contact','تواصل معنا']].map(([id, label]) => ( ))}
{tab === 'about' ? (

ليكسا — منصة قانونية ذكية

تأسست عام ٢٠٢٤ · الرياض، المملكة العربية السعودية

ليكسا هي أكبر وأذكى منصة قانونية سعودية، تجمع بين قوة الذكاء الاصطناعي وعمق القانون السعودي لتمكين الأفراد والمنشآت من الوصول إلى المعلومات القانونية بسهولة وثقة.

نؤمن بأن العدالة تبدأ بالمعرفة، وأن كل شخص يستحق فهم حقوقه دون الحاجة إلى وسيط معقد. رسالتنا: جعل القانون في متناول الجميع.

{[['٢٠٢٤','سنة التأسيس'],['١٢٠٠٠+','مستخدم موثوق'],['٣٢٠+','محامٍ معتمد']].map(([val,label],i) => (
{val}
{label}
))}
) : (

تواصل معنا

يسعدنا سماع رأيك واستفساراتك في أي وقت

{sent ? (

تم إرسال رسالتك بنجاح!

سنتواصل معك خلال ٢٤ ساعة

) : (
setForm(f=>({...f,name:v}))} /> setForm(f=>({...f,email:v}))} />
رسالتك