// ─── About & Contact Page ───────────────────────────────────────────────────── const { useState } = React; // 🔴 Set your WhatsApp number here — full international format, no + or spaces // e.g. if your number is +961 71 123 456, write '96171123456' const HADI_WA = '96176957495'; function AboutPage({ setPage }) { const site = window.getSiteContent ? window.getSiteContent() : (window.AE?.DATA?.siteContent || {}); const { instructor } = window.AE.DATA; const profile = { ...(instructor || {}), ...(site.instructor || {}) }; const [form, setForm] = useState({ name: '', email: '', whatsapp: '', interests: [], lessonsPerWeek: '', message: '' }); const [sent, setSent] = useState(false); function toggleInterest(val) { setForm(f => ({ ...f, interests: f.interests.includes(val) ? f.interests.filter(x => x !== val) : [...f.interests, val], })); } function buildWaText() { const lines = [`Hi Hadi! My name is ${form.name || '(name not provided)'}.`]; if (form.interests.length) lines.push(`\nI'm interested in: ${form.interests.join(', ')}`); if (form.lessonsPerWeek) lines.push(`Looking for: ${form.lessonsPerWeek}`); if (form.message) lines.push(`\n${form.message}`); if (form.email) lines.push(`\nEmail: ${form.email}`); if (form.whatsapp) lines.push(`WhatsApp: ${form.whatsapp}`); return encodeURIComponent(lines.join('\n')); } function handleSubmit(e) { e.preventDefault(); setSent(true); } const interests = ['Classical Arabic', 'Levantine Dialect', 'Quranic Arabic', 'English', 'Private Lessons', 'Group Lessons']; const inputStyle = { width: '100%', background: 'var(--surface)', border: '1px solid var(--line)', color: 'var(--ink)', padding: '12px 16px', fontFamily: 'var(--f-body)', fontSize: '16px', outline: 'none', transition: 'border-color .2s', borderRadius: 'var(--r-sm)', }; return (
{/* Instructor hero */}
{/* Copy */} Your teacher

{profile.name || 'Hadi Shokeir'}

{profile.arabicTitle || 'لغويٌّ · مُعلِّم · مُترجم'}
{(profile.specialties || ['Classical Arabic', 'Levantine Dialect', 'Quranic Arabic', 'English']).map(s => ( {s} ))}

{profile.bio1 || 'Hadi Shokeir is a linguist, translator, and language mentor with deep roots in both Arabic and English. Born into the Arabic language and immersed in English from an early age, he has spent years teaching both — to students across different countries, backgrounds, and levels, from complete beginners to advanced readers working on precision.'}

{profile.bio2 || 'Before building Arabic Enthusiast, Hadi worked professionally in digital advertising — managing Meta Ads campaigns across Facebook and Instagram, with a focus on performance, clear goals, and measurable results. He brings that same structured thinking to his teaching: every lesson has a purpose, every session moves you forward, and progress is always visible.'}

{(profile.stats || [{value:'7+',label:'Years teaching'},{value:'4',label:'Specialisations'},{value:'1:1',label:'Private lessons'}]).map(({value, label}) => (
{value}
{label}
))}
{/* Photo */}
Hadi — Arabic Instructor
{profile.name || 'Hadi Shokeir'}
{profile.title || 'Arabic Instructor'}
{/* Teaching philosophy */}
{(profile.philosophy || [ { title: 'The system, not shortcuts', arabic: 'النظام لا الاختصارات', desc: 'Survival phrases get you to the airport. Structure gets you the language. Every lesson builds a mental framework so new words and grammar slot in naturally — and stay.' }, { title: 'Both directions', arabic: 'الاتجاهان معاً', desc: 'Hadi teaches Arabic to English speakers and English to Arabic speakers. Understanding how each language interferes with the other — its rhythms, its gaps — is a real advantage in the classroom.' }, { title: 'Your goals, your pace', arabic: 'أهدافك أولاً', desc: 'Whether you\'re reading Quran, building dialect fluency, writing professional English, or starting from zero — the curriculum shapes itself around where you are and where you want to go.' }, ]).map((p, i) => (
{ e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = 'var(--shadow)'; }} onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }} >
{p.arabic}
{p.title}
{p.desc}
 ))}
{/* Contact */}
Get in touch

{profile.contactHeadingLine1 || "Let's"}{' '} {profile.contactHeadingAccent || 'talk'}

{profile.contactPrompt || "Whether you're starting from scratch, looking to level up, or not sure where to begin — send a message and Hadi will get back to you personally within 24 hours."}

{HADI_WA && ( Message on WhatsApp )}
{sent ? (
شكراً
Message received!
Hadi will be in touch within 24 hours.
) : (
{[['text','Your Name','name'],['email','Email Address','email']].map(([type, label, key]) => (
setForm(f => ({ ...f, [key]: e.target.value }))} required style={inputStyle} onFocus={e => e.target.style.borderColor = 'var(--accent)'} onBlur={e => e.target.style.borderColor = 'var(--line)'} />
))}
setForm(f => ({ ...f, whatsapp: e.target.value }))} placeholder="+1 234 567 8900" style={inputStyle} onFocus={e => e.target.style.borderColor = 'var(--accent)'} onBlur={e => e.target.style.borderColor = 'var(--line)'} />
{interests.map(int => { const active = form.interests.includes(int); return ( ); })}