# 🏍️ مسابقة فابيو كوارتارارو: هل تعرف حقًا الشيطان الفرنسي؟

اختبر معلوماتك عن فابيو كوارتارارو من خلال هذه المسابقة المكونة من 12 سؤالًا!

---

import ArticleScript from '@/components/ArticleScript';

{/* Hero Section */}
<div className="text-center mb-12 relative">
  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl h-64 bg-blue-500/10 rounded-full blur-[100px] pointer-events-none"></div>
  
  <div className="inline-flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-900/50 to-blue-500/20 text-blue-400 border border-blue-500/50 rounded-full text-sm font-bold uppercase tracking-widest mb-6 shadow-[0_0_15px_rgba(59,130,246,0.3)]">
    <span>😈</span> EL DIABLO QUIZ
  </div>
  
  <h1 className="text-4xl md:text-6xl font-black mb-6 leading-tight text-white drop-shadow-lg">
    Fabio <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">Quartararo Quiz</span>
  </h1>
  
  <p className="text-xl text-slate-300 font-medium mb-10 max-w-2xl mx-auto">
    أول بطل عالمي فرنسي في تاريخ MotoGP. 12 سؤال لاختبار معلوماتك!
  </p>
  
  <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div className="bg-slate-900 border border-slate-700/50 p-6 rounded-2xl backdrop-blur-md hover:border-blue-500/50 transition-colors shadow-xl">
      <div className="text-4xl mb-3">🇫🇷</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">الفخر الوطني</div>
      <div className="text-xl font-black text-white">فرنسا</div>
    </div>
    <div className="bg-slate-900 border border-red-900/50 p-6 rounded-2xl backdrop-blur-md hover:border-red-500/50 transition-colors shadow-xl relative overflow-hidden">
      <div className="absolute top-0 right-0 w-20 h-20 bg-red-500/10 rounded-full blur-xl pointer-events-none"></div>
      <div className="text-4xl mb-3 font-black italic text-red-500">20</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">رقم الحظ</div>
      <div className="text-xl font-black text-red-400">El Diablo</div>
    </div>
    <div className="bg-slate-900 border border-slate-700/50 p-6 rounded-2xl backdrop-blur-md hover:border-cyan-500/50 transition-colors shadow-xl">
      <div className="text-4xl mb-3">🏆</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">بطل</div>
      <div className="text-xl font-black text-cyan-400">2021</div>
    </div>
  </div>
</div>

<div className="flex justify-center my-10">
  <AdSense slot="4357278838" format="auto" />
</div>

