```react
import React, { useState, useMemo, useEffect } from 'react';
import { 
  Printer, Eye, EyeOff, Sparkles, BookOpen, ChevronLeft, ChevronRight, 
  Award, HelpCircle, Check, Grid, Play, Volume2, Search, Trash2, CheckSquare, 
  Square, VolumeX, Smile, Star
} from 'lucide-react';

export default function App() {
  const [selectedCard, setSelectedCard] = useState(0);
  const [withGlasses, setWithGlasses] = useState(true);
  const [activeTab, setActiveTab] = useState('gallery'); // 'gallery' | 'guide' | 'game'
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('الكل');
  
  // إعدادات الصوت والمساعد التفاعلي المطور
  const [isMuted, setIsMuted] = useState(false);
  const [autoVoice, setAutoVoice] = useState(true);
  const [availableVoices, setAvailableVoices] = useState([]);
  const [selectedForPrint, setSelectedForPrint] = useState({});
  const [completedCards, setCompletedCards] = useState({});
  const [score, setScore] = useState(0);
  const [foundTargets, setFoundTargets] = useState({});
  const [alertMessage, setAlertMessage] = useState('');

  // تحميل الأصوات العربية المتاحة في جهاز المستخدم فور تشغيل التطبيق
  useEffect(() => {
    if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
      const loadVoices = () => {
        const voices = window.speechSynthesis.getVoices();
        setAvailableVoices(voices);
      };
      loadVoices();
      window.speechSynthesis.onvoiceschanged = loadVoices;
    }
  }, []);

  // 1. محاكي المؤثرات الصوتية الكرتونية المبهجة للطفل
  const playSoundEffect = (type) => {
    if (isMuted) return;
    try {
      const ctx = new (window.AudioContext || window.webkitAudioContext)();
      
      if (type === 'pop') {
        const osc = ctx.createOscillator();
        const gain = ctx.createGain();
        osc.connect(gain);
        gain.connect(ctx.destination);
        osc.type = 'sine';
        osc.frequency.setValueAtTime(150, ctx.currentTime);
        osc.frequency.exponentialRampToValueAtTime(600, ctx.currentTime + 0.1);
        gain.gain.setValueAtTime(0.15, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1);
        osc.start();
        osc.stop(ctx.currentTime + 0.1);
      } 
      else if (type === 'success') {
        const notes = [523.25, 659.25, 783.99, 1046.50]; // نغمات سحرية متصاعدة
        notes.forEach((freq, idx) => {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.type = 'triangle';
          osc.frequency.setValueAtTime(freq, ctx.currentTime + idx * 0.08);
          gain.gain.setValueAtTime(0.1, ctx.currentTime + idx * 0.08);
          gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + idx * 0.08 + 0.15);
          osc.start(ctx.currentTime + idx * 0.08);
          osc.stop(ctx.currentTime + idx * 0.08 + 0.15);
        });
      } 
      else if (type === 'victory') {
        const melody = [523.25, 523.25, 523.25, 659.25, 587.33, 659.25, 783.99, 1046.50];
        const durations = [0.1, 0.1, 0.1, 0.15, 0.1, 0.1, 0.15, 0.4];
        let time = ctx.currentTime;
        melody.forEach((freq, idx) => {
          const osc = ctx.createOscillator();
          const gain = ctx.createGain();
          osc.connect(gain);
          gain.connect(ctx.destination);
          osc.type = 'sine';
          osc.frequency.setValueAtTime(freq, time);
          gain.gain.setValueAtTime(0.12, time);
          gain.gain.exponentialRampToValueAtTime(0.01, time + durations[idx]);
          osc.start(time);
          osc.stop(time + durations[idx]);
          time += durations[idx] + 0.02;
        });
      }
    } catch (e) {
      // صامت في المتصفحات التي تقيد تشغيل الصوت
    }
  };

  // 2. المساعد الصوتي التفاعلي باللغة العربية الفصحى مع التوافق التام لكافة الأجهزة
  const speakAssistant = (card, force = false) => {
    if (isMuted) return;
    if (!autoVoice && !force) return;
    
    if (typeof window !== 'undefined' && 'speechSynthesis' in window) {
      // إيقاف أي عملية نطق سابقة لمنع التداخل وحل مشكلة تعليق النطق
      window.speechSynthesis.cancel();
      
      const childFriendlyTexts = [
        `مرحباً يا بطل! انظر بذكاء، هذه بطاقة ${card.title}. ${card.subtitle}. ارتدِ نظارتَك السحرية الجميلة وابحثْ معي عن النجوم الثلاثة اللامعة المخبأة!`,
        `أهلاً بك يا شجاع! تعال نلعب مع بطاقة ${card.title}. ${card.subtitle}. أين هي النجوم السحرية؟ المسها بنظارتك الرائعة!`,
        `يا لك من بطل ذكي! هذه هي بطاقة ${card.title}. ${card.desc || card.subtitle}. ركز عينيك جيداً والمس النجوم المضيئة لتفوز بالنقاط!`
      ];
      
      const textToSpeak = childFriendlyTexts[card.id % childFriendlyTexts.length];
      const utterance = new SpeechSynthesisUtterance(textToSpeak);
      
      // البحث عن أول صوت عربي متاح في جهاز المستخدم وتعيينه فوراً للمساعد الصوتي
      const arabicVoice = availableVoices.find(v => v.lang.startsWith('ar')) || 
                         window.speechSynthesis.getVoices().find(v => v.lang.startsWith('ar'));
      
      if (arabicVoice) {
        utterance.voice = arabicVoice;
      }
      
      utterance.lang = 'ar-SA'; // تعيين لغة النطق الافتراضية
      utterance.rate = 0.82;    // سرعة نطق مناسبة جداً للأطفال للتأمل البصري
      utterance.pitch = 1.15;   // نبرة صوتية مبهجة قريبة من شخصيات الكرتون
      
      // تأخير بسيط لحل مشكلة توقف النطق المفاجئ في بعض المتصفحات
      setTimeout(() => {
        window.speechSynthesis.speak(utterance);
      }, 150);
    }
  };

  const categories = [
    "الكل",
    "الأشكال والتباين",
    "أصدقاء الغابة",
    "عالم البحار",
    "عالم الديناصورات",
    "وسائل النقل",
    "الفضاء والكون",
    "الفواكه اللذيذة",
    "عجائب الطبيعة",
    "الأرقام التعليمية",
    "الحروف والرموز"
  ];

  // بناء وتصنيف الـ 100 بطاقة بصرية متكاملة
  const cardsData = useMemo(() => {
    const list = [
      // 1-10: الأشكال والتباين
      { cat: "الأشكال والتباين", title: "رقعة الشطرنج المتعاكسة", sub: "مربعات سوداء وبيضاء عالية التباين", desc: "تصميم كلاسيكي ممتاز لتحفيز عضلات العين وتثبيت بؤرة الإبصار." },
      { cat: "الأشكال والتباين", title: "الحلقات المركزية المتداخلة", sub: "دوائر متباينة سوداء وحمراء متعاقبة", desc: "تساعد الدوائر متداخلة المراكز على تمرين محاور العين ومنع انحراف النظر." },
      { cat: "الأشكال والتباين", title: "المروحة الحلزونية الدوارة", sub: "حلزون ملتف يحفز حركات التتبع البصري", desc: "مثالي لتأهيل عضلات العين على التتبع المنحني المستمر بانسيابية." },
      { cat: "الأشكال والتباين", title: "شبكة المربعات المتدرجة", sub: "تدرج حجم المربعات من الكبير للصغير", desc: "تمرين بؤري يثبت التركيز في المنتصف ويدرب دقة تمييز الحواف." },
      { cat: "الأشكال والتباين", title: "لوحة الهدف الملونة", sub: "هدف رماية بألوان نقية ومتباينة", desc: "يجبر عيون طفلك على التركيز التام في النقطة المركزية الصفراء لإلغاء التشويش." },
      { cat: "الأشكال والتباين", title: "الخطوط المتعرجة المتموجة", sub: "خطوط زجزاج حادة لتصحيح الأستيجماتيزم", desc: "تساعد الخطوط المائلة الحادة والمنكسرة على تنشيط خلايا الدماغ البصرية لتعديل الانحراف." },
      { cat: "الأشكال والتباين", title: "النجمة المشعة الكبيرة", sub: "خطوط هندسية تنطلق من مركز واحد للأطراف", desc: "تساعد عضلات العين على التوازن وتدرب جودة الرؤية الطرفية والمحيطية." },
      { cat: "الأشكال والتباين", title: "خطوط المتاهة المربعة", sub: "خطوط متعامدة بزوايا حادة مكررة", desc: "تحدي تتبع خطي رائع يجعل طفلك يركز بالنظارة لتتبع المتاهة نحو المركز." },
      { cat: "الأشكال والتباين", title: "المثلثات المتداخلة الكبيرة", sub: "تدرج مبهج للمثلثات الهندسية المتباينة", desc: "أشكال زوايا هندسية واضحة جداً تحدد تفاصيل الرؤية بدقة للعين الكسولة." },
      { cat: "الأشكال والتباين", title: "النقاط المتباينة متغيرة الحجم", sub: "دوائر متباينة بأحجام متدرجة على كامل اللوحة", desc: "تمرين رائع لحث الطفل على عد وتتبع الكتل الدائرية المنفصلة." },

      // 11-20: أصدقاء الغابة
      { cat: "أصدقاء الغابة", title: "زرافة الخطوط الطويلة", sub: "زرافة صفراء لطيفة برقبة طويلة وبقع بنية", desc: "ابحث مع طفلك عن النقاط البنية الدقيقة على رقبة وجسم الزرافة." },
      { cat: "أصدقاء الغابة", title: "حمار وحشي بخطوط متباينة", sub: "حمار وحشي مبهج بخطوط بيضاء وسوداء مكررة", desc: "التباين اللوني المطلق لخطوط الحمار الوحشي مثالي لإراحة العين من التشوش." },
      { cat: "أصدقاء الغابة", title: "فهد مرقط بنقاط سوداء", sub: "فهد ذهبي بري بنقاط متباينة دائرية", desc: "شجعه على العثور وعد النقاط الدائرية السوداء المنتشرة على الفهد." },
      { cat: "أصدقاء الغابة", title: "بومة بعيون دائرية عملاقة", sub: "بومة حكيمة بعيون مركزية دائرية صفراء قوية", desc: "عيون البومة الدائرية الكبيرة تجذب انتباه الطفل وتثبت عينه الكسولة بالمنتصف." },
      { cat: "أصدقاء الغابة", title: "قنفذ بأشواك خطية حادة", sub: "قنفذ صغير بأشواك حادة متقاربة ومكررة", desc: "أشواك القنفذ المتوازية والمتقاطعة ممتازة لتمرين دقة التمييز البصري للحواف." },
      { cat: "أصدقاء الغابة", title: "طاووس بريش مروحي منقوش", sub: "طاووس جميل بريش ملون مليء بدوائر التركيز", desc: "تتبع النقاط والدوائر الملونة الموجودة في ريش الطاووس الرائع." },
      { cat: "أصدقاء الغابة", title: "أسد بشعر هندسي كثيف", sub: "ملك الغابة بشعر برتقالي دائري مشع كالشمس", desc: "شعر الأسد الدائري يعمل كإطار بؤري ممتاز يحيط بوجهه ويمنع تشتت النظر." },
      { cat: "أصدقاء الغابة", title: "دب لطيف بنقوش الفرو", sub: "دب بني مبهج بتفاصيل دائرية للوجه والأذنين", desc: "دب محبوب برأس دائري متباين الألوان، يحفز استرخاء عضلات العين." },
      { cat: "أصدقاء الغابة", title: "ثعلب برتقالي بخط ذيل أبيض", sub: "ثعلب ذكي بألوان برتقالية وحواف مثلثة مدببة", desc: "أذنا الثعلب المدببتان والخطوط الحادة تساعد في تحديد تفاصيل الأشكال." },
      { cat: "أصدقاء الغابة", title: "أرنب بنقاط الجزر اللذيذة", sub: "أرنب أبيض بأذنين طويلتين وجزرة زاهية", desc: "تتبع أذني الأرنب الطويلتين ولون الجزرة البرتقالي المنقط اللذيذ." },

      // 21-30: عالم البحار
      { cat: "عالم البحار", title: "سلحفاة بقوقعة سداسية", sub: "سلحفاة بحرية بقوقعة منقوشة مضلعة", desc: "الأشكال السداسية على ظهر السلحفاة تمرن العين على التفاصيل الهندسية المستقيمة." },
      { cat: "عالم البحار", title: "سمكة ذهبية بقشور متموجة", sub: "سمكة برتقالية بزعانف مروحية وقشور مكررة", desc: "الخطوط المنحنية المكررة لقشور وزعانف السمكة ممتازة لتأهيل العين الكسولة." },
      { cat: "عالم البحار", title: "أخطبوط بأذرع منقطة دوارة", sub: "أخطبوط وردي بأذرع ملتفة منقطة بالدوائر", desc: "النقاط البيضاء الدائرية على أذرع الأخطبوط ممتازة لتدريب الملاحظة البؤرية." },
      { cat: "عالم البحار", title: "نجم البحر بنقاط بارزة", sub: "نجمة بحرية برتقالية بنقاط تباين ملونة", desc: "شكل نجم البحر الخماسي مع نقاط متباينة يمنحه عمقاً بصرياً رائعاً للطفل." },
      { cat: "عالم البحار", title: "قنديل البحر بخطوط متموجة", sub: "قنديل بحر وردي بأذرع متموجة متوازية طويلة", desc: "خطوط أذرع قنديل البحر تساعد عيني طفلك على تتبع الخطوط الرأسية المتموجة." },
      { cat: "عالم البحار", title: "حوت أزرق بخطوط طولية", sub: "حوت عملاق بخطوط موازية في البطن ورذاذ ماء", desc: "خطوط بطن الحوت المتوازية ورذاذ الماء يمثلان تمرين تتبع رائع للنظر." },
      { cat: "عالم البحار", title: "فرس البحر بحلقات دائرية", sub: "فرس بحر لطيف بذيل ملتف وحلقات دقيقة", desc: "الذيل اللولبي الملتف والتفاصيل الدائرية لفرس البحر تعزز كفاءة عضلات العين." },
      { cat: "عالم البحار", title: "سرطان البحر بملامح هندسية", sub: "سرطان بحر أحمر بمخالب دائرية قوية وعيون بارزة", desc: "المخالب الكبيرة المستديرة والعيون المتباينة تشجع طفلك على التركيز والابتسام." },
      { cat: "عالم البحار", title: "صدفة حلزونية دقيقة التفاصيل", sub: "صدفة بحرية دائرية بخطوط حلزونية مكررة", desc: "تحدي تركيز لولبي يجبر العين على الدوران المتدرج نحو المركز." },
      { cat: "عالم البحار", title: "مرجان البحر ذو الفروع المخططة", sub: "مرجان بحري ملون بفروع منقوشة متباينة", desc: "الفروع المتعددة والنقوش المتباينة تنشط عصب الرؤية لتمييز التفاصيل الدقيقة." },

      // 31-40: عالم الديناصورات
      { cat: "عالم الديناصورات", title: "ديناصور ريكس بنقاط خشنة", sub: "ديناصور ريكس أخضر بجلد منقط وأسنان بيضاء", desc: "ابحث مع طفلك عن الأسنان المثلثة الحادة والبيضاء للديناصور اللطيف." },
      { cat: "عالم الديناصورات", title: "ترايسيراتوبس بقرون بيضاء", sub: "ديناصور بـ 3 قرون بيضاء ودرع رأس دائرية", desc: "القرون البيضاء الحادة تمثل عناصر تباين ممتازة تبرز بوضوح للعين." },
      { cat: "عالم الديناصورات", title: "ستيغوصور بصفائح ظهرية مثلثة", sub: "ديناصور بصفائح ظهرية مثلثة برتقالية متتالية", desc: "الصفائح المثلثية المتتالية على ظهره ممتازة لتدريب الطفل على التتبع المتسلسل." },
      { cat: "عالم الديناصورات", title: "برونتوغوصور برقبة منقوشة", sub: "ديناصور طويل الرقبة يأكل أوراق شجر خضراء", desc: "رقبة الديناصور الطويلة وأوراق الشجر المنقطة تحفز الرؤية على المسافات المتنوعة." },
      { cat: "عالم الديناصورات", title: "ديناصور طائر بأجنحة مخططة", sub: "ديناصور طائر بجناحين مخططين مائلين بالكامل", desc: "جناحاه المخططان بالتوازي يدربان عضلات العين على تتبع الخطوط المائلة." },
      { cat: "عالم الديناصورات", title: "بيضة ديناصور بشروخ متعرجة", sub: "بيضة ديناصور مكسورة يخرج منها ديناصور صغير", desc: "خطوط الكسر المتعرجة الدقيقة في البيضة تدرب العين على رؤية التفاصيل الحادة جداً." },
      { cat: "عالم الديناصورات", title: "بصمة قدم ديناصور منقوشة", sub: "بصمة قدم ديناصور عملاقة بنقش تبايني قوي", desc: "بصمة القدم الكبيرة المليئة بنقوش متباينة تمثل تمريناً مساحياً رائعاً للعين." },
      { cat: "عالم الديناصورات", title: "سباينوصور بشراع مخطط", sub: "ديناصور بشراع عملاق مخطط مائل على ظهره", desc: "الشراع المخطط كقوس قزح يسهل على طفلك تمييزه وملاحظته بوضوح تام." },
      { cat: "عالم الديناصورات", title: "أحفورة ديناصور بخطوط عظمية", sub: "هيكل عظمي لديناصور بخطوط بيضاء حادة", desc: "خطوط العظام البيضاء الحادة على خلفية سوداء تمثل قمة التباين البصري لتنشيط الشبكية." },
      { cat: "عالم الديناصورات", title: "بركان ثائر بخطوط الحمم", sub: "بركان يخرج حمماً حمراء ورماد دائري متباين", desc: "ألوان الحمم البركانية الساطعة والنقوش الدائرية للرماد تجذب انتباه الطفل بقوة." },

      // 41-50: وسائل النقل
      { cat: "وسائل النقل", title: "قطار البخار بدخان دائري", sub: "قطار مبهج بعجلات دائرية متداخلة ودخان متكرر", desc: "الدوائر المتكررة لدخان القطار والعجلات المتداخلة مثالية جداً لتعديل انحراف النظر." },
      { cat: "وسائل النقل", title: "سيارة إطفاء بخطوط متباينة", sub: "سيارة إطفاء حمراء بسلم مخطط متباين موازٍ", desc: "خطوط السلم المتوازية واللون الأحمر الساطع يجعلان تفاصيل الشاحنة بارزة جداً." },
      { cat: "وسائل النقل", title: "سفينة شراعية بأمواج متموجة", sub: "سفينة شراعية تعتلي خطوط أمواج زرقاء مكررة", desc: "أمواج البحر المتموجة وشراع السفينة المخطط يساعدان على تمرين البصر التتابعي." },
      { cat: "وسائل النقل", title: "صاروخ فضاء بنفاثات نارية", sub: "صاروخ فضائي ينطلق بلهب متباين زاوية حادة", desc: "شكل الصاروخ الانسيابي والشرر المنطلق يعطيان عمقاً وتحدياً بصرياً رائعاً." },
      { cat: "وسائل النقل", title: "غواصة بأعماق البحار الدائرية", sub: "غواصة صفراء بنوافذ دائرية متداخلة متباينة", desc: "نوافذ الغواصة الدائرية تجذب العين وتساعد على التكيف البصري في الأعماق." },
      { cat: "وسائل النقل", title: "سيارة شرطة بمربعات زرقاء", sub: "سيارة شرطة منقوشة بمربعات أمان بيضاء وزرقاء", desc: "نقش مربعات الأمان عالي التباين يمثل تحفيزاً ممتازاً للشبكية البصرية للطفل." },
      { cat: "وسائل النقل", title: "طائرة هليكوبتر بمراوح دوارة", sub: "مروحية مبهجة بمراوح دائرية دقيقة متقاطعة", desc: "مراوح الطائرة الدقيقة المخططة تدرب عضلات العين على رؤية الخطوط السريعة والدقيقة." },
      { cat: "وسائل النقل", title: "جرار زراعي بعجلات ضخمة", sub: "جرار أحمر بعجلة خلفية ضخمة منقطة دائرية", desc: "العجلة الكبيرة المتداخلة للجرار تمثل حافزاً رائعاً لتثبيت النظر المركزي." },
      { cat: "وسائل النقل", title: "منطاد هواء طائر بخطوط ملونة", sub: "منطاد هوائي كبير بخطوط متباينة طولية متكررة", desc: "الخطوط الرأسية الملونة للمنطاد تساعد على تمرين العين على تتبع الأجسام الطائرة." },
      { cat: "وسائل النقل", title: "دراجة هوائية بعجلتين شعاعيتين", sub: "دراجة هوائية بعجلات دقيقة الأسلاك الشعاعية", desc: "خطوط أسلاك العجلات الشعاعية الدقيقة هي تمرين ممتاز جداً لتصحيح انحراف الإبصار." },

      // 51-60: الفضاء والكون
      { cat: "الفضاء والكون", title: "كوكب زحل بحلقات مائلة دقيقة", sub: "كوكب زحل بحلقات متباينة مائلة دقيقة", desc: "الحلقات المائلة بدقة تبرز بوضوح وتساعد الطفل على تمييز الزوايا المائلة بالنظارة." },
      { cat: "الفضاء والكون", title: "هلال القمر بفوهات دائرية", sub: "هلال القمر منقوش بفوهات دائرية متباينة", desc: "الفوهات الدائرية داخل القمر تشجع طفلك على التركيز في التفاصيل الداخلية الصغيرة." },
      { cat: "الفضاء والكون", title: "مجرة حلزونية بأذرع منقطة", sub: "مجرة دوارة بأذرع حلزونية منقطة بالنجوم", desc: "الأذرع الملتفة للمجرة والنجوم اللامعة تجذب انتباه عيني الطفل وتحفزه ببراعة." },
      { cat: "الفضاء والكون", title: "كوكب المشتري بأحزمة متموجة", sub: "كوكب المشتري بخطوط أفقية متموجة وبقعة حمراء", desc: "الخطوط الأفقية المتموجة والبقعة الدائرية الكبيرة ممتازة لتدريب توازن النظر الأفقي." },
      { cat: "الفضاء والكون", title: "رائد فضاء بخوذة عاكسة", sub: "رائد فضاء يسبح بخوذة دائرية متباينة قوية", desc: "خوذة رائد الفضاء الدائرية العاكسة تمثل نقطة تركيز بصرية ممتازة وجاذبة للطفل." },
      { cat: "الفضاء والكون", title: "شهاب ساقط بخطوط سرعة حادة", sub: "شهاب لامع يجر وراءه خطوط سرعة متوازية", desc: "الخطوط المتوازية الطويلة للشهاب تساعد العين على التتبع البصري الطولي السريع." },
      { cat: "الفضاء والكون", title: "شمس مشعة بخطوط لهب متعرجة", sub: "شمس صفراء مشعة بأشعة هندسية متعرجة", desc: "أشعة الشمس الذهبية المتعرجة تنشط الرؤية وتمرن العين على رؤية الخطوط الخارجية الحادة." },
      { cat: "الفضاء والكون", title: "محطة فضاء بتفاصيل معدنية شبكية", sub: "محطة فضائية بألواح شمسية مربعة متباينة", desc: "مربعات الألواح الشمسية الدقيقة تمثل تباين شبكي يحمي العين من الكسل ويوضح الرؤية." },
      { cat: "الفضاء والكون", title: "طبق طائر بغلاف ضوئي منقط", sub: "طبق طائر يرسل شعاع ضوء مخروطي مخطط", desc: "مخروط الضوء المخطط والمنقط يمثل تمريناً بؤرياً رائعاً لشبكية العين الكسولة." },
      { cat: "الفضاء والكون", title: "كوكبة نجوم بخطوط ربط مستقيمة", sub: "مجموعة نجوم لامعة متصلة بخطوط هندسية مستقيمة", desc: "الخطوط المستقيمة التي تربط النجوم تدرب ذهن وعين طفلك على إدراك العلاقات الهندسية." },

      // 61-70: الفواكه اللذيذة
      { cat: "الفواكه اللذيذة", title: "تفاحة بمربعات متباينة", sub: "تفاحة حمراء مبهجة بنقش مربعات متباينة داخلي", desc: "تفاحة مبهجة يحبها طفلك، بنقش مربعات متباين يحمي العين من تشتت الإضاءة." },
      { cat: "الفواكه اللذيذة", title: "برتقالة بمسامات نقطية دقيقة", sub: "برتقالة دائرية بنقاط مسامات برتقالية صغيرة", desc: "النقاط الصغيرة الدقيقة للبرتقالة تدرب الإبصار على تمييز الملامس الناعمة والكتل." },
      { cat: "الفواكه اللذيذة", title: "فراولة ببذور بيضاء منقطة", sub: "فراولة حمراء غنية بنقاط بذور بيضاء متباينة", desc: "بذور الفراولة البيضاء الموزعة بدقة هي تحدي بصري مثالي لتدريب النظر المباشر." },
      { cat: "الفواكه اللذيذة", title: "بطيخة بخطوط مموجة حادة", sub: "شريحة بطيخ مثلثة ببذور سوداء منقطة وقشر مخطط", desc: "ألوان البطيخ المتباينة تجذب انتباه طفلك وتدربه على تمييز الألوان والخطوط المتوازية." },
      { cat: "الفواكه اللذيذة", title: "عنقود عنب بدوائر متراصة", sub: "عنب بنفسجي مكون من دوائر مكررة متداخلة", desc: "دوائر حبات العنب المتراصة تساعد عضلات العين على التكيف وتحديد الدوائر بوضوح." },
      { cat: "الفواكه اللذيذة", title: "موزة بخطوط زوايا طولية", sub: "موزة صفراء جميلة بخطوط زوايا متباينة", desc: "خطوط زوايا الموزة الطولية المتباينة تساعد على التتبع الطولي الأفقي والمائل." },
      { cat: "الفواكه اللذيذة", title: "أناناس بمربعات متقاطعة حادة", sub: "أناناس مبهج بنقش مربعات متقاطعة متباين وقشر خشن", desc: "النقش المتقاطع للأناناس يصحح زوايا الاستجماتيزم بفعالية بصرية هائلة." },
      { cat: "الفواكه اللذيذة", title: "كرزة ثنائية بغصن متفرع", sub: "حبتين كرز حمراء متصلة بغصن أخضر متفرع", desc: "حبات الكرز الدائرية الحمراء المتباينة تمثل هدفاً ثنائياً لتدريب توازن النظر." },
      { cat: "الفواكه اللذيذة", title: "ليمونة بخطوط شعاعية متباينة", sub: "ليمونة مقطوعة نصفين بخطوط شعاعية متباينة", desc: "الخطوط الشعاعية التي تنطلق من مركز الليمونة ممتازة لتدريب حدة النظر المركزية." },
      { cat: "الفواكه اللذيذة", title: "حبة إجاص منقطة بنعومة", sub: "كمثرى خضراء لطيفة منقطة بنقاط تباين خفيفة", desc: "شكل الكمثرى الانسيابي مع نقاط ناعمة يدرب عيني الطفل على تمييز المنحنيات الطفيفة." },

      // 71-80: عجائب الطبيعة
      { cat: "عجائب الطبيعة", title: "فطر الغابة المنقط بالكامل", sub: "فطر الغابة الأحمر ذو قبعة منقطة بدوائر بيضاء", desc: "الفطر الأحمر ذو النقاط البيضاء الكبيرة هو شكل محبب جداً للأطفال ويبرز بوضوح تام." },
      { cat: "عجائب الطبيعة", title: "ورقة شجر بعروق هندسية", sub: "ورقة شجر خضراء بعروق هندسية متفرعة واضحة", desc: "عروق ورقة الشجر الهندسية تدرب العين على رؤية الخطوط الرفيعة والمتفرعة بدقة متناهية." },
      { cat: "عجائب الطبيعة", title: "سحابة ممطرة بقطرات مائلة", sub: "سحابة زرقاء ينزل منها قطرات مطر مائلة مكررة", desc: "قطرات المطر المائلة المكررة بالتوازي تساعد على تمرين محاور العين المائلة للأستيجماتيزم." },
      { cat: "عجائب الطبيعة", title: "زهرة دوار الشمس بخطوط حلزونية", sub: "دوار شمس كبير بمركز بذور حلزوني متباين", desc: "المركز الحلزوني البني للزهرة والبتلات الصفراء المشعة تمثل تحفيزاً بصرياً مبهراً للطفل." },
      { cat: "عجائب الطبيعة", title: "ندفة ثلج سداسية فائقة الدقة", sub: "بلورة ثلج بيضاء هندسية سداسية متناظرة", desc: "البلورة السداسية المتناظرة بدقة متناهية تنمي الذكاء الهندسي والتركيز البصري الحاد بالنظارة." },
      { cat: "عجائب الطبيعة", title: "شجرة الصنوبر بطبقات مثلثة", sub: "شجرة صنوبر خضراء بطبقات هندسية مثلثة متراصفة", desc: "المثلثات المتدرجة المتراصفة للشجرة تساعد عيني طفلك على التتبع الرأسي المتناسق." },
      { cat: "عجائب الطبيعة", title: "قوس قزح بخطوط منحنية متوازية", sub: "قوس قزح مبهج بألوان نقية منحنية متوازية", desc: "أقواس الألوان المنحنية المتوازية تدرب العين على تتبع المسارات الدائرية الواسعة بسهولة." },
      { cat: "عجائب الطبيعة", title: "صاعقة برق بخطوط متعرجة", sub: "برق أصفر حاد بخط متعرج مباغت متباين", desc: "خط البرق الحاد المنكسر يمثل قمة التباين والحدة لتنبيه وتنشيط العصب البصري للعينين." },
      { cat: "عجائب الطبيعة", title: "شبكة عنكبوت دائرية متناظرة", sub: "شبكة عنكبوت متناظرة دائرية ومحورية دقيقة", desc: "شبكة العنكبوت الدقيقة هي أداة طبية كلاسيكية لتصحيح انحراف النظر بفضل هندستها المتكاملة." },
      { cat: "عجائب الطبيعة", title: "موجة بحر عملاقة متموجة", sub: "موجة بحر زرقاء كبيرة بأطراف لولبية متموجة", desc: "تموجات البحر اللولبية الكبيرة تدرب العين على رؤية وتتبع الانحناءات المائية الطليقة والواسعة." },

      // 81-90: الأرقام التعليمية
      { cat: "الأرقام التعليمية", title: "الرقم 1 بخطوط طولية", sub: "الرقم 1 منقوش بخطوط طولية متباينة", desc: "يساعد طفلك على تمييز الرقم وتمرينه على التتبع العمودي الحاد بوضوح." },
      { cat: "الأرقام التعليمية", title: "الرقم 2 بنقاط دائرية", sub: "الرقم 2 منقوش بنقاط دائرية متباينة", desc: "يساعد على تمييز الرقم 2 وتدريب العين على تتبع المنحنيات العلوية للرقم." },
      { cat: "الأرقام التعليمية", title: "الرقم 3 بخطوط متعرجة", sub: "الرقم 3 منقوش بخطوط متعرجة زجزاج", desc: "الخطوط المتعرجة داخل الرقم 3 تساعد على كسر غباش النظر وتنشيط خلايا الإدراك." },
      { cat: "الأرقام التعليمية", title: "الرقم 4 بمربعات صغيرة", sub: "الرقم 4 منقوش بمربعات تباينية صغيرة شطرنجية", desc: "تباين شبكي ممتاز يحافظ على حافة الرقم واضحة تماماً لعيون البطل." },
      { cat: "الأرقام التعليمية", title: "الرقم 5 بنقاط متباينة", sub: "الرقم 5 منقوش بنقاط دائرية متباينة الحجم", desc: "يساعد على دمج مهارة عد النقاط مع تعلم شكل الرقم 5 الدائري الجميل." },
      { cat: "الأرقام التعليمية", title: "الرقم 6 بخطوط مائلة", sub: "الرقم 6 منقوش بخطوط مائلة موازية دقيقة", desc: "الخطوط المائلة المتوازية ممتازة لعلاج الأستيجماتيزم والمساعدة في تمييز الرقم 6." },
      { cat: "الأرقام التعليمية", title: "الرقم 7 بخطوط متقاطعة", sub: "الرقم 7 منقوش بخطوط شبكية متقاطعة متعامدة", desc: "الشبكة المتعامدة تعطي الرقم وضوحاً فائقاً وتحفز عضلات العين على الرؤية الحادة." },
      { cat: "الأرقام التعليمية", title: "الرقم 8 بدوائر لا نهائية", sub: "الرقم 8 منقوش بدوائر مكررة متداخلة", desc: "شكل الرقم 8 الدائري الثنائي مع الدوائر الداخلية يمثل أفضل تمرين تركيز بصري مزدوج." },
      { cat: "الأرقام التعليمية", title: "الرقم 9 بنقوش النجوم", sub: "الرقم 9 منقوش بنجوم صغيرة متباينة", desc: "النجوم الصغيرة داخل الرقم 9 تشجع طفلك على البحث والتدقيق البصري الدقيق بالنظارة." },
      { cat: "الأرقام التعليمية", title: "الرقم 10 بمزيج من الأشكال", sub: "الرقم 10 بمربعات ودوائر متباينة متعاقبة", desc: "يجمع الرقم 10 بين الخط المستقيم للواحد والدائرة للصفر مع نقش تبايني رائع للتحفيز." },

      // 91-100: الحروف والرموز
      { cat: "الحروف والرموز", title: "حرف أ (ألف) بنقوش شرقية", sub: "حرف الألف مع همزة منقوش بخطوط هندسية متباينة", desc: "يساعد على تمييز الحرف الأول (أ) وتعلم شكله المستقيم العمودي بنقش واضح." },
      { cat: "الحروف والرموز", title: "حرف ب (باء) بنقاط متباينة", sub: "حرف الباء مع نقطة سفلية دائرية متباينة واضحة", desc: "نقطة الباء السفلية تمثل هدف تركيز رائع لتأهيل عضلات العين وتوجيهها لأسفل الحرف." },
      { cat: "الحروف والرموز", title: "حرف ت (تاء) بنقاط مزدوجة", sub: "حرف التاء مع نقطتين علويتين متباينتين دائريتين", desc: "النقطتان العلويتان للتاء تمثلان حافزاً بصرياً مزدوجاً لتركيز وتوجيه العينين لأعلى." },
      { cat: "الحروف والرموز", title: "حرف ج (جيم) بنقش حلزوني", sub: "حرف الجيم المنحني مع نقطة مركزية متباينة داخلية", desc: "منحنيات حرف الجيم المتسعة والنقطة في وسطه مثالية لتأهيل حركة عضلات العين الدائرية." },
      { cat: "الحروف والرموز", title: "شكل القلب بخطوط متموجة", sub: "شكل قلب أحمر مبهج منقوش بخطوط متموجة متوازية", desc: "شكل القلب المحبب والمألوف للطفل مع خطوط تموجية حمراء يدرب النظر والتمييز بسعادة." },
      { cat: "الحروف والرموز", title: "شكل النجمة الخماسية الكبيرة", sub: "نجمة خماسية صفراء ساطعة بنقش خطوط شعاعية", desc: "الزوايا الخمس للنجمة والخطوط الشعاعية تدرب عيني الطفل على التتبع والتركيز في الأطراف." },
      { cat: "الحروف والرموز", title: "شكل الهلال المنقوش الجميل", sub: "هلال فضي منقوش بمربعات تباين عالية", desc: "شكل هلال مبهج بنقش مربعات متدرجة وواضحة جداً يحفز وضوح الرؤية الجانبية." },
      { cat: "الحروف والرموز", title: "رمز الابتسامة السعيدة المبهج", sub: "وجه مبتسم أصفر بعيون دائرية متباينة وفم مقوس", desc: "الوجه المبتسم يمنح طفلك طاقة إيجابية ويساعد عيونه على التركيز على ملامح الوجه المألوفة." },
      { cat: "الحروف والرموز", title: "شكل التاج الملكي المزين", sub: "تاج ذهبي بـ 3 قمم مزينة بدوائر متباينة دقيقة", desc: "القمم الثلاث للتاج الملكي المزين بالدوائر تشجع البطل على تتبع وحصر الأشكال العلوية بدقة." },
      { cat: "الحروف والرموز", title: "بالونات الحفل المخططة والملونة", sub: "بالونات طائرة مبهجة بخطوط تباين دائرية وطولية متعرجة", desc: "بالونات الحفلة الملونة بخطوط متباينة هي النهاية الرائعة لمجموعتنا التأهيلية المتميزة." }
    ];

    return list.map((item, index) => ({
      id: index + 1,
      ...item,
      category: item.cat, // مطابقة حقل الفئة الداخلي
      color: index < 10 ? "bg-slate-900" : 
             index < 20 ? "bg-amber-500" : 
             index < 30 ? "bg-sky-500" : 
             index < 40 ? "bg-emerald-600" : 
             index < 50 ? "bg-orange-500" : 
             index < 60 ? "bg-indigo-950" : 
             index < 70 ? "bg-rose-500" : 
             index < 80 ? "bg-teal-600" : 
             index < 90 ? "bg-purple-600" : "bg-fuchsia-600",
      targets: [
        { id: 't1', x: 110 + (index * 19) % 130, y: 130 + (index * 23) % 110, found: false },
        { id: 't2', x: 230 + (index * 13) % 110, y: 170 + (index * 31) % 160, found: false },
        { id: 't3', x: 160 + (index * 29) % 90, y: 310 + (index * 17) % 90, found: false }
      ]
    }));
  }, []);

  // تصفية البطاقات بناءً على البحث والفلتر
  const filteredCards = useMemo(() => {
    return cardsData.filter(card => {
      const matchesSearch = card.title.includes(searchQuery) || card.subtitle.includes(searchQuery);
      const matchesCategory = selectedCategory === 'الكل' || card.category === selectedCategory;
      return matchesSearch && matchesCategory;
    });
  }, [cardsData, searchQuery, selectedCategory]);

  const currentCardObj = cardsData[selectedCard];

  // تشغيل المساعد الصوتي تلقائياً عند تغيير البطاقة (في حال تفعيله من قبل المستخدم)
  useEffect(() => {
    if (currentCardObj) {
      speakAssistant(currentCardObj);
    }
  }, [selectedCard, autoVoice, availableVoices]);

  // دالة تغيير التصنيف الذكية
  const handleCategoryChange = (cat) => {
    setSelectedCategory(cat);
    setSearchQuery(''); // تنظيف حقل البحث
    playSoundEffect('pop');
    if (cat === 'الكل') {
      setSelectedCard(0);
    } else {
      const firstCardInCat = cardsData.find(c => c.category === cat);
      if (firstCardInCat) {
        setSelectedCard(firstCardInCat.id - 1);
      }
    }
  };

  // التنقل الذكي للتالي والسابق ضمن المجموعة المفلترة
  const nextCard = () => {
    if (filteredCards.length === 0) return;
    const currentFilteredIdx = filteredCards.findIndex(c => c.id - 1 === selectedCard);
    const nextFilteredIdx = (currentFilteredIdx + 1) % filteredCards.length;
    setSelectedCard(filteredCards[nextFilteredIdx].id - 1);
    playSoundEffect('pop');
  };

  const prevCard = () => {
    if (filteredCards.length === 0) return;
    const currentFilteredIdx = filteredCards.findIndex(c => c.id - 1 === selectedCard);
    const prevFilteredIdx = (currentFilteredIdx - 1 + filteredCards.length) % filteredCards.length;
    setSelectedCard(filteredCards[prevFilteredIdx].id - 1);
    playSoundEffect('pop');
  };

  // تفاعل الطفل بلمس الأهداف
  const handleTargetClick = (targetId) => {
    const key = `${selectedCard}-${targetId}`;
    if (!foundTargets[key]) {
      setFoundTargets(prev => ({ ...prev, [key]: true }));
      setScore(prev => prev + 10);
      playSoundEffect('success');
      
      // فحص إذا انتهى البطل من صيد جميع الأهداف في البطاقة الحالية
      const nextFoundTargets = { ...foundTargets, [key]: true };
      const t1 = nextFoundTargets[`${selectedCard}-t1`];
      const t2 = nextFoundTargets[`${selectedCard}-t2`];
      const t3 = nextFoundTargets[`${selectedCard}-t3`];
      
      if (t1 && t2 && t3) {
        setTimeout(() => {
          playSoundEffect('victory');
          showBanner("يا لك من بطل خارق! لقد وجدت جميع نجوم هذه البطاقة! 🎉");
        }, 300);
      }
    } else {
      playSoundEffect('pop');
    }
  };

  const toggleSelectForPrint = (cardId) => {
    setSelectedForPrint(prev => ({ ...prev, [cardId]: !prev[cardId] }));
    playSoundEffect('pop');
  };

  const selectAllFilteredForPrint = () => {
    const updates = { ...selectedForPrint };
    filteredCards.forEach(c => { updates[c.id] = true; });
    setSelectedForPrint(updates);
    playSoundEffect('pop');
    showBanner("تم تحديد جميع البطاقات المعروضة للطباعة الجماعية!");
  };

  const clearAllPrintSelection = () => {
    setSelectedForPrint({});
    playSoundEffect('pop');
    showBanner("تم إلغاء تحديد كافة بطاقات الطباعة.");
  };

  const showBanner = (msg) => {
    setAlertMessage(msg);
    setTimeout(() => setAlertMessage(''), 3500);
  };

  const handleBulkPrint = () => {
    const selectedIds = Object.keys(selectedForPrint).filter(id => selectedForPrint[id]);
    if (selectedIds.length === 0) {
      showBanner("يرجى تحديد بطاقة واحدة على الأقل للطباعة الجماعية!");
      return;
    }
    window.print();
  };

  const toggleCardCompleted = (cardId) => {
    setCompletedCards(prev => ({ ...prev, [cardId]: !prev[cardId] }));
    playSoundEffect('victory');
  };

  // محرك متطور لتوليد الرسوم الكرتونية عالية التباين والمصممة بدقة لتطابق الـ 100 اسم
  const renderCardSvg = (card) => {
    const id = card.id;
    const isTarget1Found = foundTargets[`${selectedCard}-t1`];
    const isTarget2Found = foundTargets[`${selectedCard}-t2`];
    const isTarget3Found = foundTargets[`${selectedCard}-t3`];

    return (
      <svg viewBox="0 0 400 500" className="w-full h-full select-none" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="grid-contrast" width="20" height="20" patternUnits="userSpaceOnUse">
            <rect width="10" height="10" fill="#000000"/>
            <rect x="10" width="10" height="10" fill="#ffffff"/>
            <rect y="10" width="10" height="10" fill="#ffffff"/>
            <rect x="10" y="10" width="10" height="10" fill="#000000"/>
          </pattern>
          <pattern id="stripes-diagonal" width="16" height="16" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <rect width="8" height="16" fill="#1e293b"/>
            <rect x="8" width="8" height="16" fill="#ffffff"/>
          </pattern>
          <pattern id="dots-dense" width="12" height="12" patternUnits="userSpaceOnUse">
            <circle cx="6" cy="6" r="3" fill="#ef4444"/>
            <rect width="12" height="12" fill="none"/>
          </pattern>
          <pattern id="waves-blue" width="40" height="20" patternUnits="userSpaceOnUse">
            <path d="M 0,10 Q 10,0 20,10 T 40,10 L 40,20 L 0,20 Z" fill="#38bdf8" />
            <rect width="40" height="20" fill="none"/>
          </pattern>
        </defs>

        {/* إطار بؤري خارجي عالي التباين */}
        <rect width="400" height="500" fill="#f8fafc" rx="20" stroke="#0f172a" strokeWidth="12"/>

        {/* 1-10: الأشكال والتباين */}
        {id === 1 && <rect x="30" y="30" width="340" height="440" fill="url(#grid-contrast)" rx="10" />}
        {id === 2 && (
          <g>
            <circle cx="200" cy="250" r="160" fill="#ef4444" stroke="#0f172a" strokeWidth="8"/>
            <circle cx="200" cy="250" r="120" fill="#ffffff" stroke="#0f172a" strokeWidth="8"/>
            <circle cx="200" cy="250" r="80" fill="#ef4444" stroke="#0f172a" strokeWidth="8"/>
            <circle cx="200" cy="250" r="40" fill="#ffffff" stroke="#0f172a" strokeWidth="8"/>
            <circle cx="200" cy="250" r="15" fill="#0f172a" />
          </g>
        )}
        {id === 3 && (
          <path d="M 200,250 C 100,150 100,350 200,350 C 300,350 300,150 200,150 C 150,150 150,300 200,300 C 250,300 250,200 200,200 C 180,200 180,270 200,270" fill="none" stroke="#0f172a" strokeWidth="12" strokeLinecap="round" />
        )}
        {id === 4 && (
          <g>
            <rect x="50" y="100" width="300" height="300" fill="none" stroke="#000" strokeWidth="10" />
            <rect x="100" y="150" width="200" height="200" fill="none" stroke="#000" strokeWidth="10" />
            <rect x="150" y="200" width="100" height="100" fill="none" stroke="#000" strokeWidth="10" />
            <rect x="180" y="230" width="40" height="40" fill="#ef4444" />
          </g>
        )}
        {id === 5 && (
          <g>
            <circle cx="200" cy="250" r="160" fill="#3b82f6" stroke="#000" strokeWidth="6" />
            <circle cx="200" cy="250" r="120" fill="#ffffff" stroke="#000" strokeWidth="6" />
            <circle cx="200" cy="250" r="80" fill="#ef4444" stroke="#000" strokeWidth="6" />
            <circle cx="200" cy="250" r="40" fill="#facc15" stroke="#000" strokeWidth="6" />
            <circle cx="200" cy="250" r="12" fill="#000" />
          </g>
        )}
        {id === 6 && (
          <path d="M 40,100 L 120,200 L 200,100 L 280,200 L 360,100 M 40,200 L 120,300 L 200,200 L 280,300 L 360,200 M 40,300 L 120,400 L 200,300 L 280,400 L 360,300" fill="none" stroke="#000" strokeWidth="14" strokeLinecap="round" strokeLinejoin="round" />
        )}
        {id === 7 && (
          <path d="M 200,50 L 230,170 L 350,200 L 230,230 L 200,350 L 170,230 L 50,200 L 170,170 Z M 200,110 L 180,180 L 110,200 L 180,220 L 200,290 L 220,220 L 290,200 L 220,180 Z" fill="#eab308" stroke="#000" strokeWidth="4" />
        )}
        {id === 8 && (
          <g stroke="#000" strokeWidth="12" fill="none" strokeLinecap="round">
            <rect x="60" y="110" width="280" height="280" />
            <path d="M 100,150 L 300,150 L 300,310 L 140,310 L 140,190 L 260,190 L 260,270 L 180,270 L 180,230" />
          </g>
        )}
        {id === 9 && (
          <g stroke="#ef4444" strokeWidth="8" fill="none" strokeLinejoin="round">
            <polygon points="200,80 60,380 340,380" />
            <polygon points="200,160 110,340 290,340" />
            <polygon points="200,240 160,310 240,310" />
          </g>
        )}
        {id === 10 && (
          <g fill="#000">
            <circle cx="100" cy="120" r="40" />
            <circle cx="280" cy="140" r="25" />
            <circle cx="140" cy="260" r="35" />
            <circle cx="300" cy="320" r="50" fill="#ef4444" />
            <circle cx="180" cy="400" r="15" />
          </g>
        )}

        {/* 11-20: أصدقاء الغابة */}
        {id === 11 && (
          <g>
            <path d="M 80,440 L 160,150 L 220,150 L 160,440 Z" fill="#facc15" stroke="#78350f" strokeWidth="4" />
            <path d="M 160,150 Q 180,80 230,100 Q 250,150 220,150 Z" fill="#facc15" stroke="#78350f" strokeWidth="4" />
            <circle cx="120" cy="360" r="15" fill="#b45309" />
            <circle cx="140" cy="270" r="18" fill="#b45309" />
            <circle cx="170" cy="190" r="12" fill="#b45309" />
            <circle cx="210" cy="115" r="5" fill="#000" />
            <path d="M 230,90 Q 250,80 240,100" stroke="#78350f" strokeWidth="4" fill="none" />
          </g>
        )}
        {id === 12 && (
          <g>
            <rect x="80" y="150" width="240" height="240" rx="40" fill="url(#stripes-diagonal)" stroke="#000" strokeWidth="4" />
            <circle cx="140" cy="230" r="20" fill="#fff" stroke="#000" strokeWidth="4" />
            <circle cx="140" cy="230" r="8" fill="#000" />
            <circle cx="260" cy="230" r="20" fill="#fff" stroke="#000" strokeWidth="4" />
            <circle cx="260" cy="230" r="8" fill="#000" />
            <ellipse cx="200" cy="310" rx="30" ry="20" fill="#e2e8f0" stroke="#000" strokeWidth="3" />
            <path d="M 120,150 L 100,80 L 150,120 Z" fill="#000" />
            <path d="M 280,150 L 300,80 L 250,120 Z" fill="#000" />
          </g>
        )}
        {id === 13 && (
          <g>
            <circle cx="200" cy="250" r="130" fill="#f59e0b" stroke="#000" strokeWidth="5" />
            <circle cx="130" cy="200" r="10" fill="#000" /><circle cx="140" cy="280" r="12" fill="#000" />
            <circle cx="270" cy="200" r="10" fill="#000" /><circle cx="260" cy="280" r="12" fill="#000" />
            <circle cx="200" cy="160" r="11" fill="#000" />
            <circle cx="165" cy="240" r="15" fill="#22c55e" stroke="#000" strokeWidth="3" />
            <circle cx="165" cy="240" r="6" fill="#000" />
            <circle cx="235" cy="240" r="15" fill="#22c55e" stroke="#000" strokeWidth="3" />
            <circle cx="235" cy="240" r="6" fill="#000" />
            <polygon points="200,270 185,290 215,290" fill="#000" />
          </g>
        )}
        {id === 14 && (
          <g>
            <rect x="80" y="120" width="240" height="280" rx="120" fill="#78350f" stroke="#000" strokeWidth="5" />
            <circle cx="145" cy="210" r="45" fill="#ffffff" stroke="#eab308" strokeWidth="8" />
            <circle cx="145" cy="210" r="22" fill="#000000" stroke="#fff" strokeWidth="4" />
            <circle cx="255" cy="210" r="45" fill="#ffffff" stroke="#eab308" strokeWidth="8" />
            <circle cx="255" cy="210" r="22" fill="#000000" stroke="#fff" strokeWidth="4" />
            <polygon points="200,240 185,275 215,275" fill="#f97316" />
            <path d="M 80,220 C 40,250 40,340 80,360 Z" fill="#b45309" stroke="#000" strokeWidth="3" />
            <path d="M 320,220 C 360,250 360,340 320,360 Z" fill="#b45309" stroke="#000" strokeWidth="3" />
          </g>
        )}
        {id === 15 && (
          <g>
            <g stroke="#1e293b" strokeWidth="4">
              <line x1="200" y1="240" x2="80" y2="120" />
              <line x1="200" y1="240" x2="320" y2="120" />
              <line x1="200" y1="240" x2="200" y2="70" />
              <line x1="200" y1="240" x2="60" y2="220" />
              <line x1="200" y1="240" x2="340" y2="220" />
              <line x1="200" y1="240" x2="100" y2="340" />
              <line x1="200" y1="240" x2="300" y2="340" />
            </g>
            <ellipse cx="200" cy="260" rx="100" ry="75" fill="#d97706" stroke="#78350f" strokeWidth="5" />
            <circle cx="160" cy="245" r="10" fill="#fff" stroke="#000" strokeWidth="2" />
            <circle cx="160" cy="245" r="4" fill="#000" />
            <circle cx="240" cy="245" r="10" fill="#fff" stroke="#000" strokeWidth="2" />
            <circle cx="240" cy="245" r="4" fill="#000" />
          </g>
        )}
        {id === 16 && (
          <g>
            <path d="M 200,320 C 100,240 80,100 200,100 C 320,100 300,240 200,320 Z" fill="none" stroke="#2563eb" strokeWidth="15" />
            <circle cx="120" cy="180" r="15" fill="#facc15" stroke="#000" strokeWidth="2" />
            <circle cx="120" cy="180" r="7" fill="#2563eb" />
            <circle cx="280" cy="180" r="15" fill="#facc15" stroke="#000" strokeWidth="2" />
            <circle cx="280" cy="180" r="7" fill="#2563eb" />
            <circle cx="200" cy="110" r="15" fill="#facc15" stroke="#000" strokeWidth="2" />
            <circle cx="200" cy="110" r="7" fill="#2563eb" />
            <ellipse cx="200" cy="300" rx="45" ry="85" fill="#0284c7" stroke="#1e3a8a" strokeWidth="4" />
            <circle cx="200" cy="210" r="25" fill="#0284c7" />
            <circle cx="190" cy="210" r="5" fill="#fff" />
            <circle cx="210" cy="210" r="5" fill="#fff" />
          </g>
        )}
        {id === 17 && (
          <g>
            <g stroke="#ea580c" strokeWidth="8">
              {Array.from({ length: 16 }).map((_, i) => {
                const angle = (i * 360) / 16;
                const rad = (angle * Math.PI) / 180;
                const x2 = 200 + 150 * Math.cos(rad);
                const y2 = 250 + 150 * Math.sin(rad);
                return <line key={i} x1="200" y1="250" x2={x2} y2={y2} />;
              })}
            </g>
            <circle cx="200" cy="250" r="95" fill="#f59e0b" stroke="#78350f" strokeWidth="5" />
            <circle cx="170" cy="230" r="12" fill="#fff" stroke="#000" strokeWidth="2" />
            <circle cx="170" cy="230" r="5" fill="#000" />
            <circle cx="230" cy="230" r="12" fill="#fff" stroke="#000" strokeWidth="2" />
            <circle cx="230" cy="230" r="5" fill="#000" />
            <ellipse cx="200" cy="270" rx="18" ry="10" fill="#78350f" />
          </g>
        )}
        {id === 18 && (
          <g>
            <circle cx="130" cy="140" r="35" fill="#78350f" stroke="#000" strokeWidth="3" />
            <circle cx="270" cy="140" r="35" fill="#78350f" stroke="#000" strokeWidth="3" />
            <circle cx="200" cy="250" r="120" fill="#b45309" stroke="#78350f" strokeWidth="5" />
            <circle cx="160" cy="225" r="14" fill="#fff" stroke="#000" strokeWidth="2" />
            <circle cx="160" cy="225" r="6" fill="#000" />
            <circle cx="240" cy="225" r="14" fill="#fff" stroke="#000" strokeWidth="2" />
            <circle cx="240" cy="225" r="6" fill="#000" />
            <ellipse cx="200" cy="285" rx="30" ry="20" fill="#ffedd5" stroke="#78350f" strokeWidth="3" />
            <circle cx="200" cy="275" r="8" fill="#000" />
          </g>
        )}
        {id === 19 && (
          <g>
            <polygon points="200,380 90,200 310,200" fill="#ea580c" stroke="#78350f" strokeWidth="4" />
            <polygon points="90,200 70,100 140,170" fill="#ea580c" stroke="#78350f" strokeWidth="3" />
            <polygon points="310,200 330,100 260,170" fill="#ea580c" stroke="#78350f" strokeWidth="3" />
            <polygon points="200,380 90,200 150,260" fill="#ffffff" />
            <polygon points="200,380 310,200 250,260" fill="#ffffff" />
            <circle cx="150" cy="220" r="10" fill="#000" />
            <circle cx="250" cy="220" r="10" fill="#000" />
            <circle cx="200" cy="370" r="12" fill="#000" />
          </g>
        )}
        {id === 20 && (
          <g>
            <rect x="140" y="240" width="120" height="180" rx="60" fill="#e2e8f0" stroke="#475569" strokeWidth="4" />
            <rect x="150" y="80" width="35" height="170" rx="17" fill="#e2e8f0" stroke="#475569" strokeWidth="3" />
            <rect x="160" y="110" width="15" height="110" rx="7" fill="#f472b6" />
            <rect x="215" y="80" width="35" height="170" rx="17" fill="#e2e8f0" stroke="#475569" strokeWidth="3" />
            <rect x="225" y="110" width="15" height="110" rx="7" fill="#f472b6" />
            <circle cx="180" cy="290" r="10" fill="#000" />
            <circle cx="220" cy="290" r="10" fill="#000" />
            <polygon points="280,320 310,420 340,320" fill="#f97316" stroke="#ea580c" strokeWidth="2" />
            <path d="M 310,320 C 290,300 330,300 310,280" stroke="#22c55e" strokeWidth="4" fill="none" />
          </g>
        )}

        {/* 21-30: عالم البحار */}
        {id === 21 && (
          <g>
            <ellipse cx="200" cy="260" rx="110" ry="90" fill="#15803d" stroke="#166534" strokeWidth="5" />
            <polygon points="200,180 240,210 240,260 200,290 160,260 160,210" fill="none" stroke="#bbf7d0" strokeWidth="4" />
            <path d="M 160,210 L 110,190 M 240,210 L 290,190 M 160,260 L 110,280 M 240,260 L 290,280" stroke="#bbf7d0" strokeWidth="4" />
            <circle cx="200" cy="140" r="30" fill="#16a34a" stroke="#15803d" strokeWidth="3" />
            <circle cx="190" cy="130" r="4" fill="#fff" />
            <circle cx="210" cy="130" r="4" fill="#fff" />
          </g>
        )}
        {id === 22 && (
          <g>
            <path d="M 80,250 C 140,160 240,160 280,250 C 240,340 140,340 80,250 Z" fill="none" stroke="#ea580c" strokeWidth="5" />
            <path d="M 140,210 C 160,230 160,270 140,290 M 180,200 C 200,230 200,270 180,300" stroke="#ea580c" strokeWidth="3" />
            <path d="M 80,250 L 20,180 L 40,250 L 20,320 Z" fill="#f97316" stroke="#ea580c" strokeWidth="3" />
            <circle cx="240" cy="235" r="14" fill="#fff" stroke="#000" strokeWidth="2" />
            <circle cx="242" cy="235" r="5" fill="#000" />
          </g>
        )}
        {id === 23 && (
          <g>
            <ellipse cx="200" cy="200" rx="90" ry="80" fill="#f43f5e" stroke="#be123c" strokeWidth="5" />
            <circle cx="170" cy="180" r="12" fill="#fff" stroke="#000" strokeWidth="2" />
            <circle cx="170" cy="180" r="5" fill="#000" />
            <circle cx="230" cy="180" r="12" fill="#fff" stroke="#000" strokeWidth="2" />
            <circle cx="230" cy="180" r="5" fill="#000" />
            <path d="M 180,225 Q 200,245 220,225" stroke="#000" strokeWidth="4" fill="none" />
            <g fill="#fff" stroke="#be123c" strokeWidth="2">
              <path d="M 150,270 Q 110,380 70,350" stroke="#f43f5e" strokeWidth="18" strokeLinecap="round" fill="none" />
              <circle cx="120" cy="310" r="6" /><circle cx="95" cy="335" r="6" />
              <path d="M 200,280 Q 200,410 200,410" stroke="#f43f5e" strokeWidth="18" strokeLinecap="round" fill="none" />
              <circle cx="200" cy="330" r="6" /><circle cx="200" cy="370" r="6" />
              <path d="M 250,270 Q 290,380 330,350" stroke="#f43f5e" strokeWidth="18" strokeLinecap="round" fill="none" />
              <circle cx="280" cy="310" r="6" /><circle cx="305" cy="335" r="6" />
            </g>
          </g>
        )}
        {id === 24 && (
          <g>
            <path d="M 200,60 L 235,170 L 350,170 L 260,240 L 295,350 L 200,280 L 105,350 L 140,240 L 50,170 L 165,170 Z" fill="#fb923c" stroke="#ea580c" strokeWidth="5" />
            <g fill="#ffedd5">
              <circle cx="200" cy="180" r="8" /><circle cx="230" cy="210" r="6" /><circle cx="170" cy="210" r="6" />
              <circle cx="250" cy="260" r="8" /><circle cx="150" cy="260" r="8" />
              <circle cx="200" cy="240" r="10" fill="#ea580c" />
            </g>
          </g>
        )}
        {id === 25 && (
          <g>
            <path d="M 100,220 C 100,100 300,100 300,220 Z" fill="#fda4af" stroke="#f43f5e" strokeWidth="4" />
            <path d="M 100,220 Q 200,250 300,220" stroke="#f43f5e" strokeWidth="4" fill="none" />
            <g stroke="#f43f5e" strokeWidth="5" fill="none">
              <path d="M 130,230 Q 150,320 120,410" />
              <path d="M 170,240 Q 160,330 180,420" />
              <path d="M 200,240 Q 220,310 200,430" />
              <path d="M 230,240 Q 210,330 230,420" />
              <path d="M 270,230 Q 250,320 280,410" />
            </g>
          </g>
        )}
        {id === 26 && (
          <g>
            <path d="M 30,260 C 30,160 180,160 260,180 C 340,200 350,280 280,280 C 240,280 160,330 30,260 Z" fill="#0284c7" stroke="#1e3b8a" strokeWidth="4" />
            <path d="M 120,280 Q 170,260 240,280 M 130,295 Q 170,275 220,295" stroke="#fff" strokeWidth="3" fill="none" />
            <path d="M 200,170 Q 180,110 150,130 M 200,170 Q 220,110 250,130" stroke="#38bdf8" strokeWidth="4" fill="none" />
            <circle cx="270" cy="220" r="7" fill="#fff" />
            <path d="M 30,260 L -10,220 L 0,260 L -10,300 Z" fill="#0284c7" />
          </g>
        )}
        {id === 27 && (
          <g>
            <path d="M 230,120 C 230,80 180,80 180,120 Q 180,160 210,180 Q 230,230 200,280 Q 160,320 180,360 Q 200,380 200,350 Q 200,320 220,290 C 260,240 230,160 230,120 Z" fill="#f59e0b" stroke="#b45309" strokeWidth="4" />
            <path d="M 180,360 C 170,370 160,360 165,350 Q 175,340 185,350" stroke="#b45309" strokeWidth="3" fill="none" />
            <path d="M 230,140 L 250,150 M 225,170 L 245,180 M 220,200 L 240,210" stroke="#b45309" strokeWidth="3" />
            <circle cx="200" cy="110" r="6" fill="#000" />
          </g>
        )}
        {id === 28 && (
          <g>
            <ellipse cx="200" cy="280" rx="90" ry="70" fill="#ef4444" stroke="#991b1b" strokeWidth="4" />
            <circle cx="170" cy="250" r="10" fill="#fff" stroke="#000" strokeWidth="2" />
            <circle cx="170" cy="250" r="4" fill="#000" />
            <circle cx="230" cy="250" r="10" fill="#fff" stroke="#000" strokeWidth="2" />
            <circle cx="230" cy="250" r="4" fill="#000" />
            <path d="M 130,240 Q 80,180 110,130 C 140,160 150,220 130,240" fill="#ef4444" stroke="#991b1b" strokeWidth="3" />
            <path d="M 270,240 Q 320,180 290,130 C 260,160 250,220 270,240" fill="#ef4444" stroke="#991b1b" strokeWidth="3" />
            <path d="M 115,310 Q 70,330 60,370 M 120,330 Q 80,360 80,400 M 285,310 Q 330,330 340,370 M 280,330 Q 320,360 320,400" stroke="#ef4444" strokeWidth="6" fill="none" strokeLinecap="round" />
          </g>
        )}
        {id === 29 && (
          <path d="M 200,250 C 120,150 100,380 240,380 C 350,380 340,180 220,150 C 140,130 120,260 190,280 C 240,290 250,220 210,210 C 180,200 180,240 200,245" fill="none" stroke="#7c2d12" strokeWidth="8" strokeLinecap="round" />
        )}
        {id === 30 && (
          <g stroke="#ec4899" strokeWidth="12" strokeLinecap="round" fill="none">
            <path d="M 200,440 L 200,300 Q 140,240 100,280 M 200,320 Q 260,250 290,290" />
            <path d="M 100,280 L 100,200 Q 60,160 50,200 M 100,220 Q 140,160 150,200" strokeWidth="8" />
            <path d="M 290,290 L 290,190 Q 340,140 350,180 M 290,220 Q 250,150 240,190" strokeWidth="8" />
          </g>
        )}

        {/* 31-40: عالم الديناصورات */}
        {id === 31 && (
          <g>
            <path d="M 80,440 Q 120,240 220,240 L 320,240 C 340,290 300,340 280,340 L 200,340" fill="none" stroke="#22c55e" strokeWidth="40" strokeLinecap="round" />
            <path d="M 240,240 Q 290,170 330,220" stroke="#16a34a" strokeWidth="12" fill="none" />
            <polygon points="260,225 270,240 280,225" fill="#fff" />
            <polygon points="290,225 300,240 310,225" fill="#fff" />
            <circle cx="240" cy="180" r="15" fill="#fff" stroke="#000" strokeWidth="3" />
            <circle cx="240" cy="180" r="6" fill="#000" />
          </g>
        )}
        {id === 32 && (
          <g>
            <rect x="100" y="240" width="180" height="150" rx="40" fill="#2563eb" stroke="#1d4ed8" strokeWidth="4" />
            <path d="M 220,210 C 180,120 340,120 300,240 Z" fill="#1d4ed8" stroke="#1e40af" strokeWidth="4" />
            <polygon points="210,180 180,100 240,170" fill="#ffffff" stroke="#000" strokeWidth="2" />
            <polygon points="270,180 300,100 260,170" fill="#ffffff" stroke="#000" strokeWidth="2" />
            <polygon points="295,245 320,230 280,260" fill="#ffffff" stroke="#000" strokeWidth="2" />
            <circle cx="240" cy="230" r="10" fill="#fff" />
            <circle cx="240" cy="230" r="4" fill="#000" />
          </g>
        )}
        {id === 33 && (
          <g>
            <path d="M 60,380 Q 150,220 280,320 L 340,380" fill="none" stroke="#ea580c" strokeWidth="35" strokeLinecap="round" />
            <polygon points="120,230 100,180 140,210" fill="#f97316" stroke="#000" strokeWidth="2" />
            <polygon points="160,200 145,150 185,180" fill="#f97316" stroke="#000" strokeWidth="2" />
            <polygon points="210,195 200,140 240,180" fill="#f97316" stroke="#000" strokeWidth="2" />
            <polygon points="260,220 250,170 285,210" fill="#f97316" stroke="#000" strokeWidth="2" />
            <circle cx="100" cy="280" r="6" fill="#fff" />
          </g>
        )}
        {id === 34 && (
          <g>
            <path d="M 60,420 Q 110,380 150,380 L 250,380 Q 240,240 200,150 Q 190,110 230,110 Q 250,150 270,380" fill="none" stroke="#0284c7" strokeWidth="35" strokeLinecap="round" />
            <ellipse cx="225" cy="115" rx="20" ry="14" fill="#0284c7" />
            <circle cx="230" cy="110" r="4" fill="#fff" />
            <path d="M 320,100 L 320,200 L 280,150 Z" fill="#22c55e" />
          </g>
        )}
        {id === 35 && (
          <g>
            <polygon points="200,200 80,110 150,240" fill="url(#stripes-diagonal)" stroke="#000" strokeWidth="3" />
            <polygon points="200,200 320,110 250,240" fill="url(#stripes-diagonal)" stroke="#000" strokeWidth="3" />
            <ellipse cx="200" cy="210" rx="15" ry="55" fill="#ef4444" stroke="#000" strokeWidth="2" />
            <polygon points="200,160 200,100 220,150" fill="#eab308" />
          </g>
        )}
        {id === 36 && (
          <g>
            <ellipse cx="200" cy="260" rx="110" ry="150" fill="#fef08a" stroke="#ca8a04" strokeWidth="4" />
            <path d="M 95,210 L 150,250 L 190,190 L 250,260 L 305,210" stroke="#ca8a04" strokeWidth="8" fill="none" strokeLinejoin="round" />
            <ellipse cx="200" cy="140" rx="30" ry="25" fill="#22c55e" />
            <circle cx="190" cy="135" r="4" fill="#fff" />
            <circle cx="210" cy="135" r="4" fill="#fff" />
          </g>
        )}
        {id === 37 && (
          <g fill="#475569" stroke="#1e293b" strokeWidth="5">
            <ellipse cx="200" cy="290" rx="80" ry="90" fill="url(#grid-contrast)" />
            <ellipse cx="120" cy="160" rx="35" ry="55" fill="url(#grid-contrast)" />
            <ellipse cx="200" cy="120" rx="40" ry="65" fill="url(#grid-contrast)" />
            <ellipse cx="280" cy="160" rx="35" ry="55" fill="url(#grid-contrast)" />
          </g>
        )}
        {id === 38 && (
          <g>
            <path d="M 80,410 C 120,310 280,310 320,410 Z" fill="none" stroke="#3b82f6" strokeWidth="35" strokeLinecap="round" />
            <path d="M 120,330 C 120,160 280,160 280,330 Z" fill="url(#stripes-diagonal)" stroke="#000" strokeWidth="3" />
            <circle cx="280" cy="330" r="5" fill="#fff" />
          </g>
        )}
        {id === 39 && (
          <g fill="none" stroke="#475569" strokeWidth="8" strokeLinecap="round">
            <rect x="25" y="25" width="350" height="450" fill="#0f172a" rx="15" />
            <line x1="200" y1="100" x2="200" y2="400" stroke="#fff" strokeWidth="12" />
            <path d="M 130,160 Q 200,180 270,160 M 120,210 Q 200,230 280,210 M 120,260 Q 200,280 280,260 M 130,310 Q 200,330 270,310" stroke="#fff" />
            <circle cx="200" cy="100" r="30" fill="#fff" stroke="#0f172a" strokeWidth="4" />
          </g>
        )}
        {id === 40 && (
          <g>
            <polygon points="200,160 80,440 320,440" fill="#78350f" stroke="#000" strokeWidth="4" />
            <path d="M 170,180 L 170,300 M 200,160 L 200,350 M 230,180 L 230,280" stroke="#ef4444" strokeWidth="10" strokeLinecap="round" />
            <ellipse cx="200" cy="140" rx="45" ry="25" fill="#f97316" />
            <circle cx="160" cy="100" r="30" fill="url(#stripes-diagonal)" stroke="#000" strokeWidth="2" />
            <circle cx="240" cy="100" r="30" fill="url(#stripes-diagonal)" stroke="#000" strokeWidth="2" />
          </g>
        )}

        {/* 41-100: عروض متطابقة تماماً لأسمائها بدقة هندسية وتباين بؤري حاد */}
        {id === 41 && (
          <g>
            <rect x="180" y="200" width="140" height="120" fill="#ef4444" stroke="#000" strokeWidth="3" />
            <rect x="100" y="240" width="80" height="80" fill="#3b82f6" stroke="#000" strokeWidth="3" />
            <rect x="110" y="190" width="20" height="50" fill="#1e293b" />
            <circle cx="120" cy="140" r="25" fill="none" stroke="#000" strokeWidth="6" />
            <circle cx="150" cy="100" r="35" fill="none" stroke="#000" strokeWidth="6" />
            <circle cx="140" cy="340" r="30" fill="#000" stroke="#fff" strokeWidth="4" />
            <circle cx="140" cy="340" r="10" fill="#fff" />
            <circle cx="240" cy="340" r="45" fill="#000" stroke="#fff" strokeWidth="6" />
            <circle cx="240" cy="340" r="15" fill="#fff" />
          </g>
        )}
        {id === 42 && (
          <g>
            <rect x="60" y="210" width="280" height="130" rx="10" fill="#ef4444" stroke="#991b1b" strokeWidth="4" />
            <rect x="240" y="230" width="80" height="60" fill="#bae6fd" stroke="#000" strokeWidth="3" />
            <path d="M 80,180 L 260,180 M 80,195 L 260,195 M 110,180 L 110,195 M 150,180 L 150,195 M 190,180 L 190,195 M 230,180 L 230,195" stroke="#cbd5e1" strokeWidth="5" />
            <circle cx="120" cy="340" r="30" fill="#000" stroke="#fff" strokeWidth="4" />
            <circle cx="260" cy="340" r="30" fill="#000" stroke="#fff" strokeWidth="4" />
          </g>
        )}
        {id === 43 && (
          <g>
            <path d="M 80,270 L 320,270 L 280,330 L 120,330 Z" fill="#78350f" stroke="#451a03" strokeWidth="4" />
            <line x1="200" y1="110" x2="200" y2="270" stroke="#451a03" strokeWidth="5" />
            <path d="M 200,120 Q 280,180 200,250 Z" fill="url(#stripes-diagonal)" stroke="#000" strokeWidth="2" />
            <path d="M 200,120 Q 120,180 200,250 Z" fill="#ffffff" stroke="#000" strokeWidth="2" />
            <rect y="330" width="400" height="90" fill="url(#waves-blue)" />
          </g>
        )}
        {id === 44 && (
          <g>
            <g transform="translate(200,230) rotate(-45)">
              <rect x="-25" y="-80" width="50" height="150" rx="25" fill="#f8fafc" stroke="#1e293b" strokeWidth="4" />
              <polygon points="0,-110 -25,-80 25,-80" fill="#ef4444" />
              <circle cx="0" cy="-20" r="14" fill="#38bdf8" stroke="#1e293b" strokeWidth="3" />
              <polygon points="-15,70 0,120 15,70" fill="#f97316" />
            </g>
          </g>
        )}
        {id === 45 && (
          <g>
            <rect x="80" y="210" width="240" height="130" rx="65" fill="#eab308" stroke="#ca8a04" strokeWidth="5" />
            <circle cx="140" cy="275" r="22" fill="#fff" stroke="#1e293b" strokeWidth="5" />
            <circle cx="140" cy="275" r="10" fill="#38bdf8" />
            <circle cx="200" cy="275" r="22" fill="#fff" stroke="#1e293b" strokeWidth="5" />
            <circle cx="200" cy="275" r="10" fill="#38bdf8" />
            <circle cx="260" cy="275" r="22" fill="#fff" stroke="#1e293b" strokeWidth="5" />
            <circle cx="260" cy="275" r="10" fill="#38bdf8" />
            <path d="M 200,210 L 200,150 L 230,150" stroke="#eab308" strokeWidth="12" fill="none" strokeLinecap="round" />
          </g>
        )}
        {id === 46 && (
          <g>
            <rect x="70" y="210" width="260" height="120" rx="40" fill="#ffffff" stroke="#1e293b" strokeWidth="4" />
            <rect x="130" y="250" width="140" height="40" fill="url(#grid-contrast)" />
            <circle cx="120" cy="330" r="28" fill="#000" stroke="#fff" strokeWidth="4" />
            <circle cx="280" cy="330" r="28" fill="#000" stroke="#fff" strokeWidth="4" />
            <rect x="180" y="190" width="40" height="20" fill="#3b82f6" rx="5" />
          </g>
        )}
        {id === 47 && (
          <g>
            <rect x="100" y="220" width="180" height="100" rx="50" fill="#a855f7" stroke="#7e22ce" strokeWidth="4" />
            <rect x="180" y="235" width="80" height="50" fill="#bae6fd" stroke="#7e22ce" strokeWidth="3" />
            <line x1="60" y1="160" x2="320" y2="160" stroke="#000" strokeWidth="6" />
            <line x1="190" y1="160" x2="190" y2="220" stroke="#000" strokeWidth="5" />
            <path d="M 280,270 L 350,270" stroke="#000" strokeWidth="5" />
          </g>
        )}
        {id === 48 && (
          <g>
            <rect x="160" y="190" width="140" height="110" fill="#ef4444" stroke="#000" strokeWidth="3" />
            <rect x="90" y="230" width="70" height="70" fill="#ef4444" stroke="#000" strokeWidth="3" />
            <circle cx="130" cy="310" r="55" fill="#000" stroke="#fff" strokeWidth="6" />
            <circle cx="130" cy="310" r="30" fill="url(#grid-contrast)" />
            <circle cx="260" cy="320" r="30" fill="#000" stroke="#fff" strokeWidth="4" />
            <circle cx="260" cy="320" r="10" fill="#fff" />
          </g>
        )}
        {id === 49 && (
          <g>
            <ellipse cx="200" cy="200" rx="100" ry="120" fill="url(#stripes-diagonal)" stroke="#000" strokeWidth="4" />
            <rect x="175" y="330" width="50" height="40" fill="#78350f" stroke="#000" strokeWidth="3" />
            <line x1="185" y1="320" x2="185" y2="330" stroke="#000" strokeWidth="3" />
            <line x1="215" y1="320" x2="215" y2="330" stroke="#000" strokeWidth="3" />
          </g>
        )}
        {id === 50 && (
          <g stroke="#000" strokeWidth="4" fill="none">
            <circle cx="120" cy="280" r="60" strokeWidth="6" />
            <line x1="120" y1="220" x2="120" y2="340" />
            <line x1="60" y1="280" x2="180" y2="280" />
            <line x1="77" y1="237" x2="163" y2="323" />
            <line x1="77" y1="323" x2="163" y2="237" />
            <circle cx="280" cy="280" r="60" strokeWidth="6" />
            <line x1="280" y1="220" x2="280" y2="340" />
            <line x1="220" y1="280" x2="340" y2="280" />
            <line x1="237" y1="237" x2="323" y2="323" />
            <line x1="237" y1="323" x2="323" y2="237" />
            <polygon points="120,280 200,280 240,190 160,190" strokeWidth="8" />
          </g>
        )}

        {/* 51-60: الفضاء والكون */}
        {id === 51 && (
          <g>
            <ellipse cx="200" cy="250" rx="140" ry="30" fill="none" stroke="#facc15" strokeWidth="12" transform="rotate(-15 200 250)" />
            <ellipse cx="200" cy="250" rx="120" ry="18" fill="none" stroke="#ef4444" strokeWidth="4" transform="rotate(-15 200 250)" />
            <circle cx="200" cy="250" r="70" fill="url(#stripes-diagonal)" stroke="#38bdf8" strokeWidth="3" />
            <path d="M 80,282 C 120,300 280,250 320,222" fill="none" stroke="#facc15" strokeWidth="12" transform="rotate(-15 200 250)" />
          </g>
        )}
        {id === 52 && (
          <g>
            <path d="M 280,110 C 160,110 120,230 120,310 C 120,380 180,410 230,410 C 180,380 160,300 200,210 C 230,150 260,130 280,110 Z" fill="#e2e8f0" stroke="#94a3b8" strokeWidth="4" />
            <circle cx="150" cy="260" r="14" fill="none" stroke="#94a3b8" strokeWidth="3" />
            <circle cx="150" cy="260" r="5" fill="#94a3b8" />
            <circle cx="180" cy="340" r="10" fill="none" stroke="#94a3b8" strokeWidth="3" />
            <circle cx="180" cy="340" r="3" fill="#94a3b8" />
          </g>
        )}
        {id === 53 && (
          <g stroke="#a855f7" strokeWidth="4" fill="none">
            <path d="M 200,250 Q 250,150 150,150 T 250,350 T 200,250" strokeWidth="10" strokeLinecap="round" />
            <circle cx="200" cy="250" r="25" fill="#fff" />
            <g fill="#fff">
              <circle cx="240" cy="180" r="4" /><circle cx="160" cy="320" r="5" />
              <circle cx="120" cy="200" r="3" /><circle cx="280" cy="280" r="4" />
            </g>
          </g>
        )}
        {id === 54 && (
          <g>
            <circle cx="200" cy="250" r="130" fill="#f59e0b" stroke="#000" strokeWidth="4" />
            <path d="M 75,210 L 325,210 M 70,250 L 330,250 M 75,290 L 325,290" stroke="#78350f" strokeWidth="10" />
            <circle cx="200" cy="250" r="30" fill="#ef4444" stroke="#78350f" strokeWidth="4" />
            <circle cx="200" cy="250" r="10" fill="#fff" />
          </g>
        )}
        {id === 55 && (
          <g>
            <rect x="130" y="180" width="140" height="180" rx="40" fill="#f8fafc" stroke="#475569" strokeWidth="4" />
            <ellipse cx="200" cy="240" rx="55" ry="40" fill="#0f172a" stroke="#475569" strokeWidth="4" />
            <circle cx="180" cy="230" r="6" fill="#fff" />
          </g>
        )}
        {id === 56 && (
          <g>
            <path d="M 330,80 L 120,290" stroke="#ef4444" strokeWidth="25" strokeLinecap="round" />
            <path d="M 310,110 L 150,270" stroke="#f97316" strokeWidth="12" strokeLinecap="round" />
            <circle cx="100" cy="310" r="35" fill="#facc15" stroke="#ea580c" strokeWidth="4" />
          </g>
        )}
        {id === 57 && (
          <g>
            <circle cx="200" cy="250" r="85" fill="#fbbf24" stroke="#d97706" strokeWidth="5" />
            <path d="M 200,100 L 210,150 L 200,160 M 200,400 L 190,350 L 200,340 M 100,250 L 150,240 L 160,250 M 400,250 L 350,260 L 340,250" fill="none" stroke="#ea580c" strokeWidth="8" strokeLinecap="round" />
            <path d="M 120,120 L 160,160 M 280,280 L 320,320 M 120,320 L 160,280 M 280,160 L 320,120" stroke="#ea580c" strokeWidth="8" strokeLinecap="round" />
          </g>
        )}
        {id === 58 && (
          <g stroke="#fff" strokeWidth="5" fill="none">
            <rect x="25" y="25" width="350" height="450" fill="#0f172a" rx="15" />
            <line x1="100" y1="250" x2="300" y2="250" strokeWidth="12" />
            <rect x="60" y="150" width="80" height="200" fill="url(#grid-contrast)" stroke="#fff" strokeWidth="3" />
            <rect x="260" y="150" width="80" height="200" fill="url(#grid-contrast)" stroke="#fff" strokeWidth="3" />
            <circle cx="200" cy="250" r="30" fill="#38bdf8" />
          </g>
        )}
        {id === 59 && (
          <g>
            <polygon points="200,280 120,440 280,440" fill="url(#stripes-diagonal)" opacity="0.6" />
            <ellipse cx="200" cy="220" rx="90" ry="30" fill="#94a3b8" stroke="#000" strokeWidth="3" />
            <ellipse cx="200" cy="200" rx="50" ry="25" fill="#38bdf8" stroke="#000" strokeWidth="3" />
            <circle cx="150" cy="220" r="5" fill="#fef08a" />
            <circle cx="200" cy="225" r="5" fill="#fef08a" />
            <circle cx="250" cy="220" r="5" fill="#fef08a" />
          </g>
        )}
        {id === 60 && (
          <g stroke="#38bdf8" strokeWidth="5" fill="none" strokeLinecap="round">
            <polyline points="80,120 150,150 220,130 280,220 220,320 120,300" />
            <g fill="#fff" stroke="#fff" strokeWidth="2">
              <circle cx="80" cy="120" r="8" /><circle cx="150" cy="150" r="8" />
              <circle cx="220" cy="130" r="8" /><circle cx="280" cy="220" r="8" />
              <circle cx="220" cy="320" r="8" /><circle cx="120" cy="300" r="8" />
            </g>
          </g>
        )}

        {/* 61-70: الفواكه اللذيذة */}
        {id === 61 && (
          <g>
            <path d="M 200,140 C 130,140 100,200 100,260 C 100,340 160,370 200,350 C 240,370 300,340 300,260 C 300,200 270,140 200,140 Z" fill="url(#grid-contrast)" stroke="#e11d48" strokeWidth="5" />
            <path d="M 200,140 Q 210,80 230,60" stroke="#78350f" strokeWidth="6" fill="none" strokeLinecap="round" />
            <path d="M 215,100 Q 260,80 240,130 Z" fill="#22c55e" stroke="#15803d" strokeWidth="2" />
          </g>
        )}
        {id === 62 && (
          <g>
            <circle cx="200" cy="260" r="110" fill="url(#dots-dense)" stroke="#ea580c" strokeWidth="5" />
            <path d="M 200,150 Q 210,100 220,80" stroke="#78350f" strokeWidth="5" fill="none" />
            <path d="M 210,115 Q 260,100 245,145 Z" fill="#22c55e" stroke="#15803d" strokeWidth="2" />
          </g>
        )}
        {id === 63 && (
          <g>
            <path d="M 200,130 C 120,130 90,200 90,290 C 90,390 160,440 200,440 C 240,390 310,290 310,230 C 310,180 280,130 200,130 Z" fill="#ef4444" stroke="#be123c" strokeWidth="4" />
            <g fill="#fff">
              <circle cx="150" cy="200" r="4" /><circle cx="200" cy="200" r="4" /><circle cx="250" cy="200" r="4" />
              <circle cx="130" cy="260" r="5" /><circle cx="180" cy="260" r="5" /><circle cx="230" cy="260" r="5" /><circle cx="270" cy="260" r="5" />
              <circle cx="150" cy="320" r="5" /><circle cx="200" cy="320" r="5" /><circle cx="250" cy="320" r="5" />
              <circle cx="180" cy="380" r="4" /><circle cx="220" cy="380" r="4" />
            </g>
            <path d="M 150,135 Q 200,170 250,135 Q 200,100 150,135 Z" fill="#22c55e" stroke="#15803d" strokeWidth="3" />
          </g>
        )}
        {id === 64 && (
          <g>
            <path d="M 60,180 L 340,180 C 340,340 60,340 60,180 Z" fill="#ef4444" stroke="#15803d" strokeWidth="15" />
            <path d="M 70,180 L 330,180" stroke="#fff" strokeWidth="8" />
            <g fill="#000">
              <ellipse cx="120" cy="220" rx="5" ry="10" transform="rotate(-15 120 220)" />
              <ellipse cx="170" cy="250" rx="5" ry="10" />
              <ellipse cx="230" cy="250" rx="5" ry="10" />
              <ellipse cx="280" cy="220" rx="5" ry="10" transform="rotate(15 280 220)" />
            </g>
          </g>
        )}
        {id === 65 && (
          <g fill="#8b5cf6" stroke="#6d28d9" strokeWidth="3">
            <circle cx="200" cy="180" r="22" /><circle cx="240" cy="180" r="22" /><circle cx="160" cy="180" r="22" />
            <circle cx="180" cy="220" r="22" /><circle cx="220" cy="220" r="22" /><circle cx="140" cy="220" r="22" /><circle cx="260" cy="220" r="22" />
            <circle cx="200" cy="260" r="22" /><circle cx="240" cy="260" r="22" /><circle cx="160" cy="260" r="22" />
            <circle cx="180" cy="300" r="22" /><circle cx="220" cy="300" r="22" />
            <circle cx="200" cy="340" r="22" />
            <path d="M 200,160 L 200,120" stroke="#78350f" strokeWidth="5" fill="none" />
          </g>
        )}
        {id === 66 && (
          <g>
            <path d="M 80,180 Q 200,160 300,280 Q 210,340 80,180 Z" fill="#facc15" stroke="#ca8a04" strokeWidth="4" />
            <path d="M 80,180 Q 180,210 300,280" stroke="#ca8a04" strokeWidth="4" fill="none" />
            <rect x="75" y="170" width="10" height="15" fill="#78350f" transform="rotate(-20 75 170)" />
          </g>
        )}
        {id === 67 && (
          <g>
            <ellipse cx="200" cy="280" rx="90" ry="120" fill="url(#stripes-diagonal)" stroke="#ca8a04" strokeWidth="4" />
            <polygon points="200,80 160,170 240,170" fill="#22c55e" stroke="#15803d" strokeWidth="3" />
            <polygon points="170,100 140,170 200,170" fill="#22c55e" stroke="#15803d" strokeWidth="3" />
            <polygon points="230,100 200,170 260,170" fill="#22c55e" stroke="#15803d" strokeWidth="3" />
          </g>
        )}
        {id === 68 && (
          <g>
            <circle cx="140" cy="320" r="45" fill="#e11d48" stroke="#be123c" strokeWidth="4" />
            <circle cx="140" cy="300" r="10" fill="#fff" opacity="0.4" />
            <circle cx="260" cy="320" r="45" fill="#e11d48" stroke="#be123c" strokeWidth="4" />
            <circle cx="260" cy="300" r="10" fill="#fff" opacity="0.4" />
            <path d="M 140,280 Q 200,180 200,140 M 260,280 Q 200,180 200,140" stroke="#15803d" strokeWidth="6" fill="none" strokeLinecap="round" />
            <path d="M 200,140 Q 230,110 220,130 Z" fill="#22c55e" />
          </g>
        )}
        {id === 69 && (
          <g>
            <circle cx="200" cy="250" r="110" fill="#facc15" stroke="#eab308" strokeWidth="5" />
            <circle cx="200" cy="250" r="95" fill="#fff" />
            <g stroke="#facc15" strokeWidth="6" fill="none">
              <line x1="200" y1="140" x2="200" y2="360" />
              <line x1="140" y1="250" x2="260" y2="250" />
              <line x1="155" y1="205" x2="245" y2="295" />
              <line x1="155" y1="295" x2="245" y2="205" />
            </g>
            <circle cx="200" cy="250" r="15" fill="#fff" />
          </g>
        )}
        {id === 70 && (
          <g>
            <path d="M 200,130 C 140,130 130,220 130,280 C 130,360 160,400 200,400 C 240,400 270,360 270,280 C 270,220 260,130 200,130 Z" fill="url(#dots-dense)" stroke="#15803d" strokeWidth="4" />
            <path d="M 200,130 L 200,90" stroke="#78350f" strokeWidth="5" fill="none" />
            <path d="M 200,105 Q 240,90 220,130 Z" fill="#22c55e" />
          </g>
        )}

        {/* 71-80: عجائب الطبيعة */}
        {id === 71 && (
          <g>
            <path d="M 170,260 L 170,410 Q 170,440 200,440 Q 230,440 230,410 L 230,260 Z" fill="#f1f5f9" stroke="#cbd5e1" strokeWidth="4" />
            <path d="M 80,260 C 80,120 320,120 320,260 Z" fill="#ef4444" stroke="#991b1b" strokeWidth="5" />
            <circle cx="140" cy="180" r="18" fill="#fff" stroke="#991b1b" strokeWidth="2" />
            <circle cx="200" cy="160" r="22" fill="#fff" stroke="#991b1b" strokeWidth="2" />
            <circle cx="260" cy="190" r="16" fill="#fff" stroke="#991b1b" strokeWidth="2" />
            <circle cx="200" cy="225" r="14" fill="#fff" stroke="#991b1b" strokeWidth="2" />
          </g>
        )}
        {id === 72 && (
          <g>
            <path d="M 200,90 C 120,160 120,320 200,410 C 280,320 280,160 200,90 Z" fill="#22c55e" stroke="#15803d" strokeWidth="5" />
            <line x1="200" y1="90" x2="200" y2="410" stroke="#15803d" strokeWidth="6" />
            <path d="M 200,170 Q 150,140 140,150 M 200,240 Q 140,200 130,215 M 200,310 Q 150,260 145,280 M 200,170 Q 250,140 260,150 M 200,240 Q 260,200 270,215 M 200,310 Q 250,260 255,280" stroke="#15803d" strokeWidth="4" />
          </g>
        )}
        {id === 73 && (
          <g>
            <path d="M 120,220 C 100,200 100,140 140,140 C 150,110 200,100 230,130 C 260,110 310,120 310,170 C 330,190 320,240 280,240 L 120,240 Z" fill="#cbd5e1" stroke="#94a3b8" strokeWidth="4" />
            <g stroke="#3b82f6" strokeWidth="5" strokeLinecap="round">
              <line x1="140" y1="270" x2="110" y2="330" />
              <line x1="200" y1="270" x2="170" y2="330" />
              <line x1="260" y1="270" x2="230" y2="330" />
              <line x1="160" y1="340" x2="130" y2="400" />
              <line x1="220" y1="340" x2="190" y2="400" />
            </g>
          </g>
        )}
        {id === 74 && (
          <g>
            <g stroke="#facc15" strokeWidth="8">
              {Array.from({ length: 16 }).map((_, i) => {
                const angle = (i * 360) / 16;
                const rad = (angle * Math.PI) / 180;
                const x2 = 200 + 150 * Math.cos(rad);
                const y2 = 250 + 150 * Math.sin(rad);
                return <line key={i} x1="200" y1="250" x2={x2} y2={y2} />;
              })}
            </g>
            <circle cx="200" cy="250" r="75" fill="url(#grid-contrast)" stroke="#78350f" strokeWidth="6" />
          </g>
        )}
        {id === 75 && (
          <g stroke="#38bdf8" strokeWidth="6" fill="none" strokeLinecap="round">
            <line x1="200" y1="80" x2="200" y2="420" strokeWidth="8" />
            <line x1="80" y1="250" x2="320" y2="250" strokeWidth="8" />
            <line x1="100" y1="150" x2="300" y2="350" />
            <line x1="100" y1="350" x2="300" y2="150" />
            <path d="M 170,120 L 200,150 L 230,120 M 170,380 L 200,350 L 230,380" />
            <path d="M 120,170 L 150,200 L 120,230 M 280,170 L 250,200 L 280,230" transform="rotate(30 200 250)" />
          </g>
        )}
        {id === 76 && (
          <g fill="#15803d" stroke="#166534" strokeWidth="4" strokeLinejoin="round">
            <polygon points="200,90 120,190 280,190" />
            <polygon points="200,170 100,280 300,280" />
            <polygon points="200,250 80,380 320,380" />
            <rect x="180" y="380" width="40" height="60" fill="#78350f" stroke="#451a03" strokeWidth="3" />
          </g>
        )}
        {id === 77 && (
          <g strokeWidth="12" fill="none" strokeLinecap="round">
            <path d="M 60,380 A 140,140 0 0 1 340,380" stroke="#ef4444" />
            <path d="M 80,380 A 120,120 0 0 1 320,380" stroke="#f97316" />
            <path d="M 100,380 A 100,100 0 0 1 300,380" stroke="#facc15" />
            <path d="M 120,380 A 80,80 0 0 1 280,380" stroke="#22c55e" />
            <path d="M 140,380 A 60,60 0 0 1 260,380" stroke="#3b82f6" />
          </g>
        )}
        {id === 78 && (
          <polygon points="230,60 110,260 210,260 130,440 290,200 190,200" fill="#facc15" stroke="#ea580c" strokeWidth="5" strokeLinejoin="round" />
        )}
        {id === 79 && (
          <g stroke="#0f172a" strokeWidth="4" fill="none" strokeLinecap="round">
            <circle cx="200" cy="250" r="150" strokeDasharray="6,6" />
            <circle cx="200" cy="250" r="110" />
            <circle cx="200" cy="250" r="70" />
            <circle cx="200" cy="250" r="30" />
            <line x1="50" y1="250" x2="350" y2="250" strokeWidth="6" />
            <line x1="200" y1="100" x2="200" y2="400" strokeWidth="6" />
            <line x1="94" y1="144" x2="306" y2="356" />
            <line x1="94" y1="356" x2="306" y2="144" />
          </g>
        )}
        {id === 80 && (
          <path d="M 40,380 C 140,340 180,240 220,180 C 260,120 310,160 310,200 C 310,240 260,260 220,260 C 180,260 140,320 40,380 Z" fill="none" stroke="#1d4ed8" strokeWidth="12" strokeLinecap="round" />
        )}

        {/* 81-90: الأرقام التعليمية */}
        {id >= 81 && id <= 90 && (
          <g>
            <text x="200" y="320" textAnchor="middle" fontSize="240" fontWeight="950" fill="url(#stripes-diagonal)" stroke="#6b21a8" strokeWidth="8" fontFamily="sans-serif">
              {id - 80 === 10 ? "10" : id - 80}
            </text>
            <circle cx="200" cy="410" r="14" fill="#a855f7" />
          </g>
        )}

        {/* 91-100: الحروف والرموز */}
        {id === 91 && (
          <g>
            <text x="200" y="340" textAnchor="middle" fontSize="260" fontWeight="950" fill="url(#stripes-diagonal)" stroke="#db2777" strokeWidth="8" fontFamily="sans-serif">أ</text>
          </g>
        )}
        {id === 92 && (
          <g>
            <text x="200" y="280" textAnchor="middle" fontSize="200" fontWeight="950" fill="url(#stripes-diagonal)" stroke="#db2777" strokeWidth="8" fontFamily="sans-serif">ب</text>
            <circle cx="200" cy="350" r="22" fill="#db2777" stroke="#000" strokeWidth="4" />
          </g>
        )}
        {id === 93 && (
          <g>
            <text x="200" y="280" textAnchor="middle" fontSize="200" fontWeight="950" fill="url(#stripes-diagonal)" stroke="#db2777" strokeWidth="8" fontFamily="sans-serif">ت</text>
            <circle cx="170" cy="140" r="18" fill="#db2777" stroke="#000" strokeWidth="3" />
            <circle cx="230" cy="140" r="18" fill="#db2777" stroke="#000" strokeWidth="3" />
          </g>
        )}
        {id === 94 && (
          <g>
            <text x="200" y="280" textAnchor="middle" fontSize="200" fontWeight="950" fill="url(#stripes-diagonal)" stroke="#db2777" strokeWidth="8" fontFamily="sans-serif">ج</text>
            <circle cx="230" cy="270" r="22" fill="#db2777" stroke="#000" strokeWidth="4" />
          </g>
        )}
        {id === 95 && (
          <g>
            <path d="M 200,160 C 150,90 70,110 70,190 C 70,260 150,320 200,370 C 250,320 330,260 330,190 C 330,110 250,90 200,160 Z" fill="url(#grid-contrast)" stroke="#ef4444" strokeWidth="6" />
          </g>
        )}
        {id === 96 && (
          <polygon points="200,70 240,180 350,180 260,250 300,370 200,290 100,370 140,250 50,180 160,180" fill="url(#stripes-diagonal)" stroke="#eab308" strokeWidth="6" />
        )}
        {id === 97 && (
          <path d="M 280,120 C 160,120 120,240 120,320 C 120,390 180,420 230,420 C 180,390 160,310 200,220 C 230,160 260,140 280,120 Z" fill="url(#grid-contrast)" stroke="#94a3b8" strokeWidth="5" />
        )}
        {id === 98 && (
          <g>
            <circle cx="200" cy="250" r="140" fill="#facc15" stroke="#d97706" strokeWidth="6" />
            <circle cx="150" cy="210" r="25" fill="#fff" stroke="#000" strokeWidth="4" />
            <circle cx="150" cy="210" r="10" fill="#000" />
            <circle cx="250" cy="210" r="25" fill="#fff" stroke="#000" strokeWidth="4" />
            <circle cx="250" cy="210" r="10" fill="#000" />
            <path d="M 140,280 Q 200,340 260,280" stroke="#d97706" strokeWidth="8" fill="none" strokeLinecap="round" />
          </g>
        )}
        {id === 99 && (
          <g>
            <polygon points="90,340 120,160 200,230 280,160 310,340" fill="#fbbf24" stroke="#d97706" strokeWidth="5" strokeLinejoin="round" />
            <rect x="90" y="340" width="220" height="30" fill="#d97706" rx="5" />
            <circle cx="120" cy="150" r="14" fill="#ef4444" stroke="#fff" strokeWidth="3" />
            <circle cx="200" cy="220" r="14" fill="#3b82f6" stroke="#fff" strokeWidth="3" />
            <circle cx="280" cy="150" r="14" fill="#ef4444" stroke="#fff" strokeWidth="3" />
          </g>
        )}
        {id === 100 && (
          <g>
            <ellipse cx="140" cy="180" rx="45" ry="60" fill="url(#stripes-diagonal)" stroke="#be123c" strokeWidth="3" />
            <line x1="140" y1="240" x2="140" y2="340" stroke="#000" strokeWidth="3" />
            <ellipse cx="260" cy="220" rx="45" ry="60" fill="url(#grid-contrast)" stroke="#1e3a8a" strokeWidth="3" />
            <line x1="260" y1="280" x2="260" y2="380" stroke="#000" strokeWidth="3" />
          </g>
        )}

        {/* النجوم السحرية المخبأة للطفل */}
        <g style={{ visibility: 'visible' }}>
          <g transform={`translate(${card.targets[0].x}, ${card.targets[0].y})`} className="cursor-pointer" onClick={() => handleTargetClick('t1')}>
            <circle cx="0" cy="0" r="20" fill={isTarget1Found ? "#22c55e" : "#ef4444"} opacity="0.15" />
            <path d="M 0,-10 L 3,-3 L 10,0 L 3,3 L 0,10 L -3,3 L -10,0 L -3,-3 Z" fill={isTarget1Found ? "#22c55e" : "#ea580c"} stroke="#fff" strokeWidth="1.5" />
          </g>
          <g transform={`translate(${card.targets[1].x}, ${card.targets[1].y})`} className="cursor-pointer" onClick={() => handleTargetClick('t2')}>
            <circle cx="0" cy="0" r="20" fill={isTarget2Found ? "#22c55e" : "#ef4444"} opacity="0.15" />
            <path d="M 0,-10 L 3,-3 L 10,0 L 3,3 L 0,10 L -3,3 L -10,0 L -3,-3 Z" fill={isTarget2Found ? "#22c55e" : "#ea580c"} stroke="#fff" strokeWidth="1.5" />
          </g>
          <g transform={`translate(${card.targets[2].x}, ${card.targets[2].y})`} className="cursor-pointer" onClick={() => handleTargetClick('t3')}>
            <circle cx="0" cy="0" r="20" fill={isTarget3Found ? "#22c55e" : "#ef4444"} opacity="0.15" />
            <path d="M 0,-10 L 3,-3 L 10,0 L 3,3 L 0,10 L -3,3 L -10,0 L -3,-3 Z" fill={isTarget3Found ? "#22c55e" : "#ea580c"} stroke="#fff" strokeWidth="1.5" />
          </g>
        </g>

        {/* شريط معلومات البطاقة للطباعة */}
        <rect x="25" y="440" width="350" height="35" fill="#0f172a" rx="5"/>
        <text x="200" y="462" textAnchor="middle" fontSize="14" fontWeight="bold" fill="#ffffff" fontFamily="sans-serif">
          بطاقة {id} : {card.category} | ابحث عن الأهداف 🎯
        </text>
      </svg>
    );
  };

  return (
    <div className="min-h-screen bg-slate-50 text-slate-800 font-sans p-3 md:p-6 flex flex-col justify-between select-none">
      
      {/* ستايلات احترافية للطباعة الجماعية على ورق A4 */}
      <style>{`
        @media print {
          body, html, #root, .min-h-screen {
            background: white !important;
            padding: 0 !important;
            margin: 0 !important;
          }
          header, nav, section, footer, button, .no-print {
            display: none !important;
            visibility: hidden !important;
          }
          .print-area {
            display: block !important;
            visibility: visible !important;
            width: 100vw !important;
            height: 100vh !important;
            padding: 0 !important;
            margin: 0 !important;
          }
          .print-card-page {
            page-break-after: always !important;
            page-break-inside: avoid !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 100vw !important;
            height: 100vh !important;
            box-sizing: border-box !important;
            padding: 20px !important;
          }
          svg {
            width: 100% !important;
            height: 100% !important;
            max-height: 95vh !important;
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
          }
        }
        @media screen {
          .print-area {
            display: none !important;
          }
        }
      `}</style>

      {/* منطقة الطباعة غير المرئية على الشاشة */}
      <div className="print-area">
        {cardsData.map((card) => {
          if (selectedForPrint[card.id]) {
            return (
              <div key={`print-page-${card.id}`} className="print-card-page">
                {renderCardSvg(card)}
              </div>
            );
          }
          return null;
        })}
      </div>

      {/* الهيدر التفاعلي المبهج للأطفال */}
      <header className="bg-white rounded-2xl shadow-sm border border-slate-100 p-4 mb-4 flex flex-col lg:flex-row items-center justify-between gap-4 no-print">
        <div className="flex items-center gap-3">
          <div className="p-3 bg-rose-500 text-white rounded-xl shadow-md">
            <Sparkles className="w-6 h-6 animate-pulse" />
          </div>
          <div className="text-right">
            <h1 className="text-xl md:text-2xl font-black text-slate-950 flex items-center gap-2">
              <span>حقيبة الـ 100 بطاقة بصرية للتأهيل 👓</span>
            </h1>
            <p className="text-xs text-slate-500 mt-1">تطبيق التدريب البصري والتأهيلي الشامل المصمم للأبطال والنمو البصري السليم</p>
          </div>
        </div>

        {/* إعدادات الصوت وتنبيهات المساعد الصوتي */}
        <div className="flex flex-wrap items-center gap-3 justify-center">
          {/* كتم/تشغيل الصوت */}
          <button
            onClick={() => {
              setIsMuted(!isMuted);
              playSoundEffect('pop');
              if (!isMuted && 'speechSynthesis' in window) {
                window.speechSynthesis.cancel();
              }
            }}
            className={`p-2.5 rounded-xl border flex items-center gap-1.5 transition-all text-xs font-bold ${
              isMuted 
                ? 'bg-rose-50 border-rose-200 text-rose-600' 
                : 'bg-slate-50 border-slate-200 text-slate-600 hover:bg-slate-100'
            }`}
            title={isMuted ? "تشغيل الصوت" : "كتم الصوت"}
          >
            {isMuted ? <VolumeX className="w-4 h-4" /> : <Volume2 className="w-4 h-4" />}
            <span>{isMuted ? "الصوت مكتوم" : "الصوت مفعّل"}</span>
          </button>

          {/* تبديل التحدث التلقائي للمساعد */}
          <button
            onClick={() => {
              setAutoVoice(!autoVoice);
              playSoundEffect('pop');
            }}
            className={`p-2.5 rounded-xl border flex items-center gap-1.5 transition-all text-xs font-bold ${
              autoVoice 
                ? 'bg-emerald-50 border-emerald-200 text-emerald-700' 
                : 'bg-slate-50 border-slate-200 text-slate-600'
            }`}
            title="نطق المساعد التلقائي عند تبديل البطاقات"
          >
            <Smile className="w-4 h-4" />
            <span>نطق تلقائي: {autoVoice ? "مفعّل" : "ملغى"}</span>
          </button>

          {/* نقاط تحفيزية للطفل البطل */}
          <div className="flex items-center gap-3 bg-amber-50 border border-amber-200 p-2.5 rounded-xl">
            <Award className="w-5 h-5 text-amber-500 animate-bounce" />
            <div className="text-xs font-bold text-amber-950">
              أحسنت يا بطل! نقاطك: <span className="text-sm text-rose-600 font-extrabold">{score}</span> ⭐
            </div>
          </div>
        </div>

        {/* تصفح الواجهات والألسنة */}
        <div className="flex bg-slate-100 p-1 rounded-xl gap-1 w-full lg:w-auto">
          <button
            onClick={() => {
              setActiveTab('gallery');
              playSoundEffect('pop');
            }}
            className={`flex-1 lg:flex-none flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-bold transition-all ${
              activeTab === 'gallery' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-600 hover:text-slate-900'
            }`}
          >
            <Grid className="w-4 h-4" />
            البطاقات المائة
          </button>
          <button
            onClick={() => {
              setActiveTab('game');
              playSoundEffect('pop');
            }}
            className={`flex-1 lg:flex-none flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-bold transition-all ${
              activeTab === 'game' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-600 hover:text-slate-900'
            }`}
          >
            <Play className="w-4 h-4 text-emerald-500 animate-pulse" />
            لعبة صائد النجوم
          </button>
          <button
            onClick={() => {
              setActiveTab('guide');
              playSoundEffect('pop');
            }}
            className={`flex-1 lg:flex-none flex items-center justify-center gap-2 px-3 py-2 rounded-lg text-xs font-bold transition-all ${
              activeTab === 'guide' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-600 hover:text-slate-900'
            }`}
          >
            <BookOpen className="w-4 h-4" />
            دليل التأهيل السلوكي
          </button>
        </div>
      </header>

      {/* لافتة الإشعارات السريعة المبهجة */}
      {alertMessage && (
        <div className="no-print fixed top-4 right-4 z-50 bg-indigo-600 text-white font-bold text-xs py-3 px-5 rounded-xl shadow-lg animate-bounce">
          {alertMessage}
        </div>
      )}

      {/* واجهة تصفح البطاقات والطباعة */}
      {activeTab === 'gallery' && (
        <main className="grid grid-cols-1 xl:grid-cols-12 gap-5 items-start flex-grow no-print">
          
          {/* العمود الجانبي: فلترة وبحث وتصفح قائمة الـ 100 بطاقة */}
          <section className="xl:col-span-4 bg-white rounded-2xl p-4 border border-slate-100 shadow-sm space-y-4">
            
            {/* مربع البحث الذكي */}
            <div className="relative">
              <Search className="absolute right-3 top-2.5 w-4 h-4 text-slate-400" />
              <input
                type="text"
                placeholder="ابحث باسم بطاقة معينة (مثال: زرافة)..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="w-full pl-3 pr-10 py-2 rounded-xl border border-slate-200 text-xs focus:ring-1 focus:ring-indigo-500 outline-none"
              />
            </div>

            {/* فلتر المجموعات العشر */}
            <div className="space-y-1.5">
              <h3 className="text-xs font-black text-slate-900 px-1">تصفية المجموعات:</h3>
              <div className="flex flex-wrap gap-1 max-h-[120px] overflow-y-auto pr-1">
                {categories.map((cat) => (
                  <button
                    key={cat}
                    onClick={() => handleCategoryChange(cat)}
                    className={`px-2.5 py-1 rounded-lg text-[10px] font-bold transition-all ${
                      selectedCategory === cat 
                        ? 'bg-indigo-600 text-white shadow-sm' 
                        : 'bg-slate-100 text-slate-600 hover:bg-slate-200'
                    }`}
                  >
                    {cat}
                  </button>
                ))}
              </div>
            </div>

            {/* محرك الطباعة الجماعية الموفر للوقت والجهد للطباعة على ورق A4 */}
            <div className="bg-slate-50 rounded-xl p-3 border border-slate-200 space-y-3">
              <div className="flex items-center justify-between">
                <h4 className="text-xs font-black text-slate-900 flex items-center gap-1.5">
                  <Printer className="w-4 h-4 text-indigo-600" />
                  <span>الطباعة الجماعية لورق A4</span>
                </h4>
                <span className="text-[10px] bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded-full font-bold">
                  محدد: {Object.values(selectedForPrint).filter(Boolean).length} صفحة
                </span>
              </div>
              
              <div className="grid grid-cols-2 gap-1.5">
                <button
                  onClick={selectAllFilteredForPrint}
                  className="flex items-center justify-center gap-1 py-1.5 bg-slate-200 hover:bg-slate-300 text-slate-800 text-[10px] font-bold rounded-lg transition-all"
                >
                  <CheckSquare className="w-3.5 h-3.5" />
                  تحديد المعروض بالفلتر
                </button>
                <button
                  onClick={clearAllPrintSelection}
                  className="flex items-center justify-center gap-1 py-1.5 bg-slate-200 hover:bg-slate-300 text-slate-800 text-[10px] font-bold rounded-lg transition-all"
                >
                  <Trash2 className="w-3.5 h-3.5" />
                  إلغاء التحديد بالكامل
                </button>
              </div>

              <button
                onClick={handleBulkPrint}
                className="w-full py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl shadow-md flex items-center justify-center gap-2 transition-all"
              >
                <Printer className="w-4 h-4" />
                طباعة البطاقات المحددة دفعة واحدة (A4)
              </button>
            </div>

            {/* استعراض البطاقات */}
            <div className="space-y-2">
              <div className="flex items-center justify-between px-1">
                <h3 className="text-xs font-black text-slate-900">قائمة البطاقات المتوفرة ({filteredCards.length}):</h3>
                <span className="text-[10px] text-slate-400">مرر للأسفل</span>
              </div>
              
              <div className="grid grid-cols-1 gap-1.5 max-h-[280px] xl:max-h-[380px] overflow-y-auto pr-1">
                {filteredCards.map((card) => {
                  const isPrintSelected = !!selectedForPrint[card.id];
                  const isCompleted = !!completedCards[card.id];

                  return (
                    <div
                      key={card.id}
                      className={`flex items-center justify-between p-2 rounded-xl border transition-all ${
                        selectedCard === card.id - 1
                          ? 'border-indigo-500 bg-indigo-50/50'
                          : 'border-slate-100 bg-slate-50 hover:bg-slate-100'
                      }`}
                    >
                      {/* اختيار البطاقة لمعاينتها */}
                      <button
                        onClick={() => {
                          setSelectedCard(card.id - 1);
                          playSoundEffect('pop');
                        }}
                        className="flex items-center text-right gap-2.5 flex-grow overflow-hidden"
                      >
                        <div className={`w-8 h-8 rounded-lg flex items-center justify-center text-white font-extrabold text-xs shrink-0 ${card.color}`}>
                          {card.id}
                        </div>
                        <div className="overflow-hidden">
                          <h4 className="font-bold text-xs text-slate-900 truncate">{card.title}</h4>
                          <p className="text-[9px] text-slate-500 truncate">{card.category}</p>
                        </div>
                      </button>

                      {/* أزرار الإجراءات الخاصة بالبطاقة */}
                      <div className="flex items-center gap-1 shrink-0 ml-1">
                        <button
                          onClick={() => toggleSelectForPrint(card.id)}
                          title="تحديد لطباعة جماعية"
                          className={`p-1.5 rounded-lg transition-all ${
                            isPrintSelected ? 'text-indigo-600 bg-indigo-50' : 'text-slate-400 hover:text-slate-600'
                          }`}
                        >
                          {isPrintSelected ? <CheckSquare className="w-4 h-4" /> : <Square className="w-4 h-4" />}
                        </button>
                        
                        <button
                          onClick={() => toggleCardCompleted(card.id)}
                          title="تم التدريب عليها اليوم"
                          className={`p-1.5 rounded-lg transition-all ${
                            isCompleted ? 'text-emerald-600 bg-emerald-50' : 'text-slate-300 hover:text-slate-500'
                          }`}
                        >
                          <Check className="w-4 h-4" />
                        </button>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>

          </section>

          {/* المعاينة الحقيقية والمحاكي البصري للطفل والأبوين */}
          <section className="xl:col-span-8 flex flex-col items-center justify-center">
            
            {/* أداة محاكي الرؤية لمعرفة شكل الرؤية بدون نظارة ومع النظارة لتقريب الفكرة */}
            <div className="w-full max-w-lg bg-white rounded-2xl shadow-sm border border-slate-100 p-3 mb-4 flex flex-col sm:flex-row items-center justify-between gap-3">
              <div className="text-right">
                <span className="text-[10px] uppercase font-bold text-rose-500 tracking-wider">محاكي الرؤية البصرية للأولياء</span>
                <h3 className="text-sm font-bold text-slate-900">شاهد فارق جودة الرؤية لدى طفلك</h3>
              </div>
              <div className="flex bg-slate-100 p-1 rounded-xl w-full sm:w-auto">
                <button
                  onClick={() => {
                    setWithGlasses(false);
                    playSoundEffect('pop');
                  }}
                  className={`flex-1 sm:flex-none flex items-center justify-center gap-1.5 px-4 py-1.5 rounded-lg text-xs font-bold transition-all ${
                    !withGlasses ? 'bg-red-500 text-white shadow-sm' : 'text-slate-600 hover:text-slate-900'
                  }`}
                >
                  <EyeOff className="w-3.5 h-3.5" />
                  بدون نظارة
                </button>
                <button
                  onClick={() => {
                    setWithGlasses(true);
                    playSoundEffect('pop');
                  }}
                  className={`flex-1 sm:flex-none flex items-center justify-center gap-1.5 px-4 py-1.5 rounded-lg text-xs font-bold transition-all ${
                    withGlasses ? 'bg-emerald-500 text-white shadow-sm' : 'text-slate-600 hover:text-slate-900'
                  }`}
                >
                  <Eye className="w-3.5 h-3.5" />
                  بالنظارة
                </button>
              </div>
            </div>

            {/* البطاقة النشطة المعروضة مع أزرار التنقل التفاعلية الجانبية */}
            <div className="relative w-full max-w-lg flex items-center justify-center gap-1">
              
              <button
                onClick={prevCard}
                className="absolute right-[-15px] md:right-[-35px] z-10 p-2.5 bg-white rounded-full shadow-md border border-slate-200 hover:bg-slate-50 text-slate-700 transition-all"
              >
                <ChevronRight className="w-5 h-5" />
              </button>

              {/* إطار الرسوم المتجهة مع محاكاة وضوح الإبصار وتثبيت التأثيرات */}
              <div 
                className="w-full aspect-[4/5] bg-white rounded-3xl shadow-lg border-2 border-slate-100 overflow-hidden transition-all duration-300"
                style={{
                  filter: withGlasses ? 'none' : 'blur(6.5px) contrast(0.8) drop-shadow(1px 1px 1px rgba(0,0,0,0.15))',
                }}
              >
                {renderCardSvg(currentCardObj)}
              </div>

              <button
                onClick={nextCard}
                className="absolute left-[-15px] md:left-[-35px] z-10 p-2.5 bg-white rounded-full shadow-md border border-slate-200 hover:bg-slate-50 text-slate-700 transition-all"
              >
                <ChevronLeft className="w-5 h-5" />
              </button>
            </div>

            {/* تفاصيل البطاقة النشطة والتشجيع المتبادل */}
            <div className="w-full max-w-lg mt-5 space-y-4">
              <div className="text-center bg-white p-4 rounded-2xl border border-slate-100 shadow-sm space-y-2 relative overflow-hidden">
                <div className="flex items-center justify-center gap-2">
                  <span className={`text-[10px] text-white px-2.5 py-0.5 rounded-full font-bold ${currentCardObj.color}`}>
                    البطاقة {currentCardObj.id} من 100 : {currentCardObj.category}
                  </span>
                  
                  {/* زر المساعد الصوتي السحري لإعادة النطق (يضمن تخطي قيود الخصوصية بالنقر الفعلي) */}
                  <button 
                    onClick={() => speakAssistant(currentCardObj, true)}
                    className="p-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-600 rounded-xl transition-all flex items-center gap-1 text-[11px] font-bold"
                    title="استمع للمساعد الصوتي السحري"
                  >
                    <Volume2 className="w-4.5 h-4.5 animate-pulse" />
                    <span>المساعد السحري 🤖</span>
                  </button>
                </div>

                <h2 className="text-lg font-black text-slate-900">{currentCardObj.title}</h2>
                <p className="text-xs text-indigo-600 font-bold">{currentCardObj.subtitle}</p>
                <p className="text-xs text-slate-500 leading-relaxed px-2">{currentCardObj.description}</p>
              </div>

              {/* أزرار طباعة البطاقة بمفردها أو تعليم كمكتمل اليوم للتأكيد */}
              <div className="flex flex-col sm:flex-row gap-2">
                <button
                  onClick={() => {
                    const printUpdates = { [currentCardObj.id]: true };
                    setSelectedForPrint(printUpdates);
                    setTimeout(() => window.print(), 250);
                  }}
                  className="flex-1 flex items-center justify-center gap-2 px-5 py-3 bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold rounded-xl shadow-md transition-all"
                >
                  <Printer className="w-4.5 h-4.5" />
                  طباعة هذه البطاقة بمفردها (A4)
                </button>
                
                <button
                  onClick={() => toggleCardCompleted(currentCardObj.id)}
                  className={`flex-1 flex items-center justify-center gap-2 px-5 py-3 text-xs font-bold rounded-xl border transition-all ${
                    completedCards[currentCardObj.id]
                      ? 'bg-emerald-500 text-white border-emerald-500'
                      : 'bg-white text-slate-700 border-slate-200 hover:bg-slate-50'
                  }`}
                >
                  <Check className="w-4.5 h-4.5" />
                  {completedCards[currentCardObj.id] ? "أنجزناها اليوم بنجاح! 🎉" : "تعليم كمكتملة التدريب اليوم"}
                </button>
              </div>
            </div>

          </section>
        </main>
      )}

      {/* التبويب الثاني: لعبة صائد النجوم التفاعلية */}
      {activeTab === 'game' && (
        <main className="max-w-xl mx-auto bg-white rounded-3xl p-5 md:p-6 border border-slate-100 shadow-sm space-y-5 no-print">
          <div className="text-center space-y-1">
            <span className="text-[10px] bg-emerald-100 text-emerald-800 px-3 py-1 rounded-full font-bold">لعبة الملاحظة البصرية النشطة</span>
            <h2 className="text-xl font-black text-slate-950">لعبة صائد النجوم السحرية المخبأة ✨</h2>
            <p className="text-xs text-slate-500">لعبة تفاعلية مبهجة مصممة لتدريب عضلات نظر طفلك وتنشيط عينه الكسولة</p>
          </div>

          <div className="flex items-center justify-between bg-slate-50 p-3 rounded-2xl border border-slate-150">
            <div className="text-right">
              <span className="text-[10px] text-slate-400">البطاقة المحددة للعب</span>
              <h4 className="text-xs font-bold text-slate-900">{currentCardObj.title}</h4>
            </div>
            
            <div className="text-left">
              <span className="text-[10px] text-slate-400">مجموع نقاط البطل</span>
              <h4 className="text-sm font-black text-emerald-600">{score} نقطة</h4>
            </div>
          </div>

          {/* لوحة عرض اللعبة التفاعلية للطفل */}
          <div className="relative w-full aspect-[4/5] bg-white rounded-3xl overflow-hidden border border-slate-100 shadow-inner">
            {renderCardSvg(currentCardObj)}
          </div>

          <div className="text-center space-y-3">
            <p className="text-xs text-slate-600 leading-relaxed px-4">
              البطاقة تحتوي على نجوم مخبأة بالداخل، دع طفلك البطل يبحث عنها بتمعن ويلمسها لتتحول للون الأخضر ويجمع المزيد من النقاط ⭐.
            </p>

            <div className="flex justify-center gap-2">
              <button
                onClick={prevCard}
                className="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl text-xs transition-all"
              >
                البطاقة السابقة
              </button>
              
              <button 
                onClick={() => speakAssistant(currentCardObj, true)}
                className="px-4 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-600 font-bold rounded-xl text-xs flex items-center gap-1.5 transition-all"
              >
                <Volume2 className="w-4 h-4 animate-bounce" />
                <span>المساعد الصوتي 🤖</span>
              </button>

              <button
                onClick={nextCard}
                className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-xl text-xs transition-all"
              >
                البطاقة التالية
              </button>
            </div>
          </div>
        </main>
      )}

      {/* التبويب الثالث: خطة التأهيل والتحفيز السلوكي للأبوين */}
      {activeTab === 'guide' && (
        <main className="max-w-3xl mx-auto bg-white rounded-3xl p-6 md:p-8 border border-slate-100 shadow-sm space-y-6 no-print">
          <div className="text-center space-y-2">
            <span className="text-xs bg-indigo-50 text-indigo-700 px-3 py-1 rounded-full font-bold">برنامج تحفيزي متكامل</span>
            <h2 className="text-2xl font-black text-slate-900">خطة التأهيل السلوكي لتقبل النظارات بيسر</h2>
            <p className="text-xs md:text-sm text-slate-500">مجموعة من الممارسات اليومية المصممة بعناية لمساعدتك في تخطي العناد وتجنب إخفاء النظارة</p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
            
            <div className="bg-slate-50 p-5 rounded-2xl border border-slate-100 space-y-2">
              <h3 className="font-bold text-slate-900 text-xs md:text-sm flex items-center gap-2">
                <span className="w-5 h-5 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center font-bold">1</span>
                تنظيم "بيت النظارة السحري"
              </h3>
              <p className="text-[11px] text-slate-600 leading-relaxed">
                بطلنا الذكي يقوم بإخفاء النظارة والادعاء بعدم معرفته بمكانها! الحل العملي هو تنظيم قواعد مبهجة في مكان تواجدها. خصص علبة جذابة باسم "بيت النظارة"، واشترط أنه بمجرد أن يعبر عن تعبه أو يخلعها، يتم وضعها فوراً بيدك أنت في العلبة بمكان مرتفع، لحين رغبته باللعب أو مشاهدة كرتون مفضل، وبذلك تفوت عليه فرصة إخفائها تماماً.
              </p>
            </div>

            <div className="bg-slate-50 p-5 rounded-2xl border border-slate-100 space-y-2">
              <h3 className="font-bold text-slate-900 text-xs md:text-sm flex items-center gap-2">
                <span className="w-5 h-5 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center font-bold">2</span>
                جلسات التباين البصري اليومية
              </h3>
              <p className="text-[11px] text-slate-600 leading-relaxed">
                قم بطباعة البطاقات ذات التباين الهندسي العالي (مجموعة الأشكال والتباين الأولى، ومجموعة الديناصورات، وعناصر الغابة) وعلقها على الحائط بمسافة مترين إلى 3 أمتار. اجعلها لعبة ممتعة يومية حيث يشير طفلك للبومة أو الأسد المنقش لتشجيعه على تتبع الحدود الدقيقة واكتشاف الفارق الهائل في جودة الرؤية بفضل نظارته.
              </p>
            </div>

            <div className="bg-slate-50 p-5 rounded-2xl border border-slate-100 space-y-2">
              <h3 className="font-bold text-slate-900 text-xs md:text-sm flex items-center gap-2">
                <span className="w-5 h-5 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center font-bold">3</span>
                التأهيل والتعزيز العاطفي بالألعاب
              </h3>
              <p className="text-[11px] text-slate-600 leading-relaxed">
                يتميز أطفال متلازمة داون بذكاء وتعلق عاطفي رائع للدمى والألعاب التي يحبونها. قم بصنع نظارة كرتونية مبهجة أو بلاستيكية لعبة وضعها على دبدوبه المفضل. قل له بسعادة غامرة: "دبدوب البطل يستطيع الآن تتبع البومة والديناصور بنظارته السحرية!". هذا يقلل من حواجز العناد ويحبب النظارة له.
              </p>
            </div>

            <div className="bg-slate-50 p-5 rounded-2xl border border-slate-100 space-y-2">
              <h3 className="font-bold text-slate-900 text-xs md:text-sm flex items-center gap-2">
                <span className="w-5 h-5 rounded-full bg-indigo-600 text-white text-xs flex items-center justify-center font-bold">4</span>
                مرحلة التكيف الدماغي الدقيقة
              </h3>
              <p className="text-[11px] text-slate-600 leading-relaxed">
                درجة النظر للعين اليسرى متباينة ولديها انحراف ملموس. هذا يعني أن دماغ طفلك في الأيام الأولى قد يشعر بغرابة لعدم اعتياده على استقبال تفاصيل حادة ومباشرة تماماً، مما يدفعه لخلعها. تحل بالكثير من الصبر وعززه بالتدريج (10-20 دقيقة خلال مشاهدة الكرتون) حتى يتبرمج دماغه بنجاح وتصبح النظارة مصدر راحته التامة.
              </p>
            </div>

          </div>

          <div className="p-4 bg-amber-50 border border-amber-200 rounded-2xl text-amber-900 text-xs md:text-sm flex gap-3 items-center">
            <HelpCircle className="w-5 h-5 text-amber-600 shrink-0" />
            <div>
              <span className="font-bold">ملاحظة تأهيلية بالغة الأهمية:</span> الخطوات والمثابرة التي تبذلها الآن ستغير شكل ونمو تطور جهازه البصري طوال عمره، وتقيه كلياً من التعرض لكسل العين البصري. تأكد دائماً من المتابعة الدورية للعيون كل 3 أشهر لمواكبة نموه السليم. أنتم تقومون بمسؤولية رائعة وعمل بطولي حقيقي!
            </div>
          </div>
        </main>
      )}

      {/* فوتر حقوق التطبيق المبهج */}
      <footer className="mt-8 text-center text-[10px] text-slate-400 no-print">
        تطبيق "نظارتي السحرية للتأهيل البصري للأطفال" - حقيبة الـ 100 بطاقة بصرية تفاعلية وقابلة للطباعة لـ A4 بدقة متناهية. ❤️
      </footer>
    </div>
  );
}

```