أنت كبير مهندسي واجهات الويب (Principal Frontend Architect).
أريدك أن تبني مكون React بنسخة TypeScript و Tailwind CSS يحقق المعايير التالية:
1. المكون: [اكتب اسم ووظيفة المكون هنا].
2. دعم شاشات الموبايل والديسكتوب بسلاسة (Mobile-first).
3. دعم كامل للوضع الداكن (Dark Mode) والاتجاه العربي RTL عبر خصائص منطقية (مثل ms-, me-).
4. استخدام TypeScript Interfaces صارمة للـ Props.
5. لا تستخدم أي مكتبات خارجية إضافية ما لم يُطلب منك ذلك صراحة.
أعطني الكود فقط مع شروحات مختصرة لأهم القرارات المعمارية.

لدي خطأ برمجي في كود الويب التالي:
[ضع رسالة الخطأ هنا أو سلوك الصفحة غير المتوقع]
 
وهذا هو الكود ذو الصلة:
[ضع الكود هنا]
 
أريدك أن تجيبني وفق هذا التسلسل:
1. السبب الجذري (Root Cause): لماذا يحدث هذا الخطأ بالضبط؟
2. الكود المصحح (Corrected Code): اكتب الكود بعد تصحيحه بدقة.
3. درس للمستقبل (Prevention): كيف أتجنب هذا النمط من الأخطاء مستقبلاً؟

أنا أقوم بإطلاق صفحة ويب لـ: [وصف مختصر للمنتج أو الخدمة أو معرض الأعمال].
الفئة المستهدفة: [حدد جمهورك هنا].
أريدك أن تولد لي:
1. 3 مقترحات لعناوين SEO Title جذابة (أقل من 60 حرفاً، تشمل الكلمة المفتاحية الأساسية).
2. 3 مقترحات لوصف Meta Description مقنع يدفع للضغط (بين 140 - 155 حرفاً).
3. كود Metadata جاهز للاستخدام في Next.js (Metadata Object).