// Sections B: Personalization, Features, How It Works, App Preview

// 6. Personalization
function Personalization() {
  const ref = useReveal();
  const interests = ['أفلام', 'كرة قدم', 'طبخ', 'ألعاب', 'موسيقى', 'سيارات'];
  const examples = {
    'كرة قدم': {
      prompt: 'اشرحلي الفيزياء بأمثلة من كرة القدم',
      reply: 'تخيل أنت بوسط مباراة حماسية، وفجأة سقط لاعب بدون أي احتكاك! في هذه اللحظة، يركض الطاقم الطبي ومعهم جهاز صغير يسمى "جهاز صدمات القلب". هل كنت تعرف أن هذا الجهاز هو عبارة عن متسعة عملاقة؟',
    },
    'أفلام': {
      prompt: 'اشرحلي التوازن الكيميائي ؟',
      reply: 'بفيلم أفنجرز، ثانوس كان هدفه الوحيد هو "التوازن" بالكون. بالكيمياء، التفاعل الكيميائي هم يحب الاستقرار، وإذا أحد حاول يخرب هذا الاستقرار، التفاعل راح "يفصل" عليه ويحاول يرجع التوازن غصباً عن الكل.',
    },
    'طبخ': {
      prompt: 'شنو مفهوم الخلية ؟ ',
      reply: 'تخيل الخلية هي مطعم ضخم يقدم أشهى الأطباق (البروتينات)، وكل "عضية" داخلها هي موظف أو أداة ضرورية حتى ينجح العشاء.',
    },
    'ألعاب': {
      prompt: 'شنو يعني نصف القطر ؟',
      reply: 'تخيل أنت بداخل المباراة، وفجأة ظهرت الدائرة (The Zone) وبدأت تتقلص. بالرياضيات، هذه الدائرة هي "دائرة نصف قطرها r ومساحتها A".',
    },
    'موسيقى': {
      prompt: 'اشرحلي الموجات بمثال من الموسيقى',
      reply: 'الصوت الواطي عنده تردد قليل والصوت الحاد تردده عالي — نفس النوتات بالأغاني تتغير بنفس الفكرة.',
    },

    'سيارات': {
      prompt: 'اشرحلي التسارع بمثال من السيارات',
      reply: 'لمن تدوس البنزين بسيارة، السرعة تزيد بثواني — هاي بالضبط التسارع: تغير السرعة بمرور الوقت.',
    },
  };
  const [active, setActive] = useState('كرة قدم');
  const [fade, setFade] = useState(false);
  const onPick = (n) => {
    if (n === active) return;
    setFade(true);
    setTimeout(() => { setActive(n); setFade(false); }, 220);
  };
  const ex = examples[active];

  return (
    <section>
      <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: 'grid', gap: 24, gridTemplateColumns: '1fr', alignItems: 'start' }} className="perso-grid">
          <style>{`
            @media (min-width: 980px) {
              .perso-grid { grid-template-columns: 1fr 1.1fr !important; gap: 40px !important; }
            }
          `}</style>

          <div>
            <h3 style={{ fontSize: 'clamp(22px, 2.5vw, 30px)', lineHeight: 1.25, marginBottom: 14 }}>
              إنكي يشرحلك بالطريقة اللي تحبها
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.75, marginBottom: 22 }}>
              تحب الأفلام؟ الرياضة؟ الطبخ؟ الألعاب؟ يخلي الأمثلة قريبة من اهتماماتك حتى تفهم أسرع.
            </p>

            <div className="glass perso-card">
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
                <span style={{ width: 30, height: 30, borderRadius: 9, background: 'rgba(244,195,90,0.18)', color: '#F4C35A', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <Ic.Sparkles width="16" height="16" />
                </span>
                <span style={{ fontWeight: 700, fontSize: 14, color: '#FFE9B8' }}>اختار اللي تحبه</span>
              </div>
              <div style={{ color: '#A9B6D3', fontSize: 13 }}>اختر اهتماماً وشوف شلون يتغير الشرح</div>
              <div className="chips">
                {interests.map(n => (
                  <button key={n} onClick={() => onPick(n)} className={'chip' + (n === active ? ' active' : '')}>{n}</button>
                ))}
              </div>
            </div>
          </div>

          <div className="glass explain-card">
            <div className="explain-prompt">
              <div className="lbl">الطالب</div>
              <div style={{ color: '#fff', fontWeight: 600, fontSize: 15, lineHeight: 1.5 }}>{ex.prompt}</div>
            </div>
            <div className={'explain-reply' + (fade ? ' fade-out' : '')}>
              <span className="ai-pill"><Ic.Sparkles width="12" height="12" />إنكي</span>
              <div style={{ color: '#E7EDFA', fontSize: 15, lineHeight: 1.7 }}>{ex.reply}</div>
            </div>
            <div style={{ display: 'flex', gap: 8, marginTop: 14, flexWrap: 'wrap' }}>
              <span style={{ padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.05)', border: '1px solid var(--glass-bd)', color: '#A9B6D3', fontSize: 12 }}>مثال آخر</span>
              <span style={{ padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.05)', border: '1px solid var(--glass-bd)', color: '#A9B6D3', fontSize: 12 }}>أبسط</span>
              <span style={{ padding: '6px 12px', borderRadius: 999, background: 'rgba(255,255,255,0.05)', border: '1px solid var(--glass-bd)', color: '#A9B6D3', fontSize: 12 }}>تمرين</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Personalization = Personalization;

// 7. Features
function Features() {
  const ref = useReveal();
  const items = [
    { t: 'شرح مبسط', d: 'يفهمك المادة بطريقة سهلة وقريبة عليك.', ic: Ic.Book },
    { t: 'تقييم مستواك', d: 'يعرف نقاط قوتك وضعفك.', ic: Ic.Chart },
    { t: 'مراجعة ذكية', d: 'يركز على الأشياء اللي تحتاجها أكثر.', ic: Ic.Refresh },
    { t: 'تنبيهات وخطة يومية', d: 'حتى تبقى ملتزم بدون ضغط.', ic: Ic.Bell },
    { t: 'مناسب للموبايل', d: 'ادرس بأي وقت ومن أي مكان.', ic: Ic.Phone },
    { t: 'واجهة عراقية', d: 'لغة وتصميم قريبين منك.', ic: Ic.Globe },
  ];
  return (
    <section id="features">
      <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="grid-6">
          {items.map((it, i) => (
            <div key={i} className="glass feat-card">
              <div className="feat-icon"><it.ic width="22" height="22" /></div>
              <h3>{it.t}</h3>
              <p style={{ marginTop: 8 }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.Features = Features;

// 8. How it works
function HowItWorks() {
  const ref = useReveal();
  const steps = [
    { n: '1', t: 'سجّل حسابك', d: 'ابدأ بدقايق وبكل سهولة.', ic: Ic.Sparkles },
    { n: '2', t: 'حدد مستواك', d: 'جاوب على شوية أسئلة حتى إنكي يعرف شنو تحتاج.', ic: Ic.Target },
    { n: '3', t: 'ابدأ خطتك', d: 'تابع دراستك، اختبر نفسك، وشوف تقدمك.', ic: Ic.Map },
  ];
  return (
    <section id="how">
      <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="steps">
          {steps.map((s, i) => (
            <div key={i} className="glass step">
              <div className="step-num">{s.n}</div>
              <h3>{s.t}</h3>
              <p style={{ marginTop: 8 }}>{s.d}</p>
              <div style={{ marginTop: 18, color: 'rgba(244,195,90,0.5)' }}>
                <s.ic width="40" height="40" style={{ opacity: 0.6 }} />
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.HowItWorks = HowItWorks;

// 9. App Preview
function AppPreview() {
  const ref = useReveal();
  const items = [
    { t: 'خطة اليوم', s: '3 مواد رئيسية', ic: Ic.Map, pill: 'اليوم', prog: 68 },
    { t: 'اختبار سريع', s: '10 أسئلة • 5 دقايق', ic: Ic.Target, pill: 'سريع' },
    { t: 'مستواك الحالي', s: 'متوسط — يتحسّن', ic: Ic.Chart, pill: 'مستوى', prog: 54 },
    { t: 'اقتراحات إنكي', s: 'راجع الفصل الثالث', ic: Ic.Sparkles, pill: 'مقترح' },
    { t: 'نسبة التقدم', s: 'هاي الأسبوع', ic: Ic.Chart, pill: 'تقدم', prog: 82 },
    { t: 'نقاط تحتاج مراجعة', s: '4 مواضيع', ic: Ic.Refresh, pill: 'تنبيه' },
  ];
  return (
    <section>
      <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 className="mini-card-grid">
          {items.map((it, i) => (
            <div key={i} className="glass mini-card">
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                <span className="pill">{it.pill}</span>
                <span style={{ width: 32, height: 32, borderRadius: 10, background: 'rgba(46,99,214,0.25)', border: '1px solid rgba(120,160,240,0.3)', color: '#F4C35A', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
                  <it.ic width="16" height="16" />
                </span>
              </div>
              <div className="ttl" style={{ marginTop: 12 }}>{it.t}</div>
              <div className="sub">{it.s}</div>
              {it.prog !== undefined && (
                <div className="progress"><span style={{ width: it.prog + '%', '--from': (it.prog - 18) + '%', '--to': it.prog + '%' }}></span></div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.AppPreview = AppPreview;