/* Upgrade panel shown in place of a gated view when the org's plan doesn't
   include it. The button starts a real Stripe Checkout via the platform API. */
function UpgradePanel({ feature }) {
  const LABELS = { campaigns: "Campaigns", pulse_screener: "the Pulse Desk screener", replies: "the Reply Engine", team: "team seats", analytics_full: "full analytics" };
  const label = LABELS[feature] || "This feature";
  const [busy, setBusy] = React.useState(false);
  const [err, setErr] = React.useState(null);

  const upgrade = async () => {
    setErr(null); setBusy(true);
    try {
      await window.LeapAPI.checkout(window.LeapGate.orgId(), "pro", "monthly");
      // checkout() navigates away on success; if we're still here, it failed.
      setBusy(false);
    } catch (e) {
      setBusy(false);
      setErr(e.status === 402 || e.status === 403 ? "You don't have permission to change billing." : "Couldn't start checkout. Try again.");
    }
  };

  return (
    <div style={{ maxWidth: 520, margin: "56px auto", textAlign: "center", background: "var(--surface-card, #fff)", border: "1px solid var(--border, #E5E7EB)", borderRadius: 16, padding: 32 }}>
      <span style={{ width: 56, height: 56, borderRadius: 15, background: "var(--leap-coral-tint, #FFF1EC)", display: "inline-grid", placeItems: "center" }}>
        <Icon name="lock" size={24} color="var(--leap-coral, #F97316)" />
      </span>
      <h2 style={{ fontSize: 20, fontWeight: 700, margin: "14px 0 6px" }}>{cap(label)} is on a paid plan</h2>
      <p style={{ fontSize: 13, color: "var(--fg3, #6B7280)", marginBottom: 18 }}>
        Upgrade to unlock {label}. Everything you've set up stays exactly as it is.
      </p>
      <Button variant="primary" icon="sparkles" onClick={upgrade} disabled={busy}>{busy ? "Redirecting…" : "Upgrade plan"}</Button>
      {err && <p style={{ fontSize: 12, color: "var(--danger, #DC2626)", marginTop: 12 }}>{err}</p>}
    </div>
  );
}
function cap(s) { return s.charAt(0).toUpperCase() + s.slice(1); }
window.UpgradePanel = UpgradePanel;