[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_109":110,"_111":112},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","hucccc","name","forsati-students","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/hucccc/forsati-students/code/frontend/components/App.tsx","extension","id","3f5ee9ba-6670-436e-bc82-1d27dd718b02","App.tsx","fileId","01a04cf0-647d-750d-9613-499c35701454","parentId","01a04cf0-647d-750d-9613-53142865326c","branchId","1afaf604-76f8-479e-a7dd-fbc736324e34","branchVersion",15,"latest",true,"createdAt",["D",1787997603045],"version",11,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst SOURCES = [\n { id:\"teleworks\", name:\"برنامج العمل عن بُعد\", type:\"رسمي سعودي\", trust:\"رسمي\", url:\"https://teleworks.sa\", desc:\"بوابة سعودية رسمية للعمل عن بُعد. ابدأ منها إذا كنت تبحث عن فرصة داخل المملكة.\", tags:[\"سعودي\",\"وظائف\",\"عن بُعد\"], icon:\"🇸🇦\" },\n { id:\"sabbar\", name:\"صبّار\", type:\"منصة سعودية\", trust:\"موثوق\", url:\"https://sabbar.com\", desc:\"منصة سعودية للوظائف المرنة والجزئية، ومفيدة للطلاب والباحثين عن بداية مهنية.\", tags:[\"طلاب\",\"جزئي\",\"سعودي\"], icon:\"🎓\" },\n { id:\"mostaql\", name:\"مستقل\", type:\"عمل حر عربي\", trust:\"موثوق\", url:\"https://mostaql.com\", desc:\"مشاريع عربية في الكتابة والتصميم والترجمة والبرمجة والتسويق وغيرها.\", tags:[\"عمل حر\",\"عربي\",\"مشاريع\"], icon:\"💼\" },\n { id:\"khamsat\", name:\"خمسات\", type:\"خدمات مصغّرة\", trust:\"موثوق\", url:\"https://khamsat.com\", desc:\"ابدأ ببيع خدمة صغيرة من مهارتك، مثل التصميم أو الكتابة أو الترجمة أو المونتاج.\", tags:[\"عمل حر\",\"بدون خبرة\",\"عربي\"], icon:\"✨\" },\n { id:\"upwork\", name:\"Upwork\", type:\"منصة عالمية\", trust:\"موثوق\", url:\"https://www.upwork.com/freelance-jobs/\", desc:\"فرص ومشاريع عالمية عن بُعد لمن يجيد الإنجليزية ويملك مهارة قابلة للتقديم عبر الإنترنت.\", tags:[\"عالمي\",\"إنجليزي\",\"عمل حر\"], icon:\"🌍\" },\n { id:\"remoteok\", name:\"Remote OK\", type:\"وظائف عالمية\", trust:\"تحقق قبل التقديم\", url:\"https://remoteok.com\", desc:\"لوحة وظائف عالمية عن بُعد. راجع متطلبات كل وظيفة وبلد التوظيف قبل التقديم.\", tags:[\"عالمي\",\"تقنية\",\"عن بُعد\"], icon:\"🛰️\" },\n];\n\nconst CATEGORIES = [\n [\"تقنية وبرمجة\",\"💻\"],[\"كتابة وتحرير\",\"✍️\"],[\"تصميم\",\"🎨\"],[\"شبكات اجتماعية\",\"📱\"],\n [\"خدمة عملاء\",\"🎧\"],[\"إدخال بيانات\",\"⌨️\"],[\"تسويق ومبيعات\",\"📣\"],[\"ترجمة\",\"🌐\"],\n [\"ذكاء اصطناعي\",\"🤖\"],[\"تعليم وتدريب\",\"🎓\"],[\"مساعد افتراضي\",\"🧑‍💼\"],[\"مونتاج ومحتوى\",\"🎬\"]\n];\n\nfunction scrollToId(id:string){ document.getElementById(id)?.scrollIntoView({behavior:\"smooth\",block:\"start\"}); }\nfunction copyText(text:string){ navigator.clipboard?.writeText(text); }\n\nfunction SectionTitle({title,desc}:{title:string;desc:string}){\n return

◆ {title}

{desc}

;\n}\n\nfunction TrustBadge({trust}:{trust:string}){\n const cls = trust===\"رسمي\" ? \"text-emerald-300 border-emerald-400/30 bg-emerald-400/10\" : trust===\"موثوق\" ? \"gold-text border-yellow-400/30 bg-yellow-400/10\" : \"text-orange-200 border-orange-400/30 bg-orange-400/10\";\n return {trust===\"رسمي\"?\"✓ \":trust===\"موثوق\"?\"🛡 \":\"⚠ \"}{trust};\n}\n\nfunction ToolModal({tool,onClose}:{tool:string|null;onClose:()=>void}){\n const [name,setName]=useState(\"\"); const [field,setField]=useState(\"\"); const [skills,setSkills]=useState(\"\");\n const [job,setJob]=useState(\"\"); const [company,setCompany]=useState(\"\"); const [output,setOutput]=useState(\"\");\n if(!tool) return null;\n const titles:any={cv:\"منشئ سيرة ذاتية مبسطة\",letter:\"مولد خطاب تقديم\",interview:\"مساعد المقابلة\"};\n const generate=()=>{\n if(tool===\"cv\") setOutput(`السيرة الذاتية\\n\\nالاسم: ${name||\"—\"}\\nالمجال المستهدف: ${field||\"—\"}\\n\\nنبذة مهنية\\nطالب/باحث عن فرصة أطمح إلى تطوير خبرتي العملية في مجال ${field||\"المجال المستهدف\"}، وأتميز بالالتزام وسرعة التعلم والعمل عن بُعد.\\n\\nالمهارات\\n${skills||\"أضف مهاراتك هنا\"}\\n\\nالمشاريع والدورات\\nأضف هنا مشاريعك الجامعية أو التطوعية أو الدورات المرتبطة بالمجال.\\n\\nملاحظة: راجع النص وأضف بياناتك الحقيقية فقط قبل الإرسال.`);\n if(tool===\"letter\") setOutput(`السلام عليكم،\\n\\nأتقدم باهتمام لفرصة «${job||\"المسمى الوظيفي\"}» لدى ${company||\"الجهة\"}. أنا ${name||\"متقدم مهتم\"}، وأرغب في توظيف مهاراتي في ${skills||field||\"المجال\"} والمساهمة بجدية والتزام في العمل. أمتلك استعدادًا للتعلم السريع والعمل ضمن فريق وتحمل المسؤولية، ويسعدني مناقشة مدى ملاءمتي للفرصة في مقابلة.\\n\\nمع خالص التقدير.`);\n if(tool===\"interview\") setOutput(`تدريب مقابلة: ${job||field||\"الوظيفة المستهدفة\"}\\n\\n1) عرفنا بنفسك في 60 ثانية.\\nركز على دراستك أو خبرتك، مهارتين مرتبطتين بالوظيفة، وسبب اهتمامك بها.\\n\\n2) لماذا تريد هذه الفرصة؟\\nاربط بين ما ستتعلمه وما تستطيع تقديمه للجهة.\\n\\n3) كيف تنظم وقتك مع الدراسة أو الالتزامات؟\\nاذكر جدولًا واضحًا وساعات ثابتة للعمل.\\n\\n4) اذكر موقفًا تعلمت فيه مهارة بسرعة.\\nاستخدم مثالًا من مشروع دراسي أو تطوعي حقيقي.\\n\\n5) ما الأدوات التي تجيدها؟\\nاذكر فقط الأدوات التي استخدمتها فعلًا: ${skills||\"أضف أدواتك ومهاراتك\"}.`);\n };\n return

e.stopPropagation()}>\n

{titles[tool]}

أدخل معلومات بسيطة، وستحصل على مسودة قابلة للتعديل والنسخ.

\n setName(e.target.value)} />\n setField(e.target.value)} />\n {tool!==\"cv\" && setJob(e.target.value)} />}\n {tool===\"letter\" && setCompany(e.target.value)} />}\n

setSkills(e.target.value)} />\n      </div>\n      <button className=\"gold-btn w-full py-3 mt-4\" onClick={generate}>✨ أنشئ المسودة الآن</button>\n      {output && <div className=\"mt-5\"><div className=\"flex items-center justify-between mb-2\"><b>النتيجة</b><button className=\"gold-outline px-3 py-2\" onClick={()=>copyText(output)}>نسخ النص</button></div><pre className=\"whitespace-pre-wrap text-sm leading-8 bg-black/25 border border-slate-700 rounded-xl p-4\">{output}</pre></div>}\n    </div>\n  </div>;\n}\n\nexport function App(){\n  const [query,setQuery]=useState(\"\"); const [activeTag,setActiveTag]=useState(\"الكل\"); const [saved,setSaved]=useState<string[]>([]);\n  const [stage,setStage]=useState(\"جامعي\"); const [english,setEnglish]=useState(\"أساسي\"); const [hours,setHours]=useState(\"2-4\"); const [goal,setGoal]=useState(\"وظيفة\"); const [match,setMatch]=useState<any[]>([]);\n  const [tool,setTool]=useState<string|null>(null); const [alertEmail,setAlertEmail]=useState(\"\"); const [alertField,setAlertField]=useState(\"\"); const [alertSaved,setAlertSaved]=useState(false);\n  const [tracker,setTracker]=useState<any[]>([]); const [trackTitle,setTrackTitle]=useState(\"\"); const [trackCompany,setTrackCompany]=useState(\"\");\n  const [jobs,setJobs]=useState<any[]>([]); const [jobsLoading,setJobsLoading]=useState(true); const [adminOpen,setAdminOpen]=useState(false);\n\n  useEffect(()=>{ try{setSaved(JSON.parse(localStorage.getItem(\"forsati-saved\")||\"[]\"));setTracker(JSON.parse(localStorage.getItem(\"forsati-tracker\")||\"[]\"));}catch{} },[]);\n  useEffect(()=>{ fetch('/api/jobs').then(r=>r.json()).then(d=>setJobs(d.jobs||[])).catch(()=>setJobs([])).finally(()=>setJobsLoading(false)); },[]);\n  const toggleSave=(id:string)=>{ const next=saved.includes(id)?saved.filter(x=>x!==id):[...saved,id]; setSaved(next);localStorage.setItem(\"forsati-saved\",JSON.stringify(next)); };\n  const addTrack=()=>{ if(!trackTitle.trim())return; const next=[{id:Date.now(),title:trackTitle,company:trackCompany,status:\"حفظتها\"},...tracker];setTracker(next);localStorage.setItem(\"forsati-tracker\",JSON.stringify(next));setTrackTitle(\"\");setTrackCompany(\"\"); };\n  const updateTrack=(id:number,status:string)=>{const next=tracker.map(x=>x.id===id?{...x,status}:x);setTracker(next);localStorage.setItem(\"forsati-tracker\",JSON.stringify(next));};\n\n  const filtered=useMemo(()=>SOURCES.filter(s=>{\n    const text=(s.name+s.desc+s.tags.join(\" \")+s.type).toLowerCase();\n    const q=query.trim().toLowerCase(); const qOk=!q||text.includes(q); const tagOk=activeTag===\"الكل\"||s.tags.includes(activeTag)||s.type.includes(activeTag);\n    return qOk&&tagOk;\n  }),[query,activeTag]);\n\n  const runMatch=()=>{\n    const ranked=SOURCES.map(s=>{let score=55; const reasons=[] as string[];\n      if(goal===\"عمل حر\"&&s.tags.includes(\"عمل حر\")){score+=25;reasons.push(\"مناسب للعمل الحر\");}\n      if(goal===\"وظيفة\"&&(s.id===\"teleworks\"||s.id===\"sabbar\"||s.id===\"remoteok\")){score+=18;reasons.push(\"يركز على الوظائف\");}\n      if(stage!==\"خريج\"&&s.tags.includes(\"طلاب\")){score+=15;reasons.push(\"مناسب للطلاب\");}\n      if(english===\"جيد\"||english===\"ممتاز\"){if(s.tags.includes(\"عالمي\")){score+=15;reasons.push(\"يفتح لك فرصًا عالمية\");}}\n      else if(s.tags.includes(\"عالمي\")){score-=12;}\n      if(hours===\"1-2\"&&(s.id===\"khamsat\"||s.id===\"mostaql\")){score+=10;reasons.push(\"مرن مع وقت محدود\");}\n      return {...s,score:Math.max(35,Math.min(97,score)),reasons};\n    }).sort((a,b)=>b.score-a.score); setMatch(ranked.slice(0,4)); setTimeout(()=>scrollToId(\"match-results\"),60);\n  };\n\n  const saveAlertPref=async()=>{ if(!alertEmail||!alertField)return; try{ const r=await fetch('/api/alerts',{method:'POST',headers:{'content-type':'application/json'},body:JSON.stringify({email:alertEmail,field:alertField})}); if(r.ok){setAlertSaved(true);localStorage.setItem('forsati-alert',JSON.stringify({email:alertEmail,field:alertField}));} }catch{} };\n  const quick=(tag:string)=>{setActiveTag(tag);setQuery(\"\");scrollToId(\"sources\");};\n\n  return <div>\n    <ToolModal tool={tool} onClose={()=>setTool(null)} />\n    <AdminModal open={adminOpen} onClose={()=>setAdminOpen(false)} onAdded={(fresh)=>{setJobs(fresh);setJobsLoading(false)}} />\n\n    <div className=\"text-center text-sm font-bold gold-text bg-yellow-400/10 border-b border-yellow-400/20 px-4 py-3\">مبادرة من الإعلامي أحمد عبدالغني الثقفي للباحثين والطلاب عن وظائف مناسبة لهم</div>\n\n    <header className=\"sticky top-0 z-40 backdrop-blur-xl bg-[#071426]/90 border-b border-slate-700/60\">\n      <div className=\"max-w-7xl mx-auto px-4 py-3 flex items-center gap-4\">\n        <button onClick={()=>scrollToId(\"top\")} className=\"text-right\"><div className=\"text-2xl font-black gold-text\">فرصتي</div><div className=\"text-[11px] muted\">بوابة العمل عن بُعد</div></button>\n        <nav className=\"nav-scroll flex-1 flex gap-2 text-sm font-bold\">\n          {[['كيف تبدأ','how'],['المصادر الموثوقة','sources'],['المطابقة الذكية','matcher'],['أدوات مجانية','tools'],['متابعة طلباتي','tracker'],['الأمان','safety']].map(([label,id])=><button key={id} onClick={()=>scrollToId(id)} className=\"px-3 py-2 rounded-xl hover:bg-white/5\">{label}</button>)}\n        </nav>\n        <button className=\"gold-btn px-4 py-2 hide-mobile\" onClick={()=>scrollToId(\"matcher\")}>اعثر لي على فرصة</button>\n        <button className=\"gold-outline px-3 py-2\" onClick={()=>setAdminOpen(true)}>الإدارة</button>\n      </div>\n    </header>\n\n    <main id=\"top\">\n      <section className=\"max-w-7xl mx-auto px-4 pt-14 pb-10 text-center\">\n        <div className=\"inline-flex chip mb-5\">للطلاب • للطالبات • للباحثين عن عمل • بدون تعقيد</div>\n        <h1 className=\"hero-title text-5xl sm:text-6xl font-black leading-tight\">فرصتك أقرب مما تتوقع<br/><span className=\"gold-text\">ابدأ من مكانك</span></h1>\n        <p className=\"muted max-w-3xl mx-auto mt-5 text-lg leading-9\">نجمع لك الطرق والمصادر الموثوقة للوصول إلى العمل عن بُعد، ونشرح كل خطوة بلغة بسيطة. لا تحتاج أن تعرف أين تبحث؛ ابدأ من هنا.</p>\n        <div className=\"max-w-3xl mx-auto mt-7 panel p-3 flex flex-col sm:flex-row gap-3\">\n          <input value={query} onChange={e=>setQuery(e.target.value)} onKeyDown={e=>{if(e.key==='Enter')scrollToId('sources')}} placeholder=\"مثال: تصميم، خدمة عملاء، ذكاء اصطناعي، عمل حر...\" className=\"flex-1 bg-transparent px-4 py-3 outline-none text-white\" />\n          <button className=\"gold-btn px-7 py-3\" onClick={()=>scrollToId(\"sources\")}>🔎 ابحث الآن</button>\n        </div>\n        <div className=\"flex flex-wrap justify-center gap-2 mt-5\">\n          {[\"طلاب\",\"بدون خبرة\",\"عمل حر\",\"عالمي\",\"سعودي\"].map(t=><button key={t} onClick={()=>quick(t)} className=\"gold-outline px-4 py-2\">{t}</button>)}\n        </div>\n      </section>\n\n      <section id=\"how\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"ابدأ بالطريقة التي تشبهك\" desc=\"اختر حالتك، ونحن ننقلك مباشرة إلى الجزء الأنسب لك. كل زر هنا ينفذ خطوة فعلية.\" />\n        <div className=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-4 mobile-stack\">\n          {[\n            [\"🎓\",\"أنا طالب\",\"أبحث عن فرصة مرنة لا تتعارض مع الدراسة.\",()=>{setStage('جامعي');scrollToId('matcher')}],\n            [\"🧑‍💼\",\"أنا باحث عن عمل\",\"أريد وظيفة عن بُعد من مصدر موثوق.\",()=>{setGoal('وظيفة');scrollToId('matcher')}],\n            [\"💻\",\"أريد عملًا حرًا\",\"أريد تحويل مهارتي إلى خدمة أو مشروع مدفوع.\",()=>{setGoal('عمل حر');scrollToId('matcher')}],\n            [\"🌱\",\"بدون خبرة\",\"أحتاج بداية مناسبة للمبتدئين.\",()=>quick('بدون خبرة')]\n          ].map(([ico,title,desc,fn]:any)=><div className=\"panel p-5\" key={title}><div className=\"text-4xl\">{ico}</div><h3 className=\"font-black text-xl mt-3\">{title}</h3><p className=\"muted leading-7 mt-2 min-h-14\">{desc}</p><button className=\"gold-btn w-full py-3 mt-4\" onClick={fn}>ابدأ من هنا ←</button></div>)}\n        </div>\n      </section>\n\n      <section id=\"matcher\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"المطابقة الذكية\" desc=\"أجب عن أربعة أسئلة فقط. سنرتب لك المنصات الأنسب كبداية حسب وقتك ووضعك، بدل أن تتنقل عشوائيًا بين المواقع.\" />\n        <div className=\"panel p-5 sm:p-7 grid lg:grid-cols-4 gap-4\">\n          <label className=\"text-sm font-bold\">أنت الآن<select value={stage} onChange={e=>setStage(e.target.value)} className=\"mt-2 w-full bg-[#06111f] border border-slate-600 rounded-xl p-3\"><option>ثانوي</option><option>جامعي</option><option>خريج</option></select></label>\n          <label className=\"text-sm font-bold\">الإنجليزية<select value={english} onChange={e=>setEnglish(e.target.value)} className=\"mt-2 w-full bg-[#06111f] border border-slate-600 rounded-xl p-3\"><option>ضعيف</option><option>أساسي</option><option>جيد</option><option>ممتاز</option></select></label>\n          <label className=\"text-sm font-bold\">الوقت اليومي<select value={hours} onChange={e=>setHours(e.target.value)} className=\"mt-2 w-full bg-[#06111f] border border-slate-600 rounded-xl p-3\"><option>1-2</option><option>2-4</option><option>4+</option></select></label>\n          <label className=\"text-sm font-bold\">ماذا تريد؟<select value={goal} onChange={e=>setGoal(e.target.value)} className=\"mt-2 w-full bg-[#06111f] border border-slate-600 rounded-xl p-3\"><option>وظيفة</option><option>عمل حر</option></select></label>\n          <button className=\"gold-btn lg:col-span-4 py-4 text-lg\" onClick={runMatch}>✨ اعثر لي على أفضل بداية</button>\n        </div>\n        {match.length>0&&<div id=\"match-results\" className=\"mt-6 grid sm:grid-cols-2 lg:grid-cols-4 gap-4\">{match.map(s=><div className=\"panel p-5\" key={s.id}><div className=\"flex justify-between items-start\"><span className=\"text-3xl\">{s.icon}</span><span className=\"chip\">{s.score}% مناسبة</span></div><h3 className=\"font-black text-xl mt-3\">{s.name}</h3><p className=\"muted text-sm leading-7 mt-2\">{s.reasons.length?s.reasons.join(' • '):s.desc}</p><a href={s.url} target=\"_blank\" rel=\"noopener noreferrer\" className=\"gold-btn block text-center py-3 mt-4\">افتح المصدر الرسمي ↗</a></div>)}</div>}\n      </section>\n\n      <section id=\"live-jobs\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"الفرص المنشورة فعليًا\" desc=\"هذا القسم مخصص للفرص الحقيقية التي نضيفها بعد التحقق من رابطها الأصلي. إذا لم توجد فرصة الآن فلن نملأ المكان بإعلانات وهمية.\" />\n        {jobsLoading?<div className=\"panel p-6 muted\">جارٍ تحميل الفرص...</div>:jobs.length===0?<div className=\"panel p-6\"><h3 className=\"font-black text-lg gold-text\">لا توجد فرصة منشورة الآن</h3><p className=\"muted leading-8 mt-2\">استخدم المصادر الموثوقة أدناه الآن، وسنضيف هنا الفرص التي يتم التحقق منها واحدةً واحدة.</p></div>:<div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-5\">{jobs.map((j:any)=><article className=\"panel p-5 flex flex-col\" key={j.id}><div className=\"flex justify-between gap-3 items-start\"><div><h3 className=\"font-black text-xl\">{j.title}</h3><p className=\"muted text-sm mt-1\">{j.company}</p></div><TrustBadge trust={j.trust||'تحقق قبل التقديم'}/></div>{j.summary&&<p className=\"muted leading-8 mt-4\">{j.summary}</p>}<div className=\"flex flex-wrap gap-2 mt-4\"><span className=\"chip\">{j.work_type||'عن بُعد'}</span><span className=\"chip\">{j.experience||'—'}</span><span className=\"chip\">{j.country||'—'}</span>{j.category&&<span className=\"chip\">{j.category}</span>}</div>{j.income_text&&<p className=\"mt-4 text-sm\"><b className=\"gold-text\">الدخل المعلن:</b> {j.income_text}</p>}<p className=\"muted text-xs mt-3\">المصدر: {j.source_name||'المصدر الأصلي'}</p><a className=\"gold-btn text-center py-3 mt-5\" href={j.apply_url} target=\"_blank\" rel=\"noopener noreferrer\">التقديم من المصدر الأصلي ↗</a></article>)}</div>}\n      </section>\n\n      <section id=\"sources\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"مصادر موثوقة نبدأ منها\" desc=\"لا ننسب وظائف وهمية إلى شركات. هذه روابط مباشرة لمنصات معروفة، ويجب دائمًا قراءة شروط كل إعلان في المصدر الأصلي.\" />\n        <div className=\"flex flex-wrap gap-2 mb-5\">{[\"الكل\",\"سعودي\",\"طلاب\",\"عمل حر\",\"عالمي\",\"بدون خبرة\"].map(t=><button key={t} className={activeTag===t?\"gold-btn px-4 py-2\":\"gold-outline px-4 py-2\"} onClick={()=>setActiveTag(t)}>{t}</button>)}</div>\n        <div className=\"grid md:grid-cols-2 lg:grid-cols-3 gap-5\">\n          {filtered.map(s=><article key={s.id} className=\"source-card panel p-5 flex flex-col\">\n            <div className=\"flex items-start gap-3\"><div className=\"text-4xl\">{s.icon}</div><div className=\"flex-1\"><h3 className=\"font-black text-xl\">{s.name}</h3><p className=\"text-xs muted mt-1\">{s.type}</p></div><TrustBadge trust={s.trust}/></div>\n            <p className=\"muted leading-8 mt-4 flex-1\">{s.desc}</p><div className=\"flex flex-wrap gap-2 mt-3\">{s.tags.map(t=><span className=\"chip\" key={t}>{t}</span>)}</div>\n            <div className=\"grid grid-cols-[1fr_auto] gap-2 mt-5\"><a className=\"gold-btn text-center py-3\" href={s.url} target=\"_blank\" rel=\"noopener noreferrer\">فتح المنصة والتقديم ↗</a><button className=\"gold-outline px-4\" onClick={()=>toggleSave(s.id)} aria-label=\"حفظ\">{saved.includes(s.id)?\"★\":\"☆\"}</button></div>\n          </article>)}\n        </div>\n        {filtered.length===0&&<div className=\"panel p-6 muted\">لا توجد نتيجة مطابقة لعبارة البحث. جرّب كلمة أوسع مثل «تصميم» أو «عمل حر».</div>}\n      </section>\n\n      <section className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"مجالات تستطيع البحث فيها\" desc=\"اضغط على أي مجال ليتم وضعه في البحث تلقائيًا وعرض المصادر التي يمكن أن تبدأ منها.\" />\n        <div className=\"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3\">{CATEGORIES.map(([name,ico])=><button key={name} className=\"panel p-4 text-center hover:border-yellow-400/40\" onClick={()=>{setQuery(name);setActiveTag('الكل');scrollToId('sources')}}><div className=\"text-3xl\">{ico}</div><div className=\"font-bold mt-2 text-sm\">{name}</div></button>)}</div>\n      </section>\n\n      <section id=\"tools\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"أدوات مجانية تساعدك قبل التقديم\" desc=\"بدل أن تخرج من الموقع تبحث عن طريقة كتابة السيرة أو الخطاب، استخدم هذه الأدوات البسيطة ثم راجع الناتج وأضف معلوماتك الحقيقية.\" />\n        <div className=\"grid md:grid-cols-3 gap-5\">\n          {[[\"📄\",\"سيرتي للطالب\",\"حوّل دراستك ومهاراتك إلى مسودة سيرة واضحة.\",\"cv\"],[\"✉️\",\"خطاب تقديم\",\"أنشئ رسالة مخصصة للمسمى والجهة.\",\"letter\"],[\"🎤\",\"تدريب المقابلة\",\"احصل على أسئلة متوقعة وطريقة الإجابة.\",\"interview\"]].map(([ico,title,desc,key])=><div className=\"panel p-6\" key={key}><div className=\"text-4xl\">{ico}</div><h3 className=\"text-xl font-black mt-3\">{title}</h3><p className=\"muted leading-8 mt-2\">{desc}</p><button className=\"gold-btn w-full py-3 mt-5\" onClick={()=>setTool(key)}>فتح الأداة</button></div>)}\n        </div>\n      </section>\n\n      <section id=\"tracker\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"متابعة طلباتي\" desc=\"أضف الوظائف التي قدمت عليها وتابع حالتها. في هذه النسخة تُحفظ القائمة على جهازك حتى لا تضيع منك.\" />\n        <div className=\"panel p-5 sm:p-7\">\n          <div className=\"grid sm:grid-cols-[1fr_1fr_auto] gap-3\"><input value={trackTitle} onChange={e=>setTrackTitle(e.target.value)} placeholder=\"المسمى الوظيفي\" className=\"bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\"/><input value={trackCompany} onChange={e=>setTrackCompany(e.target.value)} placeholder=\"الجهة\" className=\"bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\"/><button className=\"gold-btn px-6\" onClick={addTrack}>+ أضف للمتابعة</button></div>\n          <div className=\"mt-5 space-y-3\">{tracker.length===0?<p className=\"muted\">لم تضف أي طلب بعد.</p>:tracker.map(x=><div key={x.id} className=\"bg-black/20 border border-slate-700 rounded-xl p-4 flex flex-col sm:flex-row gap-3 sm:items-center\"><div className=\"flex-1\"><b>{x.title}</b><div className=\"muted text-sm\">{x.company||\"—\"}</div></div><select value={x.status} onChange={e=>updateTrack(x.id,e.target.value)} className=\"bg-[#06111f] border border-slate-600 rounded-xl p-2\"><option>حفظتها</option><option>قدمت عليها</option><option>بانتظار الرد</option><option>مقابلة</option><option>مقبولة</option><option>مرفوضة</option></select></div>)}</div>\n        </div>\n      </section>\n\n      <section className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"احفظ تفضيلات البحث\" desc=\"اكتب بريدك والمجال الذي تريده. سنحفظ تفضيلك في قاعدة بيانات «فرصتي» لتجهيز التنبيهات عند تفعيل خدمة الإرسال.\" />\n        <div className=\"panel p-5 sm:p-7 grid sm:grid-cols-[1fr_1fr_auto] gap-3\"><input value={alertEmail} onChange={e=>setAlertEmail(e.target.value)} placeholder=\"البريد الإلكتروني\" className=\"bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\"/><input value={alertField} onChange={e=>setAlertField(e.target.value)} placeholder=\"مثال: تصميم عن بُعد بدون خبرة\" className=\"bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\"/><button className=\"gold-btn px-6\" onClick={saveAlertPref}>🔔 احفظ تفضيلي</button>{alertSaved&&<p className=\"sm:col-span-3 text-emerald-300 font-bold\">✓ تم حفظ تفضيلك بنجاح.</p>}</div>\n      </section>\n\n      <section id=\"safety\" className=\"max-w-7xl mx-auto px-4 py-10\">\n        <div className=\"panel p-6 sm:p-8 border-orange-400/30\"><SectionTitle title=\"احذر الاحتيال الوظيفي\" desc=\"وجود رابط في الإنترنت لا يعني أنه آمن. التقديم الطبيعي لا يتطلب منك إعطاء أسرار حساباتك.\"/><div className=\"grid md:grid-cols-2 gap-4\"><div className=\"bg-red-400/10 border border-red-400/20 rounded-2xl p-5\"><h3 className=\"text-red-200 font-black text-lg\">لا ترسل أبدًا</h3><p className=\"muted leading-8 mt-2\">رمز OTP • كلمة مرور البنك • بيانات البطاقة • رمز التحقق • تحويل مالي للحصول على وظيفة.</p></div><div className=\"bg-emerald-400/10 border border-emerald-400/20 rounded-2xl p-5\"><h3 className=\"text-emerald-200 font-black text-lg\">افعل دائمًا</h3><p className=\"muted leading-8 mt-2\">اقرأ الإعلان من المصدر الأصلي • تحقق من اسم الشركة • راجع نطاق البريد والرابط • احتفظ بنسخة من الإعلان.</p></div></div></div>\n      </section>\n\n      <section className=\"max-w-7xl mx-auto px-4 py-10\">\n        <SectionTitle title=\"كيف تستخدم فرصتي؟\" desc=\"ثلاث خطوات فقط، حتى لو كانت هذه أول مرة تبحث فيها عن عمل عن بُعد.\" />\n        <div className=\"grid md:grid-cols-3 gap-4\">{[[\"1\",\"حدد وضعك\",\"طالب، خريج، باحث عن عمل أو عمل حر.\"],[\"2\",\"استخدم المطابقة\",\"دع الصفحة ترتب لك أفضل مصادر البداية.\"],[\"3\",\"قدم من المصدر\",\"راجع الإعلان الحقيقي ثم قدم مباشرة من الجهة الأصلية.\"]].map(([n,t,d])=><div className=\"panel p-6\" key={n}><div className=\"w-11 h-11 rounded-full gold-btn flex items-center justify-center text-xl\">{n}</div><h3 className=\"font-black text-xl mt-4\">{t}</h3><p className=\"muted leading-8 mt-2\">{d}</p></div>)}</div>\n      </section>\n    </main>\n\n    <footer className=\"border-t border-slate-700/70 mt-8 bg-black/20\"><div className=\"max-w-7xl mx-auto px-4 py-10 grid md:grid-cols-3 gap-8\"><div><div className=\"text-3xl font-black gold-text\">فرصتي</div><p className=\"muted mt-2\">ادرس.. واعمل.. وابنِ خبرتك من مكانك.</p></div><div><b>عن المبادرة</b><p className=\"muted leading-8 mt-2\">مبادرة من الإعلامي أحمد عبدالغني الثقفي للباحثين والطلاب عن وظائف مناسبة لهم.</p></div><div><b>ملاحظة مهمة</b><p className=\"muted leading-8 mt-2\">«فرصتي» دليل مساعد للوصول إلى المصادر، وليست جهة توظيف ولا تضمن القبول في أي فرصة.</p></div></div><div className=\"text-center muted text-xs border-t border-slate-800 py-5\">© {new Date().getFullYear()} فرصتي — جميع الحقوق محفوظة</div></footer>\n  </div>;\n}\n\n\nfunction AdminModal({open,onClose,onAdded}:{open:boolean;onClose:()=>void;onAdded:(job:any)=>void}){\n  const [key,setKey]=useState(\"\");\n  const [form,setForm]=useState<any>({title:\"\",company:\"\",summary:\"\",category:\"\",work_type:\"جزئي\",experience:\"بدون خبرة\",country:\"السعودية\",income_text:\"\",expires_at:\"\",apply_url:\"\",source_name:\"\",trust:\"موثوق\",tags:\"\"});\n  const [message,setMessage]=useState(\"\"); const [busy,setBusy]=useState(false);\n  if(!open) return null;\n  const set=(k:string,v:string)=>setForm((f:any)=>({...f,[k]:v}));\n  const submit=async()=>{setBusy(true);setMessage(\"\");try{const r=await fetch('/api/admin/jobs',{method:'POST',headers:{'content-type':'application/json','x-admin-key':key},body:JSON.stringify({...form,tags:form.tags.split(/[،,]/).map((x:string)=>x.trim()).filter(Boolean)})});const d=await r.json();if(!r.ok){setMessage(d.error||'تعذر الحفظ');return;}setMessage('✓ تمت إضافة الفرصة وستظهر في الصفحة');const fresh=await fetch('/api/jobs').then(x=>x.json());onAdded(fresh.jobs||[]);setForm((f:any)=>({...f,title:'',company:'',summary:'',income_text:'',expires_at:'',apply_url:'',source_name:'',tags:''}));}catch{setMessage('تعذر الاتصال بالخادم');}finally{setBusy(false)}};\n  const input=\"bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3 w-full\";\n  return <div className=\"fixed inset-0 z-[110] bg-black/80 flex items-end sm:items-center justify-center p-3\" onClick={onClose}>\n    <div className=\"panel w-full max-w-3xl p-5 sm:p-7 max-h-[94vh] overflow-auto\" onClick={e=>e.stopPropagation()}>\n      <div className=\"flex justify-between items-start gap-4\"><div><h3 className=\"text-2xl font-black gold-text\">لوحة إدارة فرصتي</h3><p className=\"muted mt-1\">أضف فرصة حقيقية بعد التحقق من رابط المصدر. ستظهر فورًا في قسم الفرص المنشورة.</p></div><button onClick={onClose} className=\"text-2xl\">×</button></div>\n      <div className=\"mt-5\"><label className=\"text-sm font-bold\">مفتاح الإدارة<input type=\"password\" className={`${input} mt-2`} value={key} onChange={e=>setKey(e.target.value)} placeholder=\"أدخل مفتاح الإدارة\"/></label></div>\n      <div className=\"grid sm:grid-cols-2 gap-3 mt-4\">\n        <input className={input} placeholder=\"المسمى الوظيفي *\" value={form.title} onChange={e=>set('title',e.target.value)}/>\n        <input className={input} placeholder=\"الجهة *\" value={form.company} onChange={e=>set('company',e.target.value)}/>\n        <input className={input} placeholder=\"التصنيف: تصميم، خدمة عملاء...\" value={form.category} onChange={e=>set('category',e.target.value)}/>\n        <select className={input} value={form.work_type} onChange={e=>set('work_type',e.target.value)}><option>جزئي</option><option>كامل</option><option>عمل حر</option><option>تدريب</option></select>\n        <select className={input} value={form.experience} onChange={e=>set('experience',e.target.value)}><option>بدون خبرة</option><option>مبتدئ</option><option>خبرة مطلوبة</option></select>\n        <input className={input} placeholder=\"الدولة\" value={form.country} onChange={e=>set('country',e.target.value)}/>\n        <input className={input} placeholder=\"الدخل إن كان معلنًا\" value={form.income_text} onChange={e=>set('income_text',e.target.value)}/>\n        <input className={input} type=\"date\" value={form.expires_at} onChange={e=>set('expires_at',e.target.value)}/>\n        <input className={input} placeholder=\"اسم المصدر\" value={form.source_name} onChange={e=>set('source_name',e.target.value)}/>\n        <select className={input} value={form.trust} onChange={e=>set('trust',e.target.value)}><option>رسمي</option><option>موثوق</option><option>تحقق قبل التقديم</option></select>\n        <input className=\"sm:col-span-2 bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\" placeholder=\"رابط التقديم الأصلي https://... *\" value={form.apply_url} onChange={e=>set('apply_url',e.target.value)}/>\n        <input className=\"sm:col-span-2 bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3\" placeholder=\"وسوم مفصولة بفاصلة: طلاب، بدون خبرة، ذكاء اصطناعي\" value={form.tags} onChange={e=>set('tags',e.target.value)}/>\n        <textarea className=\"sm:col-span-2 bg-[#06111f] border border-slate-600 rounded-xl px-4 py-3 min-h-24\" placeholder=\"وصف مختصر للفرصة\" value={form.summary} onChange={e=>set('summary',e.target.value)}/>\n      </div>\n      <button className=\"gold-btn w-full py-4 mt-4\" disabled={busy} onClick={submit}>{busy?'جارٍ الحفظ...':'نشر الفرصة بعد التحقق'}</button>\n      {message&&<p className={`mt-3 font-bold ${message.startsWith('✓')?'text-emerald-300':'text-orange-200'}`}>{message}</p>}\n    </div>\n  </div>;\n}\n","deleted",false,"label",[47,48,24],"frontend","components","54aa82ee-4528-47ab-b4cf-ef357697302f",["D",1787997217786],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","بوابة فرصتي للعمل عن بعد للطلاب والباحثين","imageUrl","userId","d01b5ba9-4190-4170-b205-935688c090c0","pinnedFileId","01a04cf0-647d-750d-9613-6d57a4bfc266","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019fff33-2891-750b-b930-6536da9aa970","tursoName","54aa82ee452847abb4cfef357697302f","tursoHostname","54aa82ee452847abb4cfef357697302f-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789475460618],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_108":104},"org",{"_9":10,"_102":10,"_103":104,"_59":60,"_105":106,"_107":44},"branch",{"_37":32,"_11":93,"_22":30,"_94":49,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":12,"_101":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://avatars.githubusercontent.com/u/290340746?v=4","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_142":143,"_144":145,"_146":147,"_148":44,"_149":44,"_150":44,"_151":34,"_152":-5,"_153":-7,"_154":-7,"_155":67,"_156":44,"_157":44,"_158":-5,"_159":44,"_160":44,"_161":44,"_162":-5},"ENV",{"_113":114,"_115":116,"_117":93,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>