import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { BookOpen, GraduationCap, Users, Headphones, CheckCircle2, ArrowLeft, Menu, X, MessageCircle, Star, Clock3, Target, HeartHandshake, BookMarked } from 'lucide-react';
import './style.css';

const WHATSAPP = '0500938510';
const GOOGLE_SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbx4kWBZWVTwOhEvBnxW02lD8K7v7rAMcr31r93VwB6hDOiycQzKpZoRIbgFyfqs2mCGtA/exec';
const waLink = (message='السلام عليكم، أود الاستفسار عن التسجيل في مؤسسة الحافظ الماهر.') =>
  `https://wa.me/966${WHATSAPP.replace(/^0/,'')}?text=${encodeURIComponent(message)}`;

function App() {
  const [menuOpen, setMenuOpen] = useState(false);
  const [form, setForm] = useState({name:'', phone:'', age:'', gender:'', level:'', program:''});
  const [sent, setSent] = useState(false);
  const update = (e) => setForm({...form, [e.target.name]:e.target.value});
  const submit = async (e) => {
    e.preventDefault();
    const payload = new URLSearchParams({
      name: form.name,
      phone: form.phone,
      age: form.age,
      gender: form.gender,
      level: form.level,
      program: form.program,
      source: 'صفحة الهبوط - مؤسسة الحافظ الماهر',
      submittedAt: new Date().toISOString()
    });
    try {
      // إرسال البيانات إلى Google Apps Script دون الحاجة إلى صلاحيات CORS من المتصفح.
      await fetch(GOOGLE_SCRIPT_URL, {
        method: 'POST',
        mode: 'no-cors',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
        body: payload.toString()
      });
      setSent(true);
    } catch (error) {
      window.open(waLink(`طلب تسجيل جديد – مؤسسة الحافظ الماهر\nالاسم: ${form.name}\nرقم التواصل: ${form.phone}\nالعمر: ${form.age}\nالنوع: ${form.gender}\nالمستوى: ${form.level}\nالبرنامج: ${form.program}`), '_blank', 'noopener,noreferrer');
      setSent(true);
    }
  };
  const closeMenu = () => setMenuOpen(false);

  return <div className="site" dir="rtl">
    <div className="topbar"><div className="container topbar-inner"><span>رحلتك مع القرآن تبدأ بخطوة</span><a href={waLink()}>للاستفسار والتسجيل: 0500938510</a></div></div>
    <header className="header">
      <div className="container nav">
        <a className="brand" href="#home" aria-label="الرئيسية"><span className="brand-mark"><BookOpen size={25}/></span><span><b>الحافظ الماهر</b><small>لتعليم القرآن الكريم</small></span></a>
        <button className="menu-toggle" onClick={()=>setMenuOpen(!menuOpen)} aria-label="القائمة">{menuOpen?<X/>:<Menu/>}</button>
        <nav className={menuOpen?'nav-links open':'nav-links'}>
          <a onClick={closeMenu} href="#home">الرئيسية</a><a onClick={closeMenu} href="#about">من نحن</a><a onClick={closeMenu} href="#programs">برامجنا</a><a onClick={closeMenu} href="#method">نظامنا</a><a onClick={closeMenu} href="#register">التسجيل</a>
        </nav>
        <a className="nav-cta" href="#register">سجّل الآن <ArrowLeft size={16}/></a>
      </div>
    </header>

    <main>
      <section className="hero" id="home">
        <div className="hero-pattern"></div>
        <div className="container hero-grid">
          <div className="hero-copy">
            <div className="eyebrow"><span></span> مؤسسة الحافظ الماهر لتعليم القرآن الكريم</div>
            <h1>اجعل للقرآن<br/><em>مكانًا ثابتًا</em> في حياتك</h1>
            <p className="hero-lead">ابدأ رحلتك مع كتاب الله في بيئة تعليمية تعينك على الحفظ، وإتقان التلاوة، والمراجعة المستمرة، والتدبر والعمل بالقرآن.</p>
            <div className="hero-actions"><a className="btn btn-gold" href="#register">ابدأ التسجيل الآن <ArrowLeft size={18}/></a><a className="btn btn-outline" href="#programs">اكتشف برامجنا</a></div>
            <div className="hero-points"><span><CheckCircle2/> للصغار والكبار</span><span><CheckCircle2/> معلمون ومعلمات</span><span><CheckCircle2/> متابعة مستمرة</span></div>
          </div>
          <div className="hero-art">
            <div className="art-glow"></div>
            <div className="quran-frame"><div className="arch"><div className="arch-inner"><BookOpen size={78} strokeWidth={1.2}/><div className="arabic-ornament">وَلَقَدْ يَسَّرْنَا الْقُرْآنَ لِلذِّكْرِ</div><small>فَهَلْ مِن مُّدَّكِرٍ</small></div></div></div>
            <div className="floating-note note-one"><span className="note-icon"><Star size={17}/></span><span><b>خطوة مباركة</b><small>ابدأ اليوم</small></span></div>
            <div className="floating-note note-two"><span className="note-icon"><BookMarked size={18}/></span><span><b>حفظ وإتقان</b><small>بمتابعة مستمرة</small></span></div>
          </div>
        </div>
        <div className="hero-wave"></div>
      </section>

      <section className="trust-strip"><div className="container trust-grid"><div><BookOpen/><b>حفظ القرآن</b><small>بخطة تناسب مستواك</small></div><div><Headphones/><b>تصحيح التلاوة</b><small>تعلم القراءة الصحيحة</small></div><div><Clock3/><b>مراجعة منتظمة</b><small>لثبات الحفظ وإتقانه</small></div><div><HeartHandshake/><b>متابعة وتحفيز</b><small>خطوة بخطوة</small></div></div></section>

      <section className="section about" id="about"><div className="container about-grid"><div className="section-intro"><span className="section-kicker">من نحن</span><h2>رحلة قرآنية…<br/><em>بصحبة تعينك على الاستمرار</em></h2><p>مؤسسة الحافظ الماهر لتعليم القرآن الكريم، نعتني بتعليم كتاب الله حفظًا وتلاوةً ومراجعةً وتدبرًا، ونسعى إلى بناء علاقة راسخة بين الطالب والقرآن، ليكون حاضرًا في قلبه وسلوكه وحياته.</p><a className="text-link" href="#register">ابدأ رحلتك معنا <ArrowLeft size={17}/></a></div><div className="about-card"><div className="about-icon"><Target size={30}/></div><h3>هدفنا ليس الحفظ فقط</h3><p>بل أن يتعلم الطالب القرآن بإتقان، ويستمر في مراجعته، ويعيش مع آياته حفظًا وفهمًا وعملًا.</p><div className="quote-line">«الحافظ الماهر، طريقك إلى القرآن.»</div></div></div></section>

      <section className="section programs" id="programs"><div className="container"><div className="section-heading"><span className="section-kicker">برامجنا التعليمية</span><h2>برنامج يناسب <em>رحلتك مع القرآن</em></h2><p>مسارات تعليمية تراعي اختلاف الأعمار والمستويات والأهداف.</p></div><div className="program-grid">
        <article className="program-card"><div className="program-icon"><GraduationCap/></div><span className="program-tag">للأطفال</span><h3>حلقات الأطفال</h3><p>تأسيس قرآني بأسلوب تربوي مشجع، مع حفظ ومراجعة وتصحيح للتلاوة.</p><a href="#register">سجّل لطفلك <ArrowLeft size={16}/></a></article>
        <article className="program-card featured"><div className="program-icon"><BookOpen/></div><span className="program-tag">للجميع</span><h3>حفظ القرآن الكريم</h3><p>خطة حفظ متدرجة تناسب مستوى الطالب، مع عناية بالدرس الجديد والمراجعة.</p><a href="#register">اختر برنامج الحفظ <ArrowLeft size={16}/></a></article>
        <article className="program-card"><div className="program-icon"><Users/></div><span className="program-tag">للكبار</span><h3>حلقات الكبار</h3><p>مسارات للحفظ أو تحسين التلاوة أو مراجعة المحفوظ بإشراف متخصص.</p><a href="#register">سجّل الآن <ArrowLeft size={16}/></a></article>
        <article className="program-card"><div className="program-icon"><Headphones/></div><span className="program-tag">للطالبات والطلاب</span><h3>تصحيح التلاوة</h3><p>تعلم القراءة الصحيحة وتطبيق أحكام التجويد ومتابعة التقدم في الأداء.</p><a href="#register">ابدأ التعلم <ArrowLeft size={16}/></a></article>
      </div></div></section>

      <section className="section method" id="method"><div className="container method-grid"><div><span className="section-kicker light-kicker">نظامنا التعليمي</span><h2>إتقانٌ يُبنى<br/><em>خطوةً بعد خطوة</em></h2><p>نعتني بالدرس الجديد أشد العناية؛ لأنه لبنة الحفظ، ونعتني بالمراجعة عناية شديدة؛ لأنها الأصل في بقاء الحفظ.</p><a className="btn btn-gold" href="#register">تعرّف على البرنامج المناسب <ArrowLeft size={18}/></a></div><div className="steps"><div className="step"><b>01</b><div><h3>مقابلة مجانية</h3><p>تحديد مستوى الطالب عبر Zoom أو Telegram.</p></div></div><div className="step"><b>02</b><div><h3>منهج يناسب مستواك</h3><p>اختيار خطة تعليمية تراعي احتياج الطالب وقدرته.</p></div></div><div className="step"><b>03</b><div><h3>وقت مناسب لك</h3><p>تحديد أيام الحضور والوقت المناسب بالتنسيق مع الأسرة.</p></div></div><div className="step"><b>04</b><div><h3>متابعة وإتقان</h3><p>عناية بالحفظ الجديد والمراجعة وتصحيح التلاوة.</p></div></div></div></div></section>

      <section className="section why"><div className="container"><div className="section-heading"><span className="section-kicker">لماذا الحافظ الماهر؟</span><h2>لأن رحلتك مع القرآن <em>تستحق العناية</em></h2></div><div className="why-grid"><div><CheckCircle2/><h3>الحفظ المنظم</h3><p>خطة واضحة تراعي مستوى كل طالب.</p></div><div><CheckCircle2/><h3>المراجعة المستمرة</h3><p>اهتمام بثبات المحفوظ وعدم التفريط فيه.</p></div><div><CheckCircle2/><h3>تصحيح التلاوة</h3><p>متابعة القراءة وضبط الأداء.</p></div><div><CheckCircle2/><h3>التحفيز والمتابعة</h3><p>تشجيع مستمر يعين على مواصلة الطريق.</p></div></div></div></section>

      <section className="section register" id="register"><div className="container register-grid"><div className="register-copy"><span className="section-kicker light-kicker">التسجيل متاح</span><h2>لا تؤجل أجمل خطوة…<br/><em>ابدأ رحلتك مع كتاب الله</em></h2><p>املأ البيانات الأساسية، وسنساعدك في معرفة البرنامج المناسب وتحديد الخطوة التالية.</p><div className="contact-line"><MessageCircle/> <span>للتواصل والاستفسار عبر واتساب<br/><b>0500938510</b></span></div></div><form className="register-form" onSubmit={submit}><h3>طلب التسجيل</h3><p>أدخل بياناتك وسيُرسل طلبك مباشرة إلى سجل التسجيل.</p><div className="form-grid"><label>اسم الطالب<input name="name" value={form.name} onChange={update} required placeholder="الاسم الكامل"/></label><label>رقم التواصل<input name="phone" value={form.phone} onChange={update} required inputMode="tel" placeholder="05xxxxxxxx"/></label><label>العمر<input name="age" value={form.age} onChange={update} required placeholder="العمر"/></label><label>النوع<select name="gender" value={form.gender} onChange={update} required><option value="">اختر</option><option>ذكر</option><option>أنثى</option></select></label><label>المستوى الحالي<select name="level" value={form.level} onChange={update} required><option value="">اختر المستوى</option><option>مبتدئ</option><option>أقرأ القرآن وأحتاج تصحيحًا</option><option>لدي حفظ سابق وأحتاج مراجعة</option><option>أحفظ وأرغب في الاستمرار</option></select></label><label>البرنامج المطلوب<select name="program" value={form.program} onChange={update} required><option value="">اختر البرنامج</option><option>حفظ القرآن</option><option>تصحيح التلاوة والتجويد</option><option>مراجعة المحفوظ</option><option>حلقات الأطفال</option><option>أحتاج المساعدة في الاختيار</option></select></label></div><button className="btn btn-gold submit-btn" type="submit">إرسال طلب التسجيل <ArrowLeft size={18}/></button>{sent&&<div className="success-msg">تم إرسال طلبك. قد يستغرق ظهوره في سجل التسجيل لحظات.</div>}<small className="privacy">تُرسل البيانات إلى سجل التسجيل عبر Google Apps Script.</small></form></div></section>
    </main>
    <footer className="footer"><div className="container footer-inner"><a className="brand footer-brand" href="#home"><span className="brand-mark"><BookOpen size={23}/></span><span><b>الحافظ الماهر</b><small>لتعليم القرآن الكريم</small></span></a><p>الحافظ الماهر، طريقك إلى القرآن.</p><span>© {new Date().getFullYear()} مؤسسة الحافظ الماهر</span></div></footer>
    <a className="whatsapp-float" href={waLink()} target="_blank" rel="noreferrer" aria-label="تواصل عبر واتساب"><MessageCircle/></a>
  </div>;
}
createRoot(document.getElementById('root')).render(<App/>);