// plans.jsx — Config-driven Shahdad plan catalog and pricing center.
// Prices, limits, labels and CTA behavior live here so commercial changes stay isolated.

const PLAN_CENTER_CONFIG = {
  version: "2026-07-23-draft-1",
  pricingStatus: "draft", // draft | live
  currency: { fa: "تومان", en: "Toman" },
  annualSavingsPercent: 20,
  checkout: {
    status: "disabled", // disabled | live
    handlerName: "__SHAHDAD_START_CHECKOUT"
  },
  sales: {
    status: "disabled", // disabled | live
    handlerName: "__SHAHDAD_CONTACT_SALES"
  },
  comparison: {
    individual: [
      { key: "activeCases", label: { fa: "پرونده فعال", en: "Active cases" } },
      { key: "storage", label: { fa: "فضای اسناد", en: "Document storage" } },
      { key: "legalTools", label: { fa: "ابزارهای حقوقی", en: "Legal tools" } },
      { key: "support", label: { fa: "پشتیبانی", en: "Support" } },
      { key: "workspace", label: { fa: "نوع استفاده", en: "Usage scope" } }
    ],
    organization: [
      { key: "members", label: { fa: "اعضای پایه", en: "Included members" } },
      { key: "activeCases", label: { fa: "پرونده فعال", en: "Active cases" } },
      { key: "storage", label: { fa: "فضای اسناد", en: "Document storage" } },
      { key: "governance", label: { fa: "مدیریت و کنترل", en: "Governance" } },
      { key: "support", label: { fa: "پشتیبانی", en: "Support" } }
    ]
  }
};

