From 3c3ffa12488d2b7c28e84d6a885df842f4750026 Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Fri, 13 Mar 2026 09:25:37 +0800
Subject: [PATCH] feat: add UnlockProOverlay component for displaying
 subscription details, features, and points-based discounts.

---
 .../subscription/UnlockProOverlay.tsx         | 472 ++++++++++++------
 1 file changed, 308 insertions(+), 164 deletions(-)

diff --git a/frontend/components/subscription/UnlockProOverlay.tsx b/frontend/components/subscription/UnlockProOverlay.tsx
index 62d4ae3a..45c3d8cf 100644
--- a/frontend/components/subscription/UnlockProOverlay.tsx
+++ b/frontend/components/subscription/UnlockProOverlay.tsx
@@ -10,9 +10,13 @@ import {
   Loader2,
   Lock,
   MessageSquare,
+  Radar,
+  Send,
+  Sparkles,
   TrendingUp,
   Wallet,
   X,
+  Zap,
 } from "lucide-react";
 
 export type UnlockProBilling = {
@@ -42,6 +46,19 @@ type UnlockProOverlayProps = {
   telegramGroupUrl?: string;
 };
 
+const features = {
+  "zh-CN": [
+    { icon: TrendingUp, label: "15天高精度趋势预报" },
+    { icon: Radar, label: "实时多源雷达图" },
+    { icon: Send, label: "全平台智能气象推送" },
+  ],
+  "en-US": [
+    { icon: TrendingUp, label: "15-day precision forecast" },
+    { icon: Radar, label: "Real-time radar panel" },
+    { icon: Send, label: "Cross-platform alert push" },
+  ],
+};
+
 export function UnlockProOverlay({
   points,
   planPriceUsd,
@@ -62,227 +79,354 @@ export function UnlockProOverlay({
 
   const title = isEn ? "Unlock PolyWeather Pro" : "解锁 PolyWeather Pro";
   const subtitle = isEn
-    ? "Get high-precision weather intelligence and full-platform alerts."
-    : "获取全球最精准的高精度气象推送";
+    ? "High-precision weather intelligence, delivered everywhere."
+    : "全球最精准的高精度气象推送，全平台覆盖";
 
   const finalPayLabel =
     payLabel || (isEn ? "Subscribe & Activate" : "立即订阅并激活服务");
 
+  const featureList = features[locale] ?? features["zh-CN"];
+
+  const canUsePoints = billing.pointsEnabled && billing.isEligible;
+
   return (
-    <div className="relative w-full max-w-[860px] max-h-[calc(100dvh-2.5rem)] overflow-x-hidden overflow-y-auto rounded-[28px] border border-white/10 bg-gradient-to-b from-[#1a2740] via-[#14233b] to-[#0f172a] p-5 md:p-8 lg:p-10 shadow-[0_0_90px_-24px_rgba(59,130,246,0.35)]">
-      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_20%_0%,rgba(59,130,246,0.2),transparent_40%),radial-gradient(circle_at_80%_100%,rgba(99,102,241,0.18),transparent_45%)]" />
-      <div className="absolute left-4 top-4 rounded-full border border-cyan-400/30 bg-cyan-400/10 px-2 py-0.5 text-[10px] font-bold tracking-[0.08em] text-cyan-300">
-        UI v0313
+    <div className="relative w-full max-w-[820px] overflow-hidden rounded-[32px] border border-white/[0.08] bg-[#0c1220] shadow-[0_0_0_1px_rgba(255,255,255,0.04),0_32px_80px_-16px_rgba(0,0,0,0.7),0_0_120px_-40px_rgba(99,130,246,0.25)]">
+      {/* Ambient background */}
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute -left-32 -top-32 h-72 w-72 rounded-full bg-blue-600/20 blur-[80px]" />
+        <div className="absolute -bottom-24 -right-16 h-64 w-64 rounded-full bg-indigo-600/15 blur-[80px]" />
+        <div className="absolute left-1/2 top-0 h-px w-3/4 -translate-x-1/2 bg-gradient-to-r from-transparent via-blue-400/30 to-transparent" />
       </div>
+
+      {/* Close button */}
       {onClose && (
         <button
           onClick={onClose}
-          className="absolute right-5 top-5 z-20 rounded-full bg-white/8 p-2 text-slate-500 transition-all hover:bg-white/15 hover:text-white active:scale-90"
+          className="absolute right-4 top-4 z-20 flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/5 text-slate-500 backdrop-blur-sm transition-all hover:border-white/20 hover:bg-white/10 hover:text-white active:scale-90"
           title={isEn ? "Close" : "关闭"}
         >
-          <X size={18} />
+          <X size={16} />
         </button>
       )}
 
-      <div className="relative z-10">
-        <div className="mx-auto mb-5 flex max-w-[580px] flex-col items-center text-center md:mb-7">
-          <div className="mb-4 flex h-14 w-14 rotate-12 items-center justify-center rounded-3xl bg-gradient-to-tr from-yellow-500 via-amber-400 to-orange-500 shadow-2xl shadow-yellow-500/25 md:mb-5 md:h-16 md:w-16">
-            <Crown className="h-7 w-7 text-white drop-shadow-lg md:h-8 md:w-8" />
+      <div className="relative z-10 p-6 md:p-8 lg:p-10">
+        {/* Header */}
+        <div className="mb-8 flex flex-col items-center text-center">
+          {/* Badge */}
+          <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-amber-400/25 bg-amber-400/10 px-3.5 py-1.5 backdrop-blur-sm">
+            <Crown size={13} className="text-amber-400" />
+            <span className="text-[11px] font-bold uppercase tracking-[0.14em] text-amber-300">
+              Pro
+            </span>
           </div>
-          <h2 className="text-3xl font-black leading-[1.06] tracking-tight text-white md:text-5xl">
+
+          <h2 className="bg-gradient-to-b from-white via-white to-slate-300 bg-clip-text text-4xl font-black leading-[1.05] tracking-tight text-transparent md:text-5xl lg:text-[3.25rem]">
             {title}
           </h2>
-          <p className="mt-2 max-w-[520px] text-sm leading-5 text-slate-300 md:text-base md:leading-6">
+          <p className="mt-3 max-w-[440px] text-sm leading-relaxed text-slate-400 md:text-[15px]">
             {subtitle}
           </p>
         </div>
-        <div className="grid grid-cols-1 gap-4 text-left md:grid-cols-2">
-          <div className="relative flex min-h-[172px] flex-col justify-between rounded-3xl border border-blue-500/45 bg-blue-600/10 p-5 md:min-h-[190px] md:p-6">
-            <div className="pointer-events-none absolute right-0 top-0 h-24 w-24 translate-x-1/3 -translate-y-1/3 rounded-full bg-blue-500/15 blur-2xl" />
-            <div className="relative z-10">
-              <span className="block text-[11px] font-bold uppercase tracking-[0.12em] text-blue-300">
-                STANDARD PRO
-              </span>
-              <div className="mt-2 flex items-baseline gap-1">
-                <span className="text-[42px] font-black leading-none text-white md:text-[46px]">
-                  ${planPriceUsd.toFixed(2)}
+
+        {/* Main content grid */}
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-[1fr_1fr]">
+          {/* Left: Plan card */}
+          <div className="relative overflow-hidden rounded-2xl border border-blue-500/20 bg-gradient-to-br from-blue-600/10 via-blue-500/5 to-transparent p-5 md:p-6">
+            {/* Inner glow */}
+            <div className="pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full bg-blue-500/20 blur-2xl" />
+
+            <div className="relative">
+              <div className="flex items-center justify-between">
+                <span className="inline-flex items-center gap-1.5 rounded-md bg-blue-500/15 px-2 py-1 text-[10px] font-bold uppercase tracking-[0.14em] text-blue-300">
+                  <Zap size={10} />
+                  Standard Pro
                 </span>
-                <span className="text-sm font-semibold text-slate-400">
+                <span className="text-[11px] text-slate-500">
                   / {isEn ? "mo" : "月"}
                 </span>
               </div>
-              <ul className="mt-4 space-y-2">
-                {(isEn
-                  ? [
-                      "15-day high precision trend",
-                      "Realtime radar panel",
-                      "Cross-platform alert push",
-                    ]
-                  : ["15天趋势预报", "实时雷达图", "全平台推送"]
-                ).map((item, i) => (
-                  <li
-                    key={i}
-                    className="flex items-center gap-2 text-[12px] text-slate-300"
-                  >
-                    <CheckCircle2 size={13} className="text-blue-400" /> {item}
-                  </li>
+
+              <div className="mt-3 flex items-baseline gap-1">
+                <span className="text-[52px] font-black leading-none tracking-tight text-white">
+                  ${planPriceUsd.toFixed(2)}
+                </span>
+              </div>
+
+              <div className="mt-5 space-y-2.5">
+                {featureList.map(({ icon: Icon, label }, i) => (
+                  <div key={i} className="flex items-center gap-2.5">
+                    <div className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md bg-blue-500/20">
+                      <CheckCircle2 size={12} className="text-blue-400" />
+                    </div>
+                    <span className="text-[13px] text-slate-300">{label}</span>
+                  </div>
                 ))}
-              </ul>
+              </div>
             </div>
           </div>
 
-          {billing.pointsEnabled && billing.isEligible ? (
+          {/* Right: Points card */}
+          {canUsePoints ? (
             <div
-              className={`flex min-h-[172px] flex-col justify-between rounded-3xl border p-5 transition-all md:min-h-[190px] md:p-6 ${usePoints ? "border-indigo-500/55 bg-indigo-500/12 shadow-inner shadow-indigo-500/8" : "border-white/10 bg-white/6"}`}
+              className={`relative overflow-hidden rounded-2xl border p-5 transition-all duration-300 md:p-6 ${
+                usePoints
+                  ? "border-emerald-500/30 bg-gradient-to-br from-emerald-600/10 via-emerald-500/5 to-transparent"
+                  : "border-white/[0.08] bg-white/[0.03]"
+              }`}
             >
-              <div className="mb-4 flex items-center justify-between">
-                <div className="flex items-center gap-2">
-                  <div
-                    className={`rounded-lg p-1.5 ${usePoints ? "bg-indigo-500 text-white" : "bg-slate-700 text-slate-400"}`}
-                  >
-                    <Coins size={14} />
+              <div
+                className={`pointer-events-none absolute -right-8 -top-8 h-32 w-32 rounded-full blur-2xl transition-all duration-300 ${
+                  usePoints ? "bg-emerald-500/15" : "bg-transparent"
+                }`}
+              />
+
+              <div className="relative">
+                {/* Header row */}
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <div
+                      className={`flex h-7 w-7 items-center justify-center rounded-lg transition-colors duration-200 ${
+                        usePoints
+                          ? "bg-emerald-500 text-white"
+                          : "bg-slate-800 text-slate-500"
+                      }`}
+                    >
+                      <Coins size={14} />
+                    </div>
+                    <span
+                      className={`text-[11px] font-bold uppercase tracking-[0.12em] transition-colors duration-200 ${
+                        usePoints ? "text-emerald-300" : "text-slate-500"
+                      }`}
+                    >
+                      {isEn ? "Points Credit" : "积分抵扣"}
+                    </span>
                   </div>
-                  <span className="text-[11px] font-bold uppercase tracking-[0.12em] text-slate-300">
-                    {isEn ? "Points Credit" : "积分抵扣"}
+
+                  {/* Toggle */}
+                  <button
+                    onClick={onToggleUsePoints}
+                    className={`relative h-6 w-11 flex-shrink-0 cursor-pointer rounded-full transition-all duration-300 ${
+                      usePoints ? "bg-emerald-500" : "bg-slate-700"
+                    }`}
+                  >
+                    <div
+                      className={`absolute top-1 h-4 w-4 rounded-full bg-white shadow transition-all duration-200 ${
+                        usePoints ? "right-1" : "left-1"
+                      }`}
+                    />
+                  </button>
+                </div>
+
+                {/* Discount display */}
+                <div className="mt-4 flex items-baseline gap-1.5">
+                  <span
+                    className={`text-[48px] font-black leading-none tracking-tight transition-colors duration-300 ${
+                      usePoints ? "text-emerald-400" : "text-slate-600"
+                    }`}
+                  >
+                    -${billing.discountAmount.toFixed(2)}
+                  </span>
+                  <span className="mb-1 text-[10px] font-bold uppercase tracking-[0.1em] text-slate-600">
+                    off
+                  </span>
+                </div>
+
+                <p className="mt-3 text-[12px] leading-5 text-slate-400">
+                  {usePoints
+                    ? isEn
+                      ? `Using ${billing.pointsUsed} pts · saves $${billing.discountAmount.toFixed(2)}`
+                      : `已消耗 ${billing.pointsUsed} 积分 · 省 $${billing.discountAmount.toFixed(2)}`
+                    : isEn
+                      ? `Toggle to save up to $${billing.maxDiscountUsd.toFixed(2)}`
+                      : `开启可最多抵扣 $${billing.maxDiscountUsd.toFixed(2)}`}
+                </p>
+
+                {/* Points balance */}
+                <div className="mt-4 flex items-center gap-1.5">
+                  <Sparkles size={11} className="text-slate-600" />
+                  <span className="text-[11px] text-slate-500">
+                    {isEn ? "Your balance:" : "当前积分："}{" "}
+                    <span
+                      className={`font-bold ${
+                        usePoints ? "text-emerald-400" : "text-slate-400"
+                      }`}
+                    >
+                      {points}
+                    </span>
                   </span>
                 </div>
-                <button
-                  onClick={onToggleUsePoints}
-                  className={`relative h-6 w-11 rounded-full transition-all ${usePoints ? "bg-indigo-500" : "bg-slate-700"}`}
-                >
-                  <div
-                    className={`absolute top-1 h-4 w-4 rounded-full bg-white shadow-sm transition-all ${usePoints ? "right-1" : "left-1"}`}
-                  />
-                </button>
               </div>
-              <div className="flex items-end gap-1">
-                <span
-                  className={`text-[42px] font-black leading-none md:text-[46px] ${usePoints ? "text-emerald-400" : "text-slate-500"}`}
-                >
-                  -${billing.discountAmount.toFixed(2)}
-                </span>
-                <span className="pb-1 text-[11px] font-bold uppercase tracking-[0.08em] text-slate-500">
-                  DISCOUNT
-                </span>
-              </div>
-              <p className="mt-4 text-[12px] leading-6 text-slate-300">
-                {usePoints
-                  ? isEn
-                    ? `Using ${billing.pointsUsed} points from your account`
-                    : `已自动消耗账户内 ${billing.pointsUsed} 积分`
-                  : isEn
-                    ? `Enable to save up to $${billing.maxDiscountUsd.toFixed(2)}`
-                    : `开启后最多可抵扣 $${billing.maxDiscountUsd.toFixed(2)}`}
-              </p>
             </div>
           ) : (
-            <div className="group flex min-h-[172px] flex-col justify-between rounded-3xl border border-dashed border-white/20 bg-white/5 p-5 transition-all hover:border-blue-500/35 md:min-h-[190px] md:p-6">
-              <div>
-                <div className="mb-3 flex items-center gap-2">
-                  <div className="rounded-lg bg-slate-800 p-1.5 text-slate-500 transition-colors group-hover:text-blue-400">
-                    <MessageSquare size={14} />
+            /* Not eligible / points disabled */
+            <div className="group relative overflow-hidden rounded-2xl border border-dashed border-white/10 bg-white/[0.025] p-5 transition-all duration-300 hover:border-white/20 md:p-6">
+              <div className="relative flex h-full flex-col">
+                {/* Top */}
+                <div>
+                  <div className="mb-3 flex items-center gap-2">
+                    <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-slate-800 text-slate-600 transition-colors duration-200 group-hover:bg-slate-700 group-hover:text-slate-400">
+                      <Coins size={14} />
+                    </div>
+                    <span className="text-[10px] font-bold uppercase tracking-[0.14em] text-slate-600">
+                      {!billing.pointsEnabled
+                        ? isEn
+                          ? "Points Disabled"
+                          : "积分未开启"
+                        : isEn
+                          ? "Insufficient Points"
+                          : "积分不足"}
+                    </span>
                   </div>
-                  <span className="text-[11px] font-bold uppercase tracking-[0.1em] text-slate-500">
+
+                  <h4 className="text-base font-bold text-slate-200">
+                    {isEn ? "Earn Points & Save" : "赚取积分，抵扣订阅"}
+                  </h4>
+                  <p className="mt-1.5 text-[12px] leading-5 text-slate-500">
                     {!billing.pointsEnabled
                       ? isEn
-                        ? "Points Disabled"
-                        : "积分未开启"
+                        ? "Points redemption is unavailable for this plan."
+                        : "当前套餐暂不支持积分抵扣。"
                       : isEn
-                        ? "Not Enough Points"
-                        : "积分不足"}
-                  </span>
+                        ? `Need ${billing.pointsPerUsd} pts minimum. You have: ${points}`
+                        : `至少需要 ${billing.pointsPerUsd} 积分，当前仅有 ${points}`}
+                  </p>
                 </div>
-                <h4 className="mb-2 text-lg font-bold text-white">
-                  {isEn ? "Earn Credits in Community" : "活跃赚取抵扣"}
-                </h4>
-                <p className="text-[13px] leading-6 text-slate-300">
-                  {!billing.pointsEnabled
-                    ? isEn
-                      ? "Points redemption is currently unavailable for this plan."
-                      : "当前套餐未开启积分抵扣。"
-                    : isEn
-                      ? `Need at least ${billing.pointsPerUsd} points. Current: ${points}`
-                      : `需要至少 ${billing.pointsPerUsd} 积分，当前 ${points}`}
-                </p>
-              </div>
-              <div className="mt-5 flex items-center justify-center text-[11px] font-bold text-blue-400">
-                {telegramGroupUrl ? (
-                  <Link
-                    href={telegramGroupUrl}
-                    target="_blank"
-                    className="inline-flex items-center gap-1.5"
-                  >
-                    <span>{isEn ? "Open Telegram" : "前往电报群"}</span>
-                    <TrendingUp size={13} />
-                  </Link>
-                ) : (
-                  <span className="inline-flex items-center gap-1.5">
-                    {isEn ? "Open Telegram" : "前往电报群"}
-                    <TrendingUp size={13} />
-                  </span>
+
+                {/* Progress bar */}
+                {billing.pointsEnabled && (
+                  <div className="mt-4">
+                    <div className="mb-1.5 flex items-center justify-between text-[10px] text-slate-600">
+                      <span>
+                        {points} / {billing.pointsPerUsd}
+                      </span>
+                      <span>
+                        {Math.min(
+                          100,
+                          Math.round((points / billing.pointsPerUsd) * 100),
+                        )}
+                        %
+                      </span>
+                    </div>
+                    <div className="h-1 w-full overflow-hidden rounded-full bg-slate-800">
+                      <div
+                        className="h-full rounded-full bg-gradient-to-r from-blue-600 to-indigo-500 transition-all duration-500"
+                        style={{
+                          width: `${Math.min(100, (points / billing.pointsPerUsd) * 100)}%`,
+                        }}
+                      />
+                    </div>
+                  </div>
                 )}
+
+                {/* Bottom CTA */}
+                <div className="mt-auto pt-4">
+                  {telegramGroupUrl ? (
+                    <Link
+                      href={telegramGroupUrl}
+                      target="_blank"
+                      className="inline-flex items-center gap-1.5 text-[11px] font-semibold text-blue-400 transition-colors hover:text-blue-300"
+                    >
+                      <MessageSquare size={12} />
+                      {isEn ? "Join Telegram to earn" : "加入电报群赚取积分"}
+                      <ArrowRight size={11} />
+                    </Link>
+                  ) : (
+                    <span className="inline-flex items-center gap-1.5 text-[11px] text-slate-600">
+                      <MessageSquare size={12} />
+                      {isEn
+                        ? "Join community to earn points"
+                        : "加入社群即可赚取积分"}
+                    </span>
+                  )}
+                </div>
               </div>
             </div>
           )}
         </div>
 
-        <div className="mt-6 border-t border-white/10 pt-4 md:mt-7 md:pt-5">
-          <div className="flex flex-wrap items-end justify-between gap-3 px-1">
-            <span className="text-base font-medium text-slate-300">
-              {isEn ? "Total Due" : "应付总计"}
-            </span>
-            <div className="text-right">
-              <span className="font-mono text-3xl font-black leading-none tracking-tight text-white md:text-4xl">
+        {/* Payment summary */}
+        <div className="mt-5 overflow-hidden rounded-2xl border border-white/[0.07] bg-white/[0.03]">
+          {/* Summary row */}
+          <div className="flex items-center justify-between px-5 py-4">
+            <div className="space-y-0.5">
+              <p className="text-[11px] font-semibold uppercase tracking-[0.12em] text-slate-600">
+                {isEn ? "Total Due Today" : "今日应付"}
+              </p>
+              {billing.discountAmount > 0 && usePoints && (
+                <p className="text-[11px] text-slate-600 line-through">
+                  ${planPriceUsd.toFixed(2)} USD
+                </p>
+              )}
+            </div>
+            <div className="flex items-baseline gap-1.5">
+              <span className="font-mono text-[36px] font-black leading-none tracking-tight text-white md:text-[42px]">
                 ${billing.finalPrice.toFixed(2)}
               </span>
-              <span className="ml-2 font-mono text-xs uppercase tracking-[0.12em] text-slate-500 md:text-sm">
+              <span className="font-mono text-xs font-bold uppercase tracking-[0.1em] text-slate-500">
                 USD
               </span>
             </div>
           </div>
 
-          <button
-            onClick={onPay}
-            disabled={payBusy}
-            className="mt-3 flex w-full items-center justify-center gap-3 rounded-2xl bg-gradient-to-r from-blue-600 via-indigo-600 to-indigo-700 py-3.5 text-lg font-black text-white shadow-2xl shadow-blue-600/30 transition-all hover:from-blue-500 hover:to-indigo-500 active:scale-[0.99] disabled:opacity-70 md:mt-4 md:py-4"
-          >
-            {payBusy ? (
-              <Loader2 size={20} className="animate-spin" />
-            ) : (
-              <>
-                <Wallet size={20} />
-                {finalPayLabel}
-                <ArrowRight
-                  size={20}
-                  className="transition-transform group-hover:translate-x-1"
-                />
-              </>
-            )}
-          </button>
-
-          <div className="mt-4 flex items-center justify-center gap-5 text-[10px] font-bold uppercase tracking-[0.12em] text-slate-600 md:gap-6">
-            <span className="flex items-center gap-1.5">
-              <Lock size={12} /> Secure Payment
-            </span>
-            <Link
-              href={faqHref}
-              className="flex items-center gap-1.5 transition-colors hover:text-slate-400"
+          {/* CTA Button */}
+          <div className="border-t border-white/[0.06] p-3">
+            <button
+              onClick={onPay}
+              disabled={payBusy}
+              className="group relative flex w-full items-center justify-center gap-3 overflow-hidden rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 px-6 py-3.5 text-[15px] font-bold text-white shadow-[0_0_0_1px_rgba(99,102,241,0.5),0_8px_32px_-8px_rgba(99,102,241,0.6)] transition-all duration-200 hover:from-blue-500 hover:to-indigo-500 hover:shadow-[0_0_0_1px_rgba(99,102,241,0.7),0_12px_40px_-8px_rgba(99,102,241,0.7)] active:scale-[0.99] disabled:cursor-not-allowed disabled:opacity-60"
             >
-              <BellRing size={12} /> Subscription FAQ
-            </Link>
-          </div>
+              {/* Shimmer */}
+              <div className="pointer-events-none absolute inset-0 -translate-x-full skew-x-12 bg-gradient-to-r from-transparent via-white/10 to-transparent transition-transform duration-700 group-hover:translate-x-full" />
 
-          {errorText ? (
-            <div className="mt-4 rounded-lg border border-rose-500/20 bg-rose-500/10 p-2 text-xs text-rose-400">
-              {errorText}
-            </div>
-          ) : null}
-          {infoText ? (
-            <div className="mt-4 rounded-lg border border-emerald-500/20 bg-emerald-500/10 p-2 text-xs text-emerald-400">
-              {infoText}
-            </div>
-          ) : null}
+              {payBusy ? (
+                <Loader2 size={18} className="animate-spin" />
+              ) : (
+                <>
+                  <Wallet size={17} />
+                  <span>{finalPayLabel}</span>
+                  <ArrowRight
+                    size={17}
+                    className="transition-transform duration-200 group-hover:translate-x-0.5"
+                  />
+                </>
+              )}
+            </button>
+          </div>
         </div>
+
+        {/* Footer links */}
+        <div className="mt-4 flex items-center justify-center gap-6 text-[10px] font-semibold uppercase tracking-[0.12em] text-slate-700">
+          <span className="flex items-center gap-1.5">
+            <Lock size={11} />
+            {isEn ? "Secure Payment" : "安全付款"}
+          </span>
+          <span className="text-slate-800">·</span>
+          <Link
+            href={faqHref}
+            className="flex items-center gap-1.5 transition-colors hover:text-slate-500"
+          >
+            <BellRing size={11} />
+            {isEn ? "Subscription FAQ" : "订阅说明"}
+          </Link>
+        </div>
+
+        {/* Error / Info messages */}
+        {errorText && (
+          <div className="mt-4 flex items-start gap-2.5 rounded-xl border border-rose-500/20 bg-rose-500/8 p-3">
+            <div className="mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-rose-500/20">
+              <X size={10} className="text-rose-400" />
+            </div>
+            <p className="text-[12px] leading-5 text-rose-400">{errorText}</p>
+          </div>
+        )}
+        {infoText && (
+          <div className="mt-4 flex items-start gap-2.5 rounded-xl border border-emerald-500/20 bg-emerald-500/8 p-3">
+            <div className="mt-0.5 flex h-4 w-4 flex-shrink-0 items-center justify-center rounded-full bg-emerald-500/20">
+              <CheckCircle2 size={10} className="text-emerald-400" />
+            </div>
+            <p className="text-[12px] leading-5 text-emerald-400">{infoText}</p>
+          </div>
+        )}
       </div>
     </div>
   );