# اختبار كامل: أفضل 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> مقارنة حصرية
  </div>
  
  <h1 className="text-4xl md:text-6xl font-black mb-6 leading-tight text-white drop-shadow-lg">
    اختبار كامل: <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">أفضل 12 إطارًا</span>
  </h1>
  
  <p className="text-xl text-slate-300 font-medium mb-10 max-w-2xl mx-auto">
    <strong className="text-blue-500">5 000 كم</strong> من الاختبارات الحقيقية.
  </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">5237 كم</div>
    </div>
    <div className="bg-slate-900 border border-blue-900/50 p-6 rounded-2xl backdrop-blur-md hover:border-blue-500/50 transition-colors shadow-xl relative overflow-hidden">
      <div className="absolute top-0 right-0 w-20 h-20 bg-blue-500/10 rounded-full blur-xl pointer-events-none"></div>
      <div className="text-4xl mb-3 font-black italic text-blue-500">12</div>
      <div className="text-sm text-slate-400 uppercase tracking-wider font-semibold mb-1">إطارات</div>
      <div className="text-xl font-black text-blue-400">تم اختبارها</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">شامل</div>
    </div>
  </div>
</div>

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

<div className="bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-12 shadow-2xl relative overflow-hidden">
    <h2 className="text-2xl font-black text-white mb-6 border-b border-slate-800 pb-4">🔍 المنهجية</h2>
    <p className="text-slate-300 mb-6">بروتوكول صارم:</p>
    <ul className="grid grid-cols-1 md:grid-cols-2 gap-4 text-slate-300">
        <li className="flex items-center gap-3"><span className="text-blue-500">✅</span> وزن 210 كجم</li>
        <li className="flex items-center gap-3"><span className="text-blue-500">✅</span> مختلط</li>
        <li className="flex items-center gap-3"><span className="text-blue-500">✅</span> كل الفصول</li>
        <li className="flex items-center gap-3"><span className="text-blue-500">✅</span> ضغط طبيعي</li>
    </ul>
</div>

<h2 className="text-3xl font-black text-white mb-12 text-center relative">
  <span className="relative z-10">🏆 الترتيب</span>
  <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-12 bg-blue-500/20 rounded-full blur-xl pointer-events-none"></div>
</h2>

{/* Tire 1 */}
<TireScoreCard
  rank="1"
  name="Michelin Anakee Adventure"
  type="80% طريق / 20% مسارات"
  lifespan="12 500 كم"
  price="320€"
  overallScore="9.4"
  gripRoad="9.5"
  gripOffroad="6.5"
  durability="8.5"
  buyLink="https://www.anrdoezrs.net/click-101188448-15707730?url=https%3A%2F%2Fwww.dafy-moto.com%2Fpneu-anakee-adventure-michelin.html"
>
  <div>التسوية المثالية لمعظم مالكي دراجة أفريكا توين. سلوك لا تشوبه شائبة على الطريق (حتى تحت المطر الغزير) وتماسك جيد على المسارات الترابية. الانعطاف تدريجي ويبعث على الاطمئنان.</div>
  <ProsAndCons 
    pros="ثبات استثنائي تحت المطر | انعطاف آمن | عمر افتراضي ممتاز | ضجيج الدوران منخفض"
    cons="يصل حده بسرعة في الطين | سعر شراء مرتفع | مظهر أقل شراسة من المنافسين"
  />
</TireScoreCard>

{/* Tire 2 */}
<TireScoreCard
  rank="2"
  name="Metzeler Tourance Next 2"
  type="90% طريق / 10% مسارات"
  lifespan="15 000 كم+"
  price="290€"
  overallScore="9.1"
  gripRoad="9.8"
  gripOffroad="4.0"
  durability="9.5"
  buyLink="https://www.anrdoezrs.net/click-101188448-15707730?url=https%3A%2F%2Fwww.dafy-moto.com%2Fpneu-tourance-next-2-metzeler.html"
>
  <div>الملك المتوج للأسفلت. إذا كنت لا تترك الطريق تقريبًا، فهذا هو الإطار المناسب لك. دقة جراحية في التصويب وقدرة على تحمل الكيلومترات مع الحمولة دون أي مشكلة.</div>
  <ProsAndCons 
    pros="استقرار مذهل عند السرعات العالية | رقم قياسي في العمر الافتراضي | كبح طوارئ ممتاز على الأسطح المبللة"
    cons="مخصص للطريق 100% (لا يوجد أوف-رود حقيقي) | احتمال حدوث ارتجاج خفيف لاحقا | وقت تسخين طويل"
  />
</TireScoreCard>

{/* Tire 3 */}
<TireScoreCard
  rank="3"
  name="Bridgestone Battlax AX41"
  type="50% طريق / 50% مسارات"
  lifespan="8 000 كم"
  price="280€"
  overallScore="8.9"
  gripRoad="7.0"
  gripOffroad="9.5"
  durability="6.0"