const PLAN_CATALOG = [
  {
    id: "pluto",
    scope: "individual",
    tone: "pluto",
    iconKey: "shield",
    name: { fa: "پلوتون", en: "Pluto" },
    eyebrow: { fa: "شروع رایگان", en: "Free start" },
    description: { fa: "برای آشنایی با شهداد و مدیریت نیازهای حقوقی سبک.", en: "For exploring Shahdad and light legal needs." },
    price: { monthly: 0, annual: 0 },
    behavior: { kind: "free", authRequired: true },
    cta: { guest: { fa: "ساخت حساب رایگان", en: "Create free account" }, default: { fa: "انتخاب پلوتون", en: "Choose Pluto" }, current: { fa: "پلن فعلی", en: "Current plan" } },
    features: [
      { fa: "۱ پرونده فعال", en: "1 active case" },
      { fa: "۲۵۰ مگابایت فضای اسناد", en: "250 MB document storage" },
      { fa: "ابزارهای پایه حقوقی", en: "Core legal tools" },
      { fa: "پشتیبانی عمومی", en: "Community support" }
    ],
    comparison: {
      activeCases: { fa: "۱", en: "1" },
      storage: { fa: "۲۵۰ مگابایت", en: "250 MB" },
      legalTools: { fa: "پایه", en: "Core" },
      support: { fa: "عمومی", en: "Community" },
      workspace: { fa: "شخصی", en: "Personal" }
    }
  },
  {
    id: "moon",
    scope: "individual",
    tone: "moon",
    iconKey: "moon",
    name: { fa: "ماه", en: "Moon" },
    eyebrow: { fa: "برای استفاده روزمره", en: "For everyday use" },
    description: { fa: "برای کاربرانی که پیگیری و نگهداری منظم‌تری نیاز دارند.", en: "For users who need regular tracking and storage." },
    price: { monthly: 290000, annual: 2784000 },
    behavior: { kind: "checkout", authRequired: true },
    cta: { guest: { fa: "ورود و انتخاب ماه", en: "Sign in for Moon" }, default: { fa: "انتخاب ماه", en: "Choose Moon" }, current: { fa: "پلن فعلی", en: "Current plan" } },
    features: [
      { fa: "۵ پرونده فعال", en: "5 active cases" },
      { fa: "۲ گیگابایت فضای اسناد", en: "2 GB document storage" },
      { fa: "ابزارهای تکمیلی و خروجی بیشتر", en: "Extended tools and exports" },
      { fa: "پشتیبانی استاندارد", en: "Standard support" }
    ],
    comparison: {
      activeCases: { fa: "۵", en: "5" },
      storage: { fa: "۲ گیگابایت", en: "2 GB" },
      legalTools: { fa: "تکمیلی", en: "Extended" },
      support: { fa: "استاندارد", en: "Standard" },
      workspace: { fa: "شخصی", en: "Personal" }
    }
  },
  {
    id: "earth",
    scope: "individual",
    tone: "earth",
    iconKey: "leaf",
    name: { fa: "زمین", en: "Earth" },
    eyebrow: { fa: "پیشنهاد شهداد", en: "Shahdad recommends" },
    description: { fa: "تعادل حرفه‌ای میان ظرفیت، ابزارها و پشتیبانی.", en: "A professional balance of capacity, tools and support." },
    price: { monthly: 790000, annual: 7584000 },
    behavior: { kind: "checkout", authRequired: true },
    cta: { guest: { fa: "ورود و انتخاب زمین", en: "Sign in for Earth" }, default: { fa: "انتخاب زمین", en: "Choose Earth" }, current: { fa: "پلن فعلی", en: "Current plan" } },
    recommended: true,
    features: [
      { fa: "۲۰ پرونده فعال", en: "20 active cases" },
      { fa: "۱۰ گیگابایت فضای اسناد", en: "10 GB document storage" },
      { fa: "تمام ابزارهای حرفه‌ای شخصی", en: "All professional personal tools" },
      { fa: "پشتیبانی در اولویت", en: "Priority support" }
    ],
    comparison: {
      activeCases: { fa: "۲۰", en: "20" },
      storage: { fa: "۱۰ گیگابایت", en: "10 GB" },
      legalTools: { fa: "حرفه‌ای", en: "Professional" },
      support: { fa: "در اولویت", en: "Priority" },
      workspace: { fa: "شخصی حرفه‌ای", en: "Professional personal" }
    }
  },
  {
    id: "sun",
    scope: "individual",
    tone: "sun",
    iconKey: "sun",
    name: { fa: "خورشید", en: "Sun" },
    eyebrow: { fa: "بالاترین ظرفیت شخصی", en: "Highest personal capacity" },
    description: { fa: "برای استفاده سنگین، چندپرونده‌ای و دسترسی زودتر به قابلیت‌ها.", en: "For high-volume use and earlier feature access." },
    price: { monthly: 1990000, annual: 19104000 },
    behavior: { kind: "checkout", authRequired: true },
    cta: { guest: { fa: "ورود و انتخاب خورشید", en: "Sign in for Sun" }, default: { fa: "انتخاب خورشید", en: "Choose Sun" }, current: { fa: "پلن فعلی", en: "Current plan" } },
    features: [
      { fa: "۱۰۰ پرونده فعال", en: "100 active cases" },
      { fa: "۵۰ گیگابایت فضای اسناد", en: "50 GB document storage" },
      { fa: "بالاترین سطح ابزارهای شخصی", en: "Highest personal tool tier" },
      { fa: "پشتیبانی تخصصی", en: "Specialist support" }
    ],
    comparison: {
      activeCases: { fa: "۱۰۰", en: "100" },
      storage: { fa: "۵۰ گیگابایت", en: "50 GB" },
      legalTools: { fa: "پیشرفته", en: "Advanced" },
      support: { fa: "تخصصی", en: "Specialist" },
      workspace: { fa: "شخصی پرترافیک", en: "High-volume personal" }
    }
  },
  {
    id: "constellation",
    scope: "organization",
    tone: "constellation",
    iconKey: "group",
    name: { fa: "منظومه", en: "Constellation" },
    eyebrow: { fa: "تیم‌ها و کسب‌وکارهای کوچک", en: "Small teams and businesses" },
    description: { fa: "فضای کاری مشترک با نقش‌ها، گزارش و مدیریت متمرکز.", en: "A shared workspace with roles, reports and central control." },
    price: { monthly: 4900000, annual: 47040000 },
    priceNote: { fa: "شامل ۵ عضو", en: "Includes 5 members" },
    behavior: { kind: "checkout", authRequired: true },
    cta: { guest: { fa: "ورود و انتخاب منظومه", en: "Sign in for Constellation" }, default: { fa: "انتخاب منظومه", en: "Choose Constellation" }, current: { fa: "پلن فعلی", en: "Current plan" } },
    features: [
      { fa: "۵ عضو در پلن پایه", en: "5 members included" },
      { fa: "۲۰۰ پرونده فعال تیمی", en: "200 active team cases" },
      { fa: "نقش‌ها و سطح دسترسی", en: "Roles and permissions" },
      { fa: "گزارش فعالیت و پشتیبانی سازمانی", en: "Activity reports and business support" }
    ],
    comparison: {
      members: { fa: "۵ عضو", en: "5 members" },
      activeCases: { fa: "۲۰۰", en: "200" },
      storage: { fa: "۱۰۰ گیگابایت", en: "100 GB" },
      governance: { fa: "نقش‌ها و گزارش فعالیت", en: "Roles and activity reports" },
      support: { fa: "سازمانی", en: "Business" }
    }
  },
  {
    id: "galaxy",
    scope: "organization",
    tone: "galaxy",
    iconKey: "star",
    name: { fa: "کهکشان", en: "Galaxy" },
    eyebrow: { fa: "سازمان‌های بزرگ", en: "Enterprise" },
    description: { fa: "قرارداد، ظرفیت و یکپارچه‌سازی متناسب با ساختار سازمان.", en: "Contract, capacity and integrations tailored to the organization." },
    price: { monthly: null, annual: null },
    priceNote: { fa: "تعرفه اختصاصی", en: "Custom pricing" },
    behavior: { kind: "contact", authRequired: false },
    cta: { guest: { fa: "گفت‌وگو با فروش", en: "Talk to sales" }, default: { fa: "گفت‌وگو با فروش", en: "Talk to sales" }, current: { fa: "پلن فعلی", en: "Current plan" } },
    features: [
      { fa: "تعداد عضو و ظرفیت قراردادی", en: "Contract-based members and capacity" },
      { fa: "کنترل‌های امنیتی و گزارش پیشرفته", en: "Advanced security and reporting" },
      { fa: "یکپارچه‌سازی و استقرار اختصاصی", en: "Custom integrations and deployment" },
      { fa: "مدیر موفقیت و پشتیبانی اختصاصی", en: "Dedicated success and support" }
    ],
    comparison: {
      members: { fa: "توافقی", en: "Custom" },
      activeCases: { fa: "توافقی", en: "Custom" },
      storage: { fa: "توافقی", en: "Custom" },
      governance: { fa: "پیشرفته و سفارشی", en: "Advanced and custom" },
      support: { fa: "اختصاصی", en: "Dedicated" }
    }
  }
];

