/* global React, window, Icon, Mascot, useT, useEyad, SUBJECTS */ // Eyad Academy — Auth screens (Login + Register) and floating WhatsApp button const { useState, useEffect } = React; // Replace with the real number when you have it const WHATSAPP_NUMBER = "966500000000"; const WHATSAPP_TEXT = { ar: "السلام عليكم، أرغب في الاستفسار عن أكاديمية إياد.", en: "Hi! I'd like to learn more about Eyad Academy.", }; // ============================================================ // FLOATING WHATSAPP BUTTON // ============================================================ function WhatsAppButton() { const t = useT(); const { lang } = useEyad(); const [open, setOpen] = useState(false); const link = `https://wa.me/${WHATSAPP_NUMBER}?text=${encodeURIComponent(WHATSAPP_TEXT[lang] || WHATSAPP_TEXT.en)}`; return (
{open && (
{t.nav.brand}
{lang === "ar" ? "متاحون الآن" : "Online now"}
{lang === "ar" ? "أهلًا 👋 كيف نقدر نخدمك؟ نجاوبك خلال دقائق." : "Hi 👋 How can we help? We usually reply within minutes."}
{t.auth.whatsapp}
)}
); } function WhatsAppGlyph({ small = false }) { const size = small ? 18 : 28; return ( ); } // ============================================================ // AUTH SHELL — wraps login/register with brand panel + form panel // ============================================================ function AuthShell({ children, panelKey = "default", onClose }) { const t = useT(); const { lang } = useEyad(); useEffect(() => { document.body.style.overflow = "hidden"; const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); }; window.addEventListener("keydown", onKey); return () => { document.body.style.overflow = ""; window.removeEventListener("keydown", onKey); }; }, [onClose]); return (
{children}
); } // ============================================================ // LOGIN SCREEN // ============================================================ function LoginScreen({ onClose, onSignedIn, onGoRegister }) { const t = useT(); const [form, setForm] = useState({ email: "", password: "" }); const [show, setShow] = useState(false); const [remember, setRemember] = useState(true); const [errs, setErrs] = useState({}); const [submitted, setSubmitted] = useState(false); const submit = (e) => { e.preventDefault(); const n = {}; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) n.email = t.auth.login.errors.email; if (form.password.length < 6) n.password = t.auth.login.errors.password; setErrs(n); if (Object.keys(n).length === 0) setSubmitted(true); }; return (
{t.nav.brand}
{submitted ? (

{t.auth.login.success.title}

{t.auth.login.success.body}

) : ( <>

{t.auth.login.title}

{t.auth.login.subtitle}

setForm({ ...form, email: e.target.value })}/> {errs.email &&
{errs.email}
}
{t.auth.login.forgot}
setForm({ ...form, password: e.target.value })}/>
{errs.password &&
{errs.password}
}
{t.auth.login.or}
{t.auth.login.noaccount}{" "}
)}
); } function EyeIcon({ open }) { return open ? ( ) : ( ); } function GoogleIcon() { return ( ); } function AppleIcon() { return ( ); } // ============================================================ // REGISTER SCREEN — 3 steps + done state // ============================================================ function RegisterScreen({ onClose, onSignedIn, onGoLogin }) { const t = useT(); const [step, setStep] = useState(1); const [form, setForm] = useState({ name: "", email: "", phone: "", password: "", agree: false, studentName: "", age: "", grade: "g3", gender: "f", subjects: [], plan: "premium", }); const [errs, setErrs] = useState({}); const setF = (k, v) => setForm(prev => ({ ...prev, [k]: v })); const toggleSubject = (id) => { setF("subjects", form.subjects.includes(id) ? form.subjects.filter(s => s !== id) : [...form.subjects, id]); }; const validateStep = (s) => { const n = {}; if (s === 1) { if (!form.name.trim()) n.name = t.auth.register.errors.name; if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) n.email = t.auth.register.errors.email; if (!/^[+]?[\d\s\-()]{8,}$/.test(form.phone)) n.phone = t.auth.register.errors.phone; if (form.password.length < 8) n.password = t.auth.register.errors.password; if (!form.agree) n.agree = t.auth.register.errors.agree; } if (s === 2) { if (!form.studentName.trim()) n.studentName = t.auth.register.errors.studentName; if (!form.age || Number(form.age) < 4 || Number(form.age) > 17) n.age = t.auth.register.errors.age; if (form.subjects.length === 0) n.subjects = t.auth.register.errors.subjects; } if (s === 3) { if (!form.plan) n.plan = t.auth.register.errors.plan; } setErrs(n); return Object.keys(n).length === 0; }; const next = () => { if (validateStep(step)) setStep(s => Math.min(4, s + 1)); }; const prev = () => { setErrs({}); setStep(s => Math.max(1, s - 1)); }; return (
{t.nav.brand}
{step < 4 && (
{t.auth.register.steps.map((label, i) => { const n = i + 1; const state = n < step ? "done" : n === step ? "active" : "todo"; return (
{state === "done" ? : n} {label}
); })}
)} {step === 1 && ( )} {step === 2 && ( )} {step === 3 && ( )} {step === 4 && ( )} {step < 4 && (
)} {step < 4 && (
{t.auth.register.haveAccount}{" "}
)}
); } function RegisterStep1({ form, setF, errs, t }) { const s = t.auth.register.s1; return ( <>

{s.h}

{s.d}

setF("name", e.target.value)}/> {errs.name &&
{errs.name}
} setF("email", e.target.value)}/> {errs.email &&
{errs.email}
}
setF("phone", e.target.value)}/> {errs.phone &&
{errs.phone}
}
setF("password", e.target.value)}/> {errs.password &&
{errs.password}
}
{errs.agree &&
{errs.agree}
}
); } function RegisterStep2({ form, setF, errs, t, toggleSubject }) { const s = t.auth.register.s2; return ( <>

{s.h}

{s.d}

setF("studentName", e.target.value)}/> {errs.studentName &&
{errs.studentName}
}
setF("age", e.target.value)}/> {errs.age &&
{errs.age}
}
{Object.entries(s.genderOpts).map(([k, v]) => ( ))}
{s.subjectsHint}
{SUBJECTS.map((sub) => { const on = form.subjects.includes(sub.id); return ( ); })}
{errs.subjects &&
{errs.subjects}
}
); } function RegisterStep3({ form, setF, errs, t }) { const s = t.auth.register.s3; return ( <>

{s.h}

{s.d}

{s.plans.map((p) => { const on = form.plan === p.id; return ( ); })}
{errs.plan &&
{errs.plan}
} ); } function RegisterDone({ form, onSignedIn, onClose, t }) { const d = t.auth.register.done; return (

{d.title}

{d.body1} {form.studentName || "—"} {d.body2}
{form.email}

{d.tip}
); } Object.assign(window, { WhatsAppButton, LoginScreen, RegisterScreen });