// Sections C: Testimonials, Pricing, FAQ, Final CTA, Footer

// 10. Testimonials
function Testimonials() {
  const ref = useReveal();
  const items = [
    { q: 'إنكي خلاني أعرف شنو أدرس يومياً بدل العشوائية.', who: 'علي', role: 'طالب سادس', i: 'ع' },
    { q: 'الاختبارات التكيفية ساعدتني أعرف نقاط ضعفي بسرعة.', who: 'زهراء', role: 'طالبة سادس', i: 'ز' },
    { q: 'التصميم بسيط واللهجة قريبة، حسّيته معمول إلنا.', who: 'حسين', role: 'طالب', i: 'ح' },
    { q: 'أكثر شي عجبني إن الشرح يصير حسب الأشياء اللي أحبها.', who: 'مريم', role: 'طالبة', i: 'م' },
  ];
  return (
    <section id="testimonials">
      <div className="container">
        <div ref={ref} className="reveal section-head">
          <div className="eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>آراء الطلاب</div>
          <h2>شنو يكولون الطلاب؟</h2>
        </div>
        <div className="test-track">
          {items.map((t, i) => (
            <div key={i} className="glass test-card">
              <div className="stars">★★★★★</div>
              <div className="quote">"{t.q}"</div>
              <div className="who">
                <span className="test-avatar">{t.i}</span>
                <span><strong style={{ color: '#fff' }}>{t.who}</strong> — {t.role}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Testimonials = Testimonials;

// 11. Pricing
function Pricing() {
  const ref = useReveal();
  const [yearly, setYearly] = useState(false);
  return (
    <section id="pricing">
      <div className="container">
        <div ref={ref} className="reveal section-head">
          <div className="eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>الخطط والأسعار</div>
          <h2>اختار الخطة اللي تناسبك</h2>
          <p>تگدر تبدي مجاناً، وإذا تريد تجربة أقوى افتح كل مميزات إنكي برو.</p>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <div className="pricing-toggle">
            <button onClick={() => setYearly(false)} className={!yearly ? 'active' : ''}>شهري</button>
            <button onClick={() => setYearly(true)} className={yearly ? 'active' : ''}>سنوي</button>
          </div>
        </div>
        <div className="pricing-save">{yearly ? 'وفّر أكثر بالاشتراك السنوي' : '\u00A0'}</div>

        <div className="price-grid">
          {/* Free */}
          <div className="glass price-card">
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <div className="name">المجاني</div>
              <span style={{ padding: '4px 12px', borderRadius: 999, background: 'rgba(120,160,240,0.18)', color: '#BFD2F5', fontSize: 11, fontWeight: 700 }}>ابدأ بدون أي تكلفة</span>
            </div>
            <div className="price-main">0 <span style={{ fontSize: 16, fontWeight: 600, color: '#A9B6D3' }}>د.ع</span></div>
            <div className="price-sub">لتجربة إنكي بدون التزام.</div>
            <a href="#cta" className="btn btn-ghost" style={{ width: '100%', marginTop: 6 }}>ابدأ مجاناً</a>
            <ul className="price-list" style={{ marginTop: 10 }}>
              <li><Ic.Check className="ic" style={{ color: '#7EC894' }} />إجابات بخطوات أساسية</li>
              <li><Ic.Check className="ic" style={{ color: '#7EC894' }} />كويزات يومية ضمن الموضوع</li>
              <li><Ic.Check className="ic" style={{ color: '#7EC894' }} />عرض نسبة الجاهزية الكلية</li>
              <li><Ic.Check className="ic" style={{ color: '#7EC894' }} />امتحانات رسمية من قسم الامتحانات، بحد أقصى 3 امتحانات باليوم</li>
              <li className="locked"><Ic.Lock className="ic" />شرح تفصيلي ومخصص</li>
              <li className="locked"><Ic.Lock className="ic" />تخصيص ذكي غير محدود</li>
              <li className="locked"><Ic.Lock className="ic" />الجداول والمهام كاملة</li>
              <li className="locked"><Ic.Lock className="ic" />جاهزية تفصيلية لكل مادة</li>
              <li className="locked"><Ic.Lock className="ic" />تمرين على نقاط الضعف</li>
            </ul>
          </div>

          {/* Pro */}
          <div className="glass price-card pro">
            <div className="badge">الأكثر فائدة</div>
            <div className="name" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ color: '#F4C35A', display: 'inline-flex' }}><Ic.Sparkles width="20" height="20" /></span>
              إنكي برو
            </div>
            <div className="price-main">
              {yearly ? '72,000' : '19,500'} <span style={{ fontSize: 16, fontWeight: 600, color: '#A9B6D3' }}>د.ع / {yearly ? 'سنة' : 'شهر'}</span>
            </div>
            <div className="price-sub">{yearly ? 'فاتورة سنوية واحدة، توفير أكثر.' : 'كل مميزات إنكي بدون حدود.'}</div>
            <div className="friend">
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                <Ic.Sparkles width="14" height="14" style={{ color: '#F4C35A' }} />
                <strong style={{ color: '#FFE9B8' }}>اشترك ويا صديق</strong>
              </div>
              {yearly ? '61,000 د.ع / سنة عند الاشتراك ويا صديق' : '16,500 د.ع / شهر عند الاشتراك ويا صديق'}
            </div>
            <a href="#cta" className="btn btn-gold" style={{ width: '100%' }}>اشترك بإنكي برو<Ic.ArrowLeft width="16" height="16" /></a>
            <ul className="price-list">
              <li><Ic.Check className="ic" style={{ color: '#F4C35A' }} />شرح تفصيلي مخصّص بدون حدود</li>
              <li><Ic.Check className="ic" style={{ color: '#F4C35A' }} />تخصيص ذكي كامل</li>
              <li><Ic.Check className="ic" style={{ color: '#F4C35A' }} />كويزات يومية غير محدودة</li>
              <li><Ic.Check className="ic" style={{ color: '#F4C35A' }} />امتحانات رسمية من قسم الامتحانات</li>
              <li><Ic.Check className="ic" style={{ color: '#F4C35A' }} />جاهزية تفصيلية لكل مادة</li>
              <li><Ic.Check className="ic" style={{ color: '#F4C35A' }} />تمرين مركّز على نقاط الضعف</li>
              <li><Ic.Check className="ic" style={{ color: '#F4C35A' }} />الجداول والمهام كاملة</li>
              <li><Ic.Check className="ic" style={{ color: '#F4C35A' }} />والمزيد</li>
            </ul>
          </div>
        </div>

        <div className="friend-cta">اشترك ويا صديق واحصلون سعر أقل</div>
        <div className="price-note">الأسعار بالدينار العراقي، وقد تختلف حسب العروض أو طريقة الدفع.</div>
      </div>
    </section>
  );
}
window.Pricing = Pricing;

// 12. FAQ
function FAQ() {
  const ref = useReveal();
  const items = [
    { q: 'إنكي مجاني؟', a: 'إي، تگدر تبدي بالخطة المجانية بدون أي تكلفة وتشمل كويزات يومية، إجابات بخطوات أساسية، ونسبة الجاهزية الكلية.' },
    { q: 'شنو الفرق بين المجاني وإنكي برو؟', a: 'إنكي برو يفتحلك شرح تفصيلي مخصص بدون حدود، تخصيص ذكي كامل، كويزات غير محدودة، جاهزية تفصيلية لكل مادة، وتمارين مركزة على نقاط الضعف.' },
    { q: 'أكو خصم إذا أشترك ويا صديق؟', a: 'إي، الاشتراك ويا صديق ينطيكم سعر أقل بالشهر أو بالسنة.' },
    { q: 'الأسعار بالدينار العراقي؟', a: 'إي، الأسعار المعروضة بالدينار العراقي.' },
    { q: 'يناسب أي مرحلة؟', a: 'إنكي مصمم حتى يساعد الطلاب بمراحل مختلفة، حسب المحتوى والخطة المتوفرة.' },
    { q: 'أكدر أستخدمه من الموبايل؟', a: 'إي، إنكي مصمم حتى يشتغل بسهولة على الموبايل، والتطبيق قريباً على iOS و Android.' },
    { q: 'شنو يعني اختبارات تكيفية؟', a: 'يعني الأسئلة تتغير حسب مستواك حتى تركز على اللي تحتاجه فعلاً.' },
    { q: 'شلون يشرحلي حسب اهتماماتي؟', a: 'تگدر تختار الأشياء اللي تحبها مثل الأفلام، الرياضة، الطبخ، الألعاب، وغيرها، وإنكي يستخدمها حتى يقربلك الفكرة بأمثلة تفهمها بسرعة.' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div ref={ref} className="reveal section-head">
          <div className="eyebrow" style={{ marginBottom: 16 }}><span className="dot"></span>الأسئلة الشائعة</div>
          <h2>أسئلة ممكن تخطر ببالك</h2>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={'glass faq-item' + (open === i ? ' open' : '')}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="caret"><Ic.Chevron width="16" height="16" /></span>
              </button>
              <div className="faq-a">
                <div className="faq-a-inner">{it.a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.FAQ = FAQ;

// 13. Final CTA
function FinalCTA() {
  const ref = useReveal();
  return (
    <section id="cta" className="final-cta">
      <div className="cta-sage"><img src="enki-logo.png" alt="" /></div>
      <div className="container">
        <div ref={ref} className="reveal">
          <div className="eyebrow" style={{ marginBottom: 18 }}><span className="dot"></span>ابدأ هسه</div>
          <h2>جاهز تبدأ دراسة أذكى؟</h2>
          <p style={{ marginTop: 14, fontSize: 17, maxWidth: 620, margin: '14px auto 0' }}>
            خلي إنكي يرتبلك الطريق، يختبر مستواك، ويساعدك توصل لهدفك خطوة بخطوة. التطبيق قريباً على iOS و Android.
          </p>
          <div className="cta-row" style={{ justifyContent: 'center', marginTop: 30 }}>
            <a href="#" className="btn btn-gold btn-lg">ابدأ رحلتك هسه<Ic.ArrowLeft width="18" height="18" /></a>
            <a href="#" className="btn btn-ghost btn-lg">عندي حساب بالفعل</a>
          </div>
          <div style={{ marginTop: 32 }}>
            <div className="lbl" style={{ fontSize: 12, color: 'var(--muted-2)', marginBottom: 10, letterSpacing: '.04em' }}>التطبيق قريباً على iOS و Android</div>
            <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap' }}>
              <StoreBtn kind="apple" />
              <StoreBtn kind="google" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.FinalCTA = FinalCTA;

// 14. Footer
function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="ftr-grid ftr">
          <div>
            <Logo />
            <p className="desc">إنكي هو رفيقك الذكي بالدراسة، يساعدك تخطط، تراجع، وتختبر نفسك بطريقة أسهل.</p>
            <div className="socials">
              <a href="https://instagram.com/enki.education" className="social" aria-label="Instagram"><Ic.Instagram width="18" height="18" /></a>
              <a href="#" className="social" aria-label="Telegram"><Ic.Telegram width="18" height="18" /></a>
            </div>
          </div>
          <div>
            <h4>روابط</h4>
            <ul>
              <li><a href="#how">شلون يشتغل</a></li>
              <li><a href="#features">المميزات</a></li>
              <li><a href="#pricing">الخطط والأسعار</a></li>
              <li><a href="#faq">الأسئلة الشائعة</a></li>
              <li><a href="#testimonials">آراء الطلاب</a></li>
            </ul>
          </div>
          <div>
            <h4>قانوني ودعم</h4>
            <ul>
              <li><a href="terms.html">الشروط والأحكام</a></li>
              <li><a href="privacy.html">سياسة الخصوصية</a></li>
              <li><a href="support.html">الدعم</a></li>
              <li><a href="support.html">تواصل ويانا</a></li>
            </ul>
          </div>
          <div>
            <h4>تواصل ويانا</h4>
            <ul>
              <li><a href="#" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Ic.Instagram width="16" height="16" />@enki.education</a></li>
              <li><a href="mailto:help.enki@gmail.com" style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}><Ic.Mail width="16" height="16" />help.enki@gmail.com</a></li>
            </ul>
            <div style={{ marginTop: 16, padding: '10px 12px', borderRadius: 12, background: 'rgba(244,195,90,0.08)', border: '1px solid rgba(244,195,90,0.2)', color: '#FFE9B8', fontSize: 12, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Ic.Phone width="14" height="14" />التطبيق قريباً
            </div>
          </div>
        </div>
        <div className="ftr-bottom">
          <span>© 2026 إنكي. جميع الحقوق محفوظة.</span>
          <span>باستخدامك إنكي، أنت توافق على الشروط والأحكام وسياسة الخصوصية.</span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;