function MainComponent() { const [activePhase, setActivePhase] = useState(null); const phases = [ { id: "development", title: "مرحلة التطوير", icon: "fa-lightbulb", description: "المرحلة الأولى في رحلة صناعة الفيلم، حيث تتبلور الأفكار وتتحول إلى مشروع قابل للتنفيذ", steps: [ { title: "تطوير الفكرة", content: "تحديد الفكرة الرئيسية للفيلم وتطويرها، مع التركيز على الجوانب الإبداعية والقيمة الفنية والجدوى الإنتاجية" }, { title: "كتابة المعالجة", content: "كتابة ملخص تفصيلي للقصة يشمل الشخصيات الرئيسية والحبكة والرسالة" }, { title: "كتابة السيناريو", content: "تحويل المعالجة إلى سيناريو كامل مع الحوار والوصف التفصيلي للمشاهد" }, { title: "الميزانية المبدئية", content: "وضع تصور أولي للتكاليف المتوقعة للمشروع وتحديد مصادر التمويل المحتملة" } ] }, { id: "preProduction", title: "مرحلة ما قبل الإنتاج", icon: "fa-tasks", description: "مرحلة التحضير والتخطيط التفصيلي قبل بدء التصوير الفعلي", steps: [ { title: "تشكيل فريق العمل", content: "اختيار الطاقم الفني والإداري الرئيسي وتحديد المسؤوليات" }, { title: "اختيار المواقع", content: "البحث عن المواقع المناسبة للتصوير وتأمين التصاريح اللازمة" }, { title: "اختيار الممثلين", content: "إجراء تجارب الأداء واختيار الممثلين المناسبين للأدوار" }, { title: "خطة التصوير", content: "إعداد جدول زمني تفصيلي للتصوير وتقسيم المشاهد" } ] }, { id: "production", title: "مرحلة الإنتاج", icon: "fa-film", description: "مرحلة التنفيذ الفعلي وتصوير المشاهد وفق الخطة الموضوعة", steps: [ { title: "التصوير", content: "تنفيذ خطة التصوير وتسجيل المشاهد وفق السيناريو" }, { title: "إدارة الموقع", content: "تنظيم العمل في موقع التصوير وضمان سير العمليات بكفاءة" }, { title: "متابعة الجودة", content: "مراجعة المواد المصورة يومياً وضمان جودتها الفنية والتقنية" }, { title: "إدارة الميزانية", content: "متابعة المصروفات اليومية وضبط التكاليف وفق الميزانية المحددة" } ] }, { id: "postProduction", title: "مرحلة ما بعد الإنتاج", icon: "fa-edit", description: "مرحلة تجميع وتحرير المواد المصورة وإضافة المؤثرات والموسيقى", steps: [ { title: "المونتاج", content: "تجميع وترتيب المشاهد وفق السيناريو وإيقاع الفيلم" }, { title: "الصوت", content: "معالجة الصوت وإضافة المؤثرات الصوتية والموسيقى" }, { title: "المؤثرات البصرية", content: "إضافة المؤثرات البصرية وتصحيح الألوان" }, { title: "النسخة النهائية", content: "إعداد النسخة النهائية للفيلم وتجهيزها للعرض" } ] }, { id: "distribution", title: "مرحلة التوزيع", icon: "fa-share-alt", description: "مرحلة إيصال الفيلم إلى الجمهور عبر قنوات العرض المختلفة", steps: [ { title: "استراتيجية التوزيع", content: "تحديد قنوات العرض المستهدفة والجدول الزمني للإطلاق" }, { title: "التسويق", content: "إعداد وتنفيذ خطة تسويقية متكاملة للفيلم" }, { title: "المهرجانات", content: "تحديد المهرجانات المستهدفة وتجهيز متطلبات المشاركة" }, { title: "العرض التجاري", content: "تنظيم العرض الأول وإدارة العروض التجارية" } ] } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-50 p-6", dir: "rtl", __source: { fileName: "", lineNumber: 128, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mx-auto max-w-7xl", __source: { fileName: "", lineNumber: 129, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8", __source: { fileName: "", lineNumber: 130, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 131, columnNumber: 11 }, __self: this }, "الدليل الإرشادي لإنتاج الأفلام"), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 134, columnNumber: 11 }, __self: this }, "دليل شامل يغطي جميع مراحل الإنتاج السينمائي من الفكرة إلى العرض")), /*#__PURE__*/ React.createElement("div", { className: "mb-12 grid gap-8 md:grid-cols-3 lg:grid-cols-5", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, phases.map((phase, index)=>/*#__PURE__*/ React.createElement("div", { key: phase.id, className: `relative ${index !== phases.length - 1 ? 'after:absolute after:top-1/2 after:h-0.5 after:w-full after:bg-gray-200 after:content-[""] md:after:right-full' : ""}`, __source: { fileName: "", lineNumber: 141, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActivePhase(activePhase === phase.id ? null : phase.id), className: `relative z-10 w-full rounded-lg ${activePhase === phase.id ? "bg-blue-600 text-white" : "bg-white text-gray-900"} p-6 shadow transition-all hover:shadow-lg`, __source: { fileName: "", lineNumber: 149, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center justify-center", __source: { fileName: "", lineNumber: 157, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex h-16 w-16 items-center justify-center rounded-full ${activePhase === phase.id ? "bg-blue-500 text-white" : "bg-blue-100 text-blue-600"}`, __source: { fileName: "", lineNumber: 158, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${phase.icon} text-2xl`, __source: { fileName: "", lineNumber: 163, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-medium", __source: { fileName: "", lineNumber: 166, columnNumber: 17 }, __self: this }, phase.title))))), activePhase && /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-white p-8 shadow", __source: { fileName: "", lineNumber: 173, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-gray-900", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }, phases.find((p)=>p.id === activePhase)?.title), /*#__PURE__*/ React.createElement("p", { className: "mt-2 text-gray-600", __source: { fileName: "", lineNumber: 178, columnNumber: 15 }, __self: this }, phases.find((p)=>p.id === activePhase)?.description)), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 md:grid-cols-2", __source: { fileName: "", lineNumber: 183, columnNumber: 13 }, __self: this }, phases.find((p)=>p.id === activePhase)?.steps.map((step, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "rounded-lg border border-gray-200 bg-gray-50 p-6", __source: { fileName: "", lineNumber: 187, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4 flex items-center", __source: { fileName: "", lineNumber: 191, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex h-8 w-8 items-center justify-center rounded-full bg-blue-100 text-blue-600", __source: { fileName: "", lineNumber: 192, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-sm font-medium", __source: { fileName: "", lineNumber: 193, columnNumber: 25 }, __self: this }, index + 1)), /*#__PURE__*/ React.createElement("h4", { className: "mr-3 text-lg font-medium text-gray-900", __source: { fileName: "", lineNumber: 195, columnNumber: 23 }, __self: this }, step.title)), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 199, columnNumber: 21 }, __self: this }, step.content))))))); }