/* eslint-disable */
/* =============================================================
   SupportPage — Spade's Life Explained
   -----
   Sub-views from the hash param:
     #/support           → help center (مركز المساعدة والدعم)
     #/support/ticket    → submit a ticket (إرسال طلب دعم)
     #/support/detail    → ticket detail (تفاصيل طلب الدعم)
     #/support/status    → system status (حالة النظام)
   Reads globals: I18N, Icon, PageHeader, Btn, HDToast, HDConfirm
   ============================================================= */
(function () {
  const { useState } = React;

  const Chat = ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.5A8 8 0 1 1 21 12z"/><path d="M9 11h.01M12.5 11h.01M16 11h.01"/></svg>
  );
  const Warn = ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 2 20h20L12 3z"/><path d="M12 10v4M12 17h.01"/></svg>
  );
  const Shield = ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 5 6v6c0 4 3 6.5 7 8 4-1.5 7-4 7-8V6z"/><path d="m9 12 2 2 4-4"/></svg>
  );
  const Send = ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="m22 2-7 20-4-9-9-4 20-7z"/></svg>
  );

  window.SupportPage = function SupportPage({ lang, onRoute, param }) {
    const ar = lang === "ar";
    const view = param || "home";
    const tt = (a, e) => (ar ? a : e);
    const toast = (type, title, msg) => window.HDToast && HDToast.show({ type, title, msg });
    if (view === "ticket") return <Ticket ar={ar} onRoute={onRoute} tt={tt} toast={toast} />;
    if (view === "detail") return <Detail ar={ar} onRoute={onRoute} tt={tt} toast={toast} />;
    if (view === "status") return <Status ar={ar} onRoute={onRoute} tt={tt} toast={toast} />;
    return <Help ar={ar} onRoute={onRoute} tt={tt} toast={toast} />;
  };

  // ════════════════════════════ HELP CENTER ════════════════════════════
  function Help({ ar, onRoute, tt, toast }) {
    const [open, setOpen] = useState(-1);
    const cards = [
      { ic: <Icon.help size={22} />, t: tt("الأسئلة الشائعة", "FAQ"), s: tt("إجابات على أكثر الأسئلة شيوعًا", "Answers to common questions"), tone: "violet", go: () => onRoute("learn/faq") },
      { ic: <Chat size={22} />, t: tt("الدردشة المباشرة", "Live chat"), s: tt("تحدّث مع فريق الدعم الآن", "Chat with support now"), tone: "violet", go: () => toast("info", tt("جارٍ فتح الدردشة", "Opening chat"), tt("سينضم إليك أحد المختصّين خلال لحظات.", "An agent will join you shortly.")) },
      { ic: <Icon.mail size={22} />, t: tt("تواصل معنا", "Contact us"), s: tt("أرسل لنا رسالة وسنردّ عليك", "Send a message, we'll reply"), tone: "cyan", go: () => onRoute("support/ticket") },
      { ic: <Warn size={22} />, t: tt("الإبلاغ عن مشكلة", "Report a problem"), s: tt("أخبرنا عن أي مشكلة تواجهها", "Tell us about an issue"), tone: "gold", go: () => onRoute("support/ticket") },
      { ic: <Shield size={22} />, t: tt("حالة النظام", "System status"), s: tt("تحقّق من حالة خدمات النظام", "Check service health"), tone: "green", go: () => onRoute("support/status") },
    ];
    const faqs = [
      { q: tt("كيف أقرأ خريطتي؟", "How do I read my chart?"), a: tt("ابدأ من صفحة الدليل ثم تابع بطاقة «قراءتك الفريدة» في نظرة عامة — تشرح نوعك وسلطتك خطوة بخطوة.", "Start with the Guide, then read your unique reading on Overview — it walks through your type and authority step by step.") },
      { q: tt("كيف أحمّل تقرير PDF؟", "How do I download a PDF report?"), a: tt("من صفحة التقارير اختر «تنزيل PDF» — متاح للجميع بلا حدود.", "From Reports choose Download PDF — unlimited, for everyone.") },
      { q: tt("كيف أغيّر بيانات الميلاد؟", "How do I change birth data?"), a: tt("من «خرائطي» افتح الخريطة ثم عدّل بيانات الميلاد وأعد الحساب.", "In My Charts open the chart, edit the birth data and recompute.") },
    ];
    return (
      <div className="page page-support">
        <div className="sup-hero">
          <h1 className="sup-hero-title">{tt("مركز المساعدة والدعم", "Help & Support Center")}</h1>
          <p className="sup-hero-sub">{tt("كل ما تحتاجه في مكان واحد", "Everything you need, in one place")}</p>
          <div className="sup-search"><Icon.search size={18} /><input placeholder={tt("ابحث في المساعدة", "Search help")} /></div>
        </div>

        <div className="sup-cards">
          {cards.map((c, i) => (
            <button key={i} type="button" className={`sup-card ${c.tone}`} onClick={c.go}>
              <span className="sup-card-ic">{c.ic}</span>
              <strong>{c.t}</strong>
              <span className="sup-card-s">{c.s}</span>
              <span className="sup-card-go"><Icon.chevLeft size={15} /></span>
            </button>
          ))}
        </div>

        <div className="sup-grid2">
          <div className="bil-card" data-galaxy-ui>
            <h3 className="bil-h">{tt("أكثر الأسئلة شيوعًا", "Most common questions")}</h3>
            <div className="sup-faq">
              {faqs.map((f, i) => (
                <div key={i} className={`sup-faq-item ${open === i ? "open" : ""}`}>
                  <button type="button" className="sup-faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                    <span className="sup-faq-ic"><Icon.help size={15} /></span>
                    <span>{f.q}</span>
                    <span className="sup-faq-chev"><Icon.chevDown size={15} /></span>
                  </button>
                  <div className="sup-faq-a"><p>{f.a}</p></div>
                </div>
              ))}
            </div>
            <button type="button" className="sup-faq-all" onClick={() => onRoute("learn/faq")}>{tt("عرض جميع الأسئلة الشائعة", "View all FAQs")}</button>
          </div>

          <div className="bil-card sup-ticket-open" data-galaxy-ui>
            <div className="sup-to-head"><span>{tt("طلب دعم مفتوح", "Open support ticket")}</span><span className="sup-to-ic"><Icon.support size={22} /></span></div>
            <div className="sup-to-rows">
              <div className="sup-to-row"><span>{tt("الحالة", "Status")}</span><b className="amber"><Icon.clock size={13} /> {tt("قيد المراجعة", "In review")}</b></div>
              <div className="sup-to-row"><span>{tt("رقم الطلب", "Ticket no.")}</span><b>#HD-2025-04789</b></div>
              <div className="sup-to-row"><span>{tt("آخر تحديث", "Last update")}</span><b>{tt("منذ 3 ساعات", "3 hours ago")}</b></div>
            </div>
            <p className="sup-to-note">{tt("سيتواصل معك فريق الدعم لتقديم التحديثات.", "Our team will reach out with updates.")}</p>
            <div className="sup-to-actions">
              <Btn kind="ghost" onClick={() => onRoute("support/detail")}><Chat size={14} /> {tt("عرض الطلب", "View ticket")}</Btn>
              <Btn kind="outline" onClick={() => toast("info", tt("جارٍ فتح البريد", "Opening email"), "")}><Icon.mail size={14} /> {tt("إرسال بريد", "Email us")}</Btn>
            </div>
          </div>
        </div>
      </div>
    );
  }

  // ════════════════════════════ SUBMIT TICKET ════════════════════════════
  function Ticket({ ar, onRoute, tt, toast }) {
    const [type, setType] = useState("account");
    const types = [
      { id: "account", ic: <Icon.account size={15} />, label: tt("مشكلة في الحساب", "Account issue") },
      { id: "chart", ic: <Icon.guide size={15} />, label: tt("مشكلة في الخريطة", "Chart issue") },
      { id: "pdf", ic: <Icon.download size={15} />, label: tt("مشكلة في PDF", "PDF issue") },
      { id: "payment", ic: <Icon.crown size={15} />, label: tt("مشكلة في الدفع", "Payment issue") },
      { id: "idea", ic: <Icon.sparkle size={15} />, label: tt("اقتراح تحسين", "Suggestion") },
    ];
    const submit = (e) => { e.preventDefault(); toast("success", tt("تم إرسال طلبك", "Ticket submitted"), tt("سنردّ عليك خلال 8 ساعات.", "We'll reply within 8 hours.")); onRoute("support/detail"); };
    return (
      <div className="page page-support">
        <PageHeader title={tt("إرسال طلب دعم", "Submit a ticket")} sub={tt("أخبرنا بما تحتاج وسنساعدك في أقرب وقت.", "Tell us what you need and we'll help fast.")} lang={ar ? "ar" : "en"} />
        <div className="billing-grid">
          <form className="bil-card sup-form" data-galaxy-ui onSubmit={submit}>
            <label className="bil-field">
              <span>{tt("نوع المشكلة", "Issue type")}</span>
              <div className="sup-type-tabs">
                {types.map((t) => (
                  <button type="button" key={t.id} className={`sup-type ${type === t.id ? "active" : ""}`} onClick={() => setType(t.id)}>{t.ic}<span>{t.label}</span></button>
                ))}
              </div>
            </label>
            <div className="bil-field-row">
              <label className="bil-field"><span>{tt("الموضوع", "Subject")}</span><div className="bil-input"><input placeholder={tt("اكتب موضوعًا مختصرًا للمشكلة", "A short subject")} /><Icon.edit size={14} /></div></label>
              <label className="bil-field"><span>{tt("الأولوية", "Priority")}</span><div className="bil-input"><select className="sup-sel"><option>{tt("متوسطة", "Medium")}</option><option>{tt("عالية", "High")}</option><option>{tt("منخفضة", "Low")}</option></select></div></label>
            </div>
            <label className="bil-field"><span>{tt("وصف المشكلة", "Description")}</span><textarea className="sup-textarea" rows="5" placeholder={tt("يرجى وصف المشكلة بالتفصيل لمساعدتنا على فهمها وحلّها بشكل أسرع…", "Describe the issue in detail so we can help faster…")}></textarea></label>
            <div className="bil-field-row">
              <label className="bil-field"><span>{tt("البريد الإلكتروني", "Email")}</span><div className="bil-input"><input type="email" placeholder="example@mail.com" /><Icon.mail size={14} /></div></label>
              <label className="bil-field"><span>{tt("الشاشة المرتبطة (اختياري)", "Linked screen (optional)")}</span><div className="bil-input"><select className="sup-sel"><option>{tt("اختر الشاشة المرتبطة", "Select screen")}</option><option>{tt("نظرة عامة", "Overview")}</option><option>{tt("التقارير", "Reports")}</option></select></div></label>
            </div>
            <label className="sup-drop">
              <Icon.download size={22} />
              <strong>{tt("اسحب وأفلت ملفًّا هنا أو اضغط لاختيار ملف", "Drag a file here or click to choose")}</strong>
              <span>{tt("PNG, JPG, PDF, ZIP (الحد الأقصى 10MB)", "PNG, JPG, PDF, ZIP (max 10MB)")}</span>
            </label>
            <p className="bil-note"><Shield size={13} /> {tt("لا تشارك معلومات حسّاسة غير ضرورية داخل الرسالة", "Don't share unnecessary sensitive info in the message")}</p>
            <div className="sup-form-actions">
              <Btn kind="ghost" onClick={() => onRoute("support")}>{tt("إلغاء", "Cancel")}</Btn>
              <button type="submit" className="sup-submit"><Send size={15} /> {tt("إرسال الطلب", "Submit ticket")}</button>
            </div>
          </form>

          <aside className="bil-side">
            <div className="bil-card sup-info-card" data-galaxy-ui>
              <span className="sup-info-ic violet"><Icon.clock size={18} /></span>
              <div><strong>{tt("متوسط وقت الرد", "Avg. response time")}</strong><b className="sup-big">{tt("من 3 إلى 8 ساعات", "3–8 hours")}</b><span>{tt("نعمل على الردّ بأسرع وقت ممكن", "We reply as fast as we can")}</span></div>
            </div>
            <div className="bil-card sup-info-card" data-galaxy-ui>
              <span className="sup-info-ic gold"><Icon.support size={18} /></span>
              <div><strong>{tt("ساعات الدعم", "Support hours")}</strong><b className="sup-big">{tt("9:00 صباحًا – 12:00 منتصف الليل", "9:00 – 24:00")}</b><span>{tt("يوميًا · بتوقيت مكة المكرمة", "Daily · Makkah time")}</span></div>
            </div>
            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.sparkle size={15} /></span> {tt("نصائح قبل الإرسال", "Tips before sending")}</h3>
              <ul className="sup-tips">
                {[tt("اختر نوع المشكلة الأقرب لحالتك", "Pick the closest issue type"), tt("اكتب وصفًا واضحًا للمشكلة", "Write a clear description"), tt("أرفق لقطات شاشة إن أمكن", "Attach screenshots if possible"), tt("تأكّد من صحة بريدك الإلكتروني", "Double-check your email")].map((t, i) => (
                  <li key={i}><span className="sup-tip-ok"><Icon.check size={12} /></span>{t}</li>
                ))}
              </ul>
            </div>
          </aside>
        </div>
      </div>
    );
  }

  // ════════════════════════════ TICKET DETAIL ════════════════════════════
  function Detail({ ar, onRoute, tt, toast }) {
    const timeline = [
      { who: tt("المستخدم أرسل الطلب", "You submitted the ticket"), txt: tt("تم إرسال طلب الدعم بنجاح.", "Ticket submitted successfully."), t: "2025-05-06 12:15", ic: <Icon.account size={14} />, tone: "violet" },
      { who: tt("تم استلام الطلب", "Ticket received"), txt: tt("تم استلام طلبك وسيتم مراجعته من قِبل فريق الدعم.", "Received and queued for review."), t: "2025-05-06 12:16", ic: <Icon.mail size={14} />, tone: "cyan" },
      { who: tt("فريق الدعم يراجع المشكلة", "Support is reviewing"), txt: tt("جارٍ فحص تفاصيل المشكلة والتأكّد من السبب الرئيسي.", "Investigating the root cause."), t: "2025-05-06 13:02", ic: <Icon.search size={14} />, tone: "gold" },
      { who: tt("ردّ من فريق الدعم", "Reply from support"), txt: tt("مرحبًا عبدالرحمن، شكرًا لتواصلك. نرجو تزويدنا باسم التقرير لنحدّثه بأسرع وقت.", "Hi — thanks for reaching out. Could you share the report name so we can update it?"), t: "2025-05-07 14:35", ic: <Icon.support size={14} />, tone: "violet" },
    ];
    const close = () => window.HDConfirm && HDConfirm.open({ title: tt("إغلاق الطلب؟", "Close ticket?"), msg: tt("سيتم وضع علامة على الطلب كمحلول.", "The ticket will be marked resolved."), confirmText: tt("إغلاق", "Close"), cancelText: tt("تراجع", "Back"), onConfirm: () => { toast("success", tt("تم إغلاق الطلب", "Ticket closed"), ""); onRoute("support"); } });
    return (
      <div className="page page-support">
        <PageHeader title={tt("تفاصيل طلب الدعم", "Ticket detail")} sub={tt("الدعم والمساعدة · سجل الطلبات · تفاصيل الطلب", "Support · Tickets · Detail")} lang={ar ? "ar" : "en"} />
        <div className="billing-grid">
          <div className="bil-main">
            <div className="bil-card sup-status-bar" data-galaxy-ui>
              <div className="sup-sb"><span>{tt("رقم الطلب", "Ticket")}</span><b>#HD-2025-04789</b></div>
              <div className="sup-sb"><span>{tt("الحالة", "Status")}</span><b className="amber">{tt("قيد المراجعة", "In review")}</b></div>
              <div className="sup-sb"><span>{tt("الأولوية", "Priority")}</span><b className="red">{tt("عالية", "High")}</b></div>
              <div className="sup-sb"><span>{tt("آخر تحديث", "Updated")}</span><b>2025-05-07 14:35</b></div>
            </div>

            <div className="bil-card sup-yourmsg" data-galaxy-ui>
              <div className="sup-msg-head"><span className="sup-msg-ic"><Icon.account size={15} /></span><strong>{tt("رسالتك (أنت)", "Your message")}</strong><span className="sup-msg-t">2025-05-06 12:15</span></div>
              <p>{tt("عند محاولة حفظ التقرير، تظهر رسالة خطأ تفيد: «فشل في إنشاء الملف PDF». جرّبت أكثر من مرة، وحتى بعد إعادة التطبيق المشكلة مستمرة.", "When saving the report I get: ‘Failed to create the PDF file’. I tried several times and even after restarting the app the issue persists.")}</p>
            </div>

            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h">{tt("سجل المحادثة", "Conversation")}</h3>
              <div className="sup-timeline">
                {timeline.map((e, i) => (
                  <div key={i} className={`sup-tl-item ${e.tone}`}>
                    <span className="sup-tl-dot">{e.ic}</span>
                    <div className="sup-tl-body">
                      <div className="sup-tl-top"><strong>{e.who}</strong><span>{e.t}</span></div>
                      <p>{e.txt}</p>
                    </div>
                  </div>
                ))}
              </div>
              <div className="sup-reply">
                <textarea rows="2" placeholder={tt("اكتب ردّك هنا…", "Write your reply…")}></textarea>
                <button type="button" className="sup-reply-btn" onClick={() => toast("success", tt("تم إرسال ردّك", "Reply sent"), "")}><Send size={14} /> {tt("إضافة ردّ", "Add reply")}</button>
              </div>
            </div>

            <div className="sup-detail-actions">
              <button type="button" className="bil-action danger" onClick={() => toast("info", tt("تم رفع الأولوية", "Priority raised"), "")}><span className="bil-action-ic"><Warn size={16} /></span><div><strong>{tt("رفع الأولوية", "Raise priority")}</strong></div></button>
              <button type="button" className="bil-action gold" onClick={close}><span className="bil-action-ic"><Icon.lock size={16} /></span><div><strong>{tt("إغلاق الطلب", "Close ticket")}</strong></div></button>
              <button type="button" className="bil-action" onClick={() => toast("info", tt("تم التحديث", "Refreshed"), "")}><span className="bil-action-ic"><Icon.clock size={16} /></span><div><strong>{tt("تحديث الطلب", "Refresh")}</strong></div></button>
            </div>
          </div>

          <aside className="bil-side">
            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.account size={15} /></span> {tt("معلومات الحساب", "Account info")}</h3>
              <div className="sup-acc">
                <div className="sup-acc-row"><span>{tt("الاسم", "Name")}</span><b>{tt("عبدالرحمن محمد", "Abdulrahman M.")}</b></div>
                <div className="sup-acc-row"><span>{tt("البريد الإلكتروني", "Email")}</span><b>abdulrahman@example.com</b></div>
                <div className="sup-acc-row"><span>{tt("نوع الحساب", "Plan")}</span><b className="gold">{tt("مجاني — وصول كامل", "Free — full access")}</b></div>
                <div className="sup-acc-row"><span>{tt("عضو منذ", "Member since")}</span><b>2024-11-20</b></div>
              </div>
            </div>
            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.clock size={15} /></span> {tt("سجل النشاط", "Activity log")}</h3>
              <div className="sup-acc">
                <div className="sup-acc-row"><span>{tt("تم إنشاء الطلب", "Created")}</span><b>2025-05-06 12:15</b></div>
                <div className="sup-acc-row"><span>{tt("آخر تحديث", "Last update")}</span><b>2025-05-07 14:35</b></div>
                <div className="sup-acc-row"><span>{tt("عدد الردود", "Replies")}</span><b>1</b></div>
                <div className="sup-acc-row"><span>{tt("الحالة الحالية", "Status")}</span><b className="amber">{tt("قيد المراجعة", "In review")}</b></div>
              </div>
            </div>
          </aside>
        </div>
      </div>
    );
  }

  // ════════════════════════════ SYSTEM STATUS ════════════════════════════
  function Status({ ar, onRoute, tt, toast }) {
    const services = [
      { t: tt("إنشاء الخرائط", "Chart generation"), s: tt("إنشاء وحفظ الخرائط الشخصية", "Create & save charts"), st: "ok", ic: <Icon.guide size={15} /> },
      { t: tt("تصدير PDF", "PDF export"), s: tt("توليد وتصدير تقارير PDF", "Generate PDF reports"), st: "ok", ic: <Icon.download size={15} /> },
      { t: tt("تسجيل الدخول", "Sign-in"), s: tt("المصادقة وتسجيل الدخول", "Auth & login"), st: "ok", ic: <Icon.account size={15} /> },
      
      { t: "Spade Labs", s: tt("أنظمة وتقنيات خارجية", "External systems"), st: "watch", ic: <Icon.beaker size={15} /> },
      { t: tt("الإشعارات", "Notifications"), s: tt("إرسال الإشعارات والبريد", "Notifications & email"), st: "ok", ic: <Icon.bell size={15} /> },
      { t: tt("قاعدة البيانات", "Database"), s: tt("تخزين واسترجاع البيانات", "Storage & retrieval"), st: "ok", ic: <Icon.overview size={15} /> },
      { t: tt("خدمة الذكاء الاصطناعي", "AI service"), s: tt("جلسات الذكاء ومعالجة الطلبات", "AI sessions & processing"), st: "watch", ic: <Icon.sparkle size={15} /> },
    ];
    const incidents = [
      { t: tt("تحسينات على أداء خدمة الذكاء الاصطناعي", "AI performance improvements"), d: tt("16 مايو 2025", "May 16, 2025"), done: true },
      { t: tt("تحديث البنية التحتية لقاعدة البيانات", "Database infra update"), d: tt("13 مايو 2025", "May 13, 2025"), done: true },
      { t: tt("تحسينات على نظام الإشعارات", "Notification system tuning"), d: tt("20 أبريل 2025", "Apr 20, 2025"), done: true },
    ];
    const stLabel = (st) => st === "ok" ? tt("يعمل", "Operational") : st === "watch" ? tt("مراقبة", "Monitoring") : st === "down" ? tt("متوقف", "Down") : tt("متوقف مؤقتًا", "Degraded");
    return (
      <div className="page page-support">
        <div className="sup-status-hero">
          <div className="sup-status-mark"><Icon.check size={42} /></div>
          <h1 className="sup-hero-title">{tt("حالة النظام", "System status")}</h1>
          <p className="sup-hero-sub">{tt("تحقّق من حالة خدمات Human Design الحالية", "Live health of Human Design services")}</p>
        </div>

        <div className="sup-grid2">
          <div className="bil-main">
            <div className="bil-card sup-allok" data-galaxy-ui>
              <span className="sup-allok-ic"><Icon.check size={22} /></span>
              <div><strong>{tt("جميع الأنظمة تعمل بشكل طبيعي", "All systems operational")}</strong><span>{tt("لا توجد أعطال مؤثّرة في الوقت الحالي", "No active incidents right now")}</span></div>
              <div className="sup-uptime"><b>99.98%</b><span>{tt("Uptime · آخر 30 يومًا", "Uptime · last 30 days")}</span></div>
            </div>
            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h">{tt("حالة الخدمات", "Services")}</h3>
              <div className="sup-svc-list">
                {services.map((s, i) => (
                  <div key={i} className="sup-svc">
                    <span className="sup-svc-ic">{s.ic}</span>
                    <div className="sup-svc-tx"><strong>{s.t}</strong><span>{s.s}</span></div>
                    <span className={`sup-badge ${s.st}`}><i></i>{stLabel(s.st)}</span>
                  </div>
                ))}
              </div>
              <div className="sup-legend">
                <span><i className="ok"></i>{tt("يعمل", "Operational")}</span>
                <span><i className="watch"></i>{tt("مراقبة", "Monitoring")}</span>
                <span><i className="degraded"></i>{tt("متوقف مؤقتًا", "Degraded")}</span>
                <span><i className="down"></i>{tt("متوقف", "Down")}</span>
              </div>
            </div>
          </div>

          <aside className="bil-side">
            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.clock size={15} /></span> {tt("سجل الحوادث", "Incident log")}</h3>
              <div className="sup-allok mini"><span className="sup-allok-ic sm"><Icon.check size={15} /></span><div><strong>{tt("لا توجد أعطال نشطة", "No active incidents")}</strong><span>{tt("جميع الخدمات تعمل بشكل طبيعي", "All services normal")}</span></div></div>
              <div className="sup-incidents">
                {incidents.map((e, i) => (
                  <div key={i} className="sup-inc">
                    <span className="sup-inc-dot"><Icon.check size={11} /></span>
                    <div><strong>{e.t}</strong><span className="green">{tt("تم الحل", "Resolved")}</span></div>
                    <span className="sup-inc-date">{e.d}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="bil-card sup-maint" data-galaxy-ui>
              <span className="sup-info-ic violet"><Icon.calendar size={18} /></span>
              <div><strong>{tt("صيانة مجدولة", "Scheduled maintenance")}</strong><span>{tt("صيانة دورية لتحسين الأداء واستقرار الخدمات. الأحد 02:00 صباحًا · مدة متوقّعة ~دقيقة.", "Routine maintenance for performance. Sunday 02:00 · ~1 min expected.")}</span></div>
            </div>
          </aside>
        </div>

        <div className="sup-status-actions">
          <button type="button" className="bil-action" onClick={() => toast("success", tt("تم الاشتراك", "Subscribed"), tt("ستصلك تنبيهات بأي تغييرات في الحالة.", "You'll get status alerts."))}><span className="bil-action-ic"><Icon.bell size={16} /></span><div><strong>{tt("الاشتراك في تنبيهات الحالة", "Subscribe to alerts")}</strong><span>{tt("احصل على إشعارات فورية لأي تغيير", "Instant updates on changes")}</span></div></button>
          <button type="button" className="bil-action gold" onClick={() => onRoute("support/ticket")}><span className="bil-action-ic"><Warn size={16} /></span><div><strong>{tt("الإبلاغ عن مشكلة", "Report a problem")}</strong><span>{tt("واجهت مشكلة؟ أخبرنا الآن", "Hit an issue? Tell us")}</span></div></button>
          <button type="button" className="bil-action" onClick={() => toast("info", tt("تم تحديث الحالة", "Status refreshed"), "")}><span className="bil-action-ic"><Icon.clock size={16} /></span><div><strong>{tt("تحديث الحالة", "Refresh status")}</strong><span>{tt("تحديث يدوي لحالة النظام", "Manual status refresh")}</span></div></button>
        </div>
      </div>
    );
  }
})();