>
  <div>إطار المغامرين! كتله المذهلة تغير أداء الدراجة في الرمال والطين. إطار مفاجئ على الطريق الجاف حيث يسمح بالقيادة بسلاسة رغم تصميمه المتطرف.</div>
  <ProsAndCons 
    pros="جر قوي في الأوف-رود | مظهر وحشي بأسلوب رالي داكار | مفاجئ بخفة حركته على الجاف | طرد مثالي للطين"
    cons="تآكل سريع للإطار الخلفي | ضجيج دوران كبير يتجاوز 90 كم/س | يتطلب حذرا على الإسفلت المبلل"
  />
</TireScoreCard>

{/* Tire 4 */}
<TireScoreCard
  rank="4"
  name="Continental TKC 70 Rocks"
  type="60% طريق / 40% مسارات"
  lifespan="9 500 كم"
  price="340€"
  overallScore="8.7"
  gripRoad="8.5"
  gripOffroad="7.5"
  durability="7.5"
>
  <div>التطور المثالي لإطارات TKC 70 الشهيرة. يجمع بين ثبات السرعات العالية والقدرة الممتازة والمطورة للسير داخل التاريس الوعرة.</div>
  <ProsAndCons 
    pros="تنوع مذهل بين الطريق والتراب | لا اهتزازات بسرعات عالية | تسخين ممتاز | مسافة معقولة لإطار خشن"
    cons="سعر ممتاز (غالي) | الإطار الأمامي مزعج قليلًا | الجزء الخلفي يتآكل ليصبح مسطحًا"
  />
</TireScoreCard>

{/* Tire 5 */}
<TireScoreCard
  rank="5"
  name="Pirelli Scorpion Trail II"
  type="90% طريق / 10% مسارات"
  lifespan="13 000 كم"
  price="310€"
  overallScore="8.6"
  gripRoad="9.6"
  gripOffroad="4.5"
  durability="8.0"
>
  <div>إطار الطيار. تصميم رياضي جدا يمنحك سرعة مدهشة في المنعطفات. يمكن الشعور ببصمة بيريللي من الكيلومترات الأولى. فقط لمحبي الإسفلت والنقاء.</div>
  <ProsAndCons 
    pros="سلوك رياضي للغاية على الطريق | رشاقة مذهلة في المنعطفات | تماسك أقصى عند الانعطاف | شكل جميل للسطح"
    cons="تآكل متعرج في الأمام | عديم الفائدة كليا خارج الإسفلت | الأداء ينخفض في نهاية العمر الافتراضي"
  />
</TireScoreCard>

{/* Tire 6 */}
<TireScoreCard
  rank="6"
  name="Dunlop Trailmax Mission"
  type="70% طريق / 30% مسارات"
  lifespan="11 000 كم"
  price="300€"
  overallScore="8.5"
  gripRoad="8.0"
  gripOffroad="7.0"
  durability="8.5"
>
  <div>إطار المغامرة بالأسلوب الأمريكي. قوي جدًا، يتحمل الحمولات الثقيلة ويوفر مقاومة كبيرة للثقوب. مثالي للرحلات المختلطة حيث الموثوقية مهمة جدا.</div>
  <ProsAndCons 
    pros="جوانب مدعمة بقوة ضد الثقوب | توازن مميز بين الطريق والمسارات | أسلوب متين جدا | مقاوم للتآكل الطبقي"
    cons="إطار ثقيل يؤثر على الرشاقة بالسرعات البطيئة | الجدار الصلب يقلل الراحة قليلًا | صعب جدًا في التركيب"
  />
</TireScoreCard>

{/* Tire 7 */}
<TireScoreCard
  rank="7"
  name="Mitas E-07+ Dakar"
  type="50% طريق / 50% مسارات"
  lifespan="10 000 كم"
  price="260€"
  overallScore="8.3"
  gripRoad="6.0"
  gripOffroad="8.5"
  durability="9.0"
>
  <div>المرجع للمغامرين الذين يبحثون عن المتانة بميزانية معقولة. يتميز طراز داكار بجدار صلب جدا يتحمل أصعب التضاريس وأعنفها.</div>
  <ProsAndCons 
    pros="مقاومة فائقة ضد القطع | تماسك بارز بالوعورة | عمر افتراضي متميز | سعر تنافسي جدًا"
    cons="ينزلق على المبلل البارد | غير مريح بالسرعة المنخفضة | ثقيل التوجيه بالمنعطفات المتعاقبة"
  />
</TireScoreCard>