const planLocalize = (lang, value) => {
  if (value == null) return "";
  if (typeof value === "string" || typeof value === "number") return value;
  return value[lang] || value.en || value.fa || "";
};

const getPlanById = (id) => PLAN_CATALOG.find((plan) => plan.id === id) || null;

const isSubscriptionActive = (subscription) => {
  if (!subscription || !["active", "trialing"].includes(subscription.status)) return false;
  if (!subscription.expiresAt) return true;
  const expiresAt = new Date(subscription.expiresAt).getTime();
  return Number.isNaN(expiresAt) || expiresAt > Date.now();
};

const createDefaultSubscription = () => ({
  planId: "pluto",
  status: "active",
  scope: "account",
  source: "default",
  startedAt: null,
  expiresAt: null
});

const getCurrentPlan = (session) => {
  const fallback = getPlanById("pluto");
  if (!session || session.isGuest || session.authState === "guest") return fallback;
  const subscription = session.subscription;
  if (!isSubscriptionActive(subscription)) return fallback;
  const catalogPlan = getPlanById(subscription.planId);
  if (catalogPlan) return catalogPlan;
  return {
    id: subscription.planId || "active-subscription",
    scope: subscription.scope === "workspace" ? "organization" : "individual",
    tone: "pluto",
    name: subscription.planName || { fa: "اشتراک فعال", en: "Active subscription" }
  };
};

