import React, {useEffect, useMemo, useState} from 'react';
import {createRoot} from 'react-dom/client';
import * as Icons from 'lucide-react';
import {categories, organizations, demoOrganizations, errorCatalog, faqs} from './data';


function Icon({name='CircleHelp', size=20, ...props}) { const C=Icons[name] || Icons.CircleHelp; return <C size={size} strokeWidth={1.8} aria-hidden="true" {...props}/>; }
const BASE_PATH = (import.meta.env.BASE_URL || '/').replace(/\/$/, '');
function appPath() { let p = location.pathname; if (BASE_PATH && p.startsWith(BASE_PATH + '/')) p = p.slice(BASE_PATH.length); else if (BASE_PATH && p === BASE_PATH) p = '/'; return p || '/'; }
function appHref(to) { return `${BASE_PATH}${to}` || '/'; }
const redirectedPath = new URLSearchParams(location.search).get('p');
if (redirectedPath?.startsWith('/') && !redirectedPath.startsWith('//')) history.replaceState({}, '', appHref(redirectedPath) + location.hash);
function navigate(to) { history.pushState({}, '', appHref(to)); window.dispatchEvent(new PopStateEvent('popstate')); window.scrollTo({top:0,behavior:'smooth'}); }
function Link({to,children,className='',onClick,...props}) { return <a href={appHref(to)} className={className} onClick={e=>{onClick?.(e);if(!e.defaultPrevented&&!e.ctrlKey&&!e.metaKey&&e.button===0){e.preventDefault();navigate(to)}}} {...props}>{children}</a> }
function Logo(){return <Link to="/" className="brand"><span className="brand-mark"><Icon name="HandHeart" size={25}/></span><span><strong>بوابة العطاء</strong><small>كل أبواب الخير، في مكان واحد</small></span></Link>}
class AppErrorBoundary extends React.Component {
 constructor(props){super(props);this.state={hasError:false}}
 static getDerivedStateFromError(){return {hasError:true}}
 componentDidCatch(error){if(import.meta.env?.DEV) console.error('Bawabat Al-Ataa UI error:',error)}
 render(){if(this.state.hasError)return <main dir="rtl" style={{fontFamily:'sans-serif',maxWidth:680,margin:'48px auto',padding:24,lineHeight:1.8}}><h1>تعذر عرض الصفحة</h1><p>حدث خطأ غير متوقع أثناء تشغيل الواجهة. أعد تحميل الصفحة، وإذا استمرت المشكلة افتح المشروع عبر خادم Vite وتحقق من سجل الأخطاء.</p><button onClick={()=>location.reload()}>إعادة تحميل الصفحة</button></main>;return this.props.children}
}
function App(){
 const [path,setPath]=useState(appPath()), [dark,setDark]=useState(false), [mobile,setMobile]=useState(false), [toast,setToast]=useState(null), [search,setSearch]=useState(''), [category,setCategory]=useState('الكل'), [region,setRegion]=useState('الكل'), [status,setStatus]=useState('الكل'), [sort,setSort]=useState('name'), [view,setView]=useState('grid'), [errorQuery,setErrorQuery]=useState(''), [errorCategory,setErrorCategory]=useState('الكل'), [faqQuery,setFaqQuery]=useState(''), [openFaq,setOpenFaq]=useState(0), [suggestType,setSuggestType]=useState('إضافة جمعية'), [suggestTitle,setSuggestTitle]=useState(''), [suggestDetails,setSuggestDetails]=useState(''), [suggestUrl,setSuggestUrl]=useState(''), [suggestEmail,setSuggestEmail]=useState(''), [consent,setConsent]=useState(false), [favorites,setFavorites]=useState(()=>{try{return JSON.parse(localStorage.getItem('baa-favorites')||'[]')}catch{return []}}), [reviewRating,setReviewRating]=useState(0), [reviewText,setReviewText]=useState(''), [reviews,setReviews]=useState([]);
 useEffect(()=>{const fn=()=>setPath(appPath());window.addEventListener('popstate',fn);return()=>window.removeEventListener('popstate',fn)},[]);
 useEffect(()=>{document.documentElement.dataset.theme=dark?'dark':'light'},[dark]);
 useEffect(()=>{if(!toast)return;const t=setTimeout(()=>setToast(null),toast.type==='error'?9000:4500);return()=>clearTimeout(t)},[toast]);
 const notify=(type,title,detail,code)=>setToast({type,title,detail,code});
 const allOrgs=organizations; // No real records are bundled until reviewed.
 const filtered=useMemo(()=>allOrgs.filter(o=>(!search||[o.name,o.description,o.category,o.region].join(' ').toLowerCase().includes(search.toLowerCase()))&&(category==='الكل'||o.category===category)&&(region==='الكل'||o.region===region)&&(status==='الكل'||o.status===status)).sort((a,b)=>sort==='name'?a.name.localeCompare(b.name,'ar'):new Date(b.updatedAt||0)-new Date(a.updatedAt||0)),[allOrgs,search,category,region,status,sort]);
 const pathParts=path.split('/').filter(Boolean); const detail=pathParts[0]==='directory'&&pathParts[1]?allOrgs.find(o=>o.slug===pathParts[1]):null;
 const resetFilters=()=>{setSearch('');setCategory('الكل');setRegion('الكل');setStatus('الكل');setSort('name')};
 const toggleFavorite=(id)=>{const next=favorites.includes(id)?favorites.filter(x=>x!==id):[...favorites,id];setFavorites(next);try{window.localStorage.setItem('baa-favorites',JSON.stringify(next))}catch{notify('warning','تعذر حفظ المفضلة','قد يكون التخزين المحلي معطلاً في هذا المتصفح.','BA-111');return}notify('success',favorites.includes(id)?'أزيلت من المفضلة':'أضيفت إلى المفضلة','تم تحديث المفضلة على هذا الجهاز فقط.')};
 const safeExternal=(url)=>{try{const u=new URL(url);if(!['https:','http:'].includes(u.protocol))throw 0;return u.href}catch{return null}};
 const submitSuggestion=e=>{e.preventDefault();if(!suggestTitle.trim()||!suggestDetails.trim()){notify('error','يرجى إكمال الحقول المطلوبة','العنوان والتفاصيل مطلوبان.','BA-107');return}if(suggestTitle.length>120||suggestDetails.length>2000){notify('error','المدخلات أطول من الحد المسموح','اختصر العنوان إلى 120 حرفاً والتفاصيل إلى 2000 حرف.','BA-131');return}if(suggestUrl.trim()&&!safeExternal(suggestUrl.trim())){notify('error','الرابط غير صالح','استخدم رابطاً يبدأ بـ https:// أو http://','BA-110');return}if(!consent){notify('error','الموافقة مطلوبة','يرجى الموافقة على ملاحظة الخصوصية قبل المتابعة.','BA-107');return}notify('info','الإرسال غير مفعّل في هذه النسخة','لم يتم حفظ الاقتراح أو إرساله إلى خادم. اربط API قبل إتاحة الاستقبال.','BA-113')};
 const submitReview=e=>{e.preventDefault();if(!reviewRating||!reviewText.trim()){notify('error','أكمل التقييم والنص','اختر النجوم واكتب رأيك.','BA-107');return}notify('info','التقييم لم يُرسل','المصادقة وحفظ التقييمات على الخادم غير مفعّلين، ولم يُنشر رأيك.','BA-112')};
 const nav=[['الرئيسية','/'],['استكشف الجهات','/directory'],['المجالات الخيرية','/#categories'],['الأسئلة الشائعة','/faq'],['التقييمات','/reviews'],['الاقتراحات','/suggestions'],['مركز المساعدة','/errors']];
 return <div className="app-shell">
  <div className="top-note"><Icon name="ShieldCheck" size={15}/> دليل معلوماتي مستقل — تحقق من الجهة عبر مصادرها الرسمية قبل التبرع</div>
  <header className="header"><div className="header-inner"><Logo/><nav className={mobile?'nav nav-open':'nav'} aria-label="التنقل الرئيسي">{nav.map(([label,to])=><Link key={label} to={to} onClick={()=>setMobile(false)} className={path===to?'active':''}>{label}</Link>)}</nav><div className="header-actions"><button className="icon-btn" aria-label="تبديل الوضع الليلي" onClick={()=>setDark(!dark)}><Icon name={dark?'Sun':'Moon'} size={19}/></button><button className="mobile-toggle icon-btn" aria-label="فتح القائمة" aria-expanded={mobile} onClick={()=>setMobile(!mobile)}><Icon name={mobile?'X':'Menu'} size={22}/></button><Link to="/directory" className="btn btn-primary header-cta">استكشف الدليل <Icon name="ArrowLeft" size={16}/></Link></div></div></header>
  <main>
  {path==='/'&&<>
   <section className="hero"><div className="hero-pattern"/><div className="container hero-inner"><div className="hero-copy"><span className="eyebrow"><span className="eyebrow-dot"/> طريق أوضح لفعل الخير</span><h1>الخير أقرب<br/><em>مما تتخيل.</em></h1><p>دليلك للوصول إلى الجهات والمنصات الخيرية والتطوعية في المملكة العربية السعودية، بمعلومات واضحة ومصادر يمكن مراجعتها.</p><div className="hero-search"><Icon name="Search" size={21}/><input value={search} onChange={e=>setSearch(e.target.value)} onKeyDown={e=>e.key==='Enter'&&navigate('/directory')} placeholder="ابحث عن جمعية، مجال خيري، أو منطقة..." aria-label="ابحث في الدليل"/><button className="btn btn-primary" onClick={()=>navigate('/directory')}>ابحث الآن <Icon name="ArrowLeft" size={16}/></button></div><div className="hero-trust"><span><Icon name="CheckCircle2" size={16}/> حالة تحقق واضحة</span><span><Icon name="BookOpenCheck" size={16}/> مصادر قابلة للمراجعة</span><span><Icon name="Heart" size={16}/> الخير للجميع</span></div></div><div className="hero-art" aria-label="رسم زخرفي يرمز للعطاء"><div className="art-orbit orbit-one"/><div className="art-orbit orbit-two"/><div className="art-card art-card-main"><div className="art-symbol"><Icon name="HandHeart" size={60}/></div><span className="art-kicker">العطاء يجمعنا</span><strong>كل مساهمة<br/>تبدأ بخطوة</strong><span className="art-line"/></div><div className="art-float float-top"><Icon name="Sprout" size={22}/><span>أثر ينمو</span></div><div className="art-float float-bottom"><Icon name="HeartHandshake" size={22}/><span>مجتمع متكافل</span></div><span className="spark spark-a">✳</span><span className="spark spark-b">✦</span></div></div></section>
   <section className="section container" id="categories"><div className="section-heading"><div><span className="eyebrow">اكتشف أبواب الخير</span><h2>ما المجال الأقرب إلى قلبك؟</h2><p>اختر مجالاً لتصل إلى الجهات المرتبطة به.</p></div><Link to="/directory" className="text-link">عرض الدليل كاملاً <Icon name="ArrowLeft" size={17}/></Link></div><div className="category-grid">{categories.slice(0,12).map((c,i)=><button className="category-card" key={c.name} onClick={()=>{setCategory(c.name);navigate('/directory')}}><span className={'category-icon '+c.color}><Icon name={c.icon} size={23}/></span><strong>{c.name}</strong><Icon name="ArrowUpLeft" className="category-arrow" size={17}/></button>)}</div><div className="section-bottom-link"><Link to="/directory" className="btn btn-outline">استكشف جميع المجالات <Icon name="ArrowLeft" size={17}/></Link></div></section>
   <section className="verification-band"><div className="container verification-inner"><div className="verification-icon"><Icon name="ShieldCheck" size={34}/></div><div className="verification-copy"><span className="eyebrow">الثقة تبدأ بالوضوح</span><h2>نعرض ما نعرفه، ونوضح ما لم نتحقق منه.</h2><p>وجود اسم في الدليل لا يعني اعتماداً أو ضماناً. حالة المراجعة ومصدر المعلومات وتاريخها عناصر أساسية قبل اتخاذ قرارك.</p></div><Link to="/faq" className="btn btn-light">كيف نتحقق؟ <Icon name="ArrowLeft" size={16}/></Link></div></section>
   <section className="section container"><div className="section-heading"><div><span className="eyebrow">خطوات بسيطة</span><h2>عطاء أكثر اطمئناناً</h2><p>استخدم الدليل كخطوة أولى، ثم تحقق من القنوات الرسمية.</p></div></div><div className="steps-grid"><article className="step-card"><span className="step-num">01</span><Icon name="SearchCheck" size={27}/><h3>ابحث واستكشف</h3><p>استخدم المجال والمنطقة للعثور على الخيارات المناسبة.</p></article><article className="step-card"><span className="step-num">02</span><Icon name="FileCheck2" size={27}/><h3>راجع المصدر</h3><p>اقرأ حالة التحقق وتاريخ المراجعة والمصادر المتاحة.</p></article><article className="step-card"><span className="step-num">03</span><Icon name="ExternalLink" size={27}/><h3>تأكد قبل التبرع</h3><p>افتح الموقع الرسمي بنفسك ولا تعتمد على رابط غير موثوق.</p></article></div></section>
   <section className="section soft-section"><div className="container split-cta"><div><span className="eyebrow">ساعدنا على التحسين</span><h2>وجدت معلومة تحتاج إلى تحديث؟</h2><p>اقتراحاتك تساعد على بناء دليل أوضح. لا يُحفظ أي طلب في هذه النسخة التجريبية حتى يتم ربط الخادم.</p><Link to="/suggestions" className="btn btn-primary">أرسل اقتراحاً <Icon name="ArrowLeft" size={16}/></Link></div><div className="cta-illustration"><Icon name="ClipboardCheck" size={68}/><span className="cta-bubble bubble-one"><Icon name="Check" size={18}/></span><span className="cta-bubble bubble-two"><Icon name="MessageSquareText" size={19}/></span></div></div></section>
  </>}
  {path==='/directory'&&<section className="section container page-section"><PageTitle eyebrow="دليل الجهات" title="استكشف الجهات" desc="ابحث وصَفِّ النتائج حسب المجال والمنطقة وحالة المراجعة."/><div className="directory-layout"><aside className="filters panel"><div className="filter-head"><h3><Icon name="SlidersHorizontal" size={18}/> تصفية النتائج</h3><button className="clear-btn" onClick={resetFilters}>مسح الكل</button></div><label className="field-label">بحث</label><div className="input-wrap"><Icon name="Search" size={17}/><input value={search} onChange={e=>setSearch(e.target.value)} placeholder="اسم الجهة أو المجال"/></div><label className="field-label" htmlFor="category">المجال</label><select id="category" value={category} onChange={e=>setCategory(e.target.value)}><option>الكل</option>{categories.map(c=><option key={c.name}>{c.name}</option>)}</select><label className="field-label" htmlFor="region">المنطقة الإدارية</label><select id="region" value={region} onChange={e=>setRegion(e.target.value)}><option>الكل</option>{['منطقة الرياض','منطقة مكة المكرمة','منطقة المدينة المنورة','المنطقة الشرقية','منطقة القصيم','منطقة عسير','منطقة تبوك','منطقة حائل','منطقة الحدود الشمالية','منطقة جازان','منطقة نجران','منطقة الباحة','منطقة الجوف'].map(r=><option key={r}>{r}</option>)}</select><label className="field-label" htmlFor="status">حالة التحقق</label><select id="status" value={status} onChange={e=>setStatus(e.target.value)}><option value="الكل">جميع الحالات</option><option value="verified">تم التحقق</option><option value="pending">بانتظار المراجعة</option><option value="needs_update">تحتاج إلى تحديث</option><option value="unverified">تعذر التحقق</option><option value="demo">بيانات تجريبية</option></select><div className="filter-note"><Icon name="Info" size={17}/><span>لا توجد حالياً سجلات حقيقية منشورة في نسخة المشروع.</span></div></aside><div className="results-area"><div className="results-toolbar"><span>النتائج <strong>{filtered.length}</strong></span><div className="toolbar-controls"><select aria-label="ترتيب النتائج" value={sort} onChange={e=>setSort(e.target.value)}><option value="name">الترتيب الأبجدي</option><option value="updated">الأحدث تحديثاً</option></select><button className={view==='grid'?'view-btn chosen':'view-btn'} onClick={()=>setView('grid')} aria-label="عرض شبكي"><Icon name="LayoutGrid" size={18}/></button><button className={view==='list'?'view-btn chosen':'view-btn'} onClick={()=>setView('list')} aria-label="عرض قائمة"><Icon name="List" size={18}/></button></div></div>{filtered.length===0?<div className="empty-state"><div className="empty-icon"><Icon name="SearchX" size={32}/></div><h3>{allOrgs.length===0?'لا توجد جهات منشورة حتى الآن':'لم نجد نتائج مطابقة'}</h3><p>{allOrgs.length===0?'هذا مقصود في النسخة الأولية: لن ننشر أسماء جهات قبل مراجعة مصادرها. يمكنك استيراد بيانات موثقة لاحقاً.':'جرّب كلمات أخرى أو امسح بعض الفلاتر.'}</p><button className="btn btn-outline" onClick={resetFilters}>مسح الفلاتر</button></div>:<div className={view==='grid'?'org-grid':'org-list'}>{filtered.map(o=><OrganizationCard key={o.id} org={o} favorite={favorites.includes(o.id)} onFavorite={()=>toggleFavorite(o.id)}/>)}</div>}</div></div></section>}
  {detail&&<section className="section container page-section"><button className="back-link" onClick={()=>navigate('/directory')}><Icon name="ArrowRight" size={17}/> العودة إلى الدليل</button><div className="empty-state large-empty"><Icon name="ShieldAlert" size={42}/><h2>لم يتم العثور على سجل منشور</h2><p>هذا الرابط لا يشير إلى جهة منشورة في قاعدة بيانات النسخة الحالية.</p><Link to="/directory" className="btn btn-primary">العودة إلى الدليل</Link></div></section>}
  {path==='/faq'&&<section className="section container page-section"><PageTitle eyebrow="مركز المعرفة" title="الأسئلة الشائعة" desc="إجابات واضحة حول الدليل والتحقق والخصوصية."/><div className="faq-search input-wrap"><Icon name="Search" size={18}/><input value={faqQuery} onChange={e=>setFaqQuery(e.target.value)} placeholder="ابحث في الأسئلة الشائعة..."/></div><div className="faq-list">{faqs.filter(([q,a])=>(q+' '+a).includes(faqQuery)).map(([q,a],i)=><article className={'faq-item '+(openFaq===i?'faq-open':'')} key={q}><button onClick={()=>setOpenFaq(openFaq===i?-1:i)} aria-expanded={openFaq===i}><span>{q}</span><Icon name={openFaq===i?'Minus':'Plus'} size={19}/></button>{openFaq===i&&<p>{a}</p>}</article>)}</div>{faqs.filter(([q,a])=>(q+' '+a).includes(faqQuery)).length===0&&<div className="empty-state"><Icon name="SearchX" size={30}/><h3>لا توجد أسئلة مطابقة</h3><p>جرّب عبارة بحث مختلفة.</p></div>}</section>}
  {path==='/reviews'&&<section className="section container page-section"><PageTitle eyebrow="صوتك يهمنا" title="تقييمات تجربة الاستخدام" desc="ساعدنا على تحسين سهولة الاستخدام ووضوح المعلومات."/><div className="review-layout"><div className="panel review-form-panel"><h3>شاركنا رأيك</h3><p className="muted">التقييمات لا تُنشر في هذه النسخة لعدم تفعيل المصادقة والخادم.</p><form onSubmit={submitReview}><label className="field-label">تقييمك العام</label><div className="star-picker" role="radiogroup" aria-label="التقييم من نجمة إلى خمس نجوم">{[1,2,3,4,5].map(n=><button type="button" key={n} aria-label={`${n} نجوم`} aria-pressed={reviewRating===n} onClick={()=>setReviewRating(n)} className={reviewRating>=n?'star selected':'star'}><Icon name="Star" size={29}/></button>)}</div><label className="field-label" htmlFor="review-text">رأيك في تجربة الاستخدام</label><textarea id="review-text" value={reviewText} onChange={e=>setReviewText(e.target.value)} maxLength={1000} rows={5} placeholder="ما الذي أعجبك؟ وما الذي يمكن تحسينه؟"/><div className="char-count">{reviewText.length}/1000</div><button className="btn btn-primary" type="submit">إرسال التقييم <Icon name="Send" size={16}/></button></form></div><div className="panel reviews-empty"><div className="empty-icon"><Icon name="MessageCircle" size={30}/></div><h3>لا توجد تقييمات منشورة</h3><p>لن نعرض تقييماً أو متوسطاً وهمياً. ستظهر التقييمات الفعلية بعد ربط نظام آمن للمصادقة والمراجعة.</p><div className="review-points"><span><Icon name="ShieldCheck" size={17}/> مراجعة قبل النشر</span><span><Icon name="UserCheck" size={17}/> تقليل التقييمات المزعجة</span></div></div></div></section>}
  {path==='/suggestions'&&<section className="section container page-section"><PageTitle eyebrow="ساهم في تطوير الدليل" title="الاقتراحات والتصحيحات" desc="ساعدنا في تصحيح معلومة أو الإبلاغ عن رابط يحتاج إلى مراجعة."/><div className="suggest-layout"><form className="panel suggestion-form" onSubmit={submitSuggestion}><div className="form-grid"><div className="form-field full"><label className="field-label" htmlFor="suggest-type">نوع الطلب *</label><select id="suggest-type" value={suggestType} onChange={e=>setSuggestType(e.target.value)}>{['إضافة جمعية','إضافة منصة خيرية','تصحيح رابط','تحديث رقم اتصال','تصحيح وصف','اقتراح تصنيف جديد','الإبلاغ عن جهة قديمة','اقتراح ميزة للموقع','الإبلاغ عن رابط مشبوه'].map(x=><option key={x}>{x}</option>)}</select></div><div className="form-field full"><label className="field-label" htmlFor="suggest-title">عنوان مختصر *</label><input id="suggest-title" value={suggestTitle} onChange={e=>setSuggestTitle(e.target.value)} maxLength={120} required placeholder="مثال: تحديث رابط الموقع الرسمي"/></div><div className="form-field full"><label className="field-label" htmlFor="suggest-details">التفاصيل *</label><textarea id="suggest-details" value={suggestDetails} onChange={e=>setSuggestDetails(e.target.value)} maxLength={2000} required rows={5} placeholder="اكتب تفاصيل الطلب ومصدر المعلومة إن توفر..."/><div className="char-count">{suggestDetails.length}/2000</div></div><div className="form-field full"><label className="field-label" htmlFor="suggest-url">رابط مرجعي (اختياري)</label><input id="suggest-url" value={suggestUrl} onChange={e=>setSuggestUrl(e.target.value)} placeholder="https://example.sa" inputMode="url"/></div><div className="form-field full"><label className="field-label" htmlFor="suggest-email">البريد الإلكتروني (اختياري)</label><input id="suggest-email" type="email" value={suggestEmail} onChange={e=>setSuggestEmail(e.target.value)} placeholder="name@example.com"/></div></div><label className="consent"><input type="checkbox" checked={consent} onChange={e=>setConsent(e.target.checked)}/><span>أفهم أن هذه نسخة تجريبية وأن الطلب لن يُرسل أو يُحفظ على خادم. إذا رُبطت الخدمة لاحقاً، ستُوضح سياسة الخصوصية قبل جمع البيانات.</span></label><button className="btn btn-primary" type="submit">مراجعة وإرسال <Icon name="Send" size={16}/></button><p className="form-disclaimer"><Icon name="Info" size={16}/> الإرسال الفعلي غير مفعّل؛ لن تظهر رسالة نجاح زائفة.</p></form><aside className="suggest-aside"><div className="aside-art"><Icon name="MessagesSquare" size={48}/></div><h3>كل تصحيح يصنع فرقاً</h3><p>نراجع المعلومات قبل نشرها، ولا نعتمد الاقتراحات تلقائياً أو نمنح حالة تحقق بمجرد ورودها.</p><ul><li><Icon name="CheckCircle2" size={17}/> أرفق المصدر الرسمي إن أمكن.</li><li><Icon name="CheckCircle2" size={17}/> لا ترسل بيانات شخصية حساسة.</li><li><Icon name="CheckCircle2" size={17}/> لا تستخدم النموذج للطوارئ.</li></ul></aside></div></section>}
  {path==='/errors'&&<section className="section container page-section"><PageTitle eyebrow="مركز المساعدة التقني" title="مركز رموز الأخطاء" desc="هذه رموز داخلية خاصة ببوابة العطاء وليست رموزاً حكومية أو معايير رسمية."/><div className="error-tools"><div className="input-wrap"><Icon name="Search" size={18}/><input value={errorQuery} onChange={e=>setErrorQuery(e.target.value)} placeholder="ابحث بالرمز أو اسم الخطأ أو الحل..."/></div><select value={errorCategory} onChange={e=>setErrorCategory(e.target.value)} aria-label="تصفية حسب الفئة"><option>الكل</option>{[...new Set(errorCatalog.map(e=>e.category))].sort().map(c=><option key={c}>{c}</option>)}</select></div><div className="error-summary"><span><strong>{errorCatalog.filter(e=>(e.code+' '+e.title+' '+e.description+' '+e.solution).toLowerCase().includes(errorQuery.toLowerCase())&&(errorCategory==='الكل'||e.category===errorCategory)).length}</strong> رمز مطابق</span><span><Icon name="BookOpen" size={17}/> اختر أي رمز لعرض خطوات الحل</span></div><div className="error-list">{errorCatalog.filter(e=>(e.code+' '+e.title+' '+e.description+' '+e.solution).toLowerCase().includes(errorQuery.toLowerCase())&&(errorCategory==='الكل'||e.category===errorCategory)).map(e=><ErrorItem key={e.code} error={e} notify={notify}/>)}</div>{errorCatalog.filter(e=>(e.code+' '+e.title+' '+e.description+' '+e.solution).toLowerCase().includes(errorQuery.toLowerCase())&&(errorCategory==='الكل'||e.category===errorCategory)).length===0&&<div className="empty-state"><Icon name="SearchX" size={30}/><h3>لم نعثر على رمز مطابق</h3><p>تحقق من الرمز أو جرّب كلمات بحث أخرى.</p></div>}</section>}
  {path==='/privacy'&&<section className="section container page-section"><PageTitle eyebrow="السياسات" title="الخصوصية" desc="معلومات توضيحية أولية — يلزم اعتماد سياسة قانونية نهائية قبل الإطلاق."/><article className="panel policy-panel"><h3>البيانات في النسخة الحالية</h3><p>هذه النسخة لا تستخدم حسابات مستخدمين ولا ترسل نماذج الاقتراحات أو التقييمات إلى خادم. تُحفظ المفضلة محلياً في متصفحك فقط.</p><h3>عند ربط خدمات فعلية</h3><p>يجب توضيح البيانات التي تجمع وأغراض استخدامها ومدة الاحتفاظ بها وطريقة طلب الوصول أو الحذف، وتأمينها بصلاحيات مناسبة. لا ترسل بيانات حساسة في نماذج الاقتراحات.</p><p>هذه الصفحة ليست بديلاً عن مراجعة قانونية للمتطلبات النظامية ذات الصلة في المملكة العربية السعودية.</p></article></section>}
  {path==='/terms'&&<section className="section container page-section"><PageTitle eyebrow="السياسات" title="شروط الاستخدام" desc="شروط أولية تحتاج إلى مراجعة واعتماد قبل النشر العام."/><article className="panel policy-panel"><h3>طبيعة الخدمة</h3><p>بوابة العطاء دليل معلوماتي مستقل وليست جهة خيرية أو جهة اعتماد، ولا تستقبل التبرعات في النسخة الحالية.</p><h3>التحقق من المعلومات</h3><p>وجود اسم في الدليل لا يضمن جميع أنشطة الجهة أو نتائجها. تحقق من بيانات الجهة وقنواتها الرسمية قبل اتخاذ أي قرار أو إجراء تبرع.</p><h3>الروابط الخارجية</h3><p>لا تفتح رابطاً مشبوهاً ولا تقدم بياناتك إلا بعد التأكد من الموقع والجهة. هذه النسخة لا تحتوي على روابط تبرع حقيقية منشورة.</p></article></section>}
  {path==='/admin'||path.startsWith('/admin/')?<section className="section container page-section"><PageTitle eyebrow="إدارة المنصة" title="لوحة الإدارة" desc="هيكل واجهة فقط؛ الوصول الإداري غير مفعّل حتى إعداد مصادقة وصلاحيات على الخادم."/><div className="admin-disabled panel"><Icon name="LockKeyhole" size={40}/><h3>الوصول الإداري غير مفعّل</h3><p>لا توجد مصادقة إدارية في النسخة الحالية. لا تحاول حماية الإدارة بإخفاء الصفحة أو زرها فقط؛ يلزم التحقق من الصلاحيات في الخادم وقاعدة البيانات.</p><ul><li>إدارة الجهات ومصادر التحقق</li><li>مراجعة الاقتراحات والبلاغات</li><li>إدارة التقييمات وسجل التدقيق</li></ul></div></section>:null}
  {path!=='/'&&path!=='/directory'&&path!=='/faq'&&path!=='/reviews'&&path!=='/suggestions'&&path!=='/errors'&&path!=='/privacy'&&path!=='/terms'&&!detail&&!path.startsWith('/admin')&&<section className="section container page-section"><div className="empty-state large-empty"><Icon name="Compass" size={42}/><h2>الصفحة غير موجودة</h2><p>قد يكون الرابط غير صحيح أو أن الصفحة نُقلت.</p><Link to="/" className="btn btn-primary">العودة للرئيسية</Link></div></section>}
  </main>
  <footer className="footer"><div className="container footer-main"><div className="footer-about"><Logo/><p>دليل معلوماتي مستقل يساعدك على استكشاف أبواب الخير، مع وضوح حالة المراجعة ومصادر المعلومات.</p><span className="footer-note"><Icon name="Info" size={15}/> لا تستقبل بوابة العطاء التبرعات.</span></div><div className="footer-col"><h4>استكشف</h4><Link to="/directory">دليل الجهات</Link><Link to="/#categories">المجالات الخيرية</Link><Link to="/reviews">التقييمات</Link><Link to="/suggestions">الاقتراحات</Link></div><div className="footer-col"><h4>المساعدة</h4><Link to="/faq">الأسئلة الشائعة</Link><Link to="/errors">مركز رموز الأخطاء</Link><a href="mailto:support@example.invalid" onClick={e=>{e.preventDefault();notify('info','الدعم غير مفعّل','لم يتم إعداد عنوان دعم فعلي بعد.')}}>مركز المساعدة</a><Link to="/admin">لوحة الإدارة (غير مفعّلة)</Link></div><div className="footer-col"><h4>السياسات</h4><Link to="/privacy">الخصوصية</Link><Link to="/terms">شروط الاستخدام</Link><span>الإصدار التجريبي 1.0</span></div></div><div className="container footer-bottom"><span>© {new Date().getFullYear()} بوابة العطاء — واجهة أولية قابلة للتطوير.</span><span>صُممت بعناية لخدمة الخير <Icon name="Heart" size={14}/></span></div></footer>
  {toast&&<div className={`toast toast-${toast.type}`} role={toast.type==='error'?'alert':'status'} aria-live={toast.type==='error'?'assertive':'polite'}><span className="toast-icon"><Icon name={toast.type==='success'?'CheckCircle2':toast.type==='error'?'AlertCircle':toast.type==='info'?'Info':'AlertTriangle'} size={21}/></span><div className="toast-copy"><strong>{toast.title}</strong><p>{toast.detail}</p>{toast.code&&<div className="toast-actions"><Link to="/errors" onClick={()=>{setErrorQuery(toast.code);setToast(null)}}>عرض {toast.code} والحل</Link>{toast.code==='BA-102'&&<button onClick={()=>{setToast(null);window.location.reload()}}>إعادة المحاولة</button>}</div>}</div><button className="toast-close" onClick={()=>setToast(null)} aria-label="إغلاق الإشعار"><Icon name="X" size={18}/></button></div>}
  <button className="back-top" aria-label="العودة إلى الأعلى" onClick={()=>window.scrollTo({top:0,behavior:'smooth'})}><Icon name="ArrowUp" size={19}/></button>
 </div>
}
function PageTitle({eyebrow,title,desc}){return <div className="page-title"><span className="eyebrow">{eyebrow}</span><h1>{title}</h1><p>{desc}</p></div>}
function OrganizationCard({org,favorite,onFavorite}){return <article className="org-card"><div className="org-card-top"><span className="org-placeholder"><Icon name="Building2" size={25}/></span><span className="status-pill status-demo"><Icon name="FlaskConical" size={14}/> بيانات تجريبية</span></div><h3>{org.name}</h3><p>{org.description}</p><div className="org-meta"><span><Icon name="Tag" size={15}/>{org.category}</span><span><Icon name="MapPin" size={15}/>{org.region}</span></div><div className="org-card-bottom"><span className="source-note"><Icon name="Info" size={15}/> لا توجد مراجعة مصدر</span><button className="icon-btn" onClick={onFavorite} aria-label={favorite?'إزالة من المفضلة':'إضافة إلى المفضلة'}><Icon name={favorite?'Heart':'Heart'} size={19} fill={favorite?'currentColor':'none'}/></button></div></article>}
function ErrorItem({error:e,notify}){const [open,setOpen]=useState(false);return <article className={'error-item '+(open?'error-item-open':'')}><button className="error-row" onClick={()=>setOpen(!open)} aria-expanded={open}><span className="error-code">{e.code}</span><span className="error-main"><strong>{e.title}</strong><small>{e.description}</small></span><span className={'severity severity-'+(e.severity==='مرتفع'?'high':e.severity==='متوسط'?'medium':'low')}>{e.severity}</span><Icon name={open?'ChevronUp':'ChevronDown'} size={19}/></button>{open&&<div className="error-detail"><div><h4>خطوات الحل</h4><p>{e.solution}</p></div><div className="error-flags"><span><Icon name={e.retry?'RotateCcw':'Ban'} size={16}/>{e.retry?'يمكن إعادة المحاولة':'لا يُنصح بإعادة المحاولة تلقائياً'}</span><span><Icon name={e.admin?'UserRoundCog':'UserRound'} size={16}/>{e.admin?'قد يحتاج إلى تدخل إداري':'يمكن للمستخدم تجربة الحل أعلاه'}</span><span><Icon name="FolderOpen" size={16}/>{e.category}</span></div><button className="copy-error" onClick={()=>{navigator.clipboard?.writeText(`${e.code} — ${e.title}\n${e.description}\nالحل: ${e.solution}`).then(()=>notify('success','تم نسخ تفاصيل الخطأ','يمكنك لصقها في رسالة الدعم.')).catch(()=>notify('info',e.code,e.solution))}}><Icon name="Copy" size={15}/> نسخ تفاصيل الخطأ</button></div>}</article>}

const rootElement=document.getElementById('root');
if(rootElement) createRoot(rootElement).render(<AppErrorBoundary><App/></AppErrorBoundary>);