{/* Tire 8 */}
<TireScoreCard
  rank="8"
  name="Heidenau K60 Ranger"
  type="40% طريق / 60% مسارات"
  lifespan="14 000 كم"
  price="270€"
  overallScore="8.1"
  gripRoad="6.5"
  gripOffroad="8.5"
  durability="9.5"
>
  <div>الخيار المطلق للرحلات العالمية. لا يُدمر، يمكنه نقلك من أوروبا إلى آسيا بثقة تامة. هذه النسخة تعالج مشاكل K60 العادي وتلغي الشريط المركزي.</div>
  <ProsAndCons 
    pros="عمر كيلومتري أسطوري | غلاف مدرع صلب ضد الصخور | تماسك ممتاز في الحصى | أفضل نسبة سعر لعمر زمني"
    cons="تماسك ضعيف بالطريق المبلل | مزعج جيدا بالخطوط السريعة | صعب التسخين في البرد"
  />
</TireScoreCard>

{/* Tire 9 */}
<TireScoreCard
  rank="9"
  name="Shinko 804/805"
  type="40% طريق / 60% مسارات"
  lifespan="6 500 كم"
  price="190€"
  overallScore="7.9"
  gripRoad="5.5"
  gripOffroad="8.0"
  durability="5.5"
>
  <div>حل منخفض التكلفة للدخول في التراب. مثالي لتجهيز دراجتك من أجل عطلة نهاية الأسبوع لرحلة أوف-رود دون إفلاس ميزانيتك.</div>
  <ProsAndCons 
    pros="سعر شراء لا ينافس | مظهر هائل | تماسك صادق بالثلج والطين | يسخن السطح بسرعة"
    cons="عمر زمني مضحك على الإسفلت (يذوب سريعًا) | كبح خطير على المبلل | يصبح الإطار مربعا بشكل سريع"
  />
</TireScoreCard>

{/* Tire 10 */}
<TireScoreCard
  rank="10"
  name="Kenda K761"
  type="70% طريق / 30% مسارات"
  lifespan="7 000 كم"
  price="210€"
  overallScore="7.7"
  gripRoad="7.0"
  gripOffroad="6.0"
  durability="6.5"
>
  <div>إطار للمبتدئين يقدم أداءً مقبولًا للاستخدام اليومي والرحلات العرضية على الطرق الوعرة. مثالي لأصحاب الميزانيات المحدودة.</div>
  <ProsAndCons 
    pros="سعر مناسب بامتياز | توازن جيد للاستخدام الخفيف للوعورة | تصميم مقبول"
    cons="تماسك سيء تحت المطر الغزير | عمر افتراضي متواضع | عدم دقة التوجيه بالسرعات العالية"
  />
</TireScoreCard>

{/* Tire 11 */}
<TireScoreCard
  rank="11"
  name="Pirelli Scorpion Rally STR"
  type="30% طريق / 70% مسارات"
  lifespan="5 500 كم"
  price="330€"
  overallScore="7.5"
  gripRoad="6.0"
  gripOffroad="9.0"
  durability="4.5"
>
  <div>الأداء الصافي للوعورة العنيفة. إنه ليس إطارًا للرحلات الطويلة، بل للعب في أسوأ الظروف كالوحل الكثيف والرمل العميق.</div>
  <ProsAndCons 
    pros="تماسك مذهل بالتراب الحر | أسلوب وحشي | يمنح الثقة فورا خارج الإسفلت"
    cons="يتلف بسرعة إن تم استخدامه كثيرا على الطريق | مزعج على السرعات المرتفعة | تكلفة حقيقية عالية لكل كيلومتر"
  />
</TireScoreCard>

{/* Tire 12 */}
<TireScoreCard
  rank="12"
  name="Motoz Tractionator GPS"
  type="40% طريق / 60% مسارات"
  lifespan="8 500 كم"
  price="290€"
  overallScore="7.2"
  gripRoad="5.0"
  gripOffroad="8.0"
  durability="8.0"
>
  <div>العجيبة الأسترالية! إطار قابل للعكس (اتجاه للطريق واتجاه مخصص للأوف رود الصعب). صلب كالصخر لكن يتطلب التعود للقيادة به.</div>
  <ProsAndCons 
    pros="خياران لتركيبه | جدران لا تخترق تقريبا | المركز يضمن مسافة قيادة طويلة"
    cons="إحساس غريب بالأمام بالبداية | تماسك أشبه بالخطير تحت الأمطار | صدى صوتي مزعج بناء على نوع الأرضية"
  />
</TireScoreCard>


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

