
// ================================================================
// "سعد الشعلاني" — نسخة WordPress (SPA) عبر React UMD + Tailwind CDN
// الصفحات عبر Hash Router: #/ , #/songs , #/consulting , #/social , #/cinema , #/workshop
// ================================================================

function cn(...classes){ return classes.filter(Boolean).join(" "); }

const EMAIL_TO = "saadalshalani@gmail.com";
const WHATSAPP_NUMBER_RAW = "0096599718278";
const X_URL = "https://x.com/saadalshalani";
const BRAND = "سعد الشعلاني";
const PHONE_E164 = "+96599718278";
const TEL_LINK = `tel:${PHONE_E164}`;

function getRoute(){ const h = window.location.hash; if(!h || h==="#" || h==="#/") return "/"; return h.startsWith("#")?h.slice(1):h; }
function currentRouteId(){ const r=getRoute(); return r.startsWith("/")?r.slice(1):r; }
const buildAnchorUrl=(id)=>{ const base=location.href.split("#")[0]; const hash=location.hash||""; return `${base}${hash}${hash.includes(`#${id}`)?"":`#${id}`}`; };

function validateContact({phone,email,message}){
  const errors=[];
  if(!phone && !email) errors.push("يرجى إدخال الهاتف أو الإيميل على الأقل.");
  if(!String(message).trim()) errors.push("يرجى كتابة تفاصيل الطلب.");
  return { ok: errors.length===0, errors };
}

function buildWhatsAppLink(raw){ let d=String(raw).replace(/\D/g,""); if(d.startsWith("00")) d=d.slice(2); return `https://wa.me/${d}`; }
const WHATSAPP_LINK = buildWhatsAppLink(WHATSAPP_NUMBER_RAW);

function makeFallbackBanner(text){
  const svg = `<?xml version='1.0' encoding='UTF-8'?>
  <svg xmlns='http://www.w3.org/2000/svg' width='1600' height='600'>
    <defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>
      <stop offset='0%' stop-color='#0B0B0F'/><stop offset='50%' stop-color='#15151B'/><stop offset='100%' stop-color='#1F1F29'/>
    </linearGradient></defs>
    <rect fill='url(#g)' width='100%' height='100%'/>
    <g fill='rgba(0,0,0,0.35)'><rect width='100%' height='100%'/></g>
    <text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='64' font-family='system-ui,Segoe UI,Arial' fill='white'>${text}</text>
  </svg>`;
  return "data:image/svg+xml;utf8,"+encodeURIComponent(svg);
}

// Icons
const Svg = ({children,...p}) => (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...p}>{children}</svg>);
const IconSparkles=(p)=>(<Svg {...p}><path d="M12 2l1.5 3 3 1.5-3 1.5-1.5 3-1.5-3L6 6.5 9 5z"/></Svg>);
const IconMusic=(p)=>(<Svg {...p}><path d="M9 18a3 3 0 1 0 0-6v6zm0-9V5l8-2v6"/><circle cx="17" cy="15" r="3"/></Svg>);
const IconMessage=(p)=>(<Svg {...p}><path d="M21 15a3 3 0 0 1-3 3H8l-5 4V6a3 3 0  0 1 3-3h12a3 3 0  0 1 3 3z"/></Svg>);
const IconShare=(p)=>(<Svg {...p}><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><path d="M8.7 10.8l6.6-3.6M8.7 13.2l6.6 3.6"/></Svg>);
const IconFilm=(p)=>(<Svg {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 5v14M17 5v14M3 9h4M17 9h4M3 15h4M17 15h4"/></Svg>);
const IconPhone=(p)=>(<Svg {...p}><path d="M22 16.92a5 5 0 0 1-5 5c-8 0-14-6-14-14a5 5 0  0 1 5-5h0l2 5-3 2a12 12 0  0 0 8 8l2-3z"/></Svg>);
const IconSend=(p)=>(<Svg {...p}><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4 20-7z"/></Svg>);
const IconCheck=(p)=>(<Svg {...p}><circle cx="12" cy="12" r="10"/><path d="M8 12l3 3 5-6"/></Svg>);
const IconMail=(p)=>(<Svg {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></Svg>);
const IconTwitter=(p)=>(<Svg {...p}><path d="M22 5.8c-.7.3-1.4.5-2.1.6.8-.5 1.3-1.2 1.6-2-1 .6-1.8 1-2.9 1.2A3.5 3.5 0  0 0 12 8.6c0 .3 0 .7.1 1C8.7 9.4 6 8 4 5.9c-.4.7-.6 1.4-.6 2.3 0  1.6.8 3 2.1 3.8-.6 0-1.1-.2-1.6-.4 0 2.2 1.6 4 3.7 4.4-.4.1-.8.1-1.2.1-.3 0-.6 0-.9-.1.6 1.9 2.4 3.3 4.5 3.3A7.1 7.1 0  0 1 2 19.1 10 10 0  0 0 7.5 21c6 0 9.3-5.1 9.3-9.4v-.4c.7-.5 1.3-1.2 1.8-2z"/></Svg>);
const IconMoon=(p)=>(<Svg {...p}><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></Svg>);
const IconSun=(p)=>(<Svg {...p}><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></Svg>);

const ThemeContext = React.createContext({ isDark:false, toggleTheme:()=>{} });
const useTheme=()=>React.useContext(ThemeContext);

function Button({variant="default", size="md", className, children, ...props}){
  const { isDark }=useTheme();
  const base="inline-flex items-center justify-center font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:pointer-events-none rounded-2xl select-none active:scale-[.99]";
  const sizes={ sm:"min-h-10 h-10 px-3 text-sm", md:"min-h-11 h-11 px-4", lg:"min-h-12 h-12 px-5 text-base" };
  const variants={ default:"bg-gray-900 text-white hover:bg-gray-800", secondary:isDark?"bg-neutral-800 text-gray-100 hover:bg-neutral-700":"bg-gray-100 text-gray-900 hover:bg-gray-200", outline:isDark?"border border-neutral-700 hover:bg-neutral-800":"border border-gray-300 hover:bg-gray-50", ghost:isDark?"hover:bg-neutral-800":"hover:bg-gray-100" };
  return <button className={cn(base,sizes[size],variants[variant],"touch-manipulation",className)} {...props}>{children}</button>;
}
function Input(p){ const {isDark}=useTheme(); return <input {...p} className={cn(isDark?"w-full rounded-2xl border border-neutral-700 bg-neutral-900 text-gray-100 placeholder:text-gray-400 px-3 py-3 focus:outline-none focus:ring-2 focus:ring-fuchsia-400":"w-full rounded-2xl border border-gray-300 bg-white px-3 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-400 placeholder:text-gray-400", p.className)} />; }
function Textarea(p){ const {isDark}=useTheme(); return <textarea {...p} className={cn(isDark?"w-full rounded-2xl border border-neutral-700 bg-neutral-900 text-gray-100 placeholder:text-gray-400 px-3 py-3 focus:outline-none focus:ring-2 focus:ring-fuchsia-400":"w-full rounded-2xl border border-gray-300 bg-white px-3 py-3 text-base focus:outline-none focus:ring-2 focus:ring-fuchsia-400 placeholder:text-gray-400", p.className)} />; }
function Card({className="", children}){ const {isDark}=useTheme(); return <div className={cn("rounded-3xl border shadow", isDark?"bg-neutral-900 border-neutral-800":"bg-white", className)}>{children}</div>; }
function CardContent({className="", children}){ return <div className={cn("p-5 sm:p-6", className)}>{children}</div>; }

function ShareBar({anchorId, title}){
  const url = buildAnchorUrl(anchorId);
  const shareNative = async()=>{ if(!navigator.share){ alert("المشاركة غير مدعومة في هذا المتصفح. استخدم واتساب أو X بالأسفل."); return; } try{ await navigator.share({title, text:title, url}); }catch{} };
  const links = ((u,t)=>({ whatsapp:`https://wa.me/?text=${encodeURIComponent(t)}%20${encodeURIComponent(u)}`, twitter:`https://twitter.com/intent/tweet?url=${encodeURIComponent(u)}&text=${encodeURIComponent(t)}` }))(url,title);
  const openWin=(u)=>window.open(u,"_blank","noopener,noreferrer");
  return (<div className="mt-6 flex flex-wrap items-center gap-2">
    <Button onClick={shareNative} variant="secondary" aria-label="مشاركة"><IconShare className="mr-2 h-4 w-4"/>مشاركة</Button>
    <Button onClick={()=>openWin(links.whatsapp)} variant="outline" aria-label="واتساب"><IconPhone className="mr-2 h-4 w-4"/>واتساب</Button>
    <Button onClick={()=>openWin(links.twitter)} variant="outline" aria-label="X"><IconTwitter className="mr-2 h-4 w-4" />X</Button>
  </div>);
}

async function sendViaFormSubmit({ section, name, phone, email, message }){
  const payload={ section, name, phone, email, message, _subject:`طلب جديد – ${section}`, _template:"table", _captcha:"false", _honey:"" };
  const res = await fetch(`https://formsubmit.co/ajax/${EMAIL_TO}`, { method:"POST", headers:{ "Content-Type":"application/json", Accept:"application/json" }, body: JSON.stringify(payload) });
  if(!res.ok) throw new Error("send-failed"); return res.json();
}
function openMailtoFallback({ section, name, phone, email, message }){
  const subject=`طلب جديد – ${section}`;
  const lines=[`القسم: ${section}`, name?`الاسم: ${name}`:null, phone?`الهاتف: ${phone}`:null, email?`الإيميل: ${email}`:null, "", "الرسالة:", message].filter(Boolean);
  const body=encodeURIComponent(lines.join("\\n"));
  location.href=`mailto:${EMAIL_TO}?subject=${encodeURIComponent(subject)}&body=${body}`;
}

function ContactForm({ section }){
  const [name,setName]=React.useState(""); const [phone,setPhone]=React.useState(""); const [email,setEmail]=React.useState(""); const [message,setMessage]=React.useState("");
  const [sent,setSent]=React.useState(false); const [error,setError]=React.useState(""); const [sending,setSending]=React.useState(false);
  const onSubmit=async(e)=>{
    e.preventDefault(); setError("");
    const { ok, errors } = validateContact({ phone, email, message }); if(!ok){ setError(errors[0]); return; }
    try{ setSending(true); await sendViaFormSubmit({ section, name, phone, email, message }); setSent(true); }
    catch{ try{ openMailtoFallback({ section, name, phone, email, message }); setSent(true);} catch{ setError("تعذّر إرسال الرسالة. جرّب لاحقاً أو تواصل عبر واتساب."); } }
    finally{ setSending(false); setName(""); setPhone(""); setEmail(""); setMessage(""); }
  };
  if(sent) return (<div className="flex items-center gap-3 rounded-2xl border bg-green-50 p-4 text-green-700"><IconCheck className="h-5 w-5"/><div><div className="font-semibold">تم استلام رسالتك</div><div className="text-sm opacity-80">سنتواصل معك قريباً.</div></div></div>);
  return (<form onSubmit={onSubmit} className="grid grid-cols-1 gap-3">
    <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
      <Input dir="rtl" placeholder="الاسم (اختياري)" value={name} onChange={e=>setName(e.target.value)} />
      <Input dir="rtl" placeholder="الهاتف" value={phone} onChange={e=>setPhone(e.target.value)} type="tel" />
      <Input dir="rtl" placeholder="الإيميل" value={email} onChange={e=>setEmail(e.target.value)} type="email" />
    </div>
    <Textarea dir="rtl" placeholder={`اكتب لنا تفاصيل طلبك في قسم ${section}…`} value={message} onChange={e=>setMessage(e.target.value)} rows={5} />
    {error && <div className="text-red-600 text-sm">{error}</div>}
    <div className="flex flex-wrap items-center gap-3 justify-between">
      <div className="text-xs text-gray-500">* يكفي إدخال الهاتف أو الإيميل للتواصل.</div>
      <Button type="submit" size="lg" className="px-6" disabled={sending}><IconSend className="mr-2 h-4 w-4" />{sending?"جارٍ الإرسال…":"إرسال"}</Button>
    </div>
  </form>);
}

function WorkshopForm(){
  const [title,setTitle]=React.useState("أساسيات صناعة المحتوى"); const [date,setDate]=React.useState("2025-09-01"); const [tickets,setTickets]=React.useState(1);
  const [name,setName]=React.useState(""); const [phone,setPhone]=React.useState(""); const [email,setEmail]=React.useState(""); const [notes,setNotes]=React.useState("");
  const [sent,setSent]=React.useState(false); const [error,setError]=React.useState(""); const [sending,setSending]=React.useState(false);
  const onSubmit=async(e)=>{ e.preventDefault(); setError(""); const msg=[`الاشتراك في ورشة: ${title}`,`التاريخ: ${date}`,`عدد المقاعد: ${tickets}`, notes?`ملاحظات: ${notes}`:null].filter(Boolean).join("\\n"); const {ok,errors}=validateContact({ phone, email, message:msg }); if(!ok){ setError(errors[0]); return; } try{ setSending=true; await sendViaFormSubmit({ section:`ورشة عمل – ${title} (${date})`, name, phone, email, message:msg }); setSent(true);} catch{ try{ openMailtoFallback({ section:`ورشة عمل – ${title} (${date})`, name, phone, email, message:msg }); setSent(true);} catch{ setError("تعذّر إرسال الطلب. جرّب لاحقاً أو تواصل عبر واتساب."); } } finally{ setSending(false); setName(""); setPhone(""); setEmail(""); setNotes(""); } };
  if(sent) return (<div className="flex items-center gap-3 rounded-2xl border bg-green-50 p-4 text-green-700"><IconCheck className="h-5 w-5"/><div><div className="font-semibold">تم حجز مقعدك بنجاح</div><div className="text-sm opacity-80">سنتواصل معك لتأكيد التفاصيل.</div></div></div>);
  return (<form onSubmit={onSubmit} className="grid grid-cols-1 gap-3">
    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
      <Input dir="rtl" placeholder="اسم الورشة" value={title} onChange={e=>setTitle(e.target.value)} />
      <Input dir="rtl" type="date" value={date} onChange={e=>setDate(e.target.value)} />
      <Input dir="rtl" type="number" min={1} max={10} value={tickets} onChange={e=>setTickets(Number(e.target.value||1))} placeholder="عدد المقاعد" />
    </div>
    <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
      <Input dir="rtl" placeholder="اسمك" value={name} onChange={e=>setName(e.target.value)} />
      <Input dir="rtl" placeholder="الهاتف" value={phone} onChange={e=>setPhone(e.target.value)} type="tel" />
      <Input dir="rtl" placeholder="الإيميل" value={email} onChange={e=>setEmail(e.target.value)} type="email" />
    </div>
    <Textarea dir="rtl" placeholder="ملاحظات إضافية (اختياري)" value={notes} onChange={e=>setNotes(e.target.value)} rows={4} />
    {error && <div className="text-red-600 text-sm">{error}</div>}
    <div className="flex items-center justify-between">
      <div className="text-xs text-gray-500">* يكفي إدخال الهاتف أو الإيميل للتواصل.</div>
      <Button type="submit" size="lg" className="px-6" disabled={sending}><IconSend className="mr-2 h-4 w-4" />{sending?"جارٍ الإرسال…":"حجز الآن"}</Button>
    </div>
  </form>);
}

function WorkshopPage(){
  const banner="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=1600&auto=format&fit=crop"; const accent="from-violet-600 via-fuchsia-600 to-rose-600";
  return (<main className="mx-auto max-w-7xl px-4 py-8 sm:py-12">
    <a href="#/" className="inline-flex mb-4"><Button variant="outline" size="sm">← سعد الشعلاني</Button></a>
    <Card className="border-0 shadow-lg overflow-hidden">
      <div className={`relative bg-gradient-to-br ${accent}`}>
        <img src={banner} alt="ورشة عمل" className="w-full h-auto object-cover max-h-[40vh]" onError={(e)=>{ e.currentTarget.onerror=null; e.currentTarget.src=makeFallbackBanner('ورشة عمل'); }}/>
        <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
        <div className="absolute bottom-4 right-4 text-white drop-shadow">
          <h1 className="text-2xl sm:text-3xl font-extrabold">ورشة عمل</h1>
          <p className="text-white/90 text-sm">تنظيم دورات وورش متخصصة في صناعة المحتوى</p>
        </div>
      </div>
      <CardContent>
        <div className="grid gap-6 md:grid-cols-2">
          <div className="prose prose-invert max-w-none">
            <h3 className="text-xl font-bold mb-2">تفاصيل عامة</h3>
            <ul className="list-disc pr-5 space-y-1 text-gray-700">
              <li>أماكن محدودة — أولوية الحجز حسب الأسبقية.</li><li>شهادة مشاركة بعد إتمام الورشة.</li><li>إمكانية الدفع الإلكترونية أو تحويل بنكي.</li>
            </ul>
          </div>
          <div><WorkshopForm /></div>
        </div>
      </CardContent>
    </Card>
  </main>);
}

function SectionBlock({ id, title, desc, features, Icon, accent, banner }){
  return (<section id={id} className="scroll-mt-24">
    <Card className="border-0 shadow-lg overflow-hidden">
      <div className={`relative bg-gradient-to-br ${accent}`}>
        <img src={banner} alt={title} className="w-full h-auto object-cover max-h-[40vh]" onError={(e)=>{ e.currentTarget.onerror=null; e.currentTarget.src=makeFallbackBanner(title); }}/>
        <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent" />
        <div className="absolute bottom-4 right-4 text-white drop-shadow">
          <div className="flex items-center gap-3">
            <div className="p-3 rounded-2xl bg-white/20 backdrop-blur"><Icon className="h-7 w-7"/></div>
            <div><h1 className="text-2xl sm:text-3xl font-extrabold">{title}</h1><p className="text-white/90 text-sm sm:text-base">{desc}</p></div>
          </div>
        </div>
      </div>
      <CardContent>
        <div className="grid gap-6 md:grid-cols-2">
          <ul className="space-y-3">{features.map((f,i)=>(<li key={i} className="flex items-start gap-2"><IconCheck className="mt-0.5 h-5 w-5 text-emerald-600"/><span className="leading-relaxed">{f}</span></li>))}</ul>
          <div><ContactForm section={title} /></div>
        </div>
        <ShareBar anchorId={id} title={title} />
      </CardContent>
    </Card>
  </section>);
}

const sectionsDef=[
  { id:"songs", title:"أغاني المناسبات", desc:"نكتب لك كلمات أصلية ونلحنها وننتجها بصوت وإحساس يناسب حفلك أو إعلانك.", features:["كتابة كلمات خاصة","تلحين وتوزيع موسيقي","تسجيل ومكس/ماستر","تسليم نسخ مختصرة للسوشيال"], Icon:IconMusic, accent:"from-fuchsia-600 via-pink-600 to-rose-600", banner:"https://images.unsplash.com/photo-1511379938547-c1f69419868d?q=80&w=1600&auto=format&fit=crop" },
  { id:"consulting", title:"استشارات إعلامية", desc:"نصنع معك إستراتيجية ظهور قوية: رسائل واضحة، خطة محتوى، وأدوات قياس فعّالة.", features:["بناء الهوية والقصة","خريطة محتوى 90 يوم","سيناريوهات مقابلات وبرامج","تدريب على الإلقاء والظهور"], Icon:IconMessage, accent:"from-sky-600 via-cyan-600 to-blue-600", banner:"https://images.unsplash.com/photo-1525182008055-f88b95ff7980?q=80&w=1600&auto=format&fit=crop" },
  { id:"social", title:"وسائل التواصل", desc:"إدارة حساباتك، إنتاج فيديوهات قصيرة، وإطلاق حملات تؤثر وتحوّل.", features:["إدارة ونشر وجدولة","تصميم ومونتاج رييلز/شورتس","إعلانات ممولة وقياس الأداء","كتابة كابتشنات مؤثرة"], Icon:IconShare, accent:"from-amber-600 via-orange-600 to-red-600", banner:"https://images.unsplash.com/photo-1551817958-20204d6ab1c4?q=80&w=1600&auto=format&fit=crop" },
  { id:"cinema", title:"سينما وأفلام", desc:"من الفكرة إلى الشاشة: كتابة سيناريو، تصوير، إخراج، مونتاج وتصحيح لوني.", features:["تطوير الفكرة والسكريبت","تصوير سينمائي وإخراج","مونتاج وصوت وتصحيح لون","بوستر وتوزيع رقمي"], Icon:IconFilm, accent:"from-emerald-600 via-teal-600 to-green-600", banner:"https://images.unsplash.com/photo-1517602302552-471fe67acf66?q=80&w=1600&auto=format&fit=crop" },
];

function HomePage(){
  const { isDark } = React.useContext(ThemeContext);
  return (<main className="mx-auto max-w-7xl px-4">
    <section className="py-8 sm:py-12">
      <div className="grid md:grid-cols-2 items-center gap-6 sm:gap-8">
        <div>
          <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold leading-[1.15]">نصنع محتوى <span className="bg-gradient-to-r from-fuchsia-600 via-pink-600 to-rose-600 bg-clip-text text-transparent">فني</span> يحكي قصتك</h1>
          <p className={cn("mt-3 sm:mt-4 text-base sm:text-lg", isDark ? "text-gray-300" : "text-gray-600")}>أغاني المناسبات • استشارات إعلامية • وسائل التواصل • سينما وأفلام</p>
          <div className="mt-5 sm:mt-6 flex flex-wrap gap-2 sm:gap-3">
            <a href="#/workshop" className="inline-flex"><Button size="sm">ورشة عمل</Button></a>
            {sectionsDef.map((s)=>(<a key={s.id} href={`#/${s.id}`} className="inline-flex"><Button variant="outline" size="sm">{s.title}</Button></a>))}
          </div>
        </div>
        <div>
          <div className={cn("aspect-video rounded-3xl border shadow-inner overflow-hidden text-white grid place-items-center", isDark?"bg-gradient-to-br from-neutral-800 to-neutral-900 border-neutral-800":"bg-gradient-to-br from-gray-900 to-gray-800")}>
            <div className="text-center p-6">
              <div className="text-xs sm:text-sm text-white/70">معاينة فنية</div>
              <div className="mt-2 text-xl sm:text-2xl font-bold">Studio • Music • Media • Cinema</div>
              <div className="mt-3 text-white/80 text-xs sm:text-sm">تصميم أنيق، متجاوب، سريع – جاهز للربط بأنظمة المراسلة.</div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section className="pb-10 sm:pb-12">
      <div className="grid gap-6 sm:gap-8 md:grid-cols-2">
        <a href="#/workshop" className="block group">
          <Card className="border-0 shadow-lg overflow-hidden">
            <div className={`p-6 bg-gradient-to-br from-violet-600 via-fuchsia-600 to-rose-600 text-white`}>
              <div className="flex items-start gap-3">
                <div className="p-3 rounded-2xl bg-white/20 backdrop-blur"><IconSparkles className="h-7 w-7"/></div>
                <div><div className="text-xl font-bold group-hover:underline">ورشة عمل</div><div className="text-sm text-white/90 mt-1">نظّم أو اشترك في دورات وورش متخصصة</div></div>
              </div>
            </div>
            <CardContent>
              <ul className="space-y-2 text-sm">
                <li className="flex items-start gap-2"><IconCheck className="mt-0.5 h-4 w-4 text-emerald-600"/><span>صورة غلاف + نموذج حجز</span></li>
                <li className="flex items-start gap-2"><IconCheck className="mt-0.5 h-4 w-4 text-emerald-600"/><span>شهادة مشاركة</span></li>
                <li className="flex items-start gap-2"><IconCheck className="mt-0.5 h-4 w-4 text-emerald-600"/><span>دفع إلكتروني/تحويل لاحقًا</span></li>
              </ul>
            </CardContent>
          </Card>
        </a>

        {sectionsDef.map((s)=>(
          <a key={s.id} href={`#/${s.id}`} className="block group">
            <Card className="border-0 shadow-lg overflow-hidden">
              <div className={`p-6 bg-gradient-to-br ${s.accent} text-white`}>
                <div className="flex items-start gap-3">
                  <div className="p-3 rounded-2xl bg-white/20 backdrop-blur"><s.Icon className="h-7 w-7"/></div>
                  <div><div className="text-xl font-bold group-hover:underline">{s.title}</div><div className="text-sm text-white/90 mt-1">{s.desc}</div></div>
                </div>
              </div>
              <CardContent>
                <ul className="space-y-2">
                  {s.features.slice(0,3).map((f,i)=>(<li key={i} className="flex items-start gap-2 text-sm"><IconCheck className="mt-0.5 h-4 w-4 text-emerald-600"/><span className="leading-relaxed">{f}</span></li>))}
                </ul>
              </CardContent>
            </Card>
          </a>
        ))}
      </div>
    </section>
  </main>);
}

function ThemeToggleButton({ compact=false }){
  const { isDark, toggleTheme }=React.useContext(ThemeContext);
  return (<Button variant="outline" size={compact?"sm":"md"} onClick={toggleTheme}>
    {isDark?<IconSun className="mr-2 h-4 w-4"/>:<IconMoon className="mr-2 h-4 w-4"/>}{compact?null:isDark?"وضع فاتح":"وضع داكن"}
  </Button>);
}

function SiteContent(){
  const [route,setRoute]=React.useState(getRoute()); const routeId=currentRouteId();
  const [isDark,setIsDark]=React.useState(false);
  React.useEffect(()=>{ try{ const saved=localStorage.getItem("theme"); const prefers=window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; setIsDark(saved ? saved==='dark' : !!prefers);}catch{} },[]);
  React.useEffect(()=>{ try{ document.documentElement.classList.toggle('dark', isDark); document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light'); localStorage.setItem('theme', isDark?'dark':'light'); }catch{} },[isDark]);
  const toggleTheme=()=>setIsDark(d=>!d);
  React.useEffect(()=>{ const onHash=()=>setRoute(getRoute()); window.addEventListener("hashchange", onHash); return ()=>window.removeEventListener("hashchange", onHash); },[]);
  React.useEffect(()=>{ document.title = BRAND; },[]);

  const isHome = route==="/" || routeId==="";
  const section = sectionsDef.find(s=>s.id===routeId);

  const rootBg = isDark ? "from-neutral-950 to-neutral-900 text-gray-100" : "from-white to-gray-50 text-gray-900";
  const headerShell = isDark ? "backdrop-blur bg-neutral-900/70 border-b border-neutral-800" : "backdrop-blur bg-white/70 border-b";

  return (<ThemeContext.Provider value={{ isDark, toggleTheme }}>
    <div dir="rtl" lang="ar" className={cn("min-h-screen overflow-x-hidden bg-gradient-to-b", rootBg)}>
      <div className="pointer-events-none fixed inset-0 -z-10">
        <div className={cn("absolute -top-20 right-10 h-64 w-64 rounded-full blur-3xl", isDark ? "bg-fuchsia-500/10" : "bg-fuchsia-300/40")} />
        <div className={cn("absolute top-40 left-10 h-72 w-72 rounded-full blur-3xl", isDark ? "bg-cyan-500/10" : "bg-cyan-300/40")} />
        <div className={cn("absolute bottom-10 right-20 h-64 w-64 rounded-full blur-3xl", isDark ? "bg-emerald-500/10" : "bg-emerald-300/40")} />
      </div>

      <header className={cn("sticky top-0 z-40", headerShell)}>
        <div className="mx-auto max-w-7xl px-4 py-3 flex items-center gap-3 sm:gap-4">
          <div className="flex items-center gap-2 min-w-0">
            <div className="h-9 w-9 grid place-items-center rounded-2xl bg-gradient-to-br from-fuchsia-600 to-rose-600 text-white flex-shrink-0"><IconSparkles className="h-5 w-5"/></div>
            <a href="#/" className={cn("text-base sm:text-lg truncate font-bold hover:underline", isDark?"text-white":undefined)}>{BRAND}</a>
          </div>
          <nav className="ml-auto hidden md:flex items-center gap-2"><a href="#/workshop" className="inline-flex"><Button variant="ghost">ورشة عمل</Button></a>
            {sectionsDef.map((s)=>(<a key={s.id} href={`#/${s.id}`} className="inline-flex"><Button variant="ghost">{s.title}</Button></a>))}
          </nav>
          <div className="md:hidden ml-auto flex items-center gap-2"><a href="#/workshop" className="inline-flex"><Button size="sm">تواصل</Button></a><ThemeToggleButton compact/></div>
          <div className="hidden md:flex ml-2 items-center gap-2">
            <ThemeToggleButton/>
            <a href={WHATSAPP_LINK} target="_blank" rel="noopener noreferrer" className="inline-flex"><Button><IconPhone className="mr-2 h-4 w-4" />واتساب</Button></a>
            <a href={TEL_LINK} className="inline-flex"><Button variant="outline"><IconPhone className="mr-2 h-4 w-4" />اتصال</Button></a>
            <a href={X_URL} target="_blank" rel="noopener noreferrer" className="inline-flex"><Button variant="outline"><IconTwitter className="mr-2 h-4 w-4" />X</Button></a>
          </div>
        </div>
      </header>

      {isHome ? (<HomePage />) : currentRouteId()==="workshop" ? (<WorkshopPage />) : section ? (
        <main className="mx-auto max-w-7xl px-4 py-8 sm:py-12">
          <a href="#/" className="inline-flex mb-4"><Button variant="outline" size="sm">← سعد الشعلاني</Button></a>
          <SectionBlock id={section.id} title={section.title} desc={section.desc} features={section.features} Icon={section.Icon} accent={section.accent} banner={section.banner} />
        </main>
      ) : (
        <main className="mx-auto max-w-7xl px-4 py-12"><Card className="border-0 shadow-lg"><CardContent><h2 className="text-2xl font-bold mb-2">الصفحة غير موجودة</h2><p className="text-gray-600 mb-4">الرابط الذي حاولت الوصول إليه غير صحيح.</p><a href="#/" className="inline-flex"><Button>العودة للرئيسية</Button></a></CardContent></Card></main>
      )}

      <a href={WHATSAPP_LINK} target="_blank" rel="noopener noreferrer" className="fixed bottom-5 left-5 z-40"><Button size="lg" className="rounded-full shadow-lg"><IconPhone className="mr-2 h-5 w-5" />تواصل واتساب</Button></a>

      <footer className={cn("border-t mt-8", isDark?"bg-neutral-900/70 border-neutral-800":"bg-white/70") }>
        <div className={cn("mx-auto max-w-7xl px-4 py-8 text-sm flex flex-col md:flex-row items-center gap-2 md:gap-6 w-full", isDark?"text-gray-300":"text-gray-600") }>
          <div>© {new Date().getFullYear()} {BRAND} – جميع الحقوق محفوظة.</div>
          <div className="ml-auto flex flex-wrap items-center gap-3 sm:gap-4">
            <span className="inline-flex items-center gap-1"><IconMail className="h-4 w-4" /> <span>البريد:</span> <a className="underline" href={`mailto:${EMAIL_TO}`}>{EMAIL_TO}</a></span>
            <span className="inline-flex items-center gap-1"><IconMessage className="h-4 w-4" /> <span>واتساب:</span> <a className="underline" href={WHATSAPP_LINK} target="_blank" rel="noopener noreferrer">00965 9971 8278</a></span>
            <span className="inline-flex items-center gap-1"><IconPhone className="h-4 w-4" /> <span>اتصال:</span> <a className="underline" href={TEL_LINK}>{PHONE_E164}</a></span>
            <span className="inline-flex items-center gap-1"><IconTwitter className="h-4 w-4" /> <span>X:</span> <a className="underline" href={X_URL} target="_blank" rel="noopener noreferrer">@saadalshalani</a></span>
          </div>
        </div>
      </footer>
    </div>
  </ThemeContext.Provider>);
}

class ErrorBoundary extends React.Component{ constructor(p){ super(p); this.state={ hasError:false, error:null }; } static getDerivedStateFromError(e){ return { hasError:true, error:e }; } componentDidCatch(e,i){ console.error("UI Error:", e, i); } render(){ if(this.state.hasError){ return (<div dir="rtl" className="min-h-screen bg-white text-red-700 p-6"><h1 className="text-2xl font-bold mb-2">حدث خطأ غير متوقع</h1><pre className="whitespace-pre-wrap rounded-2xl border p-4 bg-red-50 text-sm overflow-auto">{String(this.state.error)}</pre></div>);} return this.props.children; } }

function App(){ return (<ErrorBoundary><SiteContent /></ErrorBoundary>); }
document.title = BRAND;
const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<App />);
