/* eslint-disable */
/* =============================================================
   LearnPage — Spade's Life Explained (guide details)
   -----
   Sub-views from the hash param:
     #/learn           → article (أساسيات الهيومان ديزاين)
     #/learn/glossary  → glossary term detail (chart-aware)
     #/learn/faq       → FAQ search results
   Reads globals: I18N, Icon, PageHeader, Btn, CHART_SUMMARY,
     AUTHORITY_DB, HDContent, InteractiveBodygraph, HDToast
   ============================================================= */
(function () {
  const { useState } = React;

  window.LearnPage = function LearnPage({ lang, onRoute, param }) {
    const ar = lang === "ar";
    const view = param || "article";
    const tt = (a, e) => (ar ? a : e);
    const toast = (type, title, msg) => window.HDToast && HDToast.show({ type, title, msg });
    const terms = I18N[lang].guide.glossary;
    const termMatch = /^term-(\d+)$/.exec(view);
    if (view === "glossary") return <div className="page page-learn">
      <PageHeader title={tt("المعجم", "Glossary")} sub={tt("اختار مصطلح عشان تقرأ تعريفه.", "Choose a term to read its definition.")} lang={lang} />
      <div className="lrn-term-index">{terms.map((term, index) => <button key={term.t} type="button" className="gloss-row" onClick={() => onRoute(`learn/term-${index}`)}>
        <Icon.bookOpen size={16} /><div className="gloss-text"><strong>{term.t}</strong><span>{term.s}</span></div>
      </button>)}</div>
    </div>;
    if (termMatch) {
      const index = Number(termMatch[1]);
      if (index === 2) return <Glossary ar={ar} onRoute={onRoute} tt={tt} toast={toast} />;
      const term = terms[index];
      return <div className="page page-learn">
        <PageHeader title={term?.t || tt("المصطلح غير موجود", "Term not found")} sub={tt("المعجم", "Glossary")} lang={lang} />
        {term && <section className="lrn-term-panel"><h2>{tt("التعريف", "Definition")}</h2><p>{term.s}</p></section>}
        <button type="button" className="lrn-back" onClick={() => onRoute("learn/glossary")}>{tt("رجوع إلى المعجم", "Back to glossary")}</button>
      </div>;
    }
    if (view === "faq") return <Faq ar={ar} onRoute={onRoute} tt={tt} toast={toast} />;
    return <Article ar={ar} onRoute={onRoute} tt={tt} toast={toast} />;
  };

  // ════════════════════════════ ARTICLE ════════════════════════════
  function Article({ ar, onRoute, tt, toast }) {
    const toc = [
      tt("مقدمة", "Introduction"), tt("النوع", "Type"), tt("الاستراتيجية", "Strategy"), tt("السلطة", "Authority"),
      tt("البروفايل", "Profile"), tt("المراكز والطاقة", "Centers & energy"), tt("القنوات", "Channels"),
      tt("المتغيّرات", "Variables"), tt("كيف تبدأ رحلتك", "How to begin"),
    ];
    const [active, setActive] = useState(0);
    const offers = [
      { ic: <Icon.users size={18} />, t: tt("فهم الآخرين", "Understand others"), s: tt("تحسين علاقاتك بفهم اختلافات الطاقة والتصميم.", "Improve relationships by understanding energetic differences.") },
      { ic: <Icon.compass size={18} />, t: tt("اتخاذ قرارات أوضح", "Clearer decisions"), s: tt("استخدام استراتيجيتك وسلطتك الداخلية لاتخاذ قرارات صحيحة.", "Use your strategy and authority for aligned choices.") },
      { ic: <Icon.account size={18} />, t: tt("اكتشاف ذاتك", "Discover yourself"), s: tt("فهم طبيعتك الفريدة ونقاط قوتك وتحدياتك.", "Understand your nature, strengths and challenges.") },
      { ic: <Icon.heart size={18} />, t: tt("العيش بانسجام", "Live in alignment"), s: tt("التوافق مع طاقتك الطبيعية وتقليل الإرهاق والإحباط.", "Align with your natural energy and reduce burnout.") },
    ];
    return (
      <div className="page page-learn">
        <PageHeader title={tt("الدليل والمعرفة", "Guide & knowledge")} sub={tt("أساسيات النظام · أساسيات الهيومان ديزاين", "Basics · Human Design fundamentals")} lang={ar ? "ar" : "en"} />
        <div className="rep-grid2">
          <div className="bil-main">
            <article className="bil-card lrn-hero" data-galaxy-ui>
              {BetaAccess.permits("guide_sample") && <div className="lrn-hero-art"><InteractiveBodygraph lang={ar ? "ar" : "en"} educational showGateNumbers={false} /></div>}
              <div className="lrn-hero-tx">
                <span className="lrn-tag">{tt("مقالة تمهيدية", "Intro article")}</span>
                <h2 className="lrn-hero-title">{tt("أساسيات الهيومان ديزاين", "Human Design fundamentals")}</h2>
                <p className="lrn-hero-lead">{tt("الهيومان ديزاين خريطة فريدة تجمع بين علم الفلك، الشاكرات، الكابالا، الإيتشينج، ونظام تشاكرات الجسم. يقدّم هذا الدليل نظرة شاملة على المفاهيم الأساسية التي تُبنى عليها لفهم نفسك ومن حولك.", "Human Design is a unique map blending astrology, chakras, Kabbalah, the I'Ching and the body's energy centers. This guide gives a full overview of the core concepts to understand yourself and others.")}</p>
                <div className="lrn-hero-meta">
                  <span><Icon.clock size={13} /> {tt("8 دقائق قراءة", "8 min read")}</span>
                  <span><Icon.sparkle size={13} /> {tt("مستوى مبتدئ", "Beginner")}</span>
                  <span><Icon.calendar size={13} /> {tt("12 مايو 2025", "May 12, 2025")}</span>
                </div>
              </div>
            </article>

            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.sparkle size={15} /></span> {tt("مقدمة", "Introduction")}</h3>
              <p className="lrn-para">{tt("الهيومان ديزاين نظام تحليلي متكامل يوضح لك من أنت، وكيف تعمل، وكيف تتّخذ قرارات منسجمة مع طبيعتك. يعتمد على بيانات ميلادك الدقيقة (الوقت، التاريخ، المكان) لرسم خريطة طاقة فريدة لك.", "Human Design is an integrated analytical system that shows who you are, how you operate, and how to make decisions aligned with your nature. It uses your precise birth data (time, date, place) to map a unique energetic blueprint.")}</p>
              <div className="lrn-callout"><Icon.help size={15} /><span>{tt("هذه ليست نظرية، بل أداة عملية لاكتشاف ذاتك واتخاذ قرارات أفضل في الحياة اليومية.", "This isn't theory — it's a practical tool for self-discovery and better daily decisions.")}</span></div>
            </div>

            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.diamond size={15} /></span> {tt("ما الذي يقدّمه لك الهيومان ديزاين؟", "What Human Design offers you")}</h3>
              <div className="lrn-offers">
                {offers.map((o, i) => (
                  <div key={i} className="lrn-offer"><span className="lrn-offer-ic">{o.ic}</span><div><strong>{o.t}</strong><span>{o.s}</span></div></div>
                ))}
              </div>
            </div>

            <div className="lrn-bigcallout">
              <span className="lrn-bc-ic"><Icon.sparkle size={26} /></span>
              <div>
                <strong>{tt("الهيومان ديزاين ليس للتنبّؤ بالمستقبل", "Human Design isn't fortune-telling")}</strong>
                <p>{tt("بل هو أداة للوعي الذاتي، تساعدك على اتخاذ قرارات منسجمة مع تصميمك الفريد. كلما عشت وفقًا لطبيعتك، زاد شعورك بالرضا والوفرة.", "It's a tool for self-awareness that helps you make choices aligned with your unique design. The more you live as yourself, the more satisfaction and abundance you feel.")}</p>
              </div>
            </div>
          </div>

          <aside className="bil-side">
            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.bookOpen size={15} /></span> {tt("محتويات المقالة", "Article contents")}</h3>
              <div className="lrn-toc">
                {toc.map((t, i) => (
                  <button key={i} type="button" className={`lrn-toc-item ${active === i ? "active" : ""}`} onClick={() => setActive(i)}>
                    <span className="lrn-toc-num">{String(i + 1).padStart(2, "0")}</span>
                    <span>{t}</span>
                  </button>
                ))}
              </div>
              {!window.ChartStore?.remote && <button type="button" className="rep-act primary lrn-dl" onClick={() => onRoute("report")}><Icon.download size={14} /> {tt("تحميل خريطة المثال", "Download sample chart")}</button>}
            </div>
            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.sparkle size={15} /></span> {tt("مواضيع ذات صلة", "Related topics")}</h3>
              <button type="button" className="lrn-related" onClick={() => onRoute("guide")}><span className="lrn-rel-ic"><Icon.users size={16} /></span><div><strong>{tt("أنواع الهيومان ديزاين الأربعة", "The four Types")}</strong><span>{tt("تعرّف على الأنواع واختلافات الطاقة بينها.", "Learn the types and their energy differences.")}</span></div><Icon.chevLeft size={14} /></button>
              <button type="button" className="lrn-related" onClick={() => onRoute("centers")}><span className="lrn-rel-ic"><Icon.centers size={16} /></span><div><strong>{tt("مراكز الطاقة في الجسم", "Energy centers")}</strong><span>{tt("دليل شامل لفهم المراكز التسعة.", "A full guide to the nine centers.")}</span></div><Icon.chevLeft size={14} /></button>
              <button type="button" className="lrn-allbtn" onClick={() => onRoute("learn/faq")}>{tt("عرض جميع المقالات", "View all articles")} <Icon.chevLeft size={13} /></button>
            </div>
          </aside>
        </div>
      </div>
    );
  }

  // ════════════════════════════ GLOSSARY TERM (chart-aware) ════════════════════════════
  function Glossary({ ar, onRoute, tt, toast }) {
    const HC = window.HDContent;
    const auth = HC ? HC.authority(ar ? "ar" : "en") : { name: "", desc: "" };
    const steps = [
      { ic: <Icon.clock size={18} />, t: tt("توقّف وانتبه", "Pause & notice"), s: tt("قبل اتخاذ أي قرار مهم، توقّف وارجع لداخلك.", "Before any big decision, pause and turn inward.") },
      { ic: <Icon.help size={18} />, t: tt("اسأل سلطتك", "Ask your authority"), s: tt("وجّه السؤال لسلطتك الداخلية بطريقتها الخاصة بك.", "Pose the question to your inner authority in its own way.") },
      { ic: <Icon.heart size={18} />, t: tt("انتظر الإشارة", "Wait for the signal"), s: tt("انتظر الشعور الواضح: راحة، حماس، وضوح، أو سكون.", "Wait for the clear felt signal: ease, energy, clarity or stillness.") },
      { ic: <Icon.check size={18} />, t: tt("تحرّك بالثقة", "Move with trust"), s: tt("عندما تحصل على إشارة واضحة، تحرّك وانسجم مع القرار.", "When the signal is clear, move and align with the decision.") },
    ];
    const facts = [
      { ic: <Icon.sparkle size={14} />, l: tt("النوع", "Kind"), v: tt("مفهوم أساسي", "Core concept") },
      { ic: <Icon.flash size={14} />, l: tt("تأثيره", "Impact"), v: tt("عالٍ", "High") },
      { ic: <Icon.compass size={14} />, l: tt("المجال", "Domain"), v: tt("اتخاذ القرارات", "Decision-making") },
      { ic: <Icon.definition size={14} />, l: tt("يرتبط بـ", "Relates to"), v: tt("الاستراتيجية، القرار", "Strategy, choice") },
      { ic: <Icon.heart size={14} />, l: tt("يتأثّر بـ", "Affected by"), v: tt("الوعي الذاتي، التجربة", "Self-awareness, practice") },
    ];
    const related = [
      { t: tt("الاستراتيجية", "Strategy"), s: tt("طريقة اتخاذ القرارات العامة في التصميم.", "Your general decision approach."), go: () => onRoute("authority") },
      { t: tt("التفويض", "Surrender"), s: tt("عندما تكون سلطتك خارجية وتحتاج للتأكيد.", "When your authority is outer and needs confirmation."), go: () => toast("info", tt("قريبًا", "Soon"), "") },
      { t: tt("القرار الصحيح", "Right decision"), s: tt("قرار يُتّخذ من انسجام لا من ضغط ذهني.", "A choice made from alignment, not mental pressure."), go: () => toast("info", tt("قريبًا", "Soon"), "") },
      { t: tt("التوقيع", "Signature"), s: tt("الشعور الذي يدلّ أنك على المسار الصحيح.", "The feeling that you're on the right track."), go: () => onRoute("overview") },
    ];
    return (
      <div className="page page-learn">
        <PageHeader title={tt("تفاصيل المصطلح", "Term detail")} sub={tt("الدليل الشامل · المعجم · تفاصيل المصطلح", "Knowledge base · Glossary · Term")} lang={ar ? "ar" : "en"} />
        <div className="rep-grid2 lrn-term-layout">
          <div className="bil-main">
            <div className="lrn-term-head">
              <button type="button" className="lrn-back" onClick={() => onRoute("learn/glossary")}><Icon.chevRight size={14} /> {tt("رجوع إلى المعجم", "Back to glossary")}</button>
              <div className="lrn-term-tabs">
                <span className="lrn-term-tab gold active">{tt("الأساسيات", "Basics")}</span>
                <span className="lrn-term-tab">{tt("القرارات", "Decisions")}</span>
                <span className="lrn-term-tab green"><Icon.sparkle size={11} /> {tt("مفهوم أساسي", "Core")}</span>
              </div>
              <h2 className="lrn-term-title"><Icon.sparkle size={20} /> {tt("السلطة الداخلية", "Inner Authority")}</h2>
            </div>

            <div className="bil-card lrn-def" data-galaxy-ui>
              <div className="lrn-def-tx">
                <h3 className="bil-h"><span className="bil-h-ic"><Icon.bookOpen size={15} /></span> {tt("التعريف", "Definition")}</h3>
                <p>{tt("السلطة الداخلية هي البوصلة التي تساعدك على معرفة كيفية اتخاذ قرارات صحيحة ومنسجمة مع طبيعتك. تختلف من شخص لآخر حسب تصميمه في الشارت، وهي مصدر موثوق للإرشاد الداخلي.", "Inner Authority is the compass that helps you know how to make decisions aligned with your nature. It differs per person based on their chart, and is a reliable source of inner guidance.")}</p>
                {auth.name && <div className="lrn-yours"><Icon.star size={12} /> {tt(`سلطتك أنت: ${auth.name}`, `Yours: ${auth.name}`)}{auth.process ? ` — ${auth.process}` : ""}</div>}
              </div>
            </div>

            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.compass size={15} /></span> {tt("كيف يظهر عمليًا؟", "How it shows up")}</h3>
              <div className="lrn-steps">
                {steps.map((s, i) => (
                  <div key={i} className="lrn-step"><span className="lrn-step-ic">{s.ic}</span><strong>{s.t}</strong><span>{s.s}</span></div>
                ))}
              </div>
            </div>
          </div>

          <aside className="bil-side">
            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.flash size={15} /></span> {tt("حقائق سريعة", "Quick facts")}</h3>
              <div className="lrn-facts">
                {facts.map((f, i) => (
                  <div key={i} className="lrn-fact"><span className="lrn-fact-ic">{f.ic}</span><span className="lrn-fact-l">{f.l}</span><b>{f.v}</b></div>
                ))}
              </div>
            </div>
            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.definition size={15} /></span> {tt("مصطلحات مرتبطة", "Related terms")}</h3>
              {related.map((r, i) => (
                i === 1 || i === 2
                  ? <div key={i} className="lrn-related lrn-related-note"><div><strong>{r.t}</strong><span>{r.s}</span></div></div>
                  : <button key={i} type="button" className="lrn-related" onClick={() => onRoute(i === 0 ? "learn/term-1" : "learn/term-5")}><span className="lrn-rel-ic"><Icon.chevLeft size={14} /></span><div><strong>{r.t}</strong><span>{r.s}</span></div></button>
              ))}
              <button type="button" className="lrn-allbtn" onClick={() => onRoute("learn/glossary")}><Icon.bookOpen size={13} /> {tt("عرض جميع المصطلحات", "View all terms")}</button>
            </div>
          </aside>
        </div>
      </div>
    );
  }

  // ════════════════════════════ FAQ SEARCH ════════════════════════════
  function Faq({ ar, onRoute, tt, toast }) {
    const [q, setQ] = useState(tt("كيف أفهم البروفايل؟", "How do I understand profiles?"));
    const [cat, setCat] = useState("all");
    const [open, setOpen] = useState(0);
    const cats = [
      { id: "all", label: tt("الكل", "All"), n: "" },
      { id: "basics", label: tt("أساسيات التصميم", "Design basics"), n: 24, ic: <Icon.bookOpen size={14} /> },
      { id: "profile", label: tt("البروفايل والشخصية", "Profile & personality"), n: 18, ic: <Icon.account size={14} /> },
      { id: "strategy", label: tt("الاستراتيجية والسلطة", "Strategy & authority"), n: 16, ic: <Icon.crown size={14} /> },
      { id: "centers", label: tt("المراكز والقنوات", "Centers & channels"), n: 14, ic: <Icon.centers size={14} /> },
      { id: "rel", label: tt("العلاقات والتوافق", "Relationships"), n: 12, ic: <Icon.heart size={14} /> },
    ];
    const faqs = [
      { q: tt("ما هو البروفايل في تصميم الإنسان؟", "What is a profile in Human Design?"), a: tt("البروفايل هو أحد جوانب شخصيتك في تصميم الإنسان، ويصف الدور الذي تلعبه في الحياة والطريقة التي تتفاعل بها مع العالم من حولك.", "The profile is a facet of your design describing the role you play and how you interact with the world."), ic: <Icon.account size={15} /> },
      { q: tt("كيف أعرف بروفايلي في خريطتي؟", "How do I find my profile?"), a: tt("يظهر البروفايل في قسم الشخصية والشعور في خريطتك، ويكون على شكل رقمين مفصولين بنقطة (مثل 3/5 أو 1/3).", "Your profile appears in the chart as two numbers separated by a slash (e.g. 3/5 or 1/3)."), ic: <Icon.overview size={15} /> },
      { q: tt("ما معنى البروفايلات (1/3) و(3/5) و(4/6)؟", "What do profiles 1/3, 3/5, 4/6 mean?"), a: tt("كل تركيبة بروفايل تحمل طاقة ودورًا مختلفًا. الرقم الأول هو الدور الواعي، والثاني هو الدور غير الواعي الذي يكمّل طريقتك الطبيعية في التفاعل.", "Each profile pairing carries a different energy. The first number is the conscious role, the second the unconscious one that completes how you relate."), ic: <Icon.settings size={15} /> },
      { q: tt("كيف يساعدني فهم البروفايل في حياتي اليومية؟", "How does knowing my profile help daily?"), a: tt("فهم بروفايلك يساعدك على قبول طبيعتك، واتخاذ قرارات منسجمة مع طاقتك الحقيقية، وتحسين علاقاتك وتوجيه طاقتك نحو ما يشعرك فعلًا.", "It helps you accept your nature, make aligned choices, and direct your energy toward what truly resonates."), ic: <Icon.heart size={15} /> },
      { q: tt("هل يمكن أن يتغيّر البروفايل مع الوقت؟", "Can a profile change over time?"), a: tt("لا، البروفايل ثابت طوال حياتك لأنه يعتمد على بيانات ميلادك. ومع ذلك، وعيك به قد يتعمّق ويتطوّر مع خبراتك وتجاربك.", "No — your profile is fixed because it's based on your birth data. But your awareness of it deepens with experience."), ic: <Icon.clock size={15} /> },
      { q: tt("ما الفرق بين البروفايل والمراكز أو القنوات؟", "Profile vs centers/channels?"), a: tt("البروفايل يصف دورك وشخصيتك العامة، بينما المراكز والقنوات تصف طاقتك الداخلية وكيفية عملها. معًا يشكّلان خريطتك الفريدة.", "The profile describes your role and persona, while centers and channels describe your inner energy. Together they form your unique map."), ic: <Icon.centers size={15} /> },
    ];
    return (
      <div className="page page-learn">
        <div className="lrn-faq-hero">
          <h1 className="sup-hero-title"><Icon.sparkle size={22} /> {tt("نتائج البحث في الأسئلة الشائعة", "FAQ search results")}</h1>
          <p className="sup-hero-sub">{tt(`وجدنا ${faqs.length} نتيجة مطابقة لعبارتك`, `${faqs.length} results matching your search`)}</p>
        </div>
        <div className="rep-grid2">
          <div className="bil-main">
            <div className="lrn-search"><Icon.search size={18} /><input value={q} onChange={(e) => setQ(e.target.value)} /><button type="button" onClick={() => setQ("")} className="lrn-search-x"><Icon.plus size={16} /></button></div>
            <div className="lrn-filters">
              <span className="lrn-sort">{tt("ترتيب: الأكثر صلة", "Sort: relevance")} <Icon.chevDown size={13} /></span>
              {cats.map((c) => (
                <button key={c.id} type="button" className={`lrn-chip ${cat === c.id ? "active" : ""}`} onClick={() => setCat(c.id)}>{c.ic}{c.label}</button>
              ))}
            </div>
            <div className="lrn-count">{tt(`عرض 1-${faqs.length} من ${faqs.length} نتائج`, `Showing 1-${faqs.length} of ${faqs.length}`)}</div>
            <div className="sup-faq lrn-faqlist">
              {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">{f.ic}</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>
            <p className="lrn-faq-foot"><Icon.sparkle size={14} /> {tt("لم تجد إجابتك؟ تواصل معنا وسنكون سعداء بمساعدتك.", "Didn't find your answer? Reach out and we'll gladly help.")}</p>
          </div>

          <aside className="bil-side">
            <div className="bil-card" data-galaxy-ui>
              <h3 className="bil-h"><span className="bil-h-ic"><Icon.starOutline size={15} /></span> {tt("التصنيفات الشائعة", "Popular categories")}</h3>
              <div className="lrn-cats">
                {cats.filter((c) => c.id !== "all").map((c) => (
                  <button key={c.id} type="button" className={`lrn-cat ${cat === c.id ? "active" : ""}`} onClick={() => setCat(c.id)}>
                    <span className="lrn-cat-ic">{c.ic}</span>
                    <span className="lrn-cat-label">{c.label}</span>
                    <span className="lrn-cat-n">{c.n}</span>
                  </button>
                ))}
                <button type="button" className="lrn-allbtn" onClick={() => toast("info", tt("التصنيفات", "Categories"), tt("قائمة التصنيفات الكاملة قريبًا.", "Full list coming soon."))}>{tt("عرض جميع التصنيفات", "View all categories")}</button>
              </div>
            </div>
            <div className="bil-card lrn-noresult" data-galaxy-ui>
              <span className="lrn-planet"><Icon.planets size={26} /></span>
              <strong>{tt("لم تجد ما تبحث عنه؟", "Can't find it?")}</strong>
              <span>{tt("فريق الدعم لدينا هنا لمساعدتك في الحصول على الإجابة التي تحتاجها.", "Our support team is here to get you the answer you need.")}</span>
              {!window.ChartStore?.remote && <button type="button" className="rep-act primary" onClick={() => onRoute("support/ticket")}><Icon.support size={15} /> {tt("تواصل مع الدعم", "Contact support")}</button>}
              <span className="lrn-resp"><Icon.clock size={12} /> {tt("متوسط وقت الرد: خلال ساعتين", "Avg. response: ~2 hours")}</span>
            </div>
          </aside>
        </div>
      </div>
    );
  }
})();