<div className="bg-slate-900 border border-blue-900/50 rounded-3xl p-8 mb-16 shadow-[0_0_30px_rgba(59,130,246,0.1)] relative overflow-hidden">
    <div className="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-2xl pointer-events-none"></div>
    <h2 className="text-2xl font-black text-white mb-8 relative z-10 flex items-center gap-3">
        <span>🛠️</span> نصائح
    </h2>
    
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 relative z-10">
        <div className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700/50 hover:border-blue-500/50 transition-colors">
            <h4 className="text-lg font-bold text-white mb-4">🔧 الضغط</h4>
            <ul className="text-slate-400 space-y-2 text-sm">
                <li>• طريق</li>
                <li>• طرق وعرة</li>
            </ul>
        </div>
        
        <div className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700/50 hover:border-blue-500/50 transition-colors">
            <h4 className="text-lg font-bold text-white mb-4">🔄 فحص</h4>
            <ul className="text-slate-400 space-y-2 text-sm">
                <li>• 5000 كم</li>
                <li>• دائما</li>
            </ul>
        </div>
        
        <div className="bg-slate-800/50 p-6 rounded-2xl border border-slate-700/50 hover:border-blue-500/50 transition-colors">
            <h4 className="text-lg font-bold text-white mb-4">🧼 فحص</h4>
            <ul className="text-slate-400 space-y-2 text-sm">
                <li>• نمط</li>
                <li>• تنظيف</li>
            </ul>
        </div>
    </div>
</div>



{/* Quiz Section */}
<div className="mt-16 pt-10 border-t border-slate-800 relative z-10">
    <div className="text-center mb-10" id="start-container-pneus">
        <h2 className="text-3xl md:text-4xl font-black mb-4 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-400">
            🔍 جد الإطار المناسب
        </h2>
        <p className="text-xl text-slate-300 font-medium mb-10">5 أسئلة</p>
        <button id="start-quiz-pneus" 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-pneus" 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-pneus">سؤال 1/5</span>
            </div>
            <div className="h-2 bg-slate-800 rounded-full overflow-hidden">
                <div id="quiz-progress-bar-pneus" className="h-full w-[20%] bg-gradient-to-r from-blue-500 to-cyan-400 transition-all duration-300 rounded-full"></div>
            </div>
        </div>
    </div>

    <form id="quiz-form-pneus" className="max-w-3xl mx-auto my-10 hidden">
        
        {/* Q1 */}
        <div className="quiz-page-pneus active bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden" id="pneus-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-pneus">
                <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="pneus_q1" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">&lt;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="pneus_q1" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">20-40%</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="pneus_q1" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">40-60%</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="pneus_q1" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">>60%</span>
                </label>
            </div>
            <div className="text-right mt-8">
                <button type="button" className="next-btn-pneus 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-pneus bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="pneus-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-pneus">
                <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="pneus_q2" 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="pneus_q2" 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="pneus_q2" value="C" 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-pneus 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-pneus 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-pneus bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="pneus-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-pneus">
                <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="pneus_q3" 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="pneus_q3" 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="pneus_q3" 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="pneus_q3" 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-pneus 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-pneus 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-pneus bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="pneus-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-pneus">
                <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="pneus_q4" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">&lt;5k</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="pneus_q4" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">5-10k</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="pneus_q4" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">10-20k</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="pneus_q4" value="D" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">>20k</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-pneus 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-pneus 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-pneus bg-slate-900 border border-slate-700/50 rounded-3xl p-8 mb-6 shadow-2xl relative overflow-hidden hidden" id="pneus-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-pneus">
                <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="pneus_q5" value="A" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">&lt;50</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="pneus_q5" value="B" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">250-350</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="pneus_q5" value="C" className="w-5 h-5 accent-blue-500 shrink-0" /> <span className="text-lg">>350</span>
                </label>
            </div>
            <div className="flex justify-between items-center mt-8">
                <button type="button" className="prev-btn-pneus 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-pneus 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-black shadow-[0_10px_30px_rgba(59,130,246,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="pneus-str-progress">سؤال</div>
    <div className="hidden" id="pneus-str-score">النتيجة:</div>
    <div className="hidden" id="pneus-str-life">عمر:</div>
    <div className="hidden" id="pneus-str-price">سعر:</div>
    <div className="hidden" id="pneus-str-alt">بديل:</div>
    <div className="hidden" id="pneus-str-vous">لك:</div>

    {/* Results Panel */}
    <div id="quiz-result-pneus" className="hidden max-w-4xl mx-auto my-16">
        <div className="bg-slate-900 border border-blue-500/30 rounded-[2.5rem] p-10 md:p-12 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 className="text-6xl 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>
            <p className="text-xl text-slate-300 mb-10 relative z-10">النتيجة:</p>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6 relative z-10 text-left mb-10" id="pneus-result-cards">
                {/* Dynamically populated by JS */}
            </div>
            
            <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-pneus 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="/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-pneus label input[type="radio"]:checked + span {
    color: #38bdf8; /* sky-400 */
    font-weight: 700;
}
`} />

<ArticleScript src="/scripts/quizzes/pneus-adventure-v2.js" />