''

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>
   );
 }

app/components/course/CourseHero.tsx

@@ -4,7 +4,16 @@ import { useState, useEffect } from "react";
 import { Link } from "@/i18n/navigation";
 import { HERO_CONFIG, CURRICULUM_CONFIG } from "@/config/course";
 import { useAuthAndVip } from "@/app/lib/useAuthAndVip";
+import { getStoredToken, getStoredUser } from "@/app/lib/pocketbase";
 import { getLastWatched, getProgress } from "@/app/lib/learning";
+import AuthModal from "@/app/components/AuthModal";
+import {
+  getPayEnv,
+  getRecommendedChannel,
+  mustUseWxPay,
+  redirectToPay,
+  getDeviceFromEnv,
+} from "@/app/lib/payment";
 
 const TOTAL_LESSONS = CURRICULUM_CONFIG.modules.reduce((s, m) => s + m.lessons.length, 0);
 
@@ -12,6 +21,8 @@ export function CourseHero() {
   const { user, vip } = useAuthAndVip();
   const [last, setLast] = useState<ReturnType<typeof getLastWatched>>(null);
   const [progress, setProgress] = useState({ completed: 0, percent: 0 });
+  const [authOpen, setAuthOpen] = useState(false);
+  const [payRedirecting, setPayRedirecting] = useState(false);
 
   useEffect(() => {
     setLast(getLastWatched());
@@ -26,6 +37,57 @@ export function CourseHero() {
 
   const paid = !!user && vip;
 
+  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="relative overflow-hidden pt-24 pb-16 sm:pt-28 sm:pb-20 md:pt-32 md:pb-24">
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_50%_at_50%_-20%,var(--gradient-accent),transparent)] animate-gradient" />
@@ -39,12 +101,8 @@ export function CourseHero() {
         <div className="mb-10 flex flex-wrap justify-center gap-6 sm:mb-12 sm:gap-8">
           {HERO_CONFIG.stats.map((s) => (
             <div key={s.label} className="text-center transition-transform duration-300 hover:scale-105">
-              <div className="text-2xl font-bold text-[var(--accent)] sm:text-3xl md:text-4xl">
-                {s.value}
-              </div>
-              <div className="mt-1 text-xs text-[var(--muted-foreground)] sm:text-sm">
-                {s.label}
-              </div>
+              <div className="text-2xl font-bold text-[var(--accent)] sm:text-3xl md:text-4xl">{s.value}</div>
+              <div className="mt-1 text-xs text-[var(--muted-foreground)] sm:text-sm">{s.label}</div>
             </div>
           ))}
         </div>
@@ -64,12 +122,14 @@ export function CourseHero() {
               进入课程 →
             </Link>
           ) : (
-            <Link
-              href="/join"
-              className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 sm:px-10"
+            <button
+              type="button"
+              onClick={handleEnroll}
+              disabled={payRedirecting}
+              className="inline-flex shrink-0 items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] transition hover:opacity-90 disabled:opacity-70 sm:px-10"
             >
-              立即报名 →
-            </Link>
+              {payRedirecting ? "跳转支付中..." : "立即报名 →"}
+            </button>
           )}
         </div>
         {paid && progress.completed > 0 && (
@@ -79,14 +139,19 @@ export function CourseHero() {
               <span>{progress.completed}/{TOTAL_LESSONS} 节</span>
             </div>
             <div className="h-2 overflow-hidden rounded-full bg-[var(--muted)]">
-              <div
-                className="h-full rounded-full bg-[var(--accent)] transition-all"
-                style={{ width: `${progress.percent}%` }}
-              />
+              <div className="h-full rounded-full bg-[var(--accent)] transition-all" style={{ width: `${progress.percent}%` }} />
             </div>
           </div>
         )}
       </div>
+      <AuthModal
+        isOpen={authOpen}
+        onClose={() => setAuthOpen(false)}
+        onSuccess={() => {
+          setAuthOpen(false);
+          void handleEnroll();
+        }}
+      />
     </section>
   );
 }