<div className="mt-16 pt-10 border-t border-slate-800 relative z-10">
    <div className="text-center mb-10" id="start-container-fq">
        <button id="start-quiz-fabio" className="bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white border-none px-10 py-5 rounded-full text-xl font-black cursor-pointer shadow-[0_10px_30px_rgba(59,130,246,0.3)] uppercase tracking-wider transition-transform hover:scale-105">
            🚀 ابدأ المسابقة
        </button>
    </div>

    {/* Progress Bar */}
    <div id="quiz-progress-container-fabio" className="sticky top-0 z-50 bg-slate-950/90 backdrop-blur-md p-4 border-b border-slate-800 hidden">
        <div className="max-w-3xl mx-auto">
            <div className="flex justify-between mb-2">
                <span className="text-sm font-bold text-blue-400" id="quiz-progress-text-fabio">سؤال</span>
                <span className="text-sm font-bold text-cyan-400" id="quiz-timer-fabio">0:00</span>
            </div>
            <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
                <div id="quiz-progress-bar-fabio" className="h-full w-[8.33%] bg-gradient-to-r from-blue-500 to-cyan-400 transition-all duration-300 rounded-full"></div>
            </div>
        </div>
    </div>

    <form id="quiz-form-fabio" className="max-w-3xl mx-auto my-10 hidden">
        
        {/* Q1 */}
        <div className="quiz-page-fabio active bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden" id="fabio-page-1">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">1</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">ما هو اللقب الشهير لفابيو؟</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q1" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">The Doctor</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q1" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">El Diablo</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q1" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">Top Gun</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q1" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">The Beast</span>
                </label>
            </div>
            <div className="text-right mt-8">
                <button type="button" className="next-btn-fabio bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">التالي ←</button>
            </div>
        </div>

        {/* Q2 */}
        <div className="quiz-page-fabio bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="fabio-page-2">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">2</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">مع أي علامة تجارية فاز بالبطولة؟</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q2" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">Ducati</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q2" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">Yamaha</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q2" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">Honda</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q2" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">Suzuki</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-fabio bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">→ السابق</button>
                <button type="button" className="next-btn-fabio bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">التالي ←</button>
            </div>
        </div>

        {/* Q3 */}
        <div className="quiz-page-fabio bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="fabio-page-3">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">3</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">في أي عام فاز باللقب؟</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q3" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">2020</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q3" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">2021</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q3" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">2019</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q3" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">2022</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-fabio bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">→ السابق</button>
                <button type="button" className="next-btn-fabio bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">التالي ←</button>
            </div>
        </div>

        {/* Q4 */}
        <div className="quiz-page-fabio bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="fabio-page-4">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">4</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">ما هي مسقط رأسه؟</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q4" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">مرسيليا</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q4" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">نيس</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q4" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">ليون</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q4" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">باريس</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-fabio bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">→ السابق</button>
                <button type="button" className="next-btn-fabio bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">التالي ←</button>
            </div>
        </div>

        {/* Q5 */}
        <div className="quiz-page-fabio bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="fabio-page-5">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">5</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">ما هو رقم سباقه؟</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q5" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">46</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q5" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">93</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q5" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">20</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q5" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">5</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-fabio bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">→ السابق</button>
                <button type="button" className="next-btn-fabio bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">التالي ←</button>
            </div>
        </div>

        {/* Q6 */}
        <div className="quiz-page-fabio bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="fabio-page-6">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">6</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">ما الوشم على ذراعه الأيمن؟</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q6" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">نسر</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q6" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">رأس شيطان</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q6" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">نمر</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q6" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">بوصلة</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-fabio bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">→ السابق</button>
                <button type="button" className="next-btn-fabio bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">التالي ←</button>
            </div>
        </div>

        {/* Q7 */}
        <div className="quiz-page-fabio bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="fabio-page-7">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">7</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">في أي فريق قمر صناعي ظهر لأول مرة؟</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q7" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">Tech3</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q7" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">Petronas Yamaha SRT</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q7" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">Pramac</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q7" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">Gresini</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-fabio bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">→ السابق</button>
                <button type="button" className="next-btn-fabio bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">التالي ←</button>
            </div>
        </div>

        {/* Q8 */}
        <div className="quiz-page-fabio bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="fabio-page-8">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">8</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">كم عدد مراكز الانطلاق في موسمه الأول؟</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q8" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">3</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q8" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">6</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q8" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">1</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q8" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">4</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-fabio bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">→ السابق</button>
                <button type="button" className="next-btn-fabio bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">التالي ←</button>
            </div>
        </div>

        {/* Q9 */}
        <div className="quiz-page-fabio bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="fabio-page-9">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">9</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">قدوته في الطفولة؟</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q9" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">كيسي ستونر</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q9" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">مارك ماركيز</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q9" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">فالنتينو روسي</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q9" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">خورخي لورينزو</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-fabio bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">→ السابق</button>
                <button type="button" className="next-btn-fabio bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">التالي ←</button>
            </div>
        </div>

        {/* Q10 */}
        <div className="quiz-page-fabio bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="fabio-page-10">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">10</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">حلبة انتصاره الأول؟</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q10" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">لو مان</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q10" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">خيريز</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q10" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">كاتالونيا</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q10" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">آسين</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-fabio bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">→ السابق</button>
                <button type="button" className="next-btn-fabio bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">التالي ←</button>
            </div>
        </div>

        {/* Q11 */}
        <div className="quiz-page-fabio bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="fabio-page-11">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">11</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">التدريب المتكرر في...</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q11" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">موتوكروس</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q11" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">محاكمة</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q11" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">MTB</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q11" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">المسار</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-fabio bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">→ السابق</button>
                <button type="button" className="next-btn-fabio bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-10 py-4 rounded-xl text-lg font-bold shadow-[0_10px_30px_rgba(59,130,246,0.3)] transition-all disabled:opacity-50">التالي ←</button>
            </div>
        </div>

        {/* Q12 */}
        <div className="quiz-page-fabio bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="fabio-page-12">
            <div className="flex items-center gap-4 mb-8">
                <div className="bg-gradient-to-br from-blue-500 to-cyan-500 shrink-0 w-14 h-14 rounded-2xl flex items-center justify-center text-2xl font-black text-slate-900 shadow-lg">12</div>
                <h3 className="text-2xl font-bold m-0 leading-relaxed text-white">الحيوان على شعاره الشخصي؟</h3>
            </div>
            <div className="flex flex-col gap-4 text-white options-fabio">
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q12" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">قرش</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q12" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">شيطان</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q12" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">أسد</span>
                </label>
                <label className="flex items-center gap-4 p-5 bg-slate-800/50 border border-slate-600/50 rounded-xl cursor-pointer transition-all hover:bg-slate-800 hover:border-blue-500/50">
                    <input type="radio" name="fq_q12" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">ملاك</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-fabio bg-slate-800 hover:bg-slate-700 text-slate-300 border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all">→ السابق</button>
                <button type="button" className="submit-btn-fabio bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 text-white px-10 py-4 rounded-xl text-lg font-black shadow-[0_10px_30px_rgba(239,68,68,0.3)] transition-all disabled:opacity-50 tracking-wider disabled:cursor-not-allowed">🏁 إنهاء</button>
            </div>
        </div>

    </form>

    {/* Localized string injections for JS Result Logic */}
    <div className="hidden" id="fq-str-progress">سؤال</div>
    <div className="hidden" id="fq-str-share">لقد سجلت {score}/12 في اختبار فابيو كوارتارارو! 😈</div>
    
    <div className="hidden" id="fq-res-12-msg">ممتاز! أنت خبير في فابيو كوارتارارو!</div>
    <div className="hidden" id="fq-res-12-prof">خبير فابيو</div>
    
    <div className="hidden" id="fq-res-10-msg">ممتاز! أنت تعرف كل شيء تقريبًا عن El Diablo!</div>
    <div className="hidden" id="fq-res-10-prof">المعجب المطلق</div>
    
    <div className="hidden" id="fq-res-7-msg">درجة جيدة! استمر في متابعة سباقاته!</div>
    <div className="hidden" id="fq-res-7-prof">مؤيد</div>
    
    <div className="hidden" id="fq-res-0-msg">تحتاج إلى مشاهدة المزيد من سباقات MotoGP 😉</div>
    <div className="hidden" id="fq-res-0-prof">مكتشف</div>

    {/* Results Panel */}
    <div id="quiz-result-fabio" className="hidden max-w-3xl mx-auto my-16">
        <div className="bg-slate-900 border border-blue-500/30 rounded-[2.5rem] p-10 md:p-16 text-center shadow-[0_0_50px_rgba(59,130,246,0.1)] relative overflow-hidden">
            <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-blue-500/5 blur-3xl pointer-events-none"></div>
            
            <div id="result-emoji" className="text-7xl mb-6 relative z-10 drop-shadow-lg">🏆</div>
            <h2 className="text-3xl md:text-5xl font-black text-white mb-4 relative z-10">النتيجة النهائية</h2>
            
            <div id="result-score" className="text-5xl md:text-7xl font-black mb-6 text-transparent bg-clip-text bg-gradient-to-br from-blue-400 to-cyan-400 drop-shadow-sm z-10 relative"></div>
            
            <div id="result-profile-badge" className="inline-flex items-center justify-center gap-2 px-6 py-3 bg-red-500/20 text-red-400 border border-red-500/50 rounded-full text-xl font-bold uppercase tracking-wide mb-6 shadow-lg relative z-10"></div>
            
            <p id="result-text" className="text-xl text-slate-300 mb-10 relative z-10 font-medium leading-relaxed bg-slate-800/50 p-6 rounded-2xl border border-slate-700/50"></p>
            
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mt-10 relative z-10">
                <button type="button" className="restart-btn-fabio w-full sm:w-auto bg-slate-800 hover:bg-slate-700 text-white border border-slate-600 px-8 py-4 rounded-xl text-lg font-bold transition-all gap-2 flex items-center justify-center">
                    🔄 العب مرة أخرى
                </button>
                <a href="#" id="share-whatsapp-fabio" className="w-full sm:w-auto bg-gradient-to-r from-emerald-500 to-emerald-600 hover:from-emerald-400 hover:to-emerald-500 text-white px-8 py-4 rounded-xl text-lg font-bold transition-all gap-2 flex items-center justify-center border-none shadow-[0_5px_20px_rgba(16,185,129,0.3)]">
                    📱 مشاركة
                </a>
                <a href="/dashboard" className="w-full sm:w-auto bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-500 hover:to-cyan-400 text-white px-8 py-4 rounded-xl text-lg font-bold transition-all border-none shadow-[0_5px_20px_rgba(59,130,246,0.3)] gap-2 flex items-center justify-center">
                    📊 ملفي الشخصي
                </a>
            </div>
        </div>
    </div>
</div>

<ArticleStyle content={`
/* Force styles on dynamically injected results */
.options-fabio label input[type="radio"]:checked + span {
    color: #38bdf8; /* sky-400 */
    font-weight: 700;
}
`} />

<ArticleScript src="/scripts/quizzes/fabio-diable-v2.js" />