const formatPlanNumber = (value, lang) => {
  const locale = lang === "fa" ? "fa-IR" : "en-US";
  return new Intl.NumberFormat(locale).format(value);
};

const planPricePresentation = (plan, billing, lang) => {
  const currency = planLocalize(lang, PLAN_CENTER_CONFIG.currency);
  if (plan.price.monthly == null) {
    return {
      amount: planLocalize(lang, plan.priceNote),
      cycle: "",
      detail: lang === "fa" ? "پس از بررسی نیازهای سازمان" : "After a needs review"
    };
  }
  if (plan.price.monthly === 0) {
    return {
      amount: lang === "fa" ? "رایگان" : "Free",
      cycle: "",
      detail: lang === "fa" ? "بدون محدودیت زمانی" : "No time limit"
    };
  }
  if (billing === "annual") {
    const yearly = plan.price.annual;
    const monthlyEquivalent = Math.round(yearly / 12);
    return {
      amount: `${formatPlanNumber(monthlyEquivalent, lang)} ${currency}`,
      cycle: lang === "fa" ? "در ماه" : "per month",
      detail: lang === "fa"
        ? `پرداخت سالانه ${formatPlanNumber(yearly, lang)} ${currency}`
        : `${formatPlanNumber(yearly, lang)} ${currency} billed annually`
    };
  }
  return {
    amount: `${formatPlanNumber(plan.price.monthly, lang)} ${currency}`,
    cycle: lang === "fa" ? "در ماه" : "per month",
    detail: plan.priceNote ? planLocalize(lang, plan.priceNote) : (lang === "fa" ? "پرداخت ماهانه" : "Billed monthly")
  };
};

