''

app/components/course/CTASection.tsx

@@ -3,20 +3,79 @@
 import { Link } from "@/i18n/navigation";
 import { CTA_CONFIG } from "@/config/course";
 import { useAuthAndVip } from "@/app/lib/useAuthAndVip";
+import { getStoredToken, getStoredUser } from "@/app/lib/pocketbase";
+import AuthModal from "@/app/components/AuthModal";
+import {
+  getPayEnv,
+  getRecommendedChannel,
+  mustUseWxPay,
+  redirectToPay,
+  getDeviceFromEnv,
+} from "@/app/lib/payment";
+import { useState } from "react";
 
 export function CTASection() {
   const { user, vip } = useAuthAndVip();
   const paid = !!user && vip;
+  const [authOpen, setAuthOpen] = useState(false);
+  const [payRedirecting, setPayRedirecting] = useState(false);
+
+  const startPay = (userId: string) => {
+    const env = getPayEnv();
+    const channel = mustUseWxPay(env) ? "wxpay" : getRecommendedChannel(env);
+    const device = getDeviceFromEnv(env);
+    const returnUrl = `${window.location.origin}/course/0/0`;
+
+    redirectToPay({
+      user_id: userId,
+      return_url: returnUrl,
+      channel,
+      device,
+      useJoinConfig: true,
+    });
+  };
+
+  const handleEnroll = async () => {
+    if (payRedirecting) return;
+    setPayRedirecting(true);
+
+    try {
+      if (user?.id) {
+        startPay(user.id);
+        return;
+      }
+
+      const meRes = await fetch("/api/auth/me", { credentials: "include" });
+      const meData = await meRes.json().catch(() => ({}));
+      if (meData?.user?.id) {
+        startPay(meData.user.id);
+        return;
+      }
+
+      const storedUser = getStoredUser();
+      const storedToken = getStoredToken();
+      if (storedUser?.id && storedToken) {
+        await fetch("/api/auth/sync-session", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ token: storedToken, record: storedUser }),
+          credentials: "include",
+        }).catch(() => null);
+        startPay(storedUser.id);
+        return;
+      }
+
+      setAuthOpen(true);
+    } finally {
+      setPayRedirecting(false);
+    }
+  };
 
   return (
     <section className="border-t border-[var(--border)] py-16 sm:py-20 md:py-24">
       <div className="mx-auto max-w-3xl px-4 text-center sm:px-6">
-        <h2 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">
-          {CTA_CONFIG.title}
-        </h2>
-        <p className="mb-6 text-[var(--muted-foreground)] sm:mb-8">
-          {CTA_CONFIG.subtitle}
-        </p>
+        <h2 className="mb-4 text-xl font-bold sm:text-2xl md:text-3xl">{CTA_CONFIG.title}</h2>
+        <p className="mb-6 text-[var(--muted-foreground)] sm:mb-8">{CTA_CONFIG.subtitle}</p>
         <div className="mb-8 flex flex-wrap justify-center gap-4 text-sm text-[var(--muted-foreground)] sm:mb-10 sm:gap-6">
           {CTA_CONFIG.badges.map((b, i) => (
             <span
@@ -36,14 +95,24 @@ export function CTASection() {
             开始学习 →
           </Link>
         ) : (
-          <Link
-            href="/join"
-            className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition hover:opacity-95 sm:px-10"
+          <button
+            type="button"
+            onClick={handleEnroll}
+            disabled={payRedirecting}
+            className="inline-flex items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] shadow-lg shadow-[var(--accent)]/25 transition hover:opacity-95 disabled:opacity-70 sm:px-10"
           >
-            立即加入 →
-          </Link>
+            {payRedirecting ? "跳转支付中..." : "立即报名 →"}
+          </button>
         )}
       </div>
+      <AuthModal
+        isOpen={authOpen}
+        onClose={() => setAuthOpen(false)}
+        onSuccess={() => {
+          setAuthOpen(false);
+          void handleEnroll();
+        }}
+      />
     </section>
   );
 }