's'

app/components/course/CTASection.tsx

@@ -1,21 +1,12 @@
 "use client";
 
-import { useState, useEffect } from "react";
 import { Link } from "@/i18n/navigation";
-import { useTranslation } from "@/i18n/navigation";
 import { CTA_CONFIG } from "@/config/course";
-import { isPaid } from "@/app/lib/course-payment";
+import { useAuthAndVip } from "@/app/lib/useAuthAndVip";
 
 export function CTASection() {
-  const { t } = useTranslation("community");
-  const [paid, setPaid] = useState(false);
-  const [toast, setToast] = useState(false);
-  useEffect(() => {
-    setPaid(isPaid());
-    const onPayUpdate = () => setPaid(isPaid());
-    window.addEventListener("pay:updated", onPayUpdate);
-    return () => window.removeEventListener("pay:updated", onPayUpdate);
-  }, []);
+  const { user, vip } = useAuthAndVip();
+  const paid = !!user && vip;
 
   return (
     <section className="border-t border-[var(--border)] py-16 sm:py-20 md:py-24">
@@ -45,26 +36,14 @@ export function CTASection() {
             开始学习 →
           </Link>
         ) : (
-          <button
-            type="button"
-            onClick={() => {
-              setToast(true);
-              setTimeout(() => setToast(false), 2000);
-            }}
-            className="inline-flex cursor-not-allowed items-center gap-2 rounded-full bg-[var(--accent)] px-8 py-4 text-lg font-semibold text-[var(--accent-foreground)] opacity-90 shadow-lg shadow-[var(--accent)]/25 transition hover:opacity-100 sm:px-10"
+          <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>
+          </Link>
         )}
       </div>
-      {toast && (
-        <div
-          className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 rounded-lg bg-slate-800 px-6 py-3 text-sm font-medium text-white shadow-lg dark:bg-slate-700"
-          role="alert"
-        >
-          {t("updating")}
-        </div>
-      )}
     </section>
   );
 }