const PlanCenterView = ({ lang = "fa", session, onRequireAuth }) => {
  const effectivePlan = getCurrentPlan(session);
  const panelId = React.useId();
  const individualTabId = React.useId();
  const organizationTabId = React.useId();
  const [audience, setAudience] = React.useState(() => effectivePlan.scope === "organization" ? "organization" : "individual");
  const [billing, setBilling] = React.useState("monthly");
  const [feedback, setFeedback] = React.useState(null);
  const [busyPlanId, setBusyPlanId] = React.useState(null);
  const isGuest = !session || session.isGuest;
  const activePlanId = isGuest ? null : effectivePlan.id;
  const visiblePlans = PLAN_CATALOG.filter((plan) => plan.scope === audience);
  const compareRows = PLAN_CENTER_CONFIG.comparison[audience];

  const changeAudience = (next) => {
    setAudience(next);
    setFeedback(null);
  };

  const handleAudienceKeyDown = (event) => {
    const keys = ["ArrowRight", "ArrowLeft", "Home", "End"];
    if (!keys.includes(event.key)) return;
    event.preventDefault();
    const tabList = event.currentTarget.parentElement;
    const order = ["individual", "organization"];
    const currentIndex = order.indexOf(audience);
    let nextIndex = currentIndex;
    if (event.key === "Home") nextIndex = 0;
    if (event.key === "End") nextIndex = order.length - 1;
    if (event.key === "ArrowRight") nextIndex = (currentIndex + (lang === "fa" ? -1 : 1) + order.length) % order.length;
    if (event.key === "ArrowLeft") nextIndex = (currentIndex + (lang === "fa" ? 1 : -1) + order.length) % order.length;
    const next = order[nextIndex];
    changeAudience(next);
    window.requestAnimationFrame(() => {
      tabList?.querySelector(`[data-audience="${next}"]`)?.focus();
    });
  };

  const handleAction = async (plan) => {
    if (plan.id === activePlanId) return;
    if (plan.behavior.authRequired && isGuest) {
      setFeedback({
        kind: "auth",
        title: lang === "fa" ? "ابتدا حساب رایگان خود را بسازید" : "Create your free account first",
        text: lang === "fa" ? "انتخاب شما حفظ می‌شود؛ فعال‌سازی پلن فقط پس از ورود و پرداخت معتبر انجام خواهد شد." : "Your choice is preserved; activation happens only after sign-in and verified payment."
      });
      if (onRequireAuth) onRequireAuth(plan.id);
      return;
    }

    if (plan.behavior.kind === "free") {
      setFeedback({
        kind: "success",
        title: lang === "fa" ? "پلوتون پلن فعلی شماست" : "Pluto is your current plan",
        text: lang === "fa" ? "برای پلن رایگان پرداختی انجام نمی‌شود." : "The free plan does not require payment."
      });
      return;
    }

    const flow = plan.behavior.kind === "contact" ? PLAN_CENTER_CONFIG.sales : PLAN_CENTER_CONFIG.checkout;
    const handler = window[flow.handlerName];
    if (flow.status !== "live" || typeof handler !== "function") {
      setFeedback({
        kind: "info",
        title: plan.behavior.kind === "contact"
          ? (lang === "fa" ? "ارتباط با فروش هنوز متصل نشده است" : "Sales contact is not connected yet")
          : (lang === "fa" ? "درگاه پرداخت هنوز متصل نشده است" : "Checkout is not connected yet"),
        text: lang === "fa"
          ? `پلن «${planLocalize(lang, plan.name)}» برای شما انتخاب شد، اما هیچ پرداخت یا تغییری در اشتراک ثبت نشد.`
          : `${planLocalize(lang, plan.name)} was selected, but no payment or subscription change was recorded.`
      });
      return;
    }

    setBusyPlanId(plan.id);
    setFeedback(null);
    try {
      await handler({ planId: plan.id, billing, source: "plan-center" });
    } catch (error) {
      setFeedback({
        kind: "error",
        title: lang === "fa" ? "شروع فرآیند ممکن نشد" : "Could not start the process",
        text: lang === "fa" ? "لطفاً دوباره تلاش کنید یا با پشتیبانی تماس بگیرید." : "Please try again or contact support."
      });
    } finally {
      setBusyPlanId(null);
    }
  };

  const currentLabel = isGuest
    ? (lang === "fa" ? "بدون حساب — شروع از پلوتون" : "No account — starts with Pluto")
    : `${lang === "fa" ? "پلن فعلی" : "Current plan"}: ${planLocalize(lang, effectivePlan.name)}`;

  return (
    <div className="pricing-center">
      <section className="pricing-hero" aria-labelledby="pricing-title">
        <div className="pricing-hero-copy">
          <span className="pricing-kicker"><Ic.shieldCheck size={14} /> {lang === "fa" ? "پلن‌های شهداد" : "Shahdad plans"}</span>
          <h2 id="pricing-title">{lang === "fa" ? "از یک شروع رایگان تا زیرساخت سازمانی" : "From a free start to enterprise infrastructure"}</h2>
          <p>{lang === "fa" ? "پلنی را انتخاب کنید که با حجم پرونده‌ها، اسناد و شیوه کار شما هماهنگ است." : "Choose the plan that matches your matters, documents and workflow."}</p>
        </div>
        <div className="pricing-current" aria-label={currentLabel}>
          <span>{lang === "fa" ? "وضعیت حساب" : "Account status"}</span>
          <strong>{currentLabel}</strong>
        </div>
      </section>

      <div className="pricing-controls">
        <div className="pricing-audience" role="tablist" aria-label={lang === "fa" ? "نوع پلن" : "Plan type"}>
          <button
            type="button"
            role="tab"
            id={individualTabId}
            aria-controls={panelId}
            aria-selected={audience === "individual"}
            tabIndex={audience === "individual" ? 0 : -1}
            data-audience="individual"
            className={audience === "individual" ? "active" : ""}
            onClick={() => changeAudience("individual")}
            onKeyDown={handleAudienceKeyDown}
          >
            <Ic.user size={15} /> {lang === "fa" ? "شخصی" : "Individual"}
          </button>
          <button
            type="button"
            role="tab"
            id={organizationTabId}
            aria-controls={panelId}
            aria-selected={audience === "organization"}
            tabIndex={audience === "organization" ? 0 : -1}
            data-audience="organization"
            className={audience === "organization" ? "active" : ""}
            onClick={() => changeAudience("organization")}
            onKeyDown={handleAudienceKeyDown}
          >
            <Ic.building size={15} /> {lang === "fa" ? "سازمانی" : "Organization"}
          </button>
        </div>
        <div className="pricing-cycle" role="group" aria-label={lang === "fa" ? "دوره پرداخت" : "Billing cycle"}>
          <button type="button" aria-pressed={billing === "monthly"} className={billing === "monthly" ? "active" : ""} onClick={() => setBilling("monthly")}>{lang === "fa" ? "ماهانه" : "Monthly"}</button>
          <button type="button" aria-pressed={billing === "annual"} className={billing === "annual" ? "active" : ""} onClick={() => setBilling("annual")}>
            {lang === "fa" ? "سالانه" : "Annual"}
            <small>{lang === "fa" ? `${formatPlanNumber(PLAN_CENTER_CONFIG.annualSavingsPercent, lang)}٪ کمتر` : `${PLAN_CENTER_CONFIG.annualSavingsPercent}% less`}</small>
          </button>
        </div>
      </div>

      {PLAN_CENTER_CONFIG.pricingStatus !== "live" &&
        <div className="pricing-draft-note" role="note">
          <Ic.info size={16} />
          <span>
            <b>{lang === "fa" ? "تعرفه و امکانات پیشنهادی" : "Proposed pricing and features"}</b>
            {lang === "fa" ? " این نسخه برای ارزیابی طراحی است و تا اتصال پرداخت، خرید واقعی انجام نمی‌شود." : " This version is for design evaluation; no purchase occurs until checkout is connected."}
          </span>
        </div>
      }

      <div
        className={`pricing-grid pricing-grid-${audience}`}
        id={panelId}
        role="tabpanel"
        aria-labelledby={audience === "individual" ? individualTabId : organizationTabId}
      >
        {visiblePlans.map((plan) => {
          const Icon = Ic[plan.iconKey] || Ic.shieldCheck;
          const price = planPricePresentation(plan, billing, lang);
          const isCurrent = plan.id === activePlanId;
          const isBusy = busyPlanId === plan.id;
          const cta = isCurrent ? plan.cta.current : isGuest ? plan.cta.guest : plan.cta.default;
          return (
            <article className={`pricing-card tone-${plan.tone}${plan.recommended ? " recommended" : ""}${isCurrent ? " current" : ""}`} key={plan.id} data-plan-id={plan.id}>
              {plan.recommended && <span className="pricing-recommended">{lang === "fa" ? "پیشنهاد شهداد" : "Recommended"}</span>}
              <div className="pricing-card-head">
                <span className="pricing-plan-icon"><Icon size={22} /></span>
                <div>
                  <span>{planLocalize(lang, plan.eyebrow)}</span>
                  <h3>{planLocalize(lang, plan.name)}</h3>
                </div>
              </div>
              <p className="pricing-description">{planLocalize(lang, plan.description)}</p>
              <div className="pricing-price">
                <strong><bdi>{price.amount}</bdi></strong>
                {price.cycle && <span>{price.cycle}</span>}
                <small>{price.detail}</small>
              </div>
              <div className="pricing-divider" />
              <ul className="pricing-features">
                {plan.features.map((feature, index) =>
                  <li key={index}><span><Ic.shieldCheck size={14} /></span>{planLocalize(lang, feature)}</li>
                )}
              </ul>
              <button
                type="button"
                className={`pricing-cta${plan.recommended ? " primary" : ""}`}
                onClick={() => handleAction(plan)}
                disabled={isCurrent || isBusy}
                aria-busy={isBusy}
                data-plan-action={plan.id}
              >
                {isBusy ? (lang === "fa" ? "در حال اتصال…" : "Connecting…") : planLocalize(lang, cta)}
                {!isCurrent && <Ic.chevL size={15} />}
              </button>
            </article>
          );
        })}
      </div>

      {feedback &&
        <div className={`pricing-feedback ${feedback.kind}`} role="status" aria-live="polite">
          <span className="pricing-feedback-icon">{feedback.kind === "error" ? <Ic.shieldAlert size={18} /> : <Ic.info size={18} />}</span>
          <div><strong>{feedback.title}</strong><p>{feedback.text}</p></div>
          <button type="button" onClick={() => setFeedback(null)} aria-label={lang === "fa" ? "بستن پیام" : "Dismiss message"}><Ic.close size={15} /></button>
        </div>
      }

      <section className="pricing-compare" aria-labelledby="pricing-compare-title">
        <div className="pricing-section-head">
          <div>
            <span>{lang === "fa" ? "مقایسه سریع" : "Quick comparison"}</span>
            <h3 id="pricing-compare-title">{lang === "fa" ? "تفاوت پلن‌ها در یک نگاه" : "Plan differences at a glance"}</h3>
          </div>
          <small>{lang === "fa" ? "تمام مبلغ‌ها به تومان است." : "All prices are in Toman."}</small>
        </div>
        <div className="pricing-table-wrap" tabIndex="0" aria-label={lang === "fa" ? "جدول مقایسه پلن‌ها" : "Plan comparison table"}>
          <table className="pricing-table">
            <caption>{lang === "fa" ? "مقایسه ظرفیت و خدمات پلن‌های شهداد" : "Shahdad plan capacity and service comparison"}</caption>
            <thead>
              <tr>
                <th scope="col">{lang === "fa" ? "امکانات" : "Features"}</th>
                {visiblePlans.map((plan) => <th scope="col" key={plan.id}>{planLocalize(lang, plan.name)}</th>)}
              </tr>
            </thead>
            <tbody>
              {compareRows.map((row) =>
                <tr key={row.key}>
                  <th scope="row">{planLocalize(lang, row.label)}</th>
                  {visiblePlans.map((plan) => <td key={plan.id}>{planLocalize(lang, plan.comparison[row.key])}</td>)}
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </section>

      <div className="pricing-footnote">
        <span><Ic.shieldCheck size={15} /> {lang === "fa" ? "فعال‌سازی اشتراک فقط پس از تأیید پرداخت سمت سرور" : "Subscriptions activate only after server-side payment confirmation"}</span>
        <span>{lang === "fa" ? "مالیات، شرایط پرداخت و ظرفیت نهایی در مرحله خرید نمایش داده می‌شود." : "Taxes, terms and final capacity are shown at checkout."}</span>
      </div>
    </div>
  );
};

Object.assign(window, {
  PLAN_CENTER_CONFIG,
  PLAN_CATALOG,
  PlanCenterView,
  ShahdadPlans: {
    config: PLAN_CENTER_CONFIG,
    catalog: PLAN_CATALOG,
    localize: planLocalize,
    getById: getPlanById,
    getCurrentPlan,
    isSubscriptionActive,
    createDefaultSubscription
  }
});