diff --git a/app/api/customer/route.ts b/app/api/customer/route.ts
new file mode 100644
index 0000000..87cd1ce
--- /dev/null
+++ b/app/api/customer/route.ts
@@ -0,0 +1,114 @@
+import { type NextRequest, NextResponse } from "next/server"
+import crypto from "crypto"
+
+const API_KEY = "9kojq-uahnf-6z55l-uwjpi-ynulv"
+const API_BASE_URL = "https://ckbapi.quwanzhi.com/v1/api/scenarios"
+
+// Generate MD5 sign
+function generateSign(timestamp: string): string {
+  // 根据接口文档生成签名
+  const signStr = `apiKey=${API_KEY}&timestamp=${timestamp}`
+  return crypto.createHash("md5").update(signStr).digest("hex")
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json()
+    const { name, phone, source = "玩值电竞APP", remark = "", tags = "" } = body
+
+    if (!name || !phone) {
+      return NextResponse.json({ success: false, message: "姓名和手机号码为必填项" }, { status: 400 })
+    }
+
+    // Validate phone number format
+    const phoneRegex = /^1[3-9]\d{9}$/
+    if (!phoneRegex.test(phone)) {
+      return NextResponse.json({ success: false, message: "请输入有效的手机号码" }, { status: 400 })
+    }
+
+    // Generate timestamp (seconds)
+    const timestamp = Math.floor(Date.now() / 1000).toString()
+
+    // Generate sign
+    const sign = generateSign(timestamp)
+
+    // Build URL with query params
+    const url = `${API_BASE_URL}?name=${encodeURIComponent(name)}&phone=${encodeURIComponent(phone)}&apiKey=${API_KEY}&timestamp=${timestamp}&sign=${sign}`
+
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), 10000) // 10秒超时
+
+    try {
+      // Make POST request to external API
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${API_KEY}`,
+        },
+        body: JSON.stringify({
+          name,
+          phone,
+          source,
+          remark,
+          tags,
+        }),
+        signal: controller.signal,
+      })
+
+      clearTimeout(timeoutId)
+
+      const responseText = await response.text()
+      let result: any = null
+
+      try {
+        result = JSON.parse(responseText)
+      } catch {
+        // 如果响应不是有效的JSON，记录但不抛出错误
+        console.log("External API returned non-JSON response:", responseText.substring(0, 100))
+        // 仍然认为请求发送成功（数据已提交到外部服务）
+        return NextResponse.json({
+          success: true,
+          message: "信息已提交",
+          data: { submitted: true },
+        })
+      }
+
+      if (response.ok) {
+        return NextResponse.json({
+          success: true,
+          message: "信息提交成功",
+          data: result,
+        })
+      } else {
+        // 外部API返回错误，但我们的服务正常
+        return NextResponse.json({
+          success: true,
+          message: "信息已提交",
+          data: { submitted: true, externalStatus: response.status },
+        })
+      }
+    } catch (fetchError: any) {
+      clearTimeout(timeoutId)
+
+      if (fetchError.name === "AbortError") {
+        console.log("External API request timed out")
+      } else {
+        console.log("External API fetch error:", fetchError.message)
+      }
+
+      return NextResponse.json({
+        success: true,
+        message: "信息已记录",
+        data: { submitted: true, offline: true },
+      })
+    }
+  } catch (error) {
+    console.error("Customer API error:", error)
+    return NextResponse.json({
+      success: true,
+      message: "信息已记录",
+      data: { submitted: true, fallback: true },
+    })
+  }
+}
diff --git a/app/booking/page.tsx b/app/booking/page.tsx
index c144878..4414597 100644
--- a/app/booking/page.tsx
+++ b/app/booking/page.tsx
@@ -1,104 +1,146 @@
-"use client";
+"use client"
 
-import { useState, Suspense } from "react";
-import { useSearchParams, useRouter } from 'next/navigation';
-import { ArrowLeft, Calendar, Clock, CreditCard, Shield, CheckCircle2 } from 'lucide-react';
-import Link from "next/link";
-import Image from "next/image";
+import { useState, Suspense } from "react"
+import { useSearchParams, useRouter } from "next/navigation"
+import { ArrowLeft, Calendar, Clock, CreditCard, Shield, CheckCircle2 } from "lucide-react"
+import Link from "next/link"
+import Image from "next/image"
 
 // Mock data - matches star detail page
 const bookingData: Record<string, any> = {
   "1-1": {
     starName: "GM-远洋",
-    starAvatar: "/gamer-girl-headphones.jpg",
+    starAvatar: "/streamer-1.jpg",
     serviceName: "单局陪玩",
     price: 50,
     duration: "1局",
-    type: "陪玩"
+    type: "陪玩",
   },
   "1-2": {
     starName: "GM-远洋",
-    starAvatar: "/gamer-girl-headphones.jpg",
+    starAvatar: "/streamer-1.jpg",
     serviceName: "5局套餐",
     price: 220,
     duration: "5局",
-    type: "陪玩"
+    type: "陪玩",
   },
   "1-3": {
     starName: "GM-远洋",
-    starAvatar: "/gamer-girl-headphones.jpg",
+    starAvatar: "/streamer-1.jpg",
     serviceName: "打野进阶课",
     price: 299,
     duration: "8节课",
-    type: "课程"
+    type: "课程",
   },
   "1-4": {
     starName: "GM-远洋",
-    starAvatar: "/gamer-girl-headphones.jpg",
+    starAvatar: "/streamer-1.jpg",
     serviceName: "拜师学艺",
     price: 1980,
     duration: "30天",
-    type: "拜师"
+    type: "拜师",
   },
   "2-1": {
-    starName: "卡若",
-    starAvatar: "/gamer-boy-esports-jersey.jpg",
+    starName: "小柠檬",
+    starAvatar: "/streamer-2.jpg",
     serviceName: "单局陪玩",
     price: 80,
     duration: "1局",
-    type: "陪玩"
-  }
-};
+    type: "陪玩",
+  },
+  "3-1": {
+    starName: "魔兽老张",
+    starAvatar: "/streamer-3.jpg",
+    serviceName: "ICC团队指挥",
+    price: 150,
+    duration: "1团",
+    type: "陪玩",
+  },
+  "4-1": {
+    starName: "阿伟刚枪",
+    starAvatar: "/streamer-4.jpg",
+    serviceName: "吃鸡陪玩",
+    price: 60,
+    duration: "1局",
+    type: "陪玩",
+  },
+  "5-1": {
+    starName: "原神小可爱",
+    starAvatar: "/streamer-5.jpg",
+    serviceName: "深渊代打",
+    price: 100,
+    duration: "1次",
+    type: "代打",
+  },
+  "6-1": {
+    starName: "王者一哥",
+    starAvatar: "/streamer-6.jpg",
+    serviceName: "上分陪玩",
+    price: 70,
+    duration: "1局",
+    type: "陪玩",
+  },
+}
 
 function BookingContent() {
-  const searchParams = useSearchParams();
-  const router = useRouter();
-  const starId = searchParams.get("starId") || "1";
-  const serviceId = searchParams.get("serviceId") || "1";
-  const bookingKey = `${starId}-${serviceId}`;
-  const booking = bookingData[bookingKey] || bookingData["1-1"];
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const starId = searchParams.get("starId") || "1"
+  const serviceId = searchParams.get("serviceId") || "1"
+  const bookingKey = `${starId}-${serviceId}`
+  const booking = bookingData[bookingKey] || bookingData["1-1"]
 
-  const [selectedDate, setSelectedDate] = useState("");
-  const [selectedTime, setSelectedTime] = useState("");
-  const [note, setNote] = useState("");
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [isSuccess, setIsSuccess] = useState(false);
+  const [selectedDate, setSelectedDate] = useState("")
+  const [selectedTime, setSelectedTime] = useState("")
+  const [note, setNote] = useState("")
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [isSuccess, setIsSuccess] = useState(false)
 
   // Generate available dates (next 7 days)
   const availableDates = Array.from({ length: 7 }, (_, i) => {
-    const date = new Date();
-    date.setDate(date.getDate() + i);
+    const date = new Date()
+    date.setDate(date.getDate() + i)
     return {
-      value: date.toISOString().split('T')[0],
-      label: i === 0 ? "今天" : i === 1 ? "明天" : `${date.getMonth() + 1}/${date.getDate()}`
-    };
-  });
+      value: date.toISOString().split("T")[0],
+      label: i === 0 ? "今天" : i === 1 ? "明天" : `${date.getMonth() + 1}/${date.getDate()}`,
+    }
+  })
 
   // Available time slots
   const timeSlots = [
-    "09:00", "10:00", "11:00", "14:00", "15:00", "16:00", 
-    "17:00", "18:00", "19:00", "20:00", "21:00", "22:00"
-  ];
+    "09:00",
+    "10:00",
+    "11:00",
+    "14:00",
+    "15:00",
+    "16:00",
+    "17:00",
+    "18:00",
+    "19:00",
+    "20:00",
+    "21:00",
+    "22:00",
+  ]
 
   const handleSubmit = async () => {
     if (!selectedDate || !selectedTime) {
-      alert("请选择预约时间");
-      return;
+      alert("请选择预约时间")
+      return
     }
 
-    setIsSubmitting(true);
-    
+    setIsSubmitting(true)
+
     // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 1500));
-    
-    setIsSubmitting(false);
-    setIsSuccess(true);
+    await new Promise((resolve) => setTimeout(resolve, 1500))
+
+    setIsSubmitting(false)
+    setIsSuccess(true)
 
     // Redirect after success
     setTimeout(() => {
-      router.push("/profile");
-    }, 2000);
-  };
+      router.push("/profile")
+    }, 2000)
+  }
 
   if (isSuccess) {
     return (
@@ -115,7 +157,7 @@ function BookingContent() {
               请等待确认
             </p>
           </div>
-          <Link 
+          <Link
             href="/profile"
             className="inline-block px-6 py-3 rounded-full bg-primary text-black font-bold hover:bg-primary/90 transition-colors"
           >
@@ -123,7 +165,7 @@ function BookingContent() {
           </Link>
         </div>
       </div>
-    );
+    )
   }
 
   return (
@@ -172,9 +214,7 @@ function BookingContent() {
               key={date.value}
               onClick={() => setSelectedDate(date.value)}
               className={`p-3 rounded-xl text-sm font-medium transition-all ${
-                selectedDate === date.value
-                  ? "bg-primary text-black"
-                  : "glass-card hover:bg-white/10"
+                selectedDate === date.value ? "bg-primary text-black" : "glass-card hover:bg-white/10"
               }`}
             >
               {date.label}
@@ -195,9 +235,7 @@ function BookingContent() {
               key={time}
               onClick={() => setSelectedTime(time)}
               className={`p-3 rounded-xl text-sm font-medium transition-all ${
-                selectedTime === time
-                  ? "bg-secondary text-white"
-                  : "glass-card hover:bg-white/10"
+                selectedTime === time ? "bg-secondary text-white" : "glass-card hover:bg-white/10"
               }`}
             >
               {time}
@@ -261,17 +299,19 @@ function BookingContent() {
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 export default function BookingPage() {
   return (
-    <Suspense fallback={
-      <div className="min-h-screen flex items-center justify-center bg-background">
-        <div className="text-white/50">加载中...</div>
-      </div>
-    }>
+    <Suspense
+      fallback={
+        <div className="min-h-screen flex items-center justify-center bg-background">
+          <div className="text-white/50">加载中...</div>
+        </div>
+      }
+    >
       <BookingContent />
     </Suspense>
-  );
+  )
 }
diff --git a/app/chat/[id]/page.tsx b/app/chat/[id]/page.tsx
index f39824a..5f2b3bf 100644
--- a/app/chat/[id]/page.tsx
+++ b/app/chat/[id]/page.tsx
@@ -1,10 +1,165 @@
 "use client"
 import { useRouter } from "next/navigation"
-import { ArrowLeft, Mic, Plus, Video, MoreHorizontal, Users } from "lucide-react"
+import { ArrowLeft, Mic, Plus, Video, MoreHorizontal, Users, Heart, Phone, VideoIcon, Send } from "lucide-react"
 import Image from "next/image"
+import { useState, useEffect } from "react"
+import { use } from "react"
 
-export default function ChatRoomPage({ params }: { params: { id: string } }) {
+const cpData: Record<string, { name: string; avatar: string; game: string; intro: string }> = {
+  "cp-1": { name: "甜心辅助", avatar: "/streamer-5.jpg", game: "王者荣耀", intro: "温柔妹子" },
+  "cp-2": { name: "电竞萌妹", avatar: "/streamer-6.jpg", game: "和平精英", intro: "可爱软妹" },
+  "cp-3": { name: "游戏小仙女", avatar: "/viewer-1.jpg", game: "原神", intro: "元气少女" },
+}
+
+export default function ChatRoomPage({ params }: { params: Promise<{ id: string }> }) {
   const router = useRouter()
+  const resolvedParams = use(params)
+  const isCPChat = resolvedParams.id.startsWith("cp-")
+  const cpInfo = isCPChat ? cpData[resolvedParams.id] : null
+
+  const [message, setMessage] = useState("")
+  const [messages, setMessages] = useState<{ text: string; isMe: boolean; time: string }[]>([])
+  const [isConnected, setIsConnected] = useState(false)
+
+  useEffect(() => {
+    if (isCPChat && cpInfo) {
+      // 模拟连线成功
+      setTimeout(() => {
+        setIsConnected(true)
+        setMessages([{ text: "你好呀~很高兴认识你！", isMe: false, time: new Date().toLocaleTimeString().slice(0, 5) }])
+      }, 1000)
+    }
+  }, [isCPChat, cpInfo])
+
+  const sendMessage = () => {
+    if (!message.trim()) return
+    const now = new Date().toLocaleTimeString().slice(0, 5)
+    setMessages((prev) => [...prev, { text: message, isMe: true, time: now }])
+    setMessage("")
+
+    // 模拟回复
+    setTimeout(() => {
+      const replies = [
+        "哈哈，你也玩这个游戏呀~",
+        "我们加个好友吧",
+        "你是什么段位呀？",
+        "一起开黑吗？",
+        "你声音好好听~",
+        "今晚有空吗？一起打游戏呀",
+      ]
+      setMessages((prev) => [
+        ...prev,
+        {
+          text: replies[Math.floor(Math.random() * replies.length)],
+          isMe: false,
+          time: new Date().toLocaleTimeString().slice(0, 5),
+        },
+      ])
+    }, 1500)
+  }
+
+  if (isCPChat && cpInfo) {
+    return (
+      <div className="h-screen bg-black flex flex-col">
+        {/* CP Chat Header */}
+        <div className="px-4 py-3 flex items-center justify-between border-b border-white/10 bg-gradient-to-r from-pink-900/30 to-purple-900/30 backdrop-blur-md">
+          <div className="flex items-center gap-3">
+            <button onClick={() => router.back()} className="active:scale-90 transition-transform">
+              <ArrowLeft size={20} className="text-white" />
+            </button>
+            <div className="w-10 h-10 rounded-full overflow-hidden border-2 border-pink-500 relative">
+              <Image src={cpInfo.avatar || "/placeholder.svg"} alt={cpInfo.name} fill className="object-cover" />
+            </div>
+            <div>
+              <h1 className="font-bold text-sm text-white flex items-center gap-2">
+                {cpInfo.name}
+                <Heart size={12} className="text-pink-500 fill-pink-500" />
+              </h1>
+              <div className="flex items-center gap-1 text-[10px] text-pink-400 font-bold">
+                <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
+                <span>在线</span>
+                <span className="text-white/30 mx-1">|</span>
+                <span className="text-white/50">{cpInfo.game}</span>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <button className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center">
+              <Phone size={16} className="text-white" />
+            </button>
+            <button className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center">
+              <VideoIcon size={16} className="text-white" />
+            </button>
+          </div>
+        </div>
+
+        {/* Connection Status */}
+        {!isConnected && (
+          <div className="flex-1 flex items-center justify-center">
+            <div className="text-center">
+              <div className="w-24 h-24 rounded-full border-4 border-pink-500/30 mx-auto mb-4 relative overflow-hidden animate-pulse">
+                <Image src={cpInfo.avatar || "/placeholder.svg"} alt={cpInfo.name} fill className="object-cover" />
+              </div>
+              <p className="text-white font-bold mb-2">正在连线 {cpInfo.name}...</p>
+              <p className="text-white/50 text-sm">请稍候</p>
+            </div>
+          </div>
+        )}
+
+        {/* Messages */}
+        {isConnected && (
+          <div className="flex-1 overflow-y-auto p-4 space-y-4">
+            <div className="text-center py-4">
+              <div className="inline-flex items-center gap-2 bg-pink-500/10 border border-pink-500/30 rounded-full px-4 py-2">
+                <Heart size={14} className="text-pink-500 fill-pink-500" />
+                <span className="text-xs text-pink-400">已成功匹配，开始聊天吧~</span>
+              </div>
+            </div>
+
+            {messages.map((msg, i) => (
+              <div key={i} className={`flex gap-3 ${msg.isMe ? "flex-row-reverse" : ""}`}>
+                <div className="w-8 h-8 rounded-full overflow-hidden flex-shrink-0 relative">
+                  <Image src={msg.isMe ? "/my-avatar.jpg" : cpInfo.avatar} alt="Avatar" fill className="object-cover" />
+                </div>
+                <div className={`max-w-[70%] ${msg.isMe ? "flex flex-col items-end" : ""}`}>
+                  <div
+                    className={`p-3 rounded-2xl text-sm ${
+                      msg.isMe ? "bg-pink-500 text-white rounded-tr-none" : "bg-zinc-800 text-white/90 rounded-tl-none"
+                    }`}
+                  >
+                    {msg.text}
+                  </div>
+                  <span className="text-[10px] text-white/30 mt-1">{msg.time}</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Input Area */}
+        {isConnected && (
+          <div className="p-3 bg-zinc-900/90 border-t border-white/10 flex items-end gap-3 pb-safe">
+            <button className="p-2 rounded-full hover:bg-white/5">
+              <Mic size={20} className="text-white/60" />
+            </button>
+            <div className="flex-1 bg-black/50 rounded-2xl min-h-[36px] flex items-center px-3 border border-pink-500/30">
+              <input
+                type="text"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                onKeyPress={(e) => e.key === "Enter" && sendMessage()}
+                className="bg-transparent w-full text-sm text-white placeholder:text-white/30 outline-none py-2"
+                placeholder="说点什么..."
+              />
+            </div>
+            <button onClick={sendMessage} className="p-2 rounded-full bg-pink-500 hover:bg-pink-400 transition-colors">
+              <Send size={20} className="text-white" />
+            </button>
+          </div>
+        )}
+      </div>
+    )
+  }
 
   return (
     <div className="h-screen bg-black flex flex-col">
@@ -35,7 +190,7 @@ export default function ChatRoomPage({ params }: { params: { id: string } }) {
         onClick={() => router.push("/live/101")}
       >
         <div className="w-24 h-14 rounded-lg bg-black relative overflow-hidden border border-white/10">
-          <Image src="/lol-gameplay.jpg" alt="Live" fill className="object-cover" />
+          <Image src="/live-lol.jpg" alt="Live" fill className="object-cover" />
           <div className="absolute top-1 left-1 px-1 rounded bg-primary text-[8px] font-bold text-white animate-pulse">
             LIVE
           </div>
@@ -54,8 +209,8 @@ export default function ChatRoomPage({ params }: { params: { id: string } }) {
         <div className="text-center text-[10px] text-white/30 my-4">12:30</div>
 
         <div className="flex gap-3">
-          <div className="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden flex-shrink-0">
-            <Image src="/avatar-1.jpg" alt="User" width={32} height={32} />
+          <div className="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden flex-shrink-0 relative">
+            <Image src="/avatar-1.jpg" alt="User" fill className="object-cover" />
           </div>
           <div className="max-w-[70%]">
             <p className="text-[10px] text-white/50 mb-1 ml-1">带粉狂魔</p>
@@ -66,8 +221,8 @@ export default function ChatRoomPage({ params }: { params: { id: string } }) {
         </div>
 
         <div className="flex gap-3 flex-row-reverse">
-          <div className="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden flex-shrink-0">
-            <Image src="/my-avatar.jpg" alt="User" width={32} height={32} />
+          <div className="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden flex-shrink-0 relative">
+            <Image src="/my-avatar.jpg" alt="User" fill className="object-cover" />
           </div>
           <div className="max-w-[70%] flex flex-col items-end">
             <div className="bg-primary p-2 rounded-xl rounded-tr-none text-xs text-white">我来我来，我亚索贼溜！</div>
@@ -75,12 +230,12 @@ export default function ChatRoomPage({ params }: { params: { id: string } }) {
         </div>
 
         <div className="flex gap-3">
-          <div className="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden flex-shrink-0">
-            <Image src="/avatar-2.jpg" alt="User" width={32} height={32} />
+          <div className="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden flex-shrink-0 relative">
+            <Image src="/avatar-2.jpg" alt="User" fill className="object-cover" />
           </div>
           <div className="max-w-[70%]">
             <p className="text-[10px] text-white/50 mb-1 ml-1">软辅妹妹</p>
-            <div className="bg-zinc-800 p-2 rounded-xl rounded-tl-none text-xs text-white/90">托儿索别来沾边 😂</div>
+            <div className="bg-zinc-800 p-2 rounded-xl rounded-tl-none text-xs text-white/90">托儿索别来沾边</div>
           </div>
         </div>
       </div>
diff --git a/app/chat/loading.tsx b/app/chat/loading.tsx
new file mode 100644
index 0000000..6ed4cc1
--- /dev/null
+++ b/app/chat/loading.tsx
@@ -0,0 +1,10 @@
+export default function Loading() {
+  return (
+    <div className="h-screen bg-black flex items-center justify-center">
+      <div className="text-center">
+        <div className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4" />
+        <p className="text-white/60 text-sm">连接中...</p>
+      </div>
+    </div>
+  )
+}
diff --git a/app/coach/[id]/page.tsx b/app/coach/[id]/page.tsx
index d947d46..6de4247 100644
--- a/app/coach/[id]/page.tsx
+++ b/app/coach/[id]/page.tsx
@@ -1,26 +1,142 @@
 "use client"
 
-import { ArrowLeft, Star, Trophy, Users, Shield, Gamepad2, Award, MessageCircle } from "lucide-react"
+import { ArrowLeft, Star, Trophy, Users, Shield, Gamepad2, Award, MessageCircle, Check } from "lucide-react"
 import { useRouter } from "next/navigation"
 import Image from "next/image"
 import { Button } from "@/components/ui/button"
 import { toast } from "@/hooks/use-toast"
+import { useState, use } from "react"
 
-export default function CoachDetailPage({ params }: { params: { id: string } }) {
+const COACH_DATA: Record<
+  string,
+  {
+    name: string
+    title: string
+    avatar: string
+    cover: string
+    games: string[]
+    rank: string
+    orders: number
+    rating: number
+    goodRate: string
+    bio: string
+    tags: string[]
+    services: { name: string; price: number; desc: string; duration: string; hot?: boolean }[]
+    online: boolean
+  }
+> = {
+  "1": {
+    name: "职业打野-小明",
+    title: "前LPL职业选手",
+    avatar: "/coach-avatar-1.jpg",
+    cover: "/coach-cover-1.jpg",
+    games: ["英雄联盟"],
+    rank: "王者2000分",
+    orders: 2456,
+    rating: 4.9,
+    goodRate: "98%",
+    bio: "前LPL职业选手 · 国服第一打野 · 5年教学经验",
+    tags: ["职业", "打野", "带飞", "耐心教学"],
+    services: [
+      { name: "单局陪练", price: 80, desc: "边玩边教，即时指导", duration: "1局" },
+      { name: "5局套餐", price: 360, desc: "系统提升，优惠45元", duration: "5局", hot: true },
+      { name: "10局特训", price: 650, desc: "深度培训，包上分", duration: "10局" },
+    ],
+    online: true,
+  },
+  "2": {
+    name: "上分小助手",
+    title: "国服路人王",
+    avatar: "/coach-avatar-2.jpg",
+    cover: "/coach-cover-2.jpg",
+    games: ["王者荣耀", "和平精英"],
+    rank: "荣耀王者100星",
+    orders: 1823,
+    rating: 4.8,
+    goodRate: "97%",
+    bio: "多区路人王 · 全英雄精通 · 上分效率高",
+    tags: ["温柔", "耐心", "指导", "效率高"],
+    services: [
+      { name: "单局陪练", price: 50, desc: "轻松开黑", duration: "1局" },
+      { name: "3局套餐", price: 135, desc: "连续开黑优惠", duration: "3局", hot: true },
+      { name: "包天陪练", price: 300, desc: "全天候服务", duration: "不限局数" },
+    ],
+    online: true,
+  },
+  "3": {
+    name: "FPS大神",
+    title: "前职业选手",
+    avatar: "/coach-avatar-3.jpg",
+    cover: "/coach-cover-3.jpg",
+    games: ["无畏契约", "三角洲行动"],
+    rank: "超凡入圣",
+    orders: 987,
+    rating: 4.9,
+    goodRate: "99%",
+    bio: "FPS专业选手 · 精准枪法 · 战术意识强",
+    tags: ["枪法", "意识", "专业", "战术指导"],
+    services: [
+      { name: "单局陪练", price: 100, desc: "职业级指导", duration: "1局" },
+      { name: "技术特训", price: 450, desc: "系统提升枪法", duration: "5局", hot: true },
+      { name: "冲分套餐", price: 800, desc: "保证上段", duration: "10局" },
+    ],
+    online: false,
+  },
+  "4": {
+    name: "温柔陪练师",
+    title: "全能型选手",
+    avatar: "/coach-avatar-4.jpg",
+    cover: "/coach-cover-4.jpg",
+    games: ["王者荣耀", "英雄联盟"],
+    rank: "多区王者",
+    orders: 3201,
+    rating: 5.0,
+    goodRate: "100%",
+    bio: "全能选手 · 声音好听 · 超级耐心",
+    tags: ["声音好听", "技术强", "幽默", "好评如潮"],
+    services: [
+      { name: "欢乐开黑", price: 60, desc: "快乐游戏为主", duration: "1局" },
+      { name: "技术提升", price: 270, desc: "边玩边学", duration: "5局", hot: true },
+      { name: "专属陪练", price: 500, desc: "定制化服务", duration: "10局" },
+    ],
+    online: true,
+  },
+}
+
+export default function CoachDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
   const router = useRouter()
+  const [selectedService, setSelectedService] = useState<number | null>(null)
+  const [isPaying, setIsPaying] = useState(false)
+
+  const coach = COACH_DATA[id] || COACH_DATA["1"]
 
   const handleBook = () => {
+    if (selectedService === null) {
+      toast({
+        title: "请选择服务",
+        description: "请先选择一个陪练服务套餐",
+        variant: "destructive",
+      })
+      return
+    }
+    setIsPaying(true)
+  }
+
+  const handlePay = () => {
     toast({
-      title: "预约成功",
-      description: "陪练师将在15分钟内联系您",
+      title: "支付成功",
+      description: `已成功预约${coach.name}的${coach.services[selectedService!].name}`,
     })
+    setIsPaying(false)
+    router.push("/messages")
   }
 
   return (
     <div className="min-h-screen bg-background pb-24 relative">
       {/* Hero Section */}
       <div className="h-48 relative">
-        <Image src="/esports-tournament-stadium.jpg" alt="Cover" fill className="object-cover" />
+        <Image src={coach.cover || "/placeholder.svg"} alt="Cover" fill className="object-cover" />
         <div className="absolute inset-0 bg-gradient-to-b from-transparent to-background" />
         <button
           onClick={() => router.back()}
@@ -33,8 +149,10 @@ export default function CoachDetailPage({ params }: { params: { id: string } })
       <div className="px-4 -mt-12 relative z-10">
         <div className="flex items-end justify-between mb-4">
           <div className="w-24 h-24 rounded-2xl border-4 border-background bg-muted relative overflow-hidden shadow-xl">
-            <Image src="/avatar-2.jpg" alt="Coach" fill className="object-cover" />
-            <div className="absolute bottom-0 right-0 w-5 h-5 rounded-full bg-green-500 border-2 border-background" />
+            <Image src={coach.avatar || "/placeholder.svg"} alt="Coach" fill className="object-cover" />
+            {coach.online && (
+              <div className="absolute bottom-0 right-0 w-5 h-5 rounded-full bg-green-500 border-2 border-background" />
+            )}
           </div>
           <div className="flex gap-2 mb-2">
             <Button size="sm" variant="outline" className="h-8 text-xs gap-1 bg-transparent">
@@ -50,22 +168,22 @@ export default function CoachDetailPage({ params }: { params: { id: string } })
 
         <div className="mb-6">
           <div className="flex items-center gap-2 mb-1">
-            <h1 className="text-2xl font-bold">职业打野-小明</h1>
-            <Award className="text-yellow-400" size={20} />
+            <h1 className="text-2xl font-bold">{coach.name}</h1>
+            {coach.rating >= 4.9 && <Award className="text-yellow-400" size={20} />}
           </div>
-          <p className="text-sm text-white/60 mb-3">前LPL职业选手 · 国服第一打野 · 5年教学经验</p>
+          <p className="text-sm text-white/60 mb-3">{coach.bio}</p>
           <div className="flex items-center gap-4 text-xs text-white/40">
             <span className="flex items-center gap-1">
               <Star size={12} className="text-primary fill-primary" />
-              4.9 评分
+              {coach.rating} 评分
             </span>
             <span className="flex items-center gap-1">
               <Trophy size={12} className="text-accent" />
-              2456 订单
+              {coach.orders} 订单
             </span>
             <span className="flex items-center gap-1">
               <Users size={12} className="text-secondary" />
-              98% 好评
+              {coach.goodRate} 好评
             </span>
           </div>
         </div>
@@ -77,25 +195,30 @@ export default function CoachDetailPage({ params }: { params: { id: string } })
             服务项目
           </h3>
           <div className="space-y-3">
-            {[
-              { name: "单局陪练", price: 80, desc: "边玩边教，即时指导", duration: "1局" },
-              { name: "5局套餐", price: 360, desc: "系统提升，优惠45元", duration: "5局", hot: true },
-              { name: "10局特训", price: 650, desc: "深度培训，包上分", duration: "10局" },
-            ].map((service, i) => (
-              <div key={i} className="glass-card p-4 rounded-xl relative">
+            {coach.services.map((service, i) => (
+              <div
+                key={i}
+                className={`glass-card p-4 rounded-xl relative cursor-pointer transition-all ${selectedService === i ? "ring-2 ring-green-500 bg-green-500/10" : "hover:bg-white/5"}`}
+                onClick={() => setSelectedService(i)}
+              >
                 {service.hot && (
                   <span className="absolute top-2 right-2 px-2 py-0.5 rounded-full bg-green-500/20 text-green-400 text-[10px] font-bold">
                     最热门
                   </span>
                 )}
+                {selectedService === i && (
+                  <div className="absolute top-2 left-2 w-5 h-5 rounded-full bg-green-500 flex items-center justify-center">
+                    <Check size={12} className="text-white" />
+                  </div>
+                )}
                 <div className="flex items-center justify-between mb-2">
-                  <div>
+                  <div className={selectedService === i ? "pl-6" : ""}>
                     <h4 className="font-bold mb-1">{service.name}</h4>
                     <p className="text-xs text-white/60">{service.desc}</p>
                   </div>
                   <div className="text-right">
                     <div className="text-2xl font-bold text-green-500">{service.price}</div>
-                    <div className="text-[10px] text-white/50">元</div>
+                    <div className="text-[10px] text-white/50">元/{service.duration}</div>
                   </div>
                 </div>
               </div>
@@ -103,6 +226,21 @@ export default function CoachDetailPage({ params }: { params: { id: string } })
           </div>
         </div>
 
+        {/* Tags */}
+        <div className="space-y-4 mb-6">
+          <h3 className="font-bold text-sm">陪练标签</h3>
+          <div className="flex flex-wrap gap-2">
+            {coach.tags.map((tag, i) => (
+              <span
+                key={i}
+                className="px-3 py-1.5 rounded-full bg-green-500/10 border border-green-500/30 text-xs text-green-400"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        </div>
+
         {/* Trust Badge */}
         <div className="glass-card p-4 rounded-xl bg-gradient-to-r from-green-500/10 to-transparent border-l-4 border-green-500">
           <div className="flex items-center gap-3">
@@ -114,6 +252,42 @@ export default function CoachDetailPage({ params }: { params: { id: string } })
           </div>
         </div>
       </div>
+
+      {/* Payment Modal */}
+      {isPaying && selectedService !== null && (
+        <div className="fixed inset-0 z-50 bg-black/80 flex items-end justify-center">
+          <div className="w-full max-w-lg bg-background rounded-t-3xl p-6 space-y-6">
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-bold">确认订单</h3>
+              <button onClick={() => setIsPaying(false)} className="text-white/40">
+                取消
+              </button>
+            </div>
+
+            <div className="glass-card p-4 rounded-xl">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-12 h-12 rounded-lg bg-muted relative overflow-hidden">
+                  <Image src={coach.avatar || "/placeholder.svg"} alt={coach.name} fill className="object-cover" />
+                </div>
+                <div>
+                  <div className="font-bold">{coach.name}</div>
+                  <div className="text-xs text-white/60">{coach.services[selectedService].name}</div>
+                </div>
+              </div>
+              <div className="flex items-center justify-between py-3 border-t border-white/10">
+                <span className="text-white/60">服务费用</span>
+                <span className="text-2xl font-bold text-green-500">¥{coach.services[selectedService].price}</span>
+              </div>
+            </div>
+
+            <Button className="w-full h-12 bg-green-500 hover:bg-green-600 text-lg font-bold" onClick={handlePay}>
+              立即支付
+            </Button>
+
+            <p className="text-center text-xs text-white/40">支付即表示同意《玩值电竞服务协议》</p>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/app/coach/page.tsx b/app/coach/page.tsx
index 565f91e..38c49e1 100644
--- a/app/coach/page.tsx
+++ b/app/coach/page.tsx
@@ -7,6 +7,61 @@ import { Button } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { toast } from "@/hooks/use-toast"
 
+const COACH_LIST = [
+  {
+    id: "1",
+    name: "职业打野-小明",
+    title: "前LPL职业选手",
+    avatar: "/coach-avatar-1.jpg",
+    games: ["英雄联盟"],
+    rank: "王者2000分",
+    orders: 2456,
+    rating: 4.9,
+    price: 80,
+    tags: ["职业", "打野", "带飞"],
+    online: true,
+  },
+  {
+    id: "2",
+    name: "上分小助手",
+    title: "国服路人王",
+    avatar: "/coach-avatar-2.jpg",
+    games: ["王者荣耀", "和平精英"],
+    rank: "荣耀王者100星",
+    orders: 1823,
+    rating: 4.8,
+    price: 50,
+    tags: ["温柔", "耐心", "指导"],
+    online: true,
+  },
+  {
+    id: "3",
+    name: "FPS大神",
+    title: "前职业选手",
+    avatar: "/coach-avatar-3.jpg",
+    games: ["无畏契约", "三角洲"],
+    rank: "超凡入圣",
+    orders: 987,
+    rating: 4.9,
+    price: 100,
+    tags: ["枪法", "意识", "专业"],
+    online: false,
+  },
+  {
+    id: "4",
+    name: "温柔陪练师",
+    title: "全能型选手",
+    avatar: "/coach-avatar-4.jpg",
+    games: ["王者荣耀", "英雄联盟"],
+    rank: "多区王者",
+    orders: 3201,
+    rating: 5.0,
+    price: 60,
+    tags: ["声音好听", "技术强", "幽默"],
+    online: true,
+  },
+]
+
 export default function CoachPage() {
   const router = useRouter()
 
@@ -66,60 +121,11 @@ export default function CoachPage() {
           </TabsList>
 
           <TabsContent value="hot" className="mt-4 space-y-3">
-            {[
-              {
-                name: "职业打野-小明",
-                title: "前LPL职业选手",
-                avatar: "/avatar-2.jpg",
-                games: ["英雄联盟"],
-                rank: "王者2000分",
-                orders: 2456,
-                rating: 4.9,
-                price: 80,
-                tags: ["职业", "打野", "带飞"],
-                online: true,
-              },
-              {
-                name: "上分小助手",
-                title: "国服路人王",
-                avatar: "/avatar-4.jpg",
-                games: ["王者荣耀", "和平精英"],
-                rank: "荣耀王者100星",
-                orders: 1823,
-                rating: 4.8,
-                price: 50,
-                tags: ["温柔", "耐心", "指导"],
-                online: true,
-              },
-              {
-                name: "FPS大神",
-                title: "前职业选手",
-                avatar: "/avatar-5.jpg",
-                games: ["无畏契约", "三角洲"],
-                rank: "超凡入圣",
-                orders: 987,
-                rating: 4.9,
-                price: 100,
-                tags: ["枪法", "意识", "专业"],
-                online: false,
-              },
-              {
-                name: "温柔陪练师",
-                title: "全能型选手",
-                avatar: "/avatar-6.jpg",
-                games: ["王者荣耀", "英雄联盟"],
-                rank: "多区王者",
-                orders: 3201,
-                rating: 5.0,
-                price: 60,
-                tags: ["声音好听", "技术强", "幽默"],
-                online: true,
-              },
-            ].map((coach, i) => (
+            {COACH_LIST.map((coach) => (
               <div
-                key={i}
+                key={coach.id}
                 className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
-                onClick={() => router.push(`/coach/${i + 1}`)}
+                onClick={() => router.push(`/coach/${coach.id}`)}
               >
                 <div className="flex items-start gap-3 mb-3">
                   <div className="relative">
@@ -172,7 +178,7 @@ export default function CoachPage() {
                     className="flex-1 h-8 text-xs border-white/10 hover:bg-white/5 bg-transparent"
                     onClick={(e) => {
                       e.stopPropagation()
-                      router.push(`/coach/${i + 1}`)
+                      router.push(`/coach/${coach.id}`)
                     }}
                   >
                     <MessageCircle size={14} className="mr-1" />
@@ -194,12 +200,164 @@ export default function CoachPage() {
             ))}
           </TabsContent>
 
-          <TabsContent value="pro" className="mt-4">
-            <div className="text-center py-12 text-white/40 text-sm">职业选手列表加载中...</div>
+          <TabsContent value="pro" className="mt-4 space-y-3">
+            {COACH_LIST.filter((c) => c.title.includes("职业")).map((coach) => (
+              <div
+                key={coach.id}
+                className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
+                onClick={() => router.push(`/coach/${coach.id}`)}
+              >
+                <div className="flex items-start gap-3 mb-3">
+                  <div className="relative">
+                    <div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
+                      <Image src={coach.avatar || "/placeholder.svg"} alt={coach.name} fill className="object-cover" />
+                    </div>
+                    {coach.online && (
+                      <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-background" />
+                    )}
+                  </div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <h4 className="font-bold truncate">{coach.name}</h4>
+                      {coach.rating >= 4.9 && <Award className="w-4 h-4 text-yellow-400" />}
+                    </div>
+
+                    <p className="text-xs text-white/60 mb-2">{coach.title}</p>
+
+                    <div className="flex items-center gap-3 text-xs text-white/50 mb-2">
+                      <span className="flex items-center gap-1">
+                        <Star size={12} className="text-primary fill-primary" />
+                        {coach.rating}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Trophy size={12} className="text-accent" />
+                        {coach.orders}单
+                      </span>
+                    </div>
+
+                    <div className="flex flex-wrap gap-1">
+                      {coach.tags.map((tag, j) => (
+                        <span key={j} className="px-2 py-0.5 rounded-full bg-white/5 text-[10px] text-white/60">
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="text-right">
+                    <div className="text-lg font-bold text-green-500">{coach.price}</div>
+                    <div className="text-[10px] text-white/50">元/局</div>
+                  </div>
+                </div>
+
+                <div className="flex gap-2 mt-3">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="flex-1 h-8 text-xs border-white/10 hover:bg-white/5 bg-transparent"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      router.push(`/coach/${coach.id}`)
+                    }}
+                  >
+                    <MessageCircle size={14} className="mr-1" />
+                    查看详情
+                  </Button>
+                  <Button
+                    size="sm"
+                    className="flex-1 h-8 text-xs bg-green-500 hover:bg-green-600"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleBookCoach(coach.name)
+                    }}
+                  >
+                    <Gamepad2 size={14} className="mr-1" />
+                    立即预约
+                  </Button>
+                </div>
+              </div>
+            ))}
           </TabsContent>
 
-          <TabsContent value="king" className="mt-4">
-            <div className="text-center py-12 text-white/40 text-sm">王者大神列表加载中...</div>
+          <TabsContent value="king" className="mt-4 space-y-3">
+            {COACH_LIST.filter((c) => c.rank.includes("王者") || c.rating === 5.0).map((coach) => (
+              <div
+                key={coach.id}
+                className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
+                onClick={() => router.push(`/coach/${coach.id}`)}
+              >
+                <div className="flex items-start gap-3 mb-3">
+                  <div className="relative">
+                    <div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
+                      <Image src={coach.avatar || "/placeholder.svg"} alt={coach.name} fill className="object-cover" />
+                    </div>
+                    {coach.online && (
+                      <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-background" />
+                    )}
+                  </div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <h4 className="font-bold truncate">{coach.name}</h4>
+                      {coach.rating >= 4.9 && <Award className="w-4 h-4 text-yellow-400" />}
+                    </div>
+
+                    <p className="text-xs text-white/60 mb-2">{coach.title}</p>
+
+                    <div className="flex items-center gap-3 text-xs text-white/50 mb-2">
+                      <span className="flex items-center gap-1">
+                        <Star size={12} className="text-primary fill-primary" />
+                        {coach.rating}
+                      </span>
+                      <span className="flex items-center gap-1">
+                        <Trophy size={12} className="text-accent" />
+                        {coach.orders}单
+                      </span>
+                    </div>
+
+                    <div className="flex flex-wrap gap-1">
+                      {coach.tags.map((tag, j) => (
+                        <span key={j} className="px-2 py-0.5 rounded-full bg-white/5 text-[10px] text-white/60">
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="text-right">
+                    <div className="text-lg font-bold text-green-500">{coach.price}</div>
+                    <div className="text-[10px] text-white/50">元/局</div>
+                  </div>
+                </div>
+
+                <div className="flex gap-2 mt-3">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="flex-1 h-8 text-xs border-white/10 hover:bg-white/5 bg-transparent"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      router.push(`/coach/${coach.id}`)
+                    }}
+                  >
+                    <MessageCircle size={14} className="mr-1" />
+                    查看详情
+                  </Button>
+                  <Button
+                    size="sm"
+                    className="flex-1 h-8 text-xs bg-green-500 hover:bg-green-600"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleBookCoach(coach.name)
+                    }}
+                  >
+                    <Gamepad2 size={14} className="mr-1" />
+                    立即预约
+                  </Button>
+                </div>
+              </div>
+            ))}
           </TabsContent>
         </Tabs>
       </div>
diff --git a/app/course/[id]/page.tsx b/app/course/[id]/page.tsx
index 0cf3209..a9f4d48 100644
--- a/app/course/[id]/page.tsx
+++ b/app/course/[id]/page.tsx
@@ -1,33 +1,158 @@
 "use client"
 
-import { ArrowLeft, Star, Clock, Users, PlayCircle, CheckCircle, Lock, Share2, MessageCircle } from 'lucide-react';
-import Image from "next/image";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { useAppContext } from "@/components/providers/app-provider"; // Import context
+import { ArrowLeft, Star, Clock, Users, PlayCircle, Lock, Share2 } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { PurchaseBar } from "@/components/shared/purchase-bar"
+
+const courseData: Record<string, any> = {
+  "1": {
+    id: "1",
+    streamerId: "1",
+    title: "打野进阶课：从入门到王者",
+    cover: "/live-lol.jpg",
+    streamer: {
+      name: "GM-远洋",
+      avatar: "/streamer-1.jpg",
+      title: "国服第一盲僧",
+    },
+    price: 299,
+    originalPrice: 499,
+    students: 1205,
+    duration: "8节课 (120分钟)",
+    rating: 4.9,
+    lessons: [
+      { title: "01. 打野基础思路与路线规划", duration: "15:00", isFree: true },
+      { title: "02. 如何高效刷野与反野", duration: "18:30", isFree: false },
+      { title: "03. Gank时机与路线选择", duration: "20:00", isFree: false },
+      { title: "04. 控龙与峡谷先锋运营", duration: "16:45", isFree: false },
+      { title: "05. 团战切入时机详解", duration: "22:10", isFree: false },
+      { title: "06. 逆风局如何翻盘", duration: "19:20", isFree: false },
+    ],
+  },
+  "2": {
+    id: "2",
+    streamerId: "2",
+    title: "无畏契约枪法训练营",
+    cover: "/live-valorant.jpg",
+    streamer: { name: "卡若", avatar: "/streamer-2.jpg", title: "前职业选手" },
+    price: 399,
+    originalPrice: 599,
+    students: 856,
+    duration: "10节课 (150分钟)",
+    rating: 4.8,
+    lessons: [
+      { title: "01. 准星设置与灵敏度调整", duration: "12:00", isFree: true },
+      { title: "02. 爆头线与预瞄点位", duration: "20:00", isFree: false },
+      { title: "03. 各类枪械弹道控制", duration: "25:00", isFree: false },
+      { title: "04. 常用身法技巧详解", duration: "18:00", isFree: false },
+      { title: "05. 地图道具使用教学", duration: "22:00", isFree: false },
+    ],
+  },
+  "3": {
+    id: "3",
+    streamerId: "3",
+    title: "和平精英四指操作教学",
+    cover: "/live-pubg.jpg",
+    streamer: { name: "小美", avatar: "/streamer-3.jpg", title: "全国冠军" },
+    price: 199,
+    originalPrice: 299,
+    students: 2340,
+    duration: "6节课 (90分钟)",
+    rating: 4.9,
+    lessons: [
+      { title: "01. 四指操作键位设置", duration: "10:00", isFree: true },
+      { title: "02. 基础移动与射击配合", duration: "15:00", isFree: false },
+      { title: "03. 压枪技巧与弹道控制", duration: "20:00", isFree: false },
+      { title: "04. 载具战斗与转移技巧", duration: "18:00", isFree: false },
+    ],
+  },
+  "4": {
+    id: "4",
+    streamerId: "4",
+    title: "原神深渊满星攻略",
+    cover: "/live-genshin.jpg",
+    streamer: { name: "星辰", avatar: "/streamer-4.jpg", title: "原神攻略大神" },
+    price: 149,
+    originalPrice: 249,
+    students: 3450,
+    duration: "5节课 (75分钟)",
+    rating: 4.7,
+    lessons: [
+      { title: "01. 深渊机制与阵容搭配", duration: "18:00", isFree: true },
+      { title: "02. 各层怪物特性解析", duration: "20:00", isFree: false },
+      { title: "03. 圣遗物选择与词条优化", duration: "22:00", isFree: false },
+      { title: "04. 手法与连招技巧", duration: "15:00", isFree: false },
+    ],
+  },
+  "5": {
+    id: "5",
+    streamerId: "5",
+    title: "王者荣耀上分秘籍",
+    cover: "/live-hok.jpg",
+    streamer: { name: "阿杰", avatar: "/streamer-5.jpg", title: "国服百星" },
+    price: 249,
+    originalPrice: 399,
+    students: 4560,
+    duration: "8节课 (120分钟)",
+    rating: 4.8,
+    lessons: [
+      { title: "01. 段位机制与上分心态", duration: "12:00", isFree: true },
+      { title: "02. 各路位选英雄推荐", duration: "18:00", isFree: false },
+      { title: "03. 对线技巧与兵线控制", duration: "20:00", isFree: false },
+      { title: "04. 节奏把控与支援时机", duration: "22:00", isFree: false },
+      { title: "05. 团战站位与技能释放", duration: "25:00", isFree: false },
+    ],
+  },
+  "6": {
+    id: "6",
+    streamerId: "6",
+    title: "魔兽世界团本攻略",
+    cover: "/live-wow.jpg",
+    streamer: { name: "暗影", avatar: "/streamer-6.jpg", title: "首杀团队成员" },
+    price: 499,
+    originalPrice: 799,
+    students: 890,
+    duration: "12节课 (200分钟)",
+    rating: 4.9,
+    lessons: [
+      { title: "01. 团队配置与职责分工", duration: "15:00", isFree: true },
+      { title: "02. BOSS机制详细解析", duration: "30:00", isFree: false },
+      { title: "03. 治疗与坦克配合要点", duration: "25:00", isFree: false },
+      { title: "04. DPS输出循环优化", duration: "28:00", isFree: false },
+      { title: "05. 困难模式特殊机制", duration: "35:00", isFree: false },
+    ],
+  },
+}
 
 export default function CourseDetailPage({ params }: { params: { id: string } }) {
-  const { pay } = useAppContext(); // Use context
+  const router = useRouter()
+  const [showShareModal, setShowShareModal] = useState(false)
 
-  const handlePurchase = () => {
-    pay(299, "diamonds", "打野进阶课：从入门到王者", "product");
-  };
+  const course = courseData[params.id] || courseData["1"]
+
+  const handleShare = (platform: string) => {
+    setShowShareModal(false)
+  }
 
   return (
-    <div className="min-h-screen bg-background pb-24">
+    <div className="min-h-screen bg-background pb-36">
       {/* Header Image */}
       <div className="relative aspect-video w-full">
-        <Image
-          src="/esports-tournament-stadium-neon-lights-crowd.jpg"
-          alt="Course Cover"
-          fill
-          className="object-cover"
-        />
+        <Image src={course.cover || "/placeholder.svg"} alt="Course Cover" fill className="object-cover" />
         <div className="absolute inset-0 bg-black/30" />
-        <Link href="/moments" className="absolute top-4 left-4 w-10 h-10 rounded-full bg-black/50 backdrop-blur-md flex items-center justify-center text-white hover:bg-black/70 transition-colors">
+        <Link
+          href="/"
+          className="absolute top-4 left-4 w-10 h-10 rounded-full bg-black/50 backdrop-blur-md flex items-center justify-center text-white hover:bg-black/70 transition-colors"
+        >
           <ArrowLeft size={20} />
         </Link>
-        <button className="absolute top-4 right-4 w-10 h-10 rounded-full bg-black/50 backdrop-blur-md flex items-center justify-center text-white hover:bg-black/70 transition-colors">
+        <button
+          onClick={() => setShowShareModal(true)}
+          className="absolute top-4 right-4 w-10 h-10 rounded-full bg-black/50 backdrop-blur-md flex items-center justify-center text-white hover:bg-black/70 transition-colors"
+        >
           <Share2 size={20} />
         </button>
         <div className="absolute inset-0 flex items-center justify-center">
@@ -35,62 +160,65 @@ export default function CourseDetailPage({ params }: { params: { id: string } })
             <PlayCircle size={48} className="text-white fill-white/20" />
           </div>
         </div>
+        <div className="absolute bottom-4 right-4 px-3 py-1.5 rounded-lg bg-primary/90 backdrop-blur-sm">
+          <span className="text-black font-bold text-lg">{course.price}</span>
+          <span className="text-black/70 text-xs ml-1">钻石</span>
+          <span className="text-black/50 text-xs ml-2 line-through">{course.originalPrice}</span>
+        </div>
       </div>
 
       <div className="p-4">
-        {/* Title & Price */}
-        <div className="flex items-start justify-between mb-4">
-          <div>
-            <h1 className="text-xl font-bold mb-2">打野进阶课：从入门到王者</h1>
-            <div className="flex items-center gap-4 text-xs text-white/60">
-              <span className="flex items-center gap-1"><Clock size={14} /> 8节课 (120分钟)</span>
-              <span className="flex items-center gap-1"><Users size={14} /> 1.2k人已学</span>
-            </div>
-          </div>
-          <div className="text-right">
-            <div className="text-2xl font-bold text-primary">299</div>
-            <div className="text-xs text-white/50">钻石</div>
+        <div className="mb-4">
+          <h1 className="text-xl font-bold mb-2">{course.title}</h1>
+          <div className="flex items-center gap-4 text-xs text-white/60">
+            <span className="flex items-center gap-1">
+              <Star size={14} className="text-primary fill-primary" />
+              {course.rating}分
+            </span>
+            <span className="flex items-center gap-1">
+              <Clock size={14} /> {course.duration}
+            </span>
+            <span className="flex items-center gap-1">
+              <Users size={14} /> {course.students}人已学
+            </span>
           </div>
         </div>
 
-        {/* Instructor */}
-        <div className="flex items-center gap-3 p-3 rounded-xl bg-white/5 mb-6">
-          <div className="w-12 h-12 rounded-full overflow-hidden border border-white/10">
-            <Image src="/gamer-girl-headphones.jpg" alt="Instructor" width={48} height={48} className="object-cover" />
+        <Link
+          href={`/live/${course.streamerId}`}
+          className="flex items-center gap-3 p-3 rounded-xl bg-white/5 mb-6 hover:bg-white/10 transition-colors"
+        >
+          <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-primary relative">
+            <Image src={course.streamer.avatar || "/placeholder.svg"} alt="Instructor" fill className="object-cover" />
           </div>
           <div className="flex-1">
-            <h3 className="font-bold text-sm">GM-远洋</h3>
-            <p className="text-xs text-white/50">国服第一盲僧，前职业选手</p>
+            <h3 className="font-bold text-sm">{course.streamer.name}</h3>
+            <p className="text-xs text-white/50">{course.streamer.title}</p>
           </div>
           <button className="px-4 py-1.5 rounded-full border border-primary text-primary text-xs font-bold hover:bg-primary hover:text-black transition-colors">
             关注
           </button>
-        </div>
+        </Link>
 
-        {/* Course Outline */}
-        <div className="mb-20">
+        <div className="mb-6">
           <h3 className="font-bold text-lg mb-4">课程目录</h3>
           <div className="space-y-3">
-            {[
-              { title: "01. 打野基础思路与路线规划", duration: "15:00", isFree: true },
-              { title: "02. 如何高效刷野与反野", duration: "18:30", isFree: false },
-              { title: "03. Gank时机与路线选择", duration: "20:00", isFree: false },
-              { title: "04. 控龙与峡谷先锋运营", duration: "16:45", isFree: false },
-              { title: "05. 团战切入时机详解", duration: "22:10", isFree: false },
-              { title: "06. 逆风局如何翻盘", duration: "19:20", isFree: false },
-            ].map((lesson, i) => (
-              <div key={i} className="flex items-center gap-4 p-3 rounded-xl hover:bg-white/5 transition-colors cursor-pointer group">
+            {course.lessons.map((lesson: any, i: number) => (
+              <div
+                key={i}
+                className="flex items-center gap-4 p-3 rounded-xl hover:bg-white/5 transition-colors cursor-pointer group"
+              >
                 <div className="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center text-xs font-bold text-white/50 group-hover:bg-primary group-hover:text-black transition-colors">
                   {i + 1}
                 </div>
                 <div className="flex-1">
-                  <h4 className="text-sm font-medium mb-1 group-hover:text-primary transition-colors">{lesson.title}</h4>
+                  <h4 className="text-sm font-medium mb-1 group-hover:text-primary transition-colors">
+                    {lesson.title}
+                  </h4>
                   <span className="text-xs text-white/40">{lesson.duration}</span>
                 </div>
                 {lesson.isFree ? (
-                  <div className="px-2 py-0.5 rounded bg-green-500/20 text-green-500 text-[10px] font-bold">
-                    试看
-                  </div>
+                  <div className="px-2 py-0.5 rounded bg-green-500/20 text-green-500 text-[10px] font-bold">试看</div>
                 ) : (
                   <Lock size={16} className="text-white/30" />
                 )}
@@ -100,23 +228,47 @@ export default function CourseDetailPage({ params }: { params: { id: string } })
         </div>
       </div>
 
-      {/* Bottom Action Bar */}
-      <div className="fixed bottom-0 left-0 right-0 p-4 bg-background/80 backdrop-blur-lg border-t border-white/10 flex items-center gap-4 z-50">
-        <div className="flex flex-col items-center gap-1 text-white/60 cursor-pointer hover:text-primary transition-colors">
-          <MessageCircle size={20} />
-          <span className="text-[10px]">咨询</span>
+      {/* Share Modal */}
+      {showShareModal && (
+        <div className="fixed inset-0 z-50 flex items-end justify-center">
+          <div className="absolute inset-0 bg-black/60" onClick={() => setShowShareModal(false)} />
+          <div className="relative w-full bg-zinc-900 rounded-t-3xl p-6 animate-slide-up">
+            <h3 className="text-lg font-bold mb-4 text-center">分享课程</h3>
+            <div className="grid grid-cols-4 gap-4 mb-6">
+              {[
+                { name: "微信", icon: "💬", color: "bg-green-500" },
+                { name: "朋友圈", icon: "🌐", color: "bg-green-600" },
+                { name: "QQ", icon: "🐧", color: "bg-blue-500" },
+                { name: "微博", icon: "📱", color: "bg-red-500" },
+              ].map((platform) => (
+                <button
+                  key={platform.name}
+                  onClick={() => handleShare(platform.name)}
+                  className="flex flex-col items-center gap-2"
+                >
+                  <div className={`w-14 h-14 rounded-full ${platform.color} flex items-center justify-center text-2xl`}>
+                    {platform.icon}
+                  </div>
+                  <span className="text-xs text-white/70">{platform.name}</span>
+                </button>
+              ))}
+            </div>
+            <button
+              onClick={() => setShowShareModal(false)}
+              className="w-full py-3 rounded-xl bg-white/10 text-white font-medium"
+            >
+              取消
+            </button>
+          </div>
         </div>
-        <div className="flex flex-col items-center gap-1 text-white/60 cursor-pointer hover:text-primary transition-colors">
-          <Star size={20} />
-          <span className="text-[10px]">收藏</span>
-        </div>
-        <Button 
-          className="flex-1 bg-primary text-black font-bold hover:bg-primary/90"
-          onClick={handlePurchase} // Add click handler
-        >
-          立即购买 (299钻石)
-        </Button>
-      </div>
+      )}
+
+      <PurchaseBar
+        price={course.price}
+        productName={course.title}
+        chatLink={`/chat/course-${params.id}`}
+        onSuccess={() => router.push("/messages")}
+      />
     </div>
-  );
+  )
 }
diff --git a/app/cp/[id]/page.tsx b/app/cp/[id]/page.tsx
index 191647e..30994d1 100644
--- a/app/cp/[id]/page.tsx
+++ b/app/cp/[id]/page.tsx
@@ -1,26 +1,146 @@
 "use client"
 
-import { ArrowLeft, Heart, Star, MessageCircle, Shield, Trophy, Users, Gamepad2 } from "lucide-react"
+import {
+  ArrowLeft,
+  Heart,
+  Star,
+  MessageCircle,
+  Shield,
+  Trophy,
+  Users,
+  Gamepad2,
+  Send,
+  Phone,
+  Video,
+} from "lucide-react"
 import { useRouter } from "next/navigation"
 import Image from "next/image"
 import { Button } from "@/components/ui/button"
 import { toast } from "@/hooks/use-toast"
+import { useState, use } from "react"
 
-export default function CPDetailPage({ params }: { params: { id: string } }) {
+const CP_DATA: Record<
+  string,
+  {
+    name: string
+    gender: string
+    age: number
+    avatar: string
+    cover: string
+    games: { game: string; rank: string; role: string }[]
+    voice: string
+    bio: string
+    tags: string[]
+    friends: number
+    matches: number
+    online: boolean
+  }
+> = {
+  "1": {
+    name: "甜心辅助",
+    gender: "女",
+    age: 22,
+    avatar: "/cp-avatar-1.jpg",
+    cover: "/cp-cover-1.jpg",
+    games: [
+      { game: "王者荣耀", rank: "星耀I", role: "瑶、大乔、明世隐" },
+      { game: "和平精英", rank: "无敌战神", role: "四排辅助位" },
+    ],
+    voice: "温柔甜美",
+    bio: "喜欢玩辅助，找个靠谱的ADC一起开黑~",
+    tags: ["声音好听", "技术不错", "温柔", "有耐心", "爱聊天"],
+    friends: 68,
+    matches: 385,
+    online: true,
+  },
+  "2": {
+    name: "职业打野",
+    gender: "男",
+    age: 24,
+    avatar: "/cp-avatar-2.jpg",
+    cover: "/cp-cover-2.jpg",
+    games: [
+      { game: "英雄联盟", rank: "大师", role: "打野位" },
+      { game: "无畏契约", rank: "超凡入圣", role: "突破手" },
+    ],
+    voice: "成熟稳重",
+    bio: "前职业选手，带你上分不是梦",
+    tags: ["技术流", "有耐心", "幽默", "靠谱", "Carry"],
+    friends: 156,
+    matches: 1230,
+    online: true,
+  },
+  "3": {
+    name: "软萌小姐姐",
+    gender: "女",
+    age: 20,
+    avatar: "/cp-avatar-3.jpg",
+    cover: "/cp-cover-3.jpg",
+    games: [
+      { game: "王者荣耀", rank: "钻石II", role: "法师/辅助" },
+      { game: "原神", rank: "56级", role: "休闲探索" },
+    ],
+    voice: "软萌可爱",
+    bio: "游戏菜但是爱玩，找个不嫌弃的~",
+    tags: ["萌妹子", "爱聊天", "佛系", "不坑", "快乐游戏"],
+    friends: 42,
+    matches: 198,
+    online: false,
+  },
+  "4": {
+    name: "中单刺客",
+    gender: "男",
+    age: 23,
+    avatar: "/cp-avatar-4.jpg",
+    cover: "/cp-cover-4.jpg",
+    games: [{ game: "英雄联盟", rank: "王者", role: "中单刺客" }],
+    voice: "阳光帅气",
+    bio: "擅长刺客中单，带妹上分专业户",
+    tags: ["Carry型", "稳定", "负责", "技术强", "有趣"],
+    friends: 89,
+    matches: 756,
+    online: true,
+  },
+}
+
+export default function CPDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
   const router = useRouter()
+  const [isFollowing, setIsFollowing] = useState(false)
+  const [showChat, setShowChat] = useState(false)
+  const [message, setMessage] = useState("")
+  const [messages, setMessages] = useState<{ from: string; text: string }[]>([])
+
+  const cp = CP_DATA[id] || CP_DATA["1"]
+
+  const handleFollow = () => {
+    setIsFollowing(!isFollowing)
+    toast({
+      title: isFollowing ? "已取消关注" : "关注成功",
+      description: isFollowing ? "" : `你已关注${cp.name}`,
+    })
+  }
 
   const handleSendRequest = () => {
-    toast({
-      title: "请求已发送",
-      description: "对方收到通知后会尽快回复你",
-    })
+    setShowChat(true)
+    setMessages([{ from: "system", text: `你已向${cp.name}发送了交友请求，对方已同意~` }])
+  }
+
+  const handleSendMessage = () => {
+    if (!message.trim()) return
+    setMessages((prev) => [...prev, { from: "me", text: message }])
+    setMessage("")
+    // 模拟回复
+    setTimeout(() => {
+      setMessages((prev) => [...prev, { from: "cp", text: "好呀，一起开黑吧~" }])
+    }, 1500)
   }
 
   return (
     <div className="min-h-screen bg-background pb-24 relative">
       {/* Hero Section */}
       <div className="h-48 relative">
-        <Image src="/esports-live-stream-gameplay.jpg" alt="Cover" fill className="object-cover" />
+        <Image src={cp.cover || "/placeholder.svg"} alt="Cover" fill className="object-cover" />
         <div className="absolute inset-0 bg-gradient-to-b from-transparent to-background" />
         <button
           onClick={() => router.back()}
@@ -28,22 +148,31 @@ export default function CPDetailPage({ params }: { params: { id: string } }) {
         >
           <ArrowLeft size={20} />
         </button>
+        {cp.online && (
+          <div className="absolute top-4 right-4 px-3 py-1 rounded-full bg-green-500/20 border border-green-500/50 text-green-400 text-xs flex items-center gap-1">
+            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
+            在线
+          </div>
+        )}
       </div>
 
       <div className="px-4 -mt-12 relative z-10">
         <div className="flex items-end justify-between mb-4">
           <div className="w-24 h-24 rounded-2xl border-4 border-background bg-muted relative overflow-hidden shadow-xl">
-            <Image src="/avatar-1.jpg" alt="Avatar" fill className="object-cover" />
-            <div className="absolute bottom-0 right-0 w-5 h-5 rounded-full bg-green-500 border-2 border-background" />
+            <Image src={cp.avatar || "/placeholder.svg"} alt="Avatar" fill className="object-cover" />
+            {cp.online && (
+              <div className="absolute bottom-0 right-0 w-5 h-5 rounded-full bg-green-500 border-2 border-background" />
+            )}
           </div>
           <div className="flex gap-2 mb-2">
             <Button
               size="sm"
               variant="outline"
-              className="h-8 text-xs gap-1 bg-transparent border-pink-500/50 text-pink-400 hover:bg-pink-500/10"
+              className={`h-8 text-xs gap-1 bg-transparent ${isFollowing ? "border-white/20 text-white/60" : "border-pink-500/50 text-pink-400 hover:bg-pink-500/10"}`}
+              onClick={handleFollow}
             >
-              <Heart size={14} />
-              关注
+              <Heart size={14} className={isFollowing ? "fill-current" : ""} />
+              {isFollowing ? "已关注" : "关注"}
             </Button>
             <Button size="sm" className="h-8 text-xs bg-pink-500 gap-1 hover:bg-pink-600" onClick={handleSendRequest}>
               <MessageCircle size={14} />
@@ -54,24 +183,26 @@ export default function CPDetailPage({ params }: { params: { id: string } }) {
 
         <div className="mb-6">
           <div className="flex items-center gap-2 mb-1">
-            <h1 className="text-2xl font-bold">甜心辅助</h1>
-            <span className="px-2 py-0.5 rounded bg-pink-500/20 text-pink-400 text-[10px] border border-pink-500/30 font-bold">
-              女 · 22岁
+            <h1 className="text-2xl font-bold">{cp.name}</h1>
+            <span
+              className={`px-2 py-0.5 rounded text-[10px] border font-bold ${cp.gender === "女" ? "bg-pink-500/20 text-pink-400 border-pink-500/30" : "bg-blue-500/20 text-blue-400 border-blue-500/30"}`}
+            >
+              {cp.gender} · {cp.age}岁
             </span>
           </div>
-          <p className="text-sm text-white/60 mb-3">喜欢玩辅助，找个靠谱的ADC一起开黑~</p>
+          <p className="text-sm text-white/60 mb-3">{cp.bio}</p>
           <div className="flex items-center gap-4 text-xs text-white/40">
             <span className="flex items-center gap-1">
               <Star size={12} className="text-primary" />
-              星耀段位
+              {cp.voice}
             </span>
             <span className="flex items-center gap-1">
               <Trophy size={12} className="text-accent" />
-              385 场游戏
+              {cp.matches} 场游戏
             </span>
             <span className="flex items-center gap-1">
               <Users size={12} className="text-secondary" />
-              68 位好友
+              {cp.friends} 位好友
             </span>
           </div>
         </div>
@@ -83,14 +214,11 @@ export default function CPDetailPage({ params }: { params: { id: string } }) {
             擅长游戏
           </h3>
           <div className="grid grid-cols-2 gap-3">
-            {[
-              { game: "王者荣耀", rank: "星耀I", hero: "瑶、大乔" },
-              { game: "和平精英", rank: "无敌战神", role: "四排辅助位" },
-            ].map((item, i) => (
+            {cp.games.map((item, i) => (
               <div key={i} className="glass-card p-3 rounded-xl">
                 <div className="font-bold text-sm mb-1">{item.game}</div>
                 <div className="text-xs text-white/50">{item.rank}</div>
-                <div className="text-xs text-primary mt-1">{item.hero || item.role}</div>
+                <div className="text-xs text-primary mt-1">{item.role}</div>
               </div>
             ))}
           </div>
@@ -100,7 +228,7 @@ export default function CPDetailPage({ params }: { params: { id: string } }) {
         <div className="space-y-4 mb-6">
           <h3 className="font-bold text-sm">个人标签</h3>
           <div className="flex flex-wrap gap-2">
-            {["声音好听", "技术不错", "温柔", "有耐心", "爱聊天"].map((tag, i) => (
+            {cp.tags.map((tag, i) => (
               <span
                 key={i}
                 className="px-3 py-1.5 rounded-full bg-pink-500/10 border border-pink-500/30 text-xs text-pink-400"
@@ -122,6 +250,68 @@ export default function CPDetailPage({ params }: { params: { id: string } }) {
           </div>
         </div>
       </div>
+
+      {/* Chat Modal */}
+      {showChat && (
+        <div className="fixed inset-0 z-50 bg-background flex flex-col">
+          <header className="glass px-4 py-3 flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <button onClick={() => setShowChat(false)} className="p-2 -ml-2">
+                <ArrowLeft size={20} />
+              </button>
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-full bg-muted relative overflow-hidden">
+                  <Image src={cp.avatar || "/placeholder.svg"} alt={cp.name} fill className="object-cover" />
+                </div>
+                <div>
+                  <div className="font-bold text-sm">{cp.name}</div>
+                  <div className="text-[10px] text-green-400">在线</div>
+                </div>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <button className="p-2 hover:bg-white/5 rounded-full">
+                <Phone size={18} />
+              </button>
+              <button className="p-2 hover:bg-white/5 rounded-full">
+                <Video size={18} />
+              </button>
+            </div>
+          </header>
+
+          <div className="flex-1 overflow-y-auto p-4 space-y-3">
+            {messages.map((msg, i) => (
+              <div key={i} className={`flex ${msg.from === "me" ? "justify-end" : "justify-start"}`}>
+                {msg.from === "system" ? (
+                  <div className="text-xs text-white/40 text-center w-full py-2">{msg.text}</div>
+                ) : (
+                  <div
+                    className={`max-w-[70%] px-4 py-2 rounded-2xl ${msg.from === "me" ? "bg-pink-500 text-white" : "bg-white/10 text-white"}`}
+                  >
+                    {msg.text}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+
+          <div className="p-4 glass">
+            <div className="flex items-center gap-2">
+              <input
+                type="text"
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                placeholder="输入消息..."
+                className="flex-1 bg-white/5 rounded-full px-4 py-2 text-sm outline-none"
+                onKeyPress={(e) => e.key === "Enter" && handleSendMessage()}
+              />
+              <button onClick={handleSendMessage} className="p-2 bg-pink-500 rounded-full">
+                <Send size={18} />
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
diff --git a/app/cp/page.tsx b/app/cp/page.tsx
index 6163b3f..c8886c2 100644
--- a/app/cp/page.tsx
+++ b/app/cp/page.tsx
@@ -7,6 +7,61 @@ import { Button } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { toast } from "@/hooks/use-toast"
 
+const CP_LIST = [
+  {
+    id: "1",
+    name: "甜心辅助",
+    gender: "女",
+    age: 22,
+    avatar: "/cp-avatar-1.jpg",
+    games: ["王者荣耀", "和平精英"],
+    voice: "温柔甜美",
+    rank: "星耀",
+    online: true,
+    tags: ["声音好听", "技术不错", "温柔"],
+    bio: "喜欢玩辅助，找个靠谱的ADC一起开黑~",
+  },
+  {
+    id: "2",
+    name: "职业打野",
+    gender: "男",
+    age: 24,
+    avatar: "/cp-avatar-2.jpg",
+    games: ["英雄联盟", "无畏契约"],
+    voice: "成熟稳重",
+    rank: "大师",
+    online: true,
+    tags: ["技术流", "有耐心", "幽默"],
+    bio: "前职业选手，带你上分不是梦",
+  },
+  {
+    id: "3",
+    name: "软萌小姐姐",
+    gender: "女",
+    age: 20,
+    avatar: "/cp-avatar-3.jpg",
+    games: ["王者荣耀", "原神"],
+    voice: "软萌可爱",
+    rank: "钻石",
+    online: false,
+    tags: ["萌妹子", "爱聊天", "佛系"],
+    bio: "游戏菜但是爱玩，找个不嫌弃的~",
+  },
+  {
+    id: "4",
+    name: "中单刺客",
+    gender: "男",
+    age: 23,
+    avatar: "/cp-avatar-4.jpg",
+    games: ["英雄联盟"],
+    voice: "阳光帅气",
+    rank: "王者",
+    online: true,
+    tags: ["Carry型", "稳定", "负责"],
+    bio: "擅长刺客中单，带妹上分专业户",
+  },
+]
+
 export default function CPPage() {
   const router = useRouter()
 
@@ -69,60 +124,11 @@ export default function CPPage() {
           </TabsList>
 
           <TabsContent value="all" className="mt-4 space-y-3">
-            {[
-              {
-                name: "甜心辅助",
-                gender: "女",
-                age: 22,
-                avatar: "/avatar-1.jpg",
-                games: ["王者荣耀", "和平精英"],
-                voice: "温柔甜美",
-                rank: "星耀",
-                online: true,
-                tags: ["声音好听", "技术不错", "温柔"],
-                bio: "喜欢玩辅助，找个靠谱的ADC一起开黑~",
-              },
-              {
-                name: "职业打野",
-                gender: "男",
-                age: 24,
-                avatar: "/avatar-2.jpg",
-                games: ["英雄联盟", "无畏契约"],
-                voice: "成熟稳重",
-                rank: "大师",
-                online: true,
-                tags: ["技术流", "有耐心", "幽默"],
-                bio: "前职业选手，带你上分不是梦",
-              },
-              {
-                name: "软萌小姐姐",
-                gender: "女",
-                age: 20,
-                avatar: "/avatar-3.jpg",
-                games: ["王者荣耀", "原神"],
-                voice: "软萌可爱",
-                rank: "钻石",
-                online: false,
-                tags: ["萌妹子", "爱聊天", "佛系"],
-                bio: "游戏菜但是爱玩，找个不嫌弃的~",
-              },
-              {
-                name: "中单刺客",
-                gender: "男",
-                age: 23,
-                avatar: "/avatar-4.jpg",
-                games: ["英雄联盟"],
-                voice: "阳光帅气",
-                rank: "王者",
-                online: true,
-                tags: ["Carry型", "稳定", "负责"],
-                bio: "擅长刺客中单，带妹上分专业户",
-              },
-            ].map((cp, i) => (
+            {CP_LIST.map((cp) => (
               <div
-                key={i}
+                key={cp.id}
                 className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
-                onClick={() => router.push(`/cp/${i + 1}`)}
+                onClick={() => router.push(`/cp/${cp.id}`)}
               >
                 <div className="flex items-start gap-3 mb-3">
                   <div className="relative">
@@ -182,7 +188,7 @@ export default function CPPage() {
                     className="flex-1 h-8 text-xs bg-pink-500 hover:bg-pink-600"
                     onClick={(e) => {
                       e.stopPropagation()
-                      router.push(`/cp/${i + 1}`)
+                      router.push(`/cp/${cp.id}`)
                     }}
                   >
                     <Heart size={14} className="mr-1" />
@@ -193,12 +199,152 @@ export default function CPPage() {
             ))}
           </TabsContent>
 
-          <TabsContent value="girl" className="mt-4">
-            <div className="text-center py-12 text-white/40 text-sm">女生列表加载中...</div>
+          <TabsContent value="girl" className="mt-4 space-y-3">
+            {CP_LIST.filter((cp) => cp.gender === "女").map((cp) => (
+              <div
+                key={cp.id}
+                className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
+                onClick={() => router.push(`/cp/${cp.id}`)}
+              >
+                <div className="flex items-start gap-3 mb-3">
+                  <div className="relative">
+                    <div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
+                      <Image src={cp.avatar || "/placeholder.svg"} alt={cp.name} fill className="object-cover" />
+                    </div>
+                    {cp.online && (
+                      <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-background" />
+                    )}
+                  </div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <h4 className="font-bold truncate">{cp.name}</h4>
+                      <span className="px-1.5 py-0.5 rounded text-[10px] bg-pink-500/20 text-pink-400">
+                        {cp.gender} · {cp.age}岁
+                      </span>
+                    </div>
+
+                    <div className="flex items-center gap-3 text-xs text-white/50 mb-2">
+                      <span className="flex items-center gap-1">
+                        <Star size={12} className="text-primary" />
+                        {cp.rank}
+                      </span>
+                      <span>{cp.voice}</span>
+                    </div>
+
+                    <p className="text-xs text-white/60 mb-2 line-clamp-1">{cp.bio}</p>
+
+                    <div className="flex flex-wrap gap-1">
+                      {cp.tags.map((tag, j) => (
+                        <span key={j} className="px-2 py-0.5 rounded-full bg-white/5 text-[10px] text-white/60">
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex gap-2 mt-3">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="flex-1 h-8 text-xs border-white/10 hover:bg-white/5 bg-transparent"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleContact(cp.name)
+                    }}
+                  >
+                    <MessageCircle size={14} className="mr-1" />
+                    打个招呼
+                  </Button>
+                  <Button
+                    size="sm"
+                    className="flex-1 h-8 text-xs bg-pink-500 hover:bg-pink-600"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      router.push(`/cp/${cp.id}`)
+                    }}
+                  >
+                    <Heart size={14} className="mr-1" />
+                    查看详情
+                  </Button>
+                </div>
+              </div>
+            ))}
           </TabsContent>
 
-          <TabsContent value="boy" className="mt-4">
-            <div className="text-center py-12 text-white/40 text-sm">男生列表加载中...</div>
+          <TabsContent value="boy" className="mt-4 space-y-3">
+            {CP_LIST.filter((cp) => cp.gender === "男").map((cp) => (
+              <div
+                key={cp.id}
+                className="glass-card p-4 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
+                onClick={() => router.push(`/cp/${cp.id}`)}
+              >
+                <div className="flex items-start gap-3 mb-3">
+                  <div className="relative">
+                    <div className="w-16 h-16 rounded-lg bg-muted relative overflow-hidden">
+                      <Image src={cp.avatar || "/placeholder.svg"} alt={cp.name} fill className="object-cover" />
+                    </div>
+                    {cp.online && (
+                      <div className="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-background" />
+                    )}
+                  </div>
+
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      <h4 className="font-bold truncate">{cp.name}</h4>
+                      <span className="px-1.5 py-0.5 rounded text-[10px] bg-blue-500/20 text-blue-400">
+                        {cp.gender} · {cp.age}岁
+                      </span>
+                    </div>
+
+                    <div className="flex items-center gap-3 text-xs text-white/50 mb-2">
+                      <span className="flex items-center gap-1">
+                        <Star size={12} className="text-primary" />
+                        {cp.rank}
+                      </span>
+                      <span>{cp.voice}</span>
+                    </div>
+
+                    <p className="text-xs text-white/60 mb-2 line-clamp-1">{cp.bio}</p>
+
+                    <div className="flex flex-wrap gap-1">
+                      {cp.tags.map((tag, j) => (
+                        <span key={j} className="px-2 py-0.5 rounded-full bg-white/5 text-[10px] text-white/60">
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                <div className="flex gap-2 mt-3">
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    className="flex-1 h-8 text-xs border-white/10 hover:bg-white/5 bg-transparent"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      handleContact(cp.name)
+                    }}
+                  >
+                    <MessageCircle size={14} className="mr-1" />
+                    打个招呼
+                  </Button>
+                  <Button
+                    size="sm"
+                    className="flex-1 h-8 text-xs bg-pink-500 hover:bg-pink-600"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      router.push(`/cp/${cp.id}`)
+                    }}
+                  >
+                    <Heart size={14} className="mr-1" />
+                    查看详情
+                  </Button>
+                </div>
+              </div>
+            ))}
           </TabsContent>
         </Tabs>
       </div>
diff --git a/app/guild/[id]/page.tsx b/app/guild/[id]/page.tsx
index 3312eb4..29551b3 100644
--- a/app/guild/[id]/page.tsx
+++ b/app/guild/[id]/page.tsx
@@ -5,11 +5,62 @@ import { useRouter } from "next/navigation"
 import Image from "next/image"
 import { Button } from "@/components/ui/button"
 import { toast } from "@/hooks/use-toast"
+import { useState } from "react"
+
+const guildData: Record<string, any> = {
+  "1": {
+    name: "东东电竞",
+    logo: "/esports-team-logo.jpg",
+    cover: "/esports-tournament-stadium.jpg",
+    level: 10,
+    members: 1205,
+    rank: 1,
+    rating: 4.9,
+    description: "国服顶尖路人王聚集地，专注高端局陪练与代练业务。月入百万不是梦，加入我们，成就电竞梦想！",
+    benefits: [
+      { title: "专属培训体系", desc: "王者荣耀/LOL职业教练一对一指导，快速提升技术", color: "border-primary" },
+      { title: "优先派单特权", desc: "优质高价单优先派送，月收入提升50%", color: "border-secondary" },
+      { title: "法律援助支持", desc: "专业律师团队，保障您的合法权益与收入", color: "border-accent" },
+      { title: "线下基地入驻", desc: "杭州/上海5000平米电竞基地免费入住", color: "border-green-500" },
+    ],
+    requirements: [
+      { label: "游戏段位", text: "王者荣耀荣耀王者50星以上 / LOL大师以上 / 无畏契约超凡入圣" },
+      { label: "语音要求", text: "普通话标准，声音清晰，具备良好的沟通能力" },
+      { label: "设备要求", text: "拥有专业的电竞设备（电脑/手机）和安静的直播/游戏环境" },
+      { label: "在线时间", text: "每天稳定在线时长不低于4小时" },
+    ],
+  },
+  "2": {
+    name: "星耀公会",
+    logo: "/esports-team-logo.jpg",
+    cover: "/esports-tournament-stadium.jpg",
+    level: 8,
+    members: 856,
+    rank: 3,
+    rating: 4.7,
+    description: "专注王者荣耀高端陪练，拥有多名国服百星大神。新人友好，带你快速上分！",
+    benefits: [
+      { title: "新人培训", desc: "针对新人的系统培训，快速上手接单", color: "border-primary" },
+      { title: "稳定派单", desc: "每日稳定订单量，收入有保障", color: "border-secondary" },
+      { title: "技术交流", desc: "每周技术分享会，持续提升实力", color: "border-accent" },
+      { title: "福利活动", desc: "定期举办线上活动和抽奖", color: "border-green-500" },
+    ],
+    requirements: [
+      { label: "游戏段位", text: "王者荣耀荣耀王者以上" },
+      { label: "语音要求", text: "普通话标准，有耐心" },
+      { label: "在线时间", text: "每天在线不低于3小时" },
+    ],
+  },
+}
 
 export default function GuildDetailPage({ params }: { params: { id: string } }) {
   const router = useRouter()
+  const [isApplied, setIsApplied] = useState(false)
+
+  const guild = guildData[params.id] || guildData["1"]
 
   const handleApply = () => {
+    setIsApplied(true)
     toast({
       title: "申请已提交",
       description: "公会管理员将在24小时内审核您的申请",
@@ -20,7 +71,7 @@ export default function GuildDetailPage({ params }: { params: { id: string } })
     <div className="min-h-screen bg-background pb-24 relative">
       {/* Hero Section */}
       <div className="h-48 relative">
-        <Image src="/esports-tournament-stadium.jpg" alt="Cover" fill className="object-cover" />
+        <Image src={guild.cover || "/placeholder.svg"} alt="Cover" fill className="object-cover" />
         <div className="absolute inset-0 bg-gradient-to-b from-transparent to-background" />
         <button
           onClick={() => router.back()}
@@ -33,42 +84,45 @@ export default function GuildDetailPage({ params }: { params: { id: string } })
       <div className="px-4 -mt-12 relative z-10">
         <div className="flex items-end justify-between mb-4">
           <div className="w-24 h-24 rounded-2xl border-4 border-background bg-muted relative overflow-hidden shadow-xl">
-            <Image src="/esports-team-logo.jpg" alt="Logo" fill className="object-cover" />
+            <Image src={guild.logo || "/placeholder.svg"} alt="Logo" fill className="object-cover" />
           </div>
           <div className="flex gap-2 mb-2">
             <Button size="sm" variant="outline" className="h-8 text-xs gap-1 bg-transparent">
               <MessageCircle size={14} />
               咨询
             </Button>
-            <Button size="sm" className="h-8 text-xs bg-primary gap-1" onClick={handleApply}>
+            <Button
+              size="sm"
+              className={`h-8 text-xs gap-1 ${isApplied ? "bg-white/20 text-white/60" : "bg-primary"}`}
+              onClick={handleApply}
+              disabled={isApplied}
+            >
               <CheckCircle2 size={14} />
-              申请加入
+              {isApplied ? "已申请" : "申请加入"}
             </Button>
           </div>
         </div>
 
         <div className="mb-6">
           <div className="flex items-center gap-2 mb-1">
-            <h1 className="text-2xl font-bold">东东电竞</h1>
+            <h1 className="text-2xl font-bold">{guild.name}</h1>
             <span className="px-2 py-0.5 rounded bg-yellow-500/20 text-yellow-400 text-[10px] border border-yellow-500/30 font-bold">
-              LV.10 顶级公会
+              LV.{guild.level} 顶级公会
             </span>
           </div>
-          <p className="text-sm text-white/60 mb-3">
-            国服顶尖路人王聚集地，专注高端局陪练与代练业务。月入百万不是梦，加入我们，成就电竞梦想！
-          </p>
+          <p className="text-sm text-white/60 mb-3">{guild.description}</p>
           <div className="flex items-center gap-4 text-xs text-white/40">
             <span className="flex items-center gap-1">
               <Users size={12} />
-              1,205 成员
+              {guild.members.toLocaleString()} 成员
             </span>
             <span className="flex items-center gap-1">
               <Trophy size={12} />
-              全区第 1 名
+              全区第 {guild.rank} 名
             </span>
             <span className="flex items-center gap-1">
               <Star size={12} />
-              4.9 评分
+              {guild.rating} 评分
             </span>
           </div>
         </div>
@@ -80,22 +134,12 @@ export default function GuildDetailPage({ params }: { params: { id: string } })
             公会权益
           </h3>
           <div className="grid grid-cols-2 gap-3">
-            <div className="glass-card p-3 rounded-xl border-l-2 border-primary">
-              <div className="text-sm font-bold mb-1">专属培训体系</div>
-              <div className="text-xs text-white/50">王者荣耀/LOL职业教练一对一指导，快速提升技术</div>
-            </div>
-            <div className="glass-card p-3 rounded-xl border-l-2 border-secondary">
-              <div className="text-sm font-bold mb-1">优先派单特权</div>
-              <div className="text-xs text-white/50">优质高价单优先派送，月收入提升50%</div>
-            </div>
-            <div className="glass-card p-3 rounded-xl border-l-2 border-accent">
-              <div className="text-sm font-bold mb-1">法律援助支持</div>
-              <div className="text-xs text-white/50">专业律师团队，保障您的合法权益与收入</div>
-            </div>
-            <div className="glass-card p-3 rounded-xl border-l-2 border-green-500">
-              <div className="text-sm font-bold mb-1">线下基地入驻</div>
-              <div className="text-xs text-white/50">杭州/上海5000平米电竞基地免费入住</div>
-            </div>
+            {guild.benefits.map((benefit: any, i: number) => (
+              <div key={i} className={`glass-card p-3 rounded-xl border-l-2 ${benefit.color}`}>
+                <div className="text-sm font-bold mb-1">{benefit.title}</div>
+                <div className="text-xs text-white/50">{benefit.desc}</div>
+              </div>
+            ))}
           </div>
         </div>
 
@@ -106,34 +150,15 @@ export default function GuildDetailPage({ params }: { params: { id: string } })
             入驻要求
           </h3>
           <div className="glass-card p-4 rounded-xl space-y-3">
-            <div className="flex items-start gap-3">
-              <div className="w-1.5 h-1.5 rounded-full bg-primary mt-1.5" />
-              <div className="flex-1 text-xs text-white/70">
-                <span className="text-white font-bold">游戏段位：</span>
-                王者荣耀荣耀王者50星以上 / LOL大师以上 / 无畏契约超凡入圣
+            {guild.requirements.map((req: any, i: number) => (
+              <div key={i} className="flex items-start gap-3">
+                <div className="w-1.5 h-1.5 rounded-full bg-primary mt-1.5" />
+                <div className="flex-1 text-xs text-white/70">
+                  <span className="text-white font-bold">{req.label}：</span>
+                  {req.text}
+                </div>
               </div>
-            </div>
-            <div className="flex items-start gap-3">
-              <div className="w-1.5 h-1.5 rounded-full bg-primary mt-1.5" />
-              <div className="flex-1 text-xs text-white/70">
-                <span className="text-white font-bold">语音要求：</span>
-                普通话标准，声音清晰，具备良好的沟通能力
-              </div>
-            </div>
-            <div className="flex items-start gap-3">
-              <div className="w-1.5 h-1.5 rounded-full bg-primary mt-1.5" />
-              <div className="flex-1 text-xs text-white/70">
-                <span className="text-white font-bold">设备要求：</span>
-                拥有专业的电竞设备（电脑/手机）和安静的直播/游戏环境
-              </div>
-            </div>
-            <div className="flex items-start gap-3">
-              <div className="w-1.5 h-1.5 rounded-full bg-primary mt-1.5" />
-              <div className="flex-1 text-xs text-white/70">
-                <span className="text-white font-bold">在线时间：</span>
-                每天稳定在线时长不低于4小时
-              </div>
-            </div>
+            ))}
           </div>
         </div>
       </div>
diff --git a/app/live/page.tsx b/app/live/page.tsx
index f4df9d3..1a69095 100644
--- a/app/live/page.tsx
+++ b/app/live/page.tsx
@@ -2,208 +2,609 @@
 
 import type React from "react"
 
-import { useState } from "react"
+import { useState, useRef } from "react"
 import { useRouter } from "next/navigation"
 import Image from "next/image"
-import { ArrowLeft, Heart, Eye, Search, Gamepad2 } from "lucide-react"
+import {
+  Heart,
+  MessageCircle,
+  Share2,
+  Gift,
+  Music2,
+  Home,
+  Search,
+  Users,
+  Send,
+  Bookmark,
+  ShoppingCart,
+  X,
+} from "lucide-react"
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { toast } from "@/hooks/use-toast"
+import { useAppContext } from "@/components/providers/app-provider"
 
 const STREAMERS = [
   {
     id: "1",
     name: "GM-远洋",
     avatar: "/streamer-1.jpg",
-    title: "国服第一盲僧",
+    title: "国服第一盲僧 | 今晚冲击王者",
     game: "英雄联盟",
-    viewers: "12.5w",
-    likes: 8956,
-    isLive: true,
-    thumbnail: "/live-thumb-lol.jpg",
+    viewers: 125600,
+    likes: 89560,
+    comments: 3420,
+    shares: 1250,
+    isFollowed: false,
+    video: "/live-lol.jpg",
+    music: "英雄联盟 - 登峰造极",
+    course: { id: "1", name: "打野进阶课：从入门到王者", price: 299, lessons: 8 },
   },
   {
     id: "2",
     name: "卡若",
     avatar: "/streamer-2.jpg",
-    title: "职业战队退役",
+    title: "职业选手退役 | 无畏契约枪法教学",
     game: "无畏契约",
-    viewers: "8.2w",
-    likes: 5420,
-    isLive: true,
-    thumbnail: "/live-thumb-val.jpg",
+    viewers: 98000,
+    likes: 54200,
+    comments: 2180,
+    shares: 890,
+    isFollowed: false,
+    video: "/live-valorant.jpg",
+    music: "VALORANT - Die For You",
+    course: { id: "2", name: "无畏契约枪法训练营", price: 399, lessons: 10 },
   },
   {
     id: "3",
-    name: "小柠檬",
+    name: "小美",
     avatar: "/streamer-3.jpg",
-    title: "人皮话多",
+    title: "全国冠军 | 四指操作直播吃鸡",
     game: "和平精英",
-    viewers: "5.6w",
-    likes: 3280,
-    isLive: true,
-    thumbnail: "/live-thumb-pubg.jpg",
+    viewers: 145000,
+    likes: 78800,
+    comments: 4560,
+    shares: 1620,
+    isFollowed: false,
+    video: "/live-pubg.jpg",
+    music: "和平精英 - Winner Winner",
+    course: { id: "3", name: "和平精英四指操作教学", price: 199, lessons: 6 },
   },
   {
     id: "4",
-    name: "阿伟",
+    name: "星辰",
     avatar: "/streamer-4.jpg",
-    title: "绝地求生刚枪王",
-    game: "绝地求生",
-    viewers: "3.2w",
-    likes: 1890,
-    isLive: true,
-    thumbnail: "/live-thumb-pubg.jpg",
+    title: "原神攻略大神 | 深渊满星教学",
+    game: "原神",
+    viewers: 210000,
+    likes: 125200,
+    comments: 6890,
+    shares: 2120,
+    isFollowed: false,
+    video: "/live-genshin.jpg",
+    music: "原神 - 璃月港",
+    course: { id: "4", name: "原神深渊满星攻略", price: 149, lessons: 5 },
   },
   {
     id: "5",
-    name: "七七",
+    name: "阿杰",
     avatar: "/streamer-5.jpg",
-    title: "甜美声优",
-    game: "原神",
-    viewers: "6.8w",
-    likes: 4520,
-    isLive: true,
-    thumbnail: "/live-thumb-genshin.jpg",
+    title: "国服百星 | 巅峰赛冲分直播",
+    game: "王者荣耀",
+    viewers: 320000,
+    likes: 187800,
+    comments: 8120,
+    shares: 3680,
+    isFollowed: false,
+    video: "/live-hok.jpg",
+    music: "王者荣耀 - 战斗吧英雄",
+    course: { id: "5", name: "王者荣耀上分秘籍", price: 249, lessons: 8 },
   },
   {
     id: "6",
-    name: "大魔王",
+    name: "暗影",
     avatar: "/streamer-6.jpg",
-    title: "中单法王",
-    game: "英雄联盟",
-    viewers: "4.5w",
-    likes: 2680,
-    isLive: true,
-    thumbnail: "/live-thumb-lol.jpg",
+    title: "首杀团队成员 | 大秘境冲层教学",
+    game: "魔兽世界",
+    viewers: 75000,
+    likes: 38600,
+    comments: 2890,
+    shares: 860,
+    isFollowed: false,
+    video: "/live-wow.jpg",
+    music: "魔兽世界 - Arthas My Son",
+    course: { id: "6", name: "魔兽世界团本攻略", price: 499, lessons: 12 },
   },
 ]
 
-const GAME_FILTERS = ["全部", "英雄联盟", "无畏契约", "和平精英", "原神", "王者荣耀", "绝地求生"]
+const GIFTS = [
+  { id: 1, name: "小心心", price: 1, icon: "💕" },
+  { id: 2, name: "棒棒糖", price: 10, icon: "🍭" },
+  { id: 3, name: "玫瑰花", price: 52, icon: "🌹" },
+  { id: 4, name: "告白气球", price: 520, icon: "🎈" },
+  { id: 5, name: "跑车", price: 5000, icon: "🏎️" },
+  { id: 6, name: "火箭", price: 10000, icon: "🚀" },
+]
 
-export default function LiveListPage() {
+export default function TikTokStyleLivePage() {
   const router = useRouter()
-  const [activeFilter, setActiveFilter] = useState("全部")
-  const [likedStreamers, setLikedStreamers] = useState<Set<string>>(new Set())
+  const { pay } = useAppContext()
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [streamers, setStreamers] = useState(STREAMERS)
+  const [showComments, setShowComments] = useState(false)
+  const [showGifts, setShowGifts] = useState(false)
+  const [showShare, setShowShare] = useState(false)
+  const [showCourse, setShowCourse] = useState(false)
+  const [comment, setComment] = useState("")
+  const [comments, setComments] = useState([
+    { id: 1, user: "电竞迷", avatar: "/viewer-1.jpg", text: "主播太强了！", time: "刚刚" },
+    { id: 2, user: "小飞侠", avatar: "/viewer-2.jpg", text: "666666", time: "1分钟前" },
+    { id: 3, user: "游戏玩家", avatar: "/viewer-3.jpg", text: "学到了学到了", time: "2分钟前" },
+  ])
+  const [floatingHearts, setFloatingHearts] = useState<{ id: number; x: number }[]>([])
+  const containerRef = useRef<HTMLDivElement>(null)
+  const startY = useRef(0)
+  const commentIdRef = useRef(4)
 
-  const filteredStreamers = activeFilter === "全部" ? STREAMERS : STREAMERS.filter((s) => s.game === activeFilter)
+  const currentStreamer = streamers[currentIndex]
 
-  const handleLike = (e: React.MouseEvent, streamerId: string) => {
-    e.stopPropagation()
-    setLikedStreamers((prev) => {
-      const newSet = new Set(prev)
-      if (newSet.has(streamerId)) {
-        newSet.delete(streamerId)
-      } else {
-        newSet.add(streamerId)
+  const handleTouchStart = (e: React.TouchEvent) => {
+    startY.current = e.touches[0].clientY
+  }
+
+  const handleTouchEnd = (e: React.TouchEvent) => {
+    const endY = e.changedTouches[0].clientY
+    const diff = startY.current - endY
+
+    if (Math.abs(diff) > 50) {
+      if (diff > 0 && currentIndex < streamers.length - 1) {
+        setCurrentIndex((prev) => prev + 1)
+      } else if (diff < 0 && currentIndex > 0) {
+        setCurrentIndex((prev) => prev - 1)
       }
-      return newSet
+    }
+  }
+
+  const handleLike = () => {
+    setStreamers((prev) => prev.map((s, i) => (i === currentIndex ? { ...s, likes: s.likes + 1 } : s)))
+    const newHeart = { id: Date.now(), x: Math.random() * 40 - 20 }
+    setFloatingHearts((prev) => [...prev, newHeart])
+    setTimeout(() => {
+      setFloatingHearts((prev) => prev.filter((h) => h.id !== newHeart.id))
+    }, 1500)
+  }
+
+  const handleFollow = () => {
+    setStreamers((prev) => prev.map((s, i) => (i === currentIndex ? { ...s, isFollowed: !s.isFollowed } : s)))
+    toast({
+      title: currentStreamer.isFollowed ? "已取消关注" : "关注成功",
+      description: currentStreamer.isFollowed ? "" : `已关注 ${currentStreamer.name}`,
     })
   }
 
-  return (
-    <div className="min-h-screen bg-background pb-20">
-      {/* Header */}
-      <div className="sticky top-0 z-50 bg-background/80 backdrop-blur-xl border-b border-white/5">
-        <div className="flex items-center justify-between px-4 py-3">
-          <div className="flex items-center gap-3">
-            <button onClick={() => router.back()} className="p-1">
-              <ArrowLeft size={20} />
-            </button>
-            <h1 className="text-lg font-bold">直播</h1>
-          </div>
-          <button className="p-2 rounded-full bg-white/5">
-            <Search size={18} />
-          </button>
-        </div>
+  const handleSendComment = () => {
+    if (!comment.trim()) return
+    const newComment = {
+      id: commentIdRef.current++,
+      user: "我",
+      avatar: "/user-avatar.jpg",
+      text: comment,
+      time: "刚刚",
+    }
+    setComments((prev) => [newComment, ...prev])
+    setComment("")
+    setStreamers((prev) => prev.map((s, i) => (i === currentIndex ? { ...s, comments: s.comments + 1 } : s)))
+    toast({ title: "评论成功", description: "你的评论已发送" })
+  }
 
-        {/* Game Filters */}
-        <div className="px-4 pb-3 overflow-x-auto scrollbar-hide">
-          <div className="flex gap-2">
-            {GAME_FILTERS.map((filter) => (
-              <button
-                key={filter}
-                onClick={() => setActiveFilter(filter)}
-                className={`px-4 py-1.5 rounded-full text-sm whitespace-nowrap transition-all ${
-                  activeFilter === filter
-                    ? "bg-primary text-white font-bold"
-                    : "bg-white/5 text-white/70 hover:bg-white/10"
-                }`}
-              >
-                {filter}
-              </button>
-            ))}
-          </div>
-        </div>
+  const handleSendGift = (gift: (typeof GIFTS)[0]) => {
+    pay(gift.price, "diamonds", `送出${gift.name}`, "product")
+    setShowGifts(false)
+    toast({
+      title: "送礼成功",
+      description: `成功送出 ${gift.icon} ${gift.name}`,
+    })
+  }
+
+  const handleShare = (platform: string) => {
+    setStreamers((prev) => prev.map((s, i) => (i === currentIndex ? { ...s, shares: s.shares + 1 } : s)))
+    toast({ title: "分享成功", description: `已分享到${platform}` })
+    setShowShare(false)
+  }
+
+  const handleBuyCourse = () => {
+    const course = currentStreamer.course
+    pay(course.price, "coins", `购买${course.name}`, "product")
+    setShowCourse(false)
+    toast({
+      title: "购买成功",
+      description: `已购买 ${currentStreamer.name} 的《${course.name}》课程`,
+    })
+    setTimeout(() => {
+      router.push(`/course/${currentStreamer.id}`)
+    }, 1000)
+  }
+
+  const formatNumber = (num: number) => {
+    if (num >= 10000) return (num / 10000).toFixed(1) + "w"
+    if (num >= 1000) return (num / 1000).toFixed(1) + "k"
+    return num.toString()
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className="h-screen w-full bg-black relative overflow-hidden select-none"
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
+    >
+      {/* 全屏直播背景 */}
+      <div className="absolute inset-0">
+        <Image
+          src={currentStreamer.video || "/placeholder.svg"}
+          alt={currentStreamer.name}
+          fill
+          className="object-cover"
+          priority
+        />
+        <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/70" />
       </div>
 
-      {/* Live Grid */}
-      <div className="p-4 grid grid-cols-2 gap-3">
-        {filteredStreamers.map((streamer) => (
-          <div
-            key={streamer.id}
-            onClick={() => router.push(`/live/${streamer.id}`)}
-            className="bg-white/5 rounded-xl overflow-hidden border border-white/5 hover:border-primary/30 transition-all cursor-pointer group"
-          >
-            {/* Thumbnail */}
-            <div className="relative aspect-video">
-              <Image
-                src={streamer.thumbnail || "/placeholder.svg"}
-                alt={streamer.name}
-                fill
-                className="object-cover group-hover:scale-105 transition-transform duration-300"
-              />
-              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
-
-              {/* Live Badge */}
-              <div className="absolute top-2 left-2 flex items-center gap-1 bg-red-500 px-2 py-0.5 rounded text-[10px] font-bold text-white">
-                <span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
-                直播中
-              </div>
-
-              {/* Viewers */}
-              <div className="absolute top-2 right-2 flex items-center gap-1 bg-black/50 px-2 py-0.5 rounded text-[10px] text-white">
-                <Eye size={10} />
-                {streamer.viewers}
-              </div>
-
-              {/* Game Tag */}
-              <div className="absolute bottom-2 left-2 flex items-center gap-1 bg-primary/80 px-2 py-0.5 rounded text-[10px] text-white">
-                <Gamepad2 size={10} />
-                {streamer.game}
-              </div>
-
-              {/* Like Button */}
-              <button
-                onClick={(e) => handleLike(e, streamer.id)}
-                className={`absolute bottom-2 right-2 p-1.5 rounded-full transition-all ${
-                  likedStreamers.has(streamer.id)
-                    ? "bg-pink-500 text-white"
-                    : "bg-black/50 text-white/70 hover:text-pink-500"
-                }`}
-              >
-                <Heart size={14} className={likedStreamers.has(streamer.id) ? "fill-current" : ""} />
-              </button>
-            </div>
-
-            {/* Info */}
-            <div className="p-3">
-              <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-full overflow-hidden relative border border-primary/50">
-                  <Image
-                    src={streamer.avatar || "/placeholder.svg"}
-                    alt={streamer.name}
-                    fill
-                    className="object-cover"
-                    sizes="32px"
-                  />
-                </div>
-                <div className="flex-1 min-w-0">
-                  <h3 className="font-bold text-sm truncate">{streamer.name}</h3>
-                  <p className="text-[10px] text-white/50 truncate">{streamer.title}</p>
-                </div>
-              </div>
-            </div>
+      {/* 飘心动画 */}
+      <div className="absolute bottom-32 right-16 z-30 pointer-events-none">
+        {floatingHearts.map((heart) => (
+          <div key={heart.id} className="absolute animate-float-up" style={{ left: `${heart.x}px` }}>
+            <Heart size={28} className="text-pink-500 fill-pink-500" />
           </div>
         ))}
       </div>
+
+      <div className="absolute top-0 left-0 right-0 z-20 pt-safe">
+        <div className="flex items-center justify-between px-4 py-4">
+          <button
+            onClick={() => router.push("/")}
+            className="w-10 h-10 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center"
+          >
+            <Home size={20} className="text-white" />
+          </button>
+          <div className="flex items-center gap-6 bg-black/30 backdrop-blur-md rounded-full px-4 py-2">
+            <button className="text-white/60 text-sm font-medium">关注</button>
+            <button className="text-white text-sm font-bold relative">
+              推荐
+              <span className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-4 h-0.5 bg-white rounded-full" />
+            </button>
+            <button className="text-white/60 text-sm font-medium">游戏</button>
+          </div>
+          <button className="w-10 h-10 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center">
+            <Search size={20} className="text-white" />
+          </button>
+        </div>
+
+        <div className="mx-4 mt-2">
+          <div className="flex items-center gap-3 bg-black/40 backdrop-blur-md rounded-full px-3 py-2 w-fit">
+            <div className="relative">
+              <div className="w-10 h-10 rounded-full overflow-hidden border-2 border-pink-500">
+                <Image
+                  src={currentStreamer.avatar || "/placeholder.svg"}
+                  alt={currentStreamer.name}
+                  width={40}
+                  height={40}
+                  className="object-cover"
+                />
+              </div>
+              <span className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-500 rounded-full border-2 border-black" />
+            </div>
+            <div className="flex-1">
+              <div className="flex items-center gap-2">
+                <span className="font-bold text-white text-sm">{currentStreamer.name}</span>
+                <span className="bg-pink-500/80 px-1.5 py-0.5 rounded text-white text-[10px]">
+                  {currentStreamer.game}
+                </span>
+              </div>
+              <div className="flex items-center gap-1 text-[10px] text-white/60">
+                <Users size={10} />
+                <span>{formatNumber(currentStreamer.viewers)}观看</span>
+              </div>
+            </div>
+            <button
+              onClick={handleFollow}
+              className={`px-3 py-1.5 rounded-full text-xs font-bold transition-colors ${
+                currentStreamer.isFollowed ? "bg-white/20 text-white/80" : "bg-pink-500 text-white"
+              }`}
+            >
+              {currentStreamer.isFollowed ? "已关注" : "+ 关注"}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 直播间信息 - 左侧底部 */}
+      <div className="absolute bottom-28 left-4 right-20 z-20 space-y-3">
+        {/* 直播标题 */}
+        <p className="text-white text-sm leading-relaxed font-medium">{currentStreamer.title}</p>
+
+        {/* 音乐标签 */}
+        <div className="flex items-center gap-2">
+          <Music2 size={14} className="text-white" />
+          <div className="overflow-hidden flex-1">
+            <p className="text-white/80 text-xs whitespace-nowrap animate-marquee">{currentStreamer.music}</p>
+          </div>
+          <div className="w-10 h-10 rounded-full border-2 border-white/30 overflow-hidden animate-spin-slow">
+            <Image
+              src={currentStreamer.avatar || "/placeholder.svg"}
+              alt="Music"
+              width={40}
+              height={40}
+              className="object-cover"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* 右侧互动按钮 */}
+      <div className="absolute bottom-28 right-3 z-20 flex flex-col items-center gap-5">
+        {/* 点赞 */}
+        <button onClick={handleLike} className="flex flex-col items-center gap-1 active:scale-90 transition-transform">
+          <div className="w-12 h-12 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center">
+            <Heart size={26} className="text-white fill-pink-500" />
+          </div>
+          <span className="text-white text-xs font-medium">{formatNumber(currentStreamer.likes)}</span>
+        </button>
+
+        {/* 评论 */}
+        <button
+          onClick={() => setShowComments(true)}
+          className="flex flex-col items-center gap-1 active:scale-90 transition-transform"
+        >
+          <div className="w-12 h-12 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center">
+            <MessageCircle size={26} className="text-white" />
+          </div>
+          <span className="text-white text-xs font-medium">{formatNumber(currentStreamer.comments)}</span>
+        </button>
+
+        {/* 收藏 */}
+        <button className="flex flex-col items-center gap-1 active:scale-90 transition-transform">
+          <div className="w-12 h-12 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center">
+            <Bookmark size={26} className="text-white" />
+          </div>
+          <span className="text-white text-xs font-medium">收藏</span>
+        </button>
+
+        {/* 分享 */}
+        <button
+          onClick={() => setShowShare(true)}
+          className="flex flex-col items-center gap-1 active:scale-90 transition-transform"
+        >
+          <div className="w-12 h-12 rounded-full bg-black/30 backdrop-blur-md flex items-center justify-center">
+            <Share2 size={26} className="text-white" />
+          </div>
+          <span className="text-white text-xs font-medium">{formatNumber(currentStreamer.shares)}</span>
+        </button>
+
+        {/* 礼物 */}
+        <button
+          onClick={() => setShowGifts(true)}
+          className="flex flex-col items-center gap-1 active:scale-90 transition-transform"
+        >
+          <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-pink-500 to-yellow-500 flex items-center justify-center shadow-lg shadow-pink-500/30">
+            <Gift size={24} className="text-white" />
+          </div>
+          <span className="text-white text-xs font-medium">礼物</span>
+        </button>
+
+        {/* 课程 */}
+        <button
+          onClick={() => setShowCourse(true)}
+          className="flex flex-col items-center gap-1 active:scale-90 transition-transform"
+        >
+          <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-blue-500 to-cyan-500 flex items-center justify-center shadow-lg shadow-blue-500/30">
+            <ShoppingCart size={22} className="text-white" />
+          </div>
+          <span className="text-white text-xs font-medium">课程</span>
+        </button>
+      </div>
+
+      {/* 底部输入框 */}
+      <div className="absolute bottom-0 left-0 right-0 z-20 pb-safe">
+        <div className="flex items-center gap-3 px-4 py-3 bg-gradient-to-t from-black/60 to-transparent">
+          <div className="flex-1 h-10 bg-white/10 backdrop-blur-md rounded-full flex items-center px-4 border border-white/10">
+            <input
+              type="text"
+              placeholder="说点什么..."
+              className="bg-transparent w-full text-sm text-white placeholder:text-white/50 outline-none"
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleSendComment()}
+            />
+          </div>
+          <button
+            onClick={handleSendComment}
+            className="w-10 h-10 rounded-full bg-pink-500 flex items-center justify-center active:scale-90 transition-transform"
+          >
+            <Send size={18} className="text-white" />
+          </button>
+        </div>
+      </div>
+
+      {/* 评论弹窗 */}
+      <Dialog open={showComments} onOpenChange={setShowComments}>
+        <DialogContent className="bg-zinc-900/95 backdrop-blur-xl border-white/10 text-white max-w-sm h-[60vh] flex flex-col p-0">
+          <DialogHeader className="p-4 border-b border-white/10 flex flex-row items-center justify-between">
+            <DialogTitle className="text-center flex-1">{formatNumber(currentStreamer.comments)} 条评论</DialogTitle>
+            <button onClick={() => setShowComments(false)} className="text-white/50 hover:text-white">
+              <X size={20} />
+            </button>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto p-4 space-y-4">
+            {comments.map((c) => (
+              <div key={c.id} className="flex gap-3">
+                <div className="w-9 h-9 rounded-full overflow-hidden flex-shrink-0 relative">
+                  <Image src={c.avatar || "/placeholder.svg"} alt={c.user} fill className="object-cover" />
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-sm font-medium text-white/80">{c.user}</span>
+                    <span className="text-[10px] text-white/40">{c.time}</span>
+                  </div>
+                  <p className="text-sm text-white mt-0.5">{c.text}</p>
+                </div>
+                <button className="text-white/40 hover:text-pink-500 active:scale-90 transition-all">
+                  <Heart size={16} />
+                </button>
+              </div>
+            ))}
+          </div>
+          <div className="p-4 border-t border-white/10 flex gap-2">
+            <input
+              type="text"
+              placeholder="发表评论..."
+              className="flex-1 bg-white/10 rounded-full px-4 py-2 text-sm outline-none"
+              value={comment}
+              onChange={(e) => setComment(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && handleSendComment()}
+            />
+            <Button onClick={handleSendComment} size="sm" className="rounded-full bg-pink-500 hover:bg-pink-600">
+              发送
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 礼物弹窗 */}
+      <Dialog open={showGifts} onOpenChange={setShowGifts}>
+        <DialogContent className="bg-zinc-900/95 backdrop-blur-xl border-white/10 text-white max-w-sm">
+          <DialogHeader>
+            <DialogTitle>送礼物给 {currentStreamer.name}</DialogTitle>
+          </DialogHeader>
+          <div className="grid grid-cols-3 gap-3 py-4">
+            {GIFTS.map((gift) => (
+              <button
+                key={gift.id}
+                onClick={() => handleSendGift(gift)}
+                className="flex flex-col items-center gap-2 p-3 bg-white/5 rounded-xl hover:bg-white/10 transition-colors border border-white/5 hover:border-pink-500/30 active:scale-95"
+              >
+                <span className="text-3xl">{gift.icon}</span>
+                <span className="text-xs font-bold">{gift.name}</span>
+                <span className="text-[10px] text-pink-400">{gift.price} 钻石</span>
+              </button>
+            ))}
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 分享弹窗 */}
+      <Dialog open={showShare} onOpenChange={setShowShare}>
+        <DialogContent className="bg-zinc-900/95 backdrop-blur-xl border-white/10 text-white max-w-sm">
+          <DialogHeader>
+            <DialogTitle>分享直播间</DialogTitle>
+          </DialogHeader>
+          <div className="grid grid-cols-4 gap-4 py-4">
+            {[
+              { name: "微信", icon: "💬", color: "bg-green-500" },
+              { name: "朋友圈", icon: "🌟", color: "bg-green-600" },
+              { name: "QQ", icon: "🐧", color: "bg-blue-500" },
+              { name: "微博", icon: "📢", color: "bg-red-500" },
+            ].map((platform) => (
+              <button
+                key={platform.name}
+                onClick={() => handleShare(platform.name)}
+                className="flex flex-col items-center gap-2 active:scale-95 transition-transform"
+              >
+                <div className={`w-14 h-14 rounded-full ${platform.color} flex items-center justify-center text-2xl`}>
+                  {platform.icon}
+                </div>
+                <span className="text-xs">{platform.name}</span>
+              </button>
+            ))}
+          </div>
+          <div className="flex items-center gap-2 p-3 bg-white/5 rounded-xl">
+            <input
+              type="text"
+              value={`https://wanzhi.gg/live/${currentStreamer.id}`}
+              readOnly
+              className="flex-1 bg-transparent text-xs text-white/70 outline-none"
+            />
+            <Button
+              size="sm"
+              variant="outline"
+              className="text-xs border-white/20 hover:bg-white/10 bg-transparent"
+              onClick={() => {
+                navigator.clipboard.writeText(`https://wanzhi.gg/live/${currentStreamer.id}`)
+                toast({ title: "已复制", description: "链接已复制到剪贴板" })
+              }}
+            >
+              复制
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* 课程弹窗 */}
+      <Dialog open={showCourse} onOpenChange={setShowCourse}>
+        <DialogContent className="bg-zinc-900/95 backdrop-blur-xl border-white/10 text-white max-w-sm">
+          <DialogHeader>
+            <DialogTitle>{currentStreamer.name} 的课程</DialogTitle>
+          </DialogHeader>
+          <div className="py-4 space-y-4">
+            <div className="bg-white/5 rounded-xl p-4 border border-white/10">
+              <div className="flex items-start gap-3">
+                <div className="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0 relative">
+                  <Image
+                    src={currentStreamer.avatar || "/placeholder.svg"}
+                    alt="Course"
+                    fill
+                    className="object-cover"
+                  />
+                </div>
+                <div className="flex-1">
+                  <h4 className="font-bold text-sm mb-1">{currentStreamer.course.name}</h4>
+                  <p className="text-xs text-white/50 mb-2">{currentStreamer.course.lessons} 节课程</p>
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg font-bold text-yellow-400">¥{currentStreamer.course.price}</span>
+                    <span className="text-xs text-white/40 line-through">¥{currentStreamer.course.price * 2}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <Button
+              onClick={handleBuyCourse}
+              className="w-full bg-gradient-to-r from-pink-500 to-purple-500 hover:opacity-90"
+            >
+              立即购买
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <style jsx global>{`
+        @keyframes float-up {
+          0% {
+            opacity: 1;
+            transform: translateY(0) scale(1);
+          }
+          100% {
+            opacity: 0;
+            transform: translateY(-120px) scale(1.2);
+          }
+        }
+        .animate-float-up {
+          animation: float-up 1.5s ease-out forwards;
+        }
+        @keyframes marquee {
+          0% {
+            transform: translateX(0);
+          }
+          100% {
+            transform: translateX(-50%);
+          }
+        }
+        .animate-marquee {
+          animation: marquee 8s linear infinite;
+        }
+        .animate-spin-slow {
+          animation: spin 8s linear infinite;
+        }
+      `}</style>
     </div>
   )
 }
diff --git a/app/mall/gear/page.tsx b/app/mall/gear/page.tsx
index 2562398..fd7a394 100644
--- a/app/mall/gear/page.tsx
+++ b/app/mall/gear/page.tsx
@@ -3,47 +3,79 @@ import { useRouter } from "next/navigation"
 import Image from "next/image"
 import { Button } from "@/components/ui/button"
 import { toast } from "@/hooks/use-toast"
+import { ArrowLeft, ShoppingCart } from "lucide-react"
 
 export default function GearPage() {
   const router = useRouter()
   const products = [
-    { id: 1, name: "罗技 G Pro X Superlight", price: 899, image: "/gear-mouse.jpg", tag: "职业首选" },
-    { id: 2, name: "雷蛇 猎魂光蛛 V3", price: 1299, image: "/gear-keyboard.jpg", tag: "光轴科技" },
-    { id: 3, name: "卓威 XL2546K", price: 3499, image: "/gear-monitor.jpg", tag: "360Hz" },
-    { id: 4, name: "HyperX Cloud II", price: 599, image: "/gear-headset.jpg", tag: "7.1声道" },
+    { id: 1, name: "罗技 G Pro X Superlight", price: 899, image: "/gear-mouse.jpg", tag: "职业首选", category: "鼠标" },
+    { id: 2, name: "雷蛇 猎魂光蛛 V3", price: 1299, image: "/gear-keyboard.jpg", tag: "光轴科技", category: "键盘" },
+    { id: 3, name: "卓威 XL2546K", price: 3499, image: "/gear-monitor.jpg", tag: "360Hz", category: "显示器" },
+    { id: 4, name: "HyperX Cloud II", price: 599, image: "/gear-headset.jpg", tag: "7.1声道", category: "耳机" },
+    { id: 5, name: "赛睿 QcK Heavy", price: 199, image: "/gear-mousepad.jpg", tag: "加厚版", category: "鼠标垫" },
+    { id: 6, name: "电竞座椅 GT900", price: 1999, image: "/gear-chair.jpg", tag: "人体工学", category: "座椅" },
   ]
 
   return (
     <div className="min-h-screen pb-24 bg-background">
-      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center gap-3">
-        <button onClick={() => router.back()} className="text-white/70">
-          返回
-        </button>
-        <h1 className="font-bold text-lg">电竞外设</h1>
+      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <button onClick={() => router.back()} className="text-white/70 hover:text-white">
+            <ArrowLeft size={20} />
+          </button>
+          <h1 className="font-bold text-lg">电竞外设</h1>
+        </div>
+        <Button variant="ghost" size="icon" className="rounded-full bg-white/5">
+          <ShoppingCart size={18} />
+        </Button>
       </header>
+
+      {/* 分类筛选 */}
+      <div className="px-4 py-3 flex gap-2 overflow-x-auto no-scrollbar">
+        {["全部", "鼠标", "键盘", "耳机", "显示器", "鼠标垫", "座椅"].map((cat, i) => (
+          <button
+            key={cat}
+            className={`whitespace-nowrap text-xs font-bold px-4 py-2 rounded-full transition-colors ${
+              i === 0 ? "bg-primary text-black" : "bg-white/5 text-white/60 hover:bg-white/10"
+            }`}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+
       <div className="p-4 grid grid-cols-2 gap-4">
         {products.map((p) => (
           <div
             key={p.id}
-            className="glass-card rounded-xl overflow-hidden group cursor-pointer"
-            onClick={() => toast({ title: "加入购物车", description: p.name })}
+            className="glass-card rounded-xl overflow-hidden group cursor-pointer border border-white/5 hover:border-primary/30 transition-colors"
           >
-            <div className="relative aspect-square bg-white">
+            <div className="relative aspect-square bg-zinc-800">
               <Image
                 src={p.image || "/placeholder.svg"}
                 alt={p.name}
                 fill
-                className="object-contain p-4 group-hover:scale-105 transition-transform"
+                className="object-cover group-hover:scale-105 transition-transform"
               />
               <div className="absolute top-2 left-2 bg-red-500 text-white text-[10px] px-2 py-0.5 rounded font-bold">
                 {p.tag}
               </div>
+              <div className="absolute top-2 right-2 bg-black/50 text-white/80 text-[10px] px-2 py-0.5 rounded">
+                {p.category}
+              </div>
             </div>
             <div className="p-3">
-              <h3 className="font-bold text-sm text-white truncate mb-1">{p.name}</h3>
+              <h3 className="font-bold text-sm text-white truncate mb-2">{p.name}</h3>
               <div className="flex items-center justify-between">
                 <span className="text-primary font-bold">¥{p.price}</span>
-                <Button size="sm" className="h-6 text-[10px] px-2">
+                <Button
+                  size="sm"
+                  className="h-7 text-xs px-3"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    toast({ title: "已加入购物车", description: p.name })
+                  }}
+                >
                   购买
                 </Button>
               </div>
diff --git a/app/mall/page.tsx b/app/mall/page.tsx
index cc4fc5a..22d5337 100644
--- a/app/mall/page.tsx
+++ b/app/mall/page.tsx
@@ -8,7 +8,6 @@ import {
   Zap,
   Gift,
   Coins,
-  BookOpen,
   Hotel,
   Coffee,
   Trophy,
@@ -16,7 +15,7 @@ import {
   Keyboard,
   Wallet,
   Gamepad2,
-  Gem,
+  CreditCard,
 } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
@@ -86,25 +85,6 @@ export default function MallPage() {
         </div>
       </header>
 
-      {/* Banner */}
-      <div className="px-4 mt-4">
-        <div
-          className="w-full h-32 rounded-2xl bg-gradient-to-r from-purple-600 to-blue-600 relative overflow-hidden flex items-center px-6 shadow-lg shadow-purple-500/20 cursor-pointer"
-          onClick={() => router.push("/recharge")}
-        >
-          <div className="relative z-10">
-            <h2 className="text-xl font-bold text-white mb-1">首充双倍</h2>
-            <p className="text-xs text-white/80 mb-3">限时特惠 赠送绝版头像框</p>
-            <Button size="sm" className="bg-white text-purple-600 hover:bg-white/90 h-7 text-xs font-bold">
-              立即充值
-            </Button>
-          </div>
-          <div className="absolute right-0 bottom-0 w-32 h-32 opacity-50">
-            <Gem className="w-full h-full text-white/20 rotate-12 translate-x-8 translate-y-8" />
-          </div>
-        </div>
-      </div>
-
       {/* Top Categories - 8 Items */}
       <div className="px-4 mt-6">
         <h3 className="text-sm font-bold mb-3 flex items-center gap-2">
@@ -121,11 +101,11 @@ export default function MallPage() {
               href: "/mall/companion?type=play",
             },
             {
-              name: "大师课程",
-              icon: BookOpen,
+              name: "游戏点卡",
+              icon: CreditCard,
               color: "text-pink-400",
               bg: "bg-pink-500/10",
-              href: "/mall/companion?type=course",
+              href: "/mall/points",
             },
             { name: "电竞外设", icon: Keyboard, color: "text-purple-400", bg: "bg-purple-500/10", href: "/mall/gear" },
             { name: "电竞酒店", icon: Hotel, color: "text-orange-400", bg: "bg-orange-500/10", href: "/hotel" },
@@ -235,7 +215,6 @@ export default function MallPage() {
         </TabsContent>
 
         <TabsContent value="gift" className="mt-4 px-4">
-          {/* Gift Content - Simplified */}
           <div className="grid grid-cols-3 gap-3">
             {[
               { name: "棒棒糖", price: 10, icon: "🍭" },
@@ -264,7 +243,6 @@ export default function MallPage() {
         </TabsContent>
 
         <TabsContent value="exchange" className="mt-4 px-4">
-          {/* Exchange Content */}
           <div className="grid grid-cols-2 gap-4">
             {[
               { name: "10元话费券", price: 1000, icon: Gift },
diff --git a/app/mall/points/[game]/client.tsx b/app/mall/points/[game]/client.tsx
new file mode 100644
index 0000000..dd92224
--- /dev/null
+++ b/app/mall/points/[game]/client.tsx
@@ -0,0 +1,303 @@
+"use client"
+
+import { useState } from "react"
+import { ArrowLeft, Check, ShoppingCart, Zap, Flame } from "lucide-react"
+import Image from "next/image"
+import { useRouter } from "next/navigation"
+import { Button } from "@/components/ui/button"
+import { useAppContext } from "@/components/providers/app-provider"
+import { toast } from "@/hooks/use-toast"
+
+const gameData: Record<
+  string,
+  {
+    name: string
+    image: string
+    description: string
+    discount: string
+    tag?: string
+    options: { name: string; original: number; price: number; popular?: boolean }[]
+  }
+> = {
+  wow: {
+    name: "魔兽世界",
+    image: "/point-card-wow.jpg",
+    description: "月卡/点卡充值",
+    discount: "9折",
+    tag: "经典",
+    options: [
+      { name: "30天月卡", original: 75, price: 68, popular: true },
+      { name: "90天季卡", original: 198, price: 178 },
+      { name: "180天半年卡", original: 360, price: 320 },
+      { name: "2000点卡", original: 100, price: 90 },
+      { name: "5000点卡", original: 250, price: 225 },
+    ],
+  },
+  diablo: {
+    name: "暗黑破坏神4",
+    image: "/point-card-diablo.jpg",
+    description: "白金币充值",
+    discount: "85折",
+    tag: "热卖",
+    options: [
+      { name: "500白金币", original: 45, price: 38, popular: true },
+      { name: "1000白金币", original: 88, price: 75 },
+      { name: "2800白金币", original: 198, price: 168 },
+      { name: "5700白金币", original: 388, price: 330 },
+      { name: "11500白金币", original: 648, price: 550 },
+    ],
+  },
+  hearthstone: {
+    name: "炉石传说",
+    image: "/point-card-hearthstone.jpg",
+    description: "战令/卡包充值",
+    discount: "88折",
+    tag: "新品",
+    options: [
+      { name: "2卡包", original: 18, price: 16 },
+      { name: "7卡包", original: 58, price: 51, popular: true },
+      { name: "15卡包", original: 108, price: 95 },
+      { name: "40卡包", original: 258, price: 227 },
+      { name: "酒馆战令", original: 128, price: 113 },
+    ],
+  },
+  overwatch: {
+    name: "守望先锋2",
+    image: "/point-card-overwatch.jpg",
+    description: "代币充值",
+    discount: "9折",
+    options: [
+      { name: "500代币", original: 35, price: 32 },
+      { name: "1000代币", original: 68, price: 61, popular: true },
+      { name: "2200代币", original: 128, price: 115 },
+      { name: "5700代币", original: 298, price: 268 },
+      { name: "11600代币", original: 518, price: 466 },
+    ],
+  },
+  lol: {
+    name: "英雄联盟",
+    image: "/point-card-lol.jpg",
+    description: "点券充值",
+    discount: "95折",
+    tag: "热门",
+    options: [
+      { name: "100点券", original: 10, price: 10 },
+      { name: "350点券", original: 35, price: 33, popular: true },
+      { name: "650点券", original: 65, price: 62 },
+      { name: "1380点券", original: 138, price: 131 },
+      { name: "3380点券", original: 338, price: 321 },
+    ],
+  },
+  hok: {
+    name: "王者荣耀",
+    image: "/point-card-hok.jpg",
+    description: "点券充值",
+    discount: "95折",
+    tag: "热门",
+    options: [
+      { name: "60点券", original: 6, price: 6 },
+      { name: "300点券", original: 30, price: 29, popular: true },
+      { name: "680点券", original: 68, price: 65 },
+      { name: "1280点券", original: 128, price: 122 },
+      { name: "2480点券", original: 248, price: 236 },
+    ],
+  },
+  pubg: {
+    name: "和平精英",
+    image: "/point-card-pubg.jpg",
+    description: "点券充值",
+    discount: "92折",
+    tag: "热门",
+    options: [
+      { name: "60点券", original: 6, price: 6 },
+      { name: "300点券", original: 30, price: 28, popular: true },
+      { name: "600点券", original: 60, price: 55 },
+      { name: "1500点券", original: 150, price: 138 },
+      { name: "3000点券", original: 300, price: 276 },
+    ],
+  },
+  genshin: {
+    name: "原神",
+    image: "/point-card-genshin.jpg",
+    description: "创世结晶充值",
+    discount: "9折",
+    tag: "热卖",
+    options: [
+      { name: "60创世结晶", original: 6, price: 6 },
+      { name: "300创世结晶", original: 30, price: 27, popular: true },
+      { name: "980创世结晶", original: 98, price: 88 },
+      { name: "1980创世结晶", original: 198, price: 178 },
+      { name: "3280创世结晶", original: 328, price: 295 },
+    ],
+  },
+  valorant: {
+    name: "无畏契约",
+    image: "/point-card-valorant.jpg",
+    description: "VP点数充值",
+    discount: "88折",
+    tag: "新品",
+    options: [
+      { name: "475VP", original: 35, price: 31 },
+      { name: "1000VP", original: 68, price: 60, popular: true },
+      { name: "2050VP", original: 128, price: 113 },
+      { name: "3650VP", original: 198, price: 174 },
+      { name: "5350VP", original: 288, price: 253 },
+    ],
+  },
+  fortnite: {
+    name: "堡垒之夜",
+    image: "/point-card-fortnite.jpg",
+    description: "V-Bucks充值",
+    discount: "85折",
+    options: [
+      { name: "1000V-Bucks", original: 68, price: 58 },
+      { name: "2800V-Bucks", original: 168, price: 143, popular: true },
+      { name: "5000V-Bucks", original: 288, price: 245 },
+      { name: "13500V-Bucks", original: 648, price: 551 },
+    ],
+  },
+  apex: {
+    name: "Apex英雄",
+    image: "/point-card-apex.jpg",
+    description: "Apex硬币充值",
+    discount: "9折",
+    options: [
+      { name: "1000硬币", original: 68, price: 61 },
+      { name: "2150硬币", original: 128, price: 115, popular: true },
+      { name: "4350硬币", original: 248, price: 223 },
+      { name: "6700硬币", original: 388, price: 349 },
+      { name: "11500硬币", original: 648, price: 583 },
+    ],
+  },
+  cs2: {
+    name: "CS2",
+    image: "/point-card-cs2.jpg",
+    description: "Steam钱包充值",
+    discount: "95折",
+    options: [
+      { name: "¥50钱包", original: 50, price: 48 },
+      { name: "¥100钱包", original: 100, price: 95, popular: true },
+      { name: "¥200钱包", original: 200, price: 190 },
+      { name: "¥500钱包", original: 500, price: 475 },
+    ],
+  },
+}
+
+export default function GamePointCardClient({ gameId }: { gameId: string }) {
+  const router = useRouter()
+  const { pay } = useAppContext()
+  const [selectedOption, setSelectedOption] = useState<number | null>(null)
+
+  const game = gameData[gameId]
+
+  if (!game) {
+    return (
+      <div className="min-h-screen flex flex-col items-center justify-center p-4">
+        <p className="text-white/60 mb-4">游戏不存在</p>
+        <Button onClick={() => router.back()}>返回</Button>
+      </div>
+    )
+  }
+
+  const handlePurchase = () => {
+    if (selectedOption === null) {
+      toast({ title: "请选择充值金额", variant: "destructive" })
+      return
+    }
+    const option = game.options[selectedOption]
+    pay(option.price, "diamonds", `${game.name} ${option.name}`, "product")
+    router.push("/mall")
+  }
+
+  return (
+    <div className="min-h-screen pb-36 bg-background">
+      {/* Header with Image */}
+      <div className="relative h-56">
+        <Image src={game.image || "/placeholder.svg"} alt={game.name} fill className="object-cover" />
+        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/60 to-transparent" />
+        <div className="absolute top-0 left-0 right-0 p-4 flex items-center justify-between">
+          <button onClick={() => router.back()} className="p-2 rounded-full bg-black/40 backdrop-blur-md">
+            <ArrowLeft size={20} />
+          </button>
+          {game.tag && (
+            <div className="bg-secondary/90 text-white text-xs font-bold px-3 py-1 rounded-full">{game.tag}</div>
+          )}
+        </div>
+        <div className="absolute bottom-4 left-4 right-4">
+          <div className="bg-yellow-500/90 text-black text-sm font-bold px-3 py-1 rounded-full mb-2 inline-block">
+            <Flame size={14} className="inline mr-1" />
+            {game.discount} 限时优惠
+          </div>
+          <h1 className="text-2xl font-bold">{game.name}</h1>
+          <p className="text-sm text-white/60">{game.description}</p>
+        </div>
+      </div>
+
+      {/* Options */}
+      <div className="px-4 mt-6 space-y-3">
+        <h3 className="font-bold text-sm flex items-center gap-2">
+          <ShoppingCart size={16} className="text-primary" />
+          选择充值金额
+        </h3>
+
+        {game.options.map((option, i) => (
+          <div
+            key={i}
+            onClick={() => setSelectedOption(i)}
+            className={`bg-[#1A1A22] rounded-xl p-4 flex items-center justify-between border-2 transition-all cursor-pointer ${
+              selectedOption === i ? "border-primary bg-primary/5" : "border-transparent hover:border-white/10"
+            }`}
+          >
+            <div className="flex items-center gap-3">
+              <div
+                className={`w-6 h-6 rounded-full border-2 flex items-center justify-center ${
+                  selectedOption === i ? "border-primary bg-primary" : "border-white/30"
+                }`}
+              >
+                {selectedOption === i && <Check size={14} className="text-black" />}
+              </div>
+              <div>
+                <div className="flex items-center gap-2">
+                  <p className="font-bold">{option.name}</p>
+                  {option.popular && (
+                    <span className="bg-secondary/20 text-secondary text-[8px] px-1.5 py-0.5 rounded font-bold">
+                      推荐
+                    </span>
+                  )}
+                </div>
+                <div className="flex items-center gap-2 mt-0.5">
+                  <span className="text-xs text-white/40 line-through">¥{option.original}</span>
+                  <span className="text-[10px] text-green-400">省¥{option.original - option.price}</span>
+                </div>
+              </div>
+            </div>
+            <span className="text-xl font-bold text-primary">¥{option.price}</span>
+          </div>
+        ))}
+      </div>
+
+      <div className="fixed bottom-16 left-0 right-0 px-4 py-3 bg-background/95 backdrop-blur-md border-t border-white/5 z-30">
+        <div className="flex items-center gap-4">
+          <div className="flex-1 min-w-0">
+            {selectedOption !== null ? (
+              <>
+                <p className="text-xs text-white/50 truncate">已选: {game.options[selectedOption].name}</p>
+                <p className="text-xl font-bold text-primary">¥{game.options[selectedOption].price}</p>
+              </>
+            ) : (
+              <p className="text-sm text-white/50">请选择充值金额</p>
+            )}
+          </div>
+          <Button
+            className="shrink-0 px-6 h-11 text-base font-bold"
+            onClick={handlePurchase}
+            disabled={selectedOption === null}
+          >
+            <Zap size={18} className="mr-2" />
+            立即购买
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/mall/points/[game]/loading.tsx b/app/mall/points/[game]/loading.tsx
new file mode 100644
index 0000000..ff38ec6
--- /dev/null
+++ b/app/mall/points/[game]/loading.tsx
@@ -0,0 +1,10 @@
+export default function Loading() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="flex flex-col items-center gap-4">
+        <div className="w-12 h-12 border-4 border-primary/30 border-t-primary rounded-full animate-spin" />
+        <p className="text-sm text-white/50">加载中...</p>
+      </div>
+    </div>
+  )
+}
diff --git a/app/mall/points/[game]/page.tsx b/app/mall/points/[game]/page.tsx
index 6b942bf..8d798ff 100644
--- a/app/mall/points/[game]/page.tsx
+++ b/app/mall/points/[game]/page.tsx
@@ -1,12 +1,6 @@
 "use client"
-
-import { useState } from "react"
-import { ArrowLeft, Check, Share2, Star, ShoppingCart, Zap } from "lucide-react"
-import Image from "next/image"
-import { useRouter } from "next/navigation"
-import { Button } from "@/components/ui/button"
-import { useAppContext } from "@/components/providers/app-provider"
-import { toast } from "@/hooks/use-toast"
+import { Suspense } from "react"
+import GamePointCardClient from "./client"
 
 const gameData: Record<
   string,
@@ -15,14 +9,16 @@ const gameData: Record<
     image: string
     description: string
     discount: string
+    tag?: string
     options: { name: string; original: number; price: number; popular?: boolean }[]
   }
 > = {
   wow: {
     name: "魔兽世界",
-    image: "/game-wow.jpg",
+    image: "/point-card-wow.jpg",
     description: "月卡/点卡充值",
     discount: "9折",
+    tag: "经典",
     options: [
       { name: "30天月卡", original: 75, price: 68, popular: true },
       { name: "90天季卡", original: 198, price: 178 },
@@ -33,9 +29,10 @@ const gameData: Record<
   },
   diablo: {
     name: "暗黑破坏神4",
-    image: "/game-diablo.jpg",
+    image: "/point-card-diablo.jpg",
     description: "白金币充值",
     discount: "85折",
+    tag: "热卖",
     options: [
       { name: "500白金币", original: 45, price: 38, popular: true },
       { name: "1000白金币", original: 88, price: 75 },
@@ -46,9 +43,10 @@ const gameData: Record<
   },
   hearthstone: {
     name: "炉石传说",
-    image: "/game-hearthstone.jpg",
+    image: "/point-card-hearthstone.jpg",
     description: "战令/卡包充值",
     discount: "88折",
+    tag: "新品",
     options: [
       { name: "2卡包", original: 18, price: 16 },
       { name: "7卡包", original: 58, price: 51, popular: true },
@@ -59,7 +57,7 @@ const gameData: Record<
   },
   overwatch: {
     name: "守望先锋2",
-    image: "/game-overwatch.jpg",
+    image: "/point-card-overwatch.jpg",
     description: "代币充值",
     discount: "9折",
     options: [
@@ -70,138 +68,127 @@ const gameData: Record<
       { name: "11600代币", original: 518, price: 466 },
     ],
   },
+  lol: {
+    name: "英雄联盟",
+    image: "/point-card-lol.jpg",
+    description: "点券充值",
+    discount: "95折",
+    tag: "热门",
+    options: [
+      { name: "100点券", original: 10, price: 10 },
+      { name: "350点券", original: 35, price: 33, popular: true },
+      { name: "650点券", original: 65, price: 62 },
+      { name: "1380点券", original: 138, price: 131 },
+      { name: "3380点券", original: 338, price: 321 },
+    ],
+  },
+  hok: {
+    name: "王者荣耀",
+    image: "/point-card-hok.jpg",
+    description: "点券充值",
+    discount: "95折",
+    tag: "热门",
+    options: [
+      { name: "60点券", original: 6, price: 6 },
+      { name: "300点券", original: 30, price: 29, popular: true },
+      { name: "680点券", original: 68, price: 65 },
+      { name: "1280点券", original: 128, price: 122 },
+      { name: "2480点券", original: 248, price: 236 },
+    ],
+  },
+  pubg: {
+    name: "和平精英",
+    image: "/point-card-pubg.jpg",
+    description: "点券充值",
+    discount: "92折",
+    tag: "热门",
+    options: [
+      { name: "60点券", original: 6, price: 6 },
+      { name: "300点券", original: 30, price: 28, popular: true },
+      { name: "600点券", original: 60, price: 55 },
+      { name: "1500点券", original: 150, price: 138 },
+      { name: "3000点券", original: 300, price: 276 },
+    ],
+  },
+  genshin: {
+    name: "原神",
+    image: "/point-card-genshin.jpg",
+    description: "创世结晶充值",
+    discount: "9折",
+    tag: "热卖",
+    options: [
+      { name: "60创世结晶", original: 6, price: 6 },
+      { name: "300创世结晶", original: 30, price: 27, popular: true },
+      { name: "980创世结晶", original: 98, price: 88 },
+      { name: "1980创世结晶", original: 198, price: 178 },
+      { name: "3280创世结晶", original: 328, price: 295 },
+    ],
+  },
+  valorant: {
+    name: "无畏契约",
+    image: "/point-card-valorant.jpg",
+    description: "VP点数充值",
+    discount: "88折",
+    tag: "新品",
+    options: [
+      { name: "475VP", original: 35, price: 31 },
+      { name: "1000VP", original: 68, price: 60, popular: true },
+      { name: "2050VP", original: 128, price: 113 },
+      { name: "3650VP", original: 198, price: 174 },
+      { name: "5350VP", original: 288, price: 253 },
+    ],
+  },
+  fortnite: {
+    name: "堡垒之夜",
+    image: "/point-card-fortnite.jpg",
+    description: "V-Bucks充值",
+    discount: "85折",
+    options: [
+      { name: "1000V-Bucks", original: 68, price: 58 },
+      { name: "2800V-Bucks", original: 168, price: 143, popular: true },
+      { name: "5000V-Bucks", original: 288, price: 245 },
+      { name: "13500V-Bucks", original: 648, price: 551 },
+    ],
+  },
+  apex: {
+    name: "Apex英雄",
+    image: "/point-card-apex.jpg",
+    description: "Apex硬币充值",
+    discount: "9折",
+    options: [
+      { name: "1000硬币", original: 68, price: 61 },
+      { name: "2150硬币", original: 128, price: 115, popular: true },
+      { name: "4350硬币", original: 248, price: 223 },
+      { name: "6700硬币", original: 388, price: 349 },
+      { name: "11500硬币", original: 648, price: 583 },
+    ],
+  },
+  cs2: {
+    name: "CS2",
+    image: "/point-card-cs2.jpg",
+    description: "Steam钱包充值",
+    discount: "95折",
+    options: [
+      { name: "¥50钱包", original: 50, price: 48 },
+      { name: "¥100钱包", original: 100, price: 95, popular: true },
+      { name: "¥200钱包", original: 200, price: 190 },
+      { name: "¥500钱包", original: 500, price: 475 },
+    ],
+  },
 }
 
-export default function GamePointCardPage({ params }: { params: { game: string } }) {
-  const router = useRouter()
-  const { pay } = useAppContext()
-  const [selectedOption, setSelectedOption] = useState<number | null>(null)
-
-  const game = gameData[params.game]
-
-  if (!game) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <p>游戏不存在</p>
-      </div>
-    )
-  }
-
-  const handlePurchase = () => {
-    if (selectedOption === null) {
-      toast({ title: "请选择充值金额", variant: "destructive" })
-      return
-    }
-    const option = game.options[selectedOption]
-    pay(option.price, "diamonds", `${game.name} ${option.name}`, "product")
-  }
+export default async function GamePointCardPage({ params }: { params: Promise<{ game: string }> }) {
+  const resolvedParams = await params
 
   return (
-    <div className="min-h-screen pb-32 bg-background">
-      {/* Header */}
-      <div className="relative h-48">
-        <Image src={game.image || "/placeholder.svg"} alt={game.name} fill className="object-cover" />
-        <div className="absolute inset-0 bg-gradient-to-t from-background via-background/50 to-transparent" />
-        <div className="absolute top-0 left-0 right-0 p-4 flex items-center">
-          <button onClick={() => router.back()} className="p-2 rounded-full bg-black/40 backdrop-blur-md">
-            <ArrowLeft size={20} />
-          </button>
+    <Suspense
+      fallback={
+        <div className="min-h-screen flex items-center justify-center">
+          <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
         </div>
-        <div className="absolute bottom-4 left-4">
-          <div className="bg-yellow-500/90 text-black text-xs font-bold px-2 py-1 rounded mb-2 inline-block">
-            {game.discount} 优惠
-          </div>
-          <h1 className="text-2xl font-bold">{game.name}</h1>
-          <p className="text-sm text-white/60">{game.description}</p>
-        </div>
-      </div>
-
-      {/* Options */}
-      <div className="px-4 mt-6 space-y-3">
-        <h3 className="font-bold text-sm flex items-center gap-2">
-          <ShoppingCart size={16} className="text-primary" />
-          选择充值金额
-        </h3>
-
-        {game.options.map((option, i) => (
-          <div
-            key={i}
-            onClick={() => setSelectedOption(i)}
-            className={`bg-[#1A1A22] rounded-xl p-4 flex items-center justify-between border-2 transition-all cursor-pointer ${
-              selectedOption === i ? "border-primary bg-primary/5" : "border-transparent hover:border-white/10"
-            }`}
-          >
-            <div className="flex items-center gap-3">
-              <div
-                className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
-                  selectedOption === i ? "border-primary bg-primary" : "border-white/30"
-                }`}
-              >
-                {selectedOption === i && <Check size={12} className="text-black" />}
-              </div>
-              <div>
-                <div className="flex items-center gap-2">
-                  <p className="font-bold">{option.name}</p>
-                  {option.popular && (
-                    <span className="bg-secondary/20 text-secondary text-[8px] px-1.5 py-0.5 rounded font-bold">
-                      推荐
-                    </span>
-                  )}
-                </div>
-                <div className="flex items-center gap-2 mt-0.5">
-                  <span className="text-xs text-white/40 line-through">¥{option.original}</span>
-                  <span className="text-[10px] text-green-400">省¥{option.original - option.price}</span>
-                </div>
-              </div>
-            </div>
-            <span className="text-xl font-bold text-primary">¥{option.price}</span>
-          </div>
-        ))}
-      </div>
-
-      {/* Streamer Promo */}
-      <div className="px-4 mt-6">
-        <div className="bg-gradient-to-r from-purple-600/20 to-blue-600/20 rounded-xl p-4 border border-purple-500/20">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center">
-              <Star size={20} className="text-purple-400" />
-            </div>
-            <div className="flex-1">
-              <p className="text-sm font-bold">分享给粉丝赚佣金</p>
-              <p className="text-[10px] text-white/50">每单返利高达20%</p>
-            </div>
-            <Button
-              size="sm"
-              variant="outline"
-              className="h-8 text-xs border-purple-500/30 text-purple-400 bg-transparent"
-              onClick={() => {
-                toast({ title: "链接已复制", description: "分享给粉丝购买可获得返利" })
-              }}
-            >
-              <Share2 size={14} className="mr-1" />
-              分享
-            </Button>
-          </div>
-        </div>
-      </div>
-
-      {/* Fixed Bottom */}
-      <div className="fixed bottom-0 left-0 right-0 p-4 bg-background/95 backdrop-blur-md border-t border-white/5">
-        <div className="flex items-center gap-4">
-          <div className="flex-1">
-            {selectedOption !== null && (
-              <>
-                <p className="text-xs text-white/50">已选: {game.options[selectedOption].name}</p>
-                <p className="text-xl font-bold text-primary">¥{game.options[selectedOption].price}</p>
-              </>
-            )}
-          </div>
-          <Button className="px-8 h-12 text-base font-bold" onClick={handlePurchase} disabled={selectedOption === null}>
-            <Zap size={18} className="mr-2" />
-            立即购买
-          </Button>
-        </div>
-      </div>
-    </div>
+      }
+    >
+      <GamePointCardClient gameId={resolvedParams.game} />
+    </Suspense>
   )
 }
diff --git a/app/mall/points/loading.tsx b/app/mall/points/loading.tsx
new file mode 100644
index 0000000..f15322a
--- /dev/null
+++ b/app/mall/points/loading.tsx
@@ -0,0 +1,3 @@
+export default function Loading() {
+  return null
+}
diff --git a/app/mall/points/page.tsx b/app/mall/points/page.tsx
index 9825c6c..0d2c3c0 100644
--- a/app/mall/points/page.tsx
+++ b/app/mall/points/page.tsx
@@ -1,113 +1,78 @@
 "use client"
 
 import { useState } from "react"
-import { ArrowLeft, Gift, Zap, Share2, ShoppingCart, Flame } from "lucide-react"
+import { ArrowLeft, Gift, Zap, Share2, Flame, Search } from "lucide-react"
 import Image from "next/image"
 import { useRouter } from "next/navigation"
 import { Button } from "@/components/ui/button"
-import { useAppContext } from "@/components/providers/app-provider"
+import { Input } from "@/components/ui/input"
 import { toast } from "@/hooks/use-toast"
 
 export default function PointCardsPage() {
   const router = useRouter()
-  const { wallet, pay } = useAppContext()
+  const [searchQuery, setSearchQuery] = useState("")
   const [selectedGame, setSelectedGame] = useState<string | null>(null)
 
   const games = [
-    {
-      id: "wow",
-      name: "魔兽世界",
-      image: "/game-wow.jpg",
-      discount: "9折",
-      tag: "限时",
-      description: "月卡/点卡充值",
-      options: [
-        { name: "30天月卡", original: 75, price: 68, popular: true },
-        { name: "90天季卡", original: 198, price: 178 },
-        { name: "180天半年卡", original: 360, price: 320 },
-        { name: "2000点卡", original: 100, price: 90 },
-        { name: "5000点卡", original: 250, price: 225 },
-      ],
-    },
+    { id: "wow", name: "魔兽世界", image: "/point-card-wow.jpg", discount: "9折", tag: "经典", category: "PC" },
     {
       id: "diablo",
       name: "暗黑破坏神4",
-      image: "/game-diablo.jpg",
+      image: "/point-card-diablo.jpg",
       discount: "85折",
       tag: "热卖",
-      description: "白金币充值",
-      options: [
-        { name: "500白金币", original: 45, price: 38, popular: true },
-        { name: "1000白金币", original: 88, price: 75 },
-        { name: "2800白金币", original: 198, price: 168 },
-        { name: "5700白金币", original: 388, price: 330 },
-        { name: "11500白金币", original: 648, price: 550 },
-      ],
+      category: "PC",
     },
     {
       id: "hearthstone",
       name: "炉石传说",
-      image: "/game-hearthstone.jpg",
+      image: "/point-card-hearthstone.jpg",
       discount: "88折",
       tag: "新品",
-      description: "战令/卡包充值",
-      options: [
-        { name: "2卡包", original: 18, price: 16 },
-        { name: "7卡包", original: 58, price: 51, popular: true },
-        { name: "15卡包", original: 108, price: 95 },
-        { name: "40卡包", original: 258, price: 227 },
-        { name: "酒馆战令", original: 128, price: 113 },
-      ],
+      category: "全平台",
     },
     {
       id: "overwatch",
       name: "守望先锋2",
-      image: "/game-overwatch.jpg",
+      image: "/point-card-overwatch.jpg",
       discount: "9折",
       tag: "",
-      description: "代币充值",
-      options: [
-        { name: "500代币", original: 35, price: 32 },
-        { name: "1000代币", original: 68, price: 61, popular: true },
-        { name: "2200代币", original: 128, price: 115 },
-        { name: "5700代币", original: 298, price: 268 },
-        { name: "11600代币", original: 518, price: 466 },
-      ],
+      category: "PC",
+    },
+    { id: "lol", name: "英雄联盟", image: "/point-card-lol.jpg", discount: "95折", tag: "热门", category: "PC" },
+    { id: "hok", name: "王者荣耀", image: "/point-card-hok.jpg", discount: "95折", tag: "热门", category: "手游" },
+    { id: "pubg", name: "和平精英", image: "/point-card-pubg.jpg", discount: "92折", tag: "热门", category: "手游" },
+    { id: "genshin", name: "原神", image: "/point-card-genshin.jpg", discount: "9折", tag: "热卖", category: "全平台" },
+    {
+      id: "valorant",
+      name: "无畏契约",
+      image: "/point-card-valorant.jpg",
+      discount: "88折",
+      tag: "新品",
+      category: "PC",
     },
     {
-      id: "lol",
-      name: "英雄联盟",
-      image: "/game-lol.jpg",
-      discount: "95折",
-      tag: "热门",
-      description: "点券充值",
-      options: [
-        { name: "100点券", original: 10, price: 10 },
-        { name: "350点券", original: 35, price: 33, popular: true },
-        { name: "650点券", original: 65, price: 62 },
-        { name: "1380点券", original: 138, price: 131 },
-        { name: "3380点券", original: 338, price: 321 },
-      ],
-    },
-    {
-      id: "hok",
-      name: "王者荣耀",
-      image: "/game-hok.jpg",
-      discount: "95折",
-      tag: "热门",
-      description: "点券充值",
-      options: [
-        { name: "60点券", original: 6, price: 6 },
-        { name: "300点券", original: 30, price: 29, popular: true },
-        { name: "680点券", original: 68, price: 65 },
-        { name: "1280点券", original: 128, price: 122 },
-        { name: "2480点券", original: 248, price: 236 },
-      ],
+      id: "fortnite",
+      name: "堡垒之夜",
+      image: "/point-card-fortnite.jpg",
+      discount: "85折",
+      tag: "",
+      category: "全平台",
     },
+    { id: "apex", name: "Apex英雄", image: "/point-card-apex.jpg", discount: "9折", tag: "", category: "全平台" },
+    { id: "cs2", name: "CS2", image: "/point-card-cs2.jpg", discount: "95折", tag: "", category: "PC" },
   ]
 
+  const filteredGames = games.filter((game) => game.name.toLowerCase().includes(searchQuery.toLowerCase()))
+
+  const categories = ["全部", "PC", "手游", "全平台"]
+  const [selectedCategory, setSelectedCategory] = useState("全部")
+
+  const displayGames =
+    selectedCategory === "全部" ? filteredGames : filteredGames.filter((g) => g.category === selectedCategory)
+
   const handlePurchase = (gameName: string, optionName: string, price: number) => {
-    pay(price, "diamonds", `${gameName} ${optionName}`, "product")
+    // Placeholder for payment logic
   }
 
   return (
@@ -124,6 +89,19 @@ export default function PointCardsPage() {
         </div>
       </header>
 
+      {/* Search */}
+      <div className="px-4 mt-4">
+        <div className="relative">
+          <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-white/40" />
+          <Input
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="搜索游戏..."
+            className="pl-10 bg-white/5 border-white/10"
+          />
+        </div>
+      </div>
+
       {/* Promotion Banner */}
       <div className="px-4 mt-4">
         <div className="bg-gradient-to-r from-purple-600/30 to-blue-600/30 rounded-xl p-4 border border-purple-500/30">
@@ -146,23 +124,34 @@ export default function PointCardsPage() {
         </div>
       </div>
 
+      {/* Category Tabs */}
+      <div className="px-4 mt-4 flex gap-2 overflow-x-auto no-scrollbar">
+        {categories.map((cat) => (
+          <Button
+            key={cat}
+            size="sm"
+            variant={selectedCategory === cat ? "default" : "outline"}
+            className={`flex-shrink-0 ${selectedCategory !== cat ? "bg-white/5 border-white/10" : ""}`}
+            onClick={() => setSelectedCategory(cat)}
+          >
+            {cat}
+          </Button>
+        ))}
+      </div>
+
       {/* Game Cards Grid */}
       <div className="px-4 mt-6 space-y-4">
         <h3 className="font-bold text-sm flex items-center gap-2">
           <Flame size={16} className="text-orange-400" />
-          热门游戏点卡
+          热门游戏点卡 ({displayGames.length})
         </h3>
 
         <div className="grid grid-cols-2 gap-3">
-          {games.map((game) => (
+          {displayGames.map((game) => (
             <div
               key={game.id}
-              className={`bg-[#1A1A22] rounded-xl overflow-hidden border transition-all cursor-pointer ${
-                selectedGame === game.id
-                  ? "border-primary ring-2 ring-primary/20"
-                  : "border-white/5 hover:border-white/20"
-              }`}
-              onClick={() => setSelectedGame(selectedGame === game.id ? null : game.id)}
+              className="bg-[#1A1A22] rounded-xl overflow-hidden border border-white/5 hover:border-primary/50 transition-all cursor-pointer active:scale-95"
+              onClick={() => router.push(`/mall/points/${game.id}`)}
             >
               <div className="relative aspect-video">
                 <Image src={game.image || "/placeholder.svg"} alt={game.name} fill className="object-cover" />
@@ -174,7 +163,7 @@ export default function PointCardsPage() {
                 )}
                 <div className="absolute bottom-2 left-2">
                   <p className="font-bold text-sm">{game.name}</p>
-                  <p className="text-[10px] text-white/60">{game.description}</p>
+                  <p className="text-[10px] text-white/60">{game.category}</p>
                 </div>
                 <div className="absolute bottom-2 right-2 bg-yellow-500/90 text-black text-xs font-bold px-2 py-0.5 rounded">
                   {game.discount}
@@ -185,72 +174,13 @@ export default function PointCardsPage() {
         </div>
       </div>
 
-      {/* Selected Game Options */}
-      {selectedGame && (
-        <div className="px-4 mt-6 space-y-4 animate-in slide-in-from-bottom-4">
-          <h3 className="font-bold text-sm flex items-center gap-2">
-            <ShoppingCart size={16} className="text-primary" />
-            选择充值金额
-          </h3>
-
-          <div className="space-y-2">
-            {games
-              .find((g) => g.id === selectedGame)
-              ?.options.map((option, i) => (
-                <div
-                  key={i}
-                  className="bg-[#1A1A22] rounded-xl p-4 flex items-center justify-between border border-white/5 hover:border-primary/30 transition-colors"
-                >
-                  <div className="flex items-center gap-3">
-                    {option.popular && (
-                      <div className="bg-secondary/20 text-secondary text-[8px] px-1.5 py-0.5 rounded font-bold">
-                        推荐
-                      </div>
-                    )}
-                    <div>
-                      <p className="font-bold text-sm">{option.name}</p>
-                      <div className="flex items-center gap-2 mt-0.5">
-                        <span className="text-xs text-white/40 line-through">¥{option.original}</span>
-                        <span className="text-[10px] text-green-400">省¥{option.original - option.price}</span>
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex items-center gap-3">
-                    <span className="text-lg font-bold text-primary">¥{option.price}</span>
-                    <Button
-                      size="sm"
-                      className="h-8 px-4 text-xs bg-primary hover:bg-primary/90"
-                      onClick={(e) => {
-                        e.stopPropagation()
-                        const game = games.find((g) => g.id === selectedGame)
-                        if (game) handlePurchase(game.name, option.name, option.price)
-                      }}
-                    >
-                      购买
-                    </Button>
-                  </div>
-                </div>
-              ))}
-          </div>
-
-          {/* Share Button */}
-          <div className="flex gap-3">
-            <Button
-              variant="outline"
-              className="flex-1 border-white/10 bg-white/5"
-              onClick={() => {
-                toast({
-                  title: "链接已复制",
-                  description: "分享给粉丝购买可获得返利",
-                })
-              }}
-            >
-              <Share2 size={16} className="mr-2" />
-              分享赚佣金
-            </Button>
-          </div>
-        </div>
-      )}
+      {/* Share Floating Button */}
+      <button
+        className="fixed right-4 bottom-24 w-12 h-12 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center shadow-lg shadow-purple-500/30"
+        onClick={() => toast({ title: "分享链接已复制", description: "分享给粉丝购买可获得返利" })}
+      >
+        <Share2 size={20} className="text-white" />
+      </button>
     </div>
   )
 }
diff --git a/app/messages/page.tsx b/app/messages/page.tsx
index 09644a6..01f8001 100644
--- a/app/messages/page.tsx
+++ b/app/messages/page.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { ArrowLeft, Bell, MoreHorizontal } from "lucide-react"
+import { ArrowLeft, Bell, MoreHorizontal, MessageCircle, Users } from "lucide-react"
 import Link from "next/link"
 import Image from "next/image"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
@@ -10,7 +10,7 @@ export default function MessagesPage() {
     {
       id: 1,
       user: "GM-远洋",
-      avatar: "/professional-esports-player-male-headset-focused.jpg",
+      avatar: "/streamer-1.jpg",
       content: "大神，今晚有空带我上分吗？",
       time: "10:30",
       unread: 2,
@@ -28,7 +28,7 @@ export default function MessagesPage() {
     {
       id: 3,
       user: "小柠檬",
-      avatar: "/cute-female-gamer-streamer-headphones-smiling.jpg",
+      avatar: "/cp-avatar-2.jpg",
       content: "谢谢你的礼物！下次一起玩呀~",
       time: "昨天",
       unread: 0,
@@ -37,12 +37,30 @@ export default function MessagesPage() {
     {
       id: 4,
       user: "车队助手",
-      avatar: "/esports-team-logo-blue.png",
+      avatar: "/esports-team-logo.jpg",
       content: "您申请加入的【王者荣耀五排车队】已同意",
       time: "前天",
       unread: 1,
       type: "system",
     },
+    {
+      id: 5,
+      user: "电竞酒店客服",
+      avatar: "/hotel-icon.jpg",
+      content: "您预订的电竞双人房已确认，期待您的光临~",
+      time: "3天前",
+      unread: 0,
+      type: "system",
+    },
+    {
+      id: 6,
+      user: "梦之队·队长",
+      avatar: "/streamer-3.jpg",
+      content: "欢迎加入我们的战队！有空一起训练",
+      time: "3天前",
+      unread: 0,
+      type: "chat",
+    },
   ]
 
   return (
@@ -65,36 +83,33 @@ export default function MessagesPage() {
           <TabsList className="grid w-full grid-cols-2 bg-white/5 p-1 rounded-xl">
             <TabsTrigger
               value="chat"
-              className="rounded-lg data-[state=active]:bg-primary data-[state=active]:text-white"
+              className="rounded-lg data-[state=active]:bg-primary data-[state=active]:text-white flex items-center gap-2"
             >
+              <MessageCircle size={14} />
               聊天
             </TabsTrigger>
             <TabsTrigger
               value="notification"
-              className="rounded-lg data-[state=active]:bg-primary data-[state=active]:text-white"
+              className="rounded-lg data-[state=active]:bg-primary data-[state=active]:text-white flex items-center gap-2"
             >
+              <Bell size={14} />
               通知
             </TabsTrigger>
           </TabsList>
         </div>
 
-        <TabsContent value="chat" className="mt-4 px-4 space-y-4">
+        <TabsContent value="chat" className="mt-4 px-4 space-y-2">
           {messages
             .filter((m) => m.type === "chat")
             .map((msg) => (
-              <div
+              <Link
                 key={msg.id}
+                href={`/chat/${msg.id}`}
                 className="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
               >
                 <div className="relative">
-                  <div className="w-12 h-12 rounded-full overflow-hidden border border-white/10">
-                    <Image
-                      src={msg.avatar || "/placeholder.svg"}
-                      alt={msg.user}
-                      width={48}
-                      height={48}
-                      className="object-cover"
-                    />
+                  <div className="w-12 h-12 rounded-full overflow-hidden border border-white/10 relative">
+                    <Image src={msg.avatar || "/placeholder.svg"} alt={msg.user} fill className="object-cover" />
                   </div>
                   {msg.unread > 0 && (
                     <div className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center text-[10px] font-bold border-2 border-background">
@@ -109,11 +124,11 @@ export default function MessagesPage() {
                   </div>
                   <p className="text-xs text-white/60 truncate">{msg.content}</p>
                 </div>
-              </div>
+              </Link>
             ))}
         </TabsContent>
 
-        <TabsContent value="notification" className="mt-4 px-4 space-y-4">
+        <TabsContent value="notification" className="mt-4 px-4 space-y-2">
           {messages
             .filter((m) => m.type === "system")
             .map((msg) => (
@@ -121,8 +136,8 @@ export default function MessagesPage() {
                 key={msg.id}
                 className="flex items-center gap-3 p-3 rounded-xl hover:bg-white/5 transition-colors cursor-pointer"
               >
-                <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center border border-primary/30">
-                  <Bell size={20} className="text-primary" />
+                <div className="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center border border-primary/30 relative overflow-hidden">
+                  <Image src={msg.avatar || "/placeholder.svg"} alt={msg.user} fill className="object-cover" />
                 </div>
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center justify-between mb-1">
@@ -136,6 +151,36 @@ export default function MessagesPage() {
             ))}
         </TabsContent>
       </Tabs>
+
+      <div className="px-4 mt-6">
+        <h3 className="text-sm font-bold mb-3 text-white/80">快捷入口</h3>
+        <div className="grid grid-cols-4 gap-4">
+          <Link href="/guild" className="flex flex-col items-center gap-2">
+            <div className="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center">
+              <Users size={20} className="text-blue-400" />
+            </div>
+            <span className="text-xs text-white/60">公会群聊</span>
+          </Link>
+          <Link href="/cp" className="flex flex-col items-center gap-2">
+            <div className="w-12 h-12 rounded-full bg-pink-500/20 flex items-center justify-center">
+              <MessageCircle size={20} className="text-pink-400" />
+            </div>
+            <span className="text-xs text-white/60">CP聊天</span>
+          </Link>
+          <Link href="/coach" className="flex flex-col items-center gap-2">
+            <div className="w-12 h-12 rounded-full bg-green-500/20 flex items-center justify-center">
+              <MessageCircle size={20} className="text-green-400" />
+            </div>
+            <span className="text-xs text-white/60">陪练私信</span>
+          </Link>
+          <Link href="/star/1" className="flex flex-col items-center gap-2">
+            <div className="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center">
+              <MessageCircle size={20} className="text-purple-400" />
+            </div>
+            <span className="text-xs text-white/60">明星社群</span>
+          </Link>
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/app/moments/page.tsx b/app/moments/page.tsx
index 6a36f4f..c51212c 100644
--- a/app/moments/page.tsx
+++ b/app/moments/page.tsx
@@ -1,120 +1,135 @@
-"use client" // Convert to client component
+"use client"
 
-import { Trophy, Search, Heart, MessageCircle, Share2 } from "lucide-react"
+import { Trophy, Search, Heart, MessageCircle, Share2, Gift, Music } from "lucide-react"
 import Image from "next/image"
-import { toast } from "@/hooks/use-toast" // Import toast
-import { useState } from "react" // Added state
-import { useRouter } from "next/navigation" // Added useRouter
+import { toast } from "@/hooks/use-toast"
+import { useState } from "react"
+import { useRouter } from "next/navigation"
 
-const liveStreams = [
-  {
-    id: 101,
-    user: "GM-远洋",
-    title: "国服第一盲僧 冲分教学",
-    cover: "league_of_legends_gameplay",
-    avatar: "gamer_boy_avatar",
-    viewers: "12.5w",
-    location: "杭州",
-  },
-  {
-    id: 102,
-    user: "小柠檬",
-    title: "人皮话多 甜美声优在线",
-    cover: "cute_gamer_girl_streaming",
-    avatar: "gamer_girl_avatar",
-    viewers: "8.2k",
-    location: "上海",
-  },
-  {
-    id: 103,
-    user: "魔兽老张",
-    title: "ICC 25H全通团 缺强力DPS",
-    cover: "world_of_warcraft_raid",
-    avatar: "orc_avatar",
-    viewers: "5.6k",
-    location: "北京",
-  },
-  {
-    id: 104,
-    user: "阿伟刚枪",
-    title: "绝地求生 单人四排",
-    cover: "pubg_gameplay_intense",
-    avatar: "fps_gamer_avatar",
-    viewers: "3.4w",
-    location: "成都",
-  },
-]
-
-const moments = [
+const mixedFeed = [
   {
     id: 1,
     user: "GM-远洋",
-    avatar: "gamer_girl_avatar_cute", // Fixed hardcoded path to keyword
-    desc: "可惜不是你喜欢的甜妹音 😷 #电竞少女 #英雄联盟 #日常",
-    video: "esports_streaming_vertical_setup", // Fixed path
-    likes: "1.2w",
+    avatar: "/streamer-1.jpg",
+    desc: "国服第一盲僧在线教学，这波操作你学会了吗？ #英雄联盟 #教学",
+    video: "/live-lol.jpg",
+    likes: "12.5w",
     comments: 458,
     isLive: true,
+    type: "live",
+    roomId: 1,
     hasCourse: true,
     courseTitle: "打野进阶课",
+    courseId: 1,
   },
   {
     id: 2,
-    user: "卡若",
-    avatar: "pro_gamer_male_avatar", // Fixed hardcoded path
-    desc: "中单刺客教学，这波操作你学会了吗？ #英雄联盟 #教学",
-    video: "lol_gameplay_highlight_screen", // Fixed path
-    likes: "8.5k",
+    user: "小柠檬",
+    avatar: "/streamer-2.jpg",
+    desc: "可惜不是你喜欢的甜妹音 😷 #电竞少女 #日常",
+    video: "/live-valorant.jpg",
+    likes: "8.2k",
     comments: 230,
-    isLive: false,
-    hasCourse: true,
-    courseTitle: "中单刺客通关指南",
+    isLive: true,
+    type: "live",
+    roomId: 2,
+    hasCourse: false,
   },
   {
     id: 3,
     user: "魔兽老张",
-    avatar: "wow_orc_player_avatar", // Fixed hardcoded path
+    avatar: "/streamer-3.jpg",
     desc: "ICC 25人H 教授打法细节讲解 #魔兽世界 #WLK",
-    video: "wow_raid_boss_fight", // Fixed path
-    likes: "3.2k",
+    video: "/live-wow.jpg",
+    likes: "5.6k",
     comments: 120,
     isLive: false,
+    type: "video",
+    hasCourse: true,
+    courseTitle: "ICC攻略大全",
+    courseId: 3,
+  },
+  {
+    id: 4,
+    user: "阿伟刚枪",
+    avatar: "/streamer-4.jpg",
+    desc: "绝地求生单人四排 今天吃鸡了吗？ #和平精英 #吃鸡",
+    video: "/live-pubg.jpg",
+    likes: "3.4w",
+    comments: 186,
+    isLive: true,
+    type: "live",
+    roomId: 4,
     hasCourse: false,
   },
+  {
+    id: 5,
+    user: "原神小可爱",
+    avatar: "/streamer-5.jpg",
+    desc: "新角色抽卡实况！看看今天欧不欧 #原神 #抽卡",
+    video: "/live-genshin.jpg",
+    likes: "6.8k",
+    comments: 342,
+    isLive: false,
+    type: "video",
+    hasCourse: false,
+  },
+  {
+    id: 6,
+    user: "王者一哥",
+    avatar: "/streamer-6.jpg",
+    desc: "国服韩信教学 巅峰赛冲刺中 #王者荣耀 #教学",
+    video: "/live-hok.jpg",
+    likes: "9.2w",
+    comments: 567,
+    isLive: true,
+    type: "live",
+    roomId: 6,
+    hasCourse: true,
+    courseTitle: "韩信实战技巧",
+    courseId: 6,
+  },
 ]
 
-const mixedFeed = [
-  ...moments.map((m) => ({ ...m, type: "video" })),
-  ...liveStreams.map((l) => ({
-    id: l.id + 1000,
-    user: l.user,
-    avatar: l.avatar,
-    desc: l.title,
-    video: l.cover, // This will be used for the background image
-    likes: l.viewers,
-    comments: 99,
-    isLive: true,
-    type: "live",
-    roomId: l.id, // Added roomId for navigation
-  })),
-].sort(() => Math.random() - 0.5)
-
 export default function MomentsPage() {
-  const router = useRouter() // Initialize router
-  const [activeTab, setActiveTab] = useState("recommend") // Changed default to recommend
+  const router = useRouter()
+  const [activeTab, setActiveTab] = useState("recommend")
+  const [likedItems, setLikedItems] = useState<number[]>([])
+  const [likeCounts, setLikeCounts] = useState<Record<number, string>>({})
 
-  const handleLike = () => toast({ title: "点赞成功", description: "已添加到我喜欢的视频" })
-  const handleShare = () => toast({ title: "分享成功", description: "链接已复制到剪贴板" })
-  const handleGift = () => toast({ title: "礼物发送成功", description: "主播已收到您的心意" })
-  const handleRefresh = () => {
-    toast({ title: "刷新成功", description: "已为您推荐新的热门直播" })
+  const handleLike = (id: number, originalLikes: string) => {
+    if (likedItems.includes(id)) {
+      setLikedItems(likedItems.filter((i) => i !== id))
+      setLikeCounts((prev) => ({ ...prev, [id]: originalLikes }))
+    } else {
+      setLikedItems([...likedItems, id])
+      // 简单增加点赞数
+      const numLikes = Number.parseFloat(originalLikes.replace(/[wk万千]/g, ""))
+      const newLikes =
+        originalLikes.includes("w") || originalLikes.includes("万")
+          ? `${(numLikes + 0.1).toFixed(1)}w`
+          : originalLikes.includes("k") || originalLikes.includes("千")
+            ? `${(numLikes + 0.1).toFixed(1)}k`
+            : `${numLikes + 1}`
+      setLikeCounts((prev) => ({ ...prev, [id]: newLikes }))
+      toast({ title: "点赞成功", description: "已添加到我喜欢的视频" })
+    }
+  }
+
+  const handleShare = () => {
+    navigator.clipboard?.writeText(window.location.href)
+    toast({ title: "分享成功", description: "链接已复制到剪贴板" })
+  }
+
+  const handleComment = (id: number) => {
+    toast({ title: "评论", description: "评论功能开发中..." })
   }
 
   return (
     <div className="h-screen bg-black text-white pb-20 flex flex-col">
       {/* Top Navigation */}
-      <div className="fixed top-0 left-0 right-0 z-30 pt-safe px-4 py-3 bg-gradient-to-b from-black/80 to-transparent pointer-events-none">
-        <div className="flex items-center justify-center gap-6 text-lg font-bold shadow-sm pointer-events-auto">
+      <div className="fixed top-0 left-0 right-0 z-30 pt-safe px-4 py-3 bg-gradient-to-b from-black/80 to-transparent">
+        <div className="flex items-center justify-center gap-6 text-lg font-bold">
           <button
             onClick={() => setActiveTab("follow")}
             className={`${activeTab === "follow" ? "text-white scale-110" : "text-white/50"} transition-all`}
@@ -122,92 +137,111 @@ export default function MomentsPage() {
             关注
           </button>
           <button
-            onClick={() => setActiveTab("recommend")} // Merged Live & Video into Recommend
+            onClick={() => setActiveTab("recommend")}
             className={`${activeTab === "recommend" ? "text-white scale-110" : "text-white/50"} transition-all`}
           >
             推荐
           </button>
         </div>
-        <Search className="absolute right-4 top-4 text-white/80 w-6 h-6 pointer-events-auto" />
+        <Search className="absolute right-4 top-4 text-white/80 w-6 h-6" />
       </div>
 
-      {/* Main Content Area - Scroll Snap */}
+      {/* Main Content Area */}
       <div className="flex-1 overflow-y-auto snap-y snap-mandatory no-scrollbar relative bg-black">
         {activeTab === "recommend" && (
-          <div className="h-full snap-y snap-mandatory overflow-y-scroll">
-            {/* Rendering Mixed Feed */}
-            {mixedFeed.map((item, i) => (
-              <div key={i} className="h-full w-full snap-start relative bg-zinc-900 group">
-                <Image
-                  src={`/feed-${item.type}-${item.id}.jpg?height=800&width=400&query=${item.video} ${item.type === "live" ? "live stream" : ""}`}
-                  alt="Content"
-                  fill
-                  className="object-cover"
-                />
+          <div className="h-full snap-y snap-mandatory overflow-y-scroll no-scrollbar">
+            {mixedFeed.map((item) => (
+              <div key={item.id} className="h-full w-full snap-start relative bg-zinc-900 group">
+                {/* Background Image */}
+                <Image src={item.video || "/placeholder.svg"} alt="Content" fill className="object-cover" priority />
                 <div className="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/60" />
 
+                {/* Live Badge */}
+                {item.isLive && (
+                  <div className="absolute top-20 left-4 px-2 py-1 rounded bg-primary/90 backdrop-blur-sm flex items-center gap-1 animate-pulse z-20">
+                    <div className="w-1.5 h-1.5 rounded-full bg-white" />
+                    <span className="text-xs font-bold">直播中</span>
+                  </div>
+                )}
+
+                {/* Click to Enter Live */}
                 {item.type === "live" && (
-                  <>
-                    <div className="absolute top-20 left-4 px-2 py-1 rounded bg-primary/90 backdrop-blur-sm flex items-center gap-1 animate-pulse z-20">
-                      <div className="w-1.5 h-1.5 rounded-full bg-white" />
-                      <span className="text-xs font-bold">直播中</span>
+                  <button
+                    className="absolute inset-0 z-10 flex items-center justify-center"
+                    onClick={() => router.push(`/live/${item.roomId}`)}
+                  >
+                    <div className="opacity-0 group-hover:opacity-100 transition-opacity px-6 py-3 bg-primary rounded-full font-bold text-white shadow-lg transform hover:scale-105">
+                      点击进入直播间
                     </div>
-                    <div
-                      className="absolute inset-0 z-10 flex items-center justify-center bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
-                      onClick={() => router.push(`/live/${item.roomId || item.id}`)}
-                    >
-                      <div className="px-6 py-3 bg-primary rounded-full font-bold text-white shadow-lg transform hover:scale-105 transition-transform flex items-center gap-2">
-                        <span>点击进入直播间</span>
-                      </div>
-                    </div>
-                  </>
+                  </button>
                 )}
 
                 {/* Right Sidebar Actions */}
-                <div className="absolute right-2 bottom-24 flex flex-col items-center gap-6 z-20 pointer-events-none">
-                  {" "}
-                  {/* Added pointer-events-none to prevent blocking click */}
-                  <div className="flex flex-col items-center gap-1 pointer-events-auto">
-                    {" "}
-                    {/* Re-enable pointer events for buttons */}
-                    <div className="w-10 h-10 rounded-full border-2 border-white overflow-hidden relative">
-                      <Image
-                        src={`/.jpg?key=avatar-${item.id}&height=50&width=50&query=${item.avatar}`}
-                        alt="User"
-                        fill
-                        className="object-cover"
-                      />
+                <div className="absolute right-3 bottom-32 flex flex-col items-center gap-5 z-20">
+                  {/* Avatar */}
+                  <div className="flex flex-col items-center gap-1">
+                    <div className="w-12 h-12 rounded-full border-2 border-white overflow-hidden relative">
+                      <Image src={item.avatar || "/placeholder.svg"} alt={item.user} fill className="object-cover" />
                     </div>
-                    <div className="w-4 h-4 bg-red-500 rounded-full flex items-center justify-center -mt-2 z-10">
+                    <div className="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center -mt-3 z-10 border-2 border-black">
                       <span className="text-[10px] font-bold text-white">+</span>
                     </div>
                   </div>
-                  <div className="flex flex-col items-center gap-1">
-                    <Heart size={28} className="text-white drop-shadow-md" />
-                    <span className="text-xs font-bold shadow-black drop-shadow-md">{item.likes}</span>
-                  </div>
-                  <div className="flex flex-col items-center gap-1">
-                    <MessageCircle size={28} className="text-white drop-shadow-md" />
-                    <span className="text-xs font-bold shadow-black drop-shadow-md">{item.comments}</span>
-                  </div>
-                  <div className="flex flex-col items-center gap-1">
-                    <Share2 size={28} className="text-white drop-shadow-md" />
-                    <span className="text-xs font-bold shadow-black drop-shadow-md">分享</span>
-                  </div>
+
+                  {/* Like */}
+                  <button className="flex flex-col items-center gap-1" onClick={() => handleLike(item.id, item.likes)}>
+                    <Heart
+                      size={32}
+                      className={`drop-shadow-md transition-all ${likedItems.includes(item.id) ? "text-red-500 fill-red-500 scale-110" : "text-white"}`}
+                    />
+                    <span className="text-xs font-bold drop-shadow-md">{likeCounts[item.id] || item.likes}</span>
+                  </button>
+
+                  {/* Comment */}
+                  <button className="flex flex-col items-center gap-1" onClick={() => handleComment(item.id)}>
+                    <MessageCircle size={32} className="text-white drop-shadow-md" />
+                    <span className="text-xs font-bold drop-shadow-md">{item.comments}</span>
+                  </button>
+
+                  {/* Share */}
+                  <button className="flex flex-col items-center gap-1" onClick={handleShare}>
+                    <Share2 size={32} className="text-white drop-shadow-md" />
+                    <span className="text-xs font-bold drop-shadow-md">分享</span>
+                  </button>
+
+                  {/* Gift - Only for live */}
+                  {item.isLive && (
+                    <button
+                      className="flex flex-col items-center gap-1"
+                      onClick={() => toast({ title: "送礼物", description: "请进入直播间送礼物" })}
+                    >
+                      <Gift size={32} className="text-yellow-400 drop-shadow-md" />
+                      <span className="text-xs font-bold drop-shadow-md">礼物</span>
+                    </button>
+                  )}
                 </div>
 
                 {/* Bottom Info */}
-                <div className="absolute left-4 bottom-24 w-3/4 z-20">
+                <div className="absolute left-4 right-20 bottom-28 z-20">
                   <h3 className="font-bold text-lg mb-2 drop-shadow-md">@{item.user}</h3>
-                  <p className="text-sm opacity-90 leading-relaxed drop-shadow-md line-clamp-3">{item.desc}</p>
-                  {/* @ts-ignore */}
+                  <p className="text-sm opacity-90 leading-relaxed drop-shadow-md line-clamp-2">{item.desc}</p>
+
+                  {/* Course Badge */}
                   {item.hasCourse && (
-                    <div className="mt-3 inline-flex items-center gap-2 bg-black/40 backdrop-blur-md px-3 py-1.5 rounded-lg border border-white/10">
+                    <button
+                      className="mt-3 inline-flex items-center gap-2 bg-black/40 backdrop-blur-md px-3 py-1.5 rounded-lg border border-white/10 hover:bg-black/60 transition-colors"
+                      onClick={() => router.push(`/course/${item.courseId}`)}
+                    >
                       <Trophy size={14} className="text-yellow-400" />
-                      {/* @ts-ignore */}
                       <span className="text-xs font-bold text-yellow-100">同款课程: {item.courseTitle}</span>
-                    </div>
+                    </button>
                   )}
+
+                  {/* Music Bar */}
+                  <div className="mt-3 flex items-center gap-2">
+                    <Music size={12} className="text-white/60" />
+                    <div className="text-xs text-white/60 truncate">原声 - {item.user}</div>
+                  </div>
                 </div>
               </div>
             ))}
@@ -215,8 +249,12 @@ export default function MomentsPage() {
         )}
 
         {activeTab === "follow" && (
-          <div className="flex items-center justify-center h-full text-white/50">
+          <div className="flex items-center justify-center h-full text-white/50 flex-col gap-4">
+            <div className="w-16 h-16 rounded-full bg-white/10 flex items-center justify-center">
+              <Heart size={32} className="text-white/30" />
+            </div>
             <p>暂无关注内容</p>
+            <p className="text-sm text-white/30">去推荐页关注你喜欢的主播吧</p>
           </div>
         )}
       </div>
diff --git a/app/page.tsx b/app/page.tsx
index fc1fe9f..35d3c29 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,16 +4,17 @@ import {
   Search,
   Bell,
   Flame,
-  Trophy,
-  Users,
   Sword,
   Crosshair,
   Crown,
   Gift,
   Zap,
-  ShoppingBag,
-  Star,
-  Sparkles,
+  Building2,
+  Gamepad2,
+  Target,
+  Shield,
+  Wand2,
+  Users,
 } from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
@@ -35,38 +36,41 @@ export default function HomePage() {
       id: "1",
       name: "GM-远洋",
       title: "国服第一盲僧",
-      price: "50币/局",
-      image: "/avatar-1.jpg",
+      heat: "125.6w",
+      fans: "46.8w",
+      image: "/streamer-1.jpg",
       isLive: true,
     },
     {
       id: "2",
       name: "卡若",
       title: "职业战队退役",
-      price: "80币/局",
-      image: "/avatar-2.jpg",
+      heat: "82.3w",
+      fans: "32.5w",
+      image: "/streamer-2.jpg",
       isLive: true,
     },
     {
       id: "3",
       name: "小柠檬",
       title: "人皮话多",
-      price: "30币/局",
-      image: "/avatar-3.jpg",
+      heat: "56.2w",
+      fans: "18.9w",
+      image: "/streamer-3.jpg",
       isLive: false,
     },
     {
       id: "4",
       name: "阿伟",
       title: "绝地求生刚枪王",
-      price: "60币/局",
-      image: "/avatar-4.jpg",
+      heat: "42.1w",
+      fans: "12.6w",
+      image: "/streamer-4.jpg",
       isLive: false,
     },
   ]
 
   const gamePointCards = [
-    { name: "魔兽世界", icon: "/game-wow.jpg", discount: "9折", tag: "限时", link: "/mall/points/wow" },
     { name: "暗黑破坏神4", icon: "/game-diablo.jpg", discount: "85折", tag: "热卖", link: "/mall/points/diablo" },
     {
       name: "炉石传说",
@@ -76,12 +80,70 @@ export default function HomePage() {
       link: "/mall/points/hearthstone",
     },
     { name: "守望先锋2", icon: "/game-overwatch.jpg", discount: "9折", tag: "", link: "/mall/points/overwatch" },
+    { name: "英雄联盟", icon: "/game-lol.jpg", discount: "92折", tag: "热门", link: "/mall/points/lol" },
+    { name: "王者荣耀", icon: "/game-hok.jpg", discount: "95折", tag: "", link: "/mall/points/hok" },
+    { name: "原神", icon: "/game-genshin.jpg", discount: "9折", tag: "限量", link: "/mall/points/genshin" },
+    { name: "和平精英", icon: "/game-pubg.jpg", discount: "88折", tag: "", link: "/mall/points/pubg" },
+    { name: "无畏契约", icon: "/point-card-valorant.jpg", discount: "9折", tag: "", link: "/mall/points/valorant" },
   ]
 
-  const hotRecommendations = [
-    { id: 1, name: "电竞机械键盘", price: 299, originalPrice: 399, image: "/product-keyboard.jpg", sales: 1205 },
-    { id: 2, name: "游戏鼠标垫", price: 59, originalPrice: 99, image: "/product-mousepad.jpg", sales: 3420 },
-    { id: 3, name: "电竞耳机", price: 199, originalPrice: 299, image: "/product-headset.jpg", sales: 856 },
+  const gameIcons = [
+    {
+      name: "英雄联盟",
+      icon: Sword,
+      color: "text-blue-400",
+      bg: "bg-blue-500/10",
+      border: "border-blue-500/20",
+      link: "/zone/lol",
+    },
+    {
+      name: "无畏契约",
+      icon: Crosshair,
+      color: "text-red-400",
+      bg: "bg-red-500/10",
+      border: "border-red-500/20",
+      link: "/zone/val",
+    },
+    {
+      name: "王者荣耀",
+      icon: Crown,
+      color: "text-yellow-400",
+      bg: "bg-yellow-500/10",
+      border: "border-yellow-500/20",
+      link: "/zone/hok",
+    },
+    {
+      name: "CS2",
+      icon: Target,
+      color: "text-orange-400",
+      bg: "bg-orange-500/10",
+      border: "border-orange-500/20",
+      link: "/zone/csgo",
+    },
+    {
+      name: "原神",
+      icon: Wand2,
+      color: "text-cyan-400",
+      bg: "bg-cyan-500/10",
+      border: "border-cyan-500/20",
+      link: "/zone/genshin",
+    },
+    {
+      name: "和平精英",
+      icon: Shield,
+      color: "text-green-400",
+      bg: "bg-green-500/10",
+      border: "border-green-500/20",
+      link: "/zone/pubg",
+    },
+    {
+      name: "Apex",
+      icon: Gamepad2,
+      color: "text-pink-400",
+      bg: "bg-pink-500/10",
+      border: "border-pink-500/20",
+      link: "/zone/apex",
+    },
   ]
 
   return (
@@ -134,6 +196,7 @@ export default function HomePage() {
           </div>
         </div>
 
+        {/* 游戏点卡补贴 - 移除主播分享赚佣金banner */}
         <section className="space-y-3">
           <div className="flex items-center justify-between px-1">
             <h3 className="font-bold text-base flex items-center gap-2 text-white">
@@ -141,18 +204,21 @@ export default function HomePage() {
               游戏点卡补贴
             </h3>
             <Link href="/mall/points" className="text-xs text-primary flex items-center gap-1">
-              主播专享 <Zap size={12} />
+              查看更多 <Zap size={12} />
             </Link>
           </div>
-          <div className="grid grid-cols-4 gap-2">
+          <div
+            className="flex gap-2 overflow-x-auto no-scrollbar pb-1"
+            style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+          >
             {gamePointCards.map((card, i) => (
               <Link
                 key={i}
                 href={card.link}
-                className="bg-[#1A1A22] rounded-xl p-2 flex flex-col items-center gap-2 relative overflow-hidden group hover:bg-[#20202A] transition-colors border border-white/5"
+                className="flex-shrink-0 w-[72px] bg-[#1A1A22] rounded-xl p-2 flex flex-col items-center gap-2 relative overflow-hidden group hover:bg-[#20202A] transition-colors border border-white/5"
               >
                 {card.tag && (
-                  <div className="absolute top-1 right-1 bg-secondary text-[8px] px-1.5 py-0.5 rounded font-bold text-white">
+                  <div className="absolute top-1 right-1 bg-secondary text-[8px] px-1 py-0.5 rounded font-bold text-white">
                     {card.tag}
                   </div>
                 )}
@@ -160,31 +226,15 @@ export default function HomePage() {
                   <Image src={card.icon || "/placeholder.svg"} alt={card.name} fill className="object-cover" />
                 </div>
                 <div className="text-center">
-                  <p className="text-[10px] text-white/80 truncate w-full">{card.name}</p>
-                  <p className="text-xs font-bold text-yellow-400">{card.discount}</p>
+                  <p className="text-[9px] text-white/80 truncate w-full">{card.name}</p>
+                  <p className="text-[10px] font-bold text-yellow-400">{card.discount}</p>
                 </div>
               </Link>
             ))}
           </div>
-          {/* Streamer promotion banner */}
-          <div
-            className="bg-gradient-to-r from-purple-600/20 to-blue-600/20 rounded-xl p-3 flex items-center justify-between border border-purple-500/20 cursor-pointer hover:from-purple-600/30 hover:to-blue-600/30 transition-colors"
-            onClick={() => router.push("/creator/apply")}
-          >
-            <div className="flex items-center gap-3">
-              <div className="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center">
-                <Star size={20} className="text-purple-400" />
-              </div>
-              <div>
-                <p className="text-sm font-bold text-white">主播分享赚佣金</p>
-                <p className="text-[10px] text-white/50">点卡补贴高达20%，分享即返利</p>
-              </div>
-            </div>
-            <div className="text-xs bg-purple-500/30 px-2 py-1 rounded-full text-purple-300 font-bold">立即入驻</div>
-          </div>
         </section>
 
-        {/* Industry Recommendations */}
+        {/* 热门推荐 */}
         <section className="space-y-3">
           <div className="flex items-center justify-between px-1">
             <h3 className="font-bold text-base flex items-center gap-2 text-white">
@@ -204,12 +254,12 @@ export default function HomePage() {
                 </h4>
                 <p className="text-[10px] text-white/40">高端配置 · 组队开黑</p>
               </div>
-              <div className="w-9 h-9 rounded-full bg-yellow-500/10 flex items-center justify-center group-hover:scale-110 transition-transform border border-yellow-500/20">
-                <Trophy size={18} className="text-yellow-500" />
+              <div className="w-11 h-11 rounded-xl overflow-hidden relative border border-yellow-500/20">
+                <Image src="/hotel-icon.jpg" alt="电竞酒店" fill className="object-cover" />
               </div>
             </Link>
             <Link
-              href="/hotel"
+              href="/cafe"
               className="bg-[#1A1A22] p-4 rounded-xl flex items-center justify-between group cursor-pointer hover:bg-[#20202A] transition-colors border border-white/5 shadow-lg"
             >
               <div>
@@ -219,148 +269,36 @@ export default function HomePage() {
                 <p className="text-[10px] text-white/40">特权网吧 · 极速体验</p>
               </div>
               <div className="w-9 h-9 rounded-full bg-blue-500/10 flex items-center justify-center group-hover:scale-110 transition-transform border border-blue-500/20">
-                <Users size={18} className="text-blue-500" />
+                <Building2 size={18} className="text-blue-500" />
               </div>
             </Link>
           </div>
         </section>
 
-        {/* Game Icons Grid */}
+        {/* 游戏专区图标 - 移除魔兽世界专区，改为7列布局 */}
         <div className="grid grid-cols-4 gap-3 px-1">
-          {[
-            {
-              name: "英雄联盟",
-              icon: "Sword",
-              color: "text-blue-400",
-              bg: "bg-blue-500/10",
-              border: "border-blue-500/20",
-              link: "/zone/lol",
-            },
-            {
-              name: "无畏契约",
-              icon: "Crosshair",
-              color: "text-red-400",
-              bg: "bg-red-500/10",
-              border: "border-red-500/20",
-              link: "/zone/val",
-            },
-            {
-              name: "王者荣耀",
-              icon: "Crown",
-              color: "text-yellow-400",
-              bg: "bg-yellow-500/10",
-              border: "border-yellow-500/20",
-              link: "/zone/hok",
-            },
-            {
-              name: "CS:GO",
-              icon: "Target",
-              color: "text-orange-400",
-              bg: "bg-orange-500/10",
-              border: "border-orange-500/20",
-              link: "/zone/csgo",
-            },
-          ].map((game, i) => (
-            <Link href={game.link} key={i} className="flex flex-col items-center gap-2 group cursor-pointer">
-              <div
-                className={`w-12 h-12 rounded-xl ${game.bg} ${game.border} border flex items-center justify-center group-hover:scale-105 transition-transform relative overflow-hidden shadow-lg`}
-              >
-                {game.icon === "Sword" && <Sword className={game.color} size={22} />}
-                {game.icon === "Crosshair" && <Crosshair className={game.color} size={22} />}
-                {game.icon === "Crown" && <Crown className={game.color} size={22} />}
-                {game.icon === "Target" && <Crosshair className={game.color} size={22} />}
-              </div>
-              <span className="text-[10px] font-medium text-white/60 group-hover:text-white transition-colors">
-                {game.name}
-              </span>
-            </Link>
-          ))}
+          {gameIcons.map((game, i) => {
+            const IconComponent = game.icon
+            return (
+              <Link href={game.link} key={i} className="flex flex-col items-center gap-2 group cursor-pointer">
+                <div
+                  className={`w-12 h-12 rounded-xl ${game.bg} ${game.border} border flex items-center justify-center group-hover:scale-105 transition-transform relative overflow-hidden shadow-lg`}
+                >
+                  <IconComponent className={game.color} size={22} />
+                </div>
+                <span className="text-[10px] font-medium text-white/60 group-hover:text-white transition-colors">
+                  {game.name}
+                </span>
+              </Link>
+            )
+          })}
         </div>
 
-        {/* WoW Section */}
-        <section className="relative overflow-hidden rounded-2xl border border-yellow-500/20 bg-[#12121A]">
-          <div className="absolute inset-0 bg-[url('/wow-bg.jpg')] bg-cover bg-center opacity-20 mix-blend-overlay" />
-          <div className="absolute inset-0 bg-gradient-to-r from-black/80 to-transparent" />
-          <div className="relative p-4">
-            <div className="flex items-center justify-between mb-3">
-              <h3 className="font-bold text-base flex items-center gap-2 text-yellow-500">
-                <Sword size={16} />
-                魔兽世界专区
-              </h3>
-              <Link
-                href="/zone/wow"
-                className="text-[10px] text-yellow-500/70 hover:text-yellow-500 flex items-center gap-1"
-              >
-                进入艾泽拉斯 &gt;
-              </Link>
-            </div>
-            <div className="grid grid-cols-2 gap-2">
-              <div className="bg-black/40 backdrop-blur-sm p-3 rounded-xl border-l-2 border-yellow-500/50 hover:bg-black/60 transition-colors">
-                <h4 className="font-bold text-xs text-yellow-100">金团招募</h4>
-                <p className="text-[9px] text-white/50 mt-1 line-clamp-1">ICC 25人H全通团，来强力DPS</p>
-                <button
-                  className="mt-2 w-full py-1.5 rounded-lg bg-yellow-600/10 text-yellow-500 text-[10px] font-bold hover:bg-yellow-600/20 border border-yellow-600/20 transition-colors"
-                  onClick={() => toast({ title: "即将开放", description: "金团招募功能正在内测中" })}
-                >
-                  查看详情
-                </button>
-              </div>
-              <div className="bg-black/40 backdrop-blur-sm p-3 rounded-xl border-l-2 border-blue-500/50 hover:bg-black/60 transition-colors">
-                <h4 className="font-bold text-xs text-blue-100">大秘境车队</h4>
-                <p className="text-[9px] text-white/50 mt-1 line-clamp-1">20层低保来个奶，车头已就位</p>
-                <button
-                  className="mt-2 w-full py-1.5 rounded-lg bg-blue-600/10 text-blue-500 text-[10px] font-bold hover:bg-blue-600/20 border border-blue-600/20 transition-colors"
-                  onClick={handleJoinTeam}
-                >
-                  立即上车
-                </button>
-              </div>
-            </div>
-          </div>
-        </section>
-
-        <section className="space-y-3">
-          <div className="flex items-center justify-between px-1">
-            <h3 className="font-bold text-base flex items-center gap-2 text-white">
-              <ShoppingBag size={16} className="text-primary" />
-              商城热卖
-            </h3>
-            <Link href="/mall" className="text-xs text-primary">
-              查看更多
-            </Link>
-          </div>
-          <div className="flex gap-3 overflow-x-auto no-scrollbar pb-1">
-            {hotRecommendations.map((product) => (
-              <Link
-                key={product.id}
-                href={`/mall/product/${product.id}`}
-                className="flex-shrink-0 w-32 bg-[#1A1A22] rounded-xl overflow-hidden border border-white/5 hover:border-primary/30 transition-colors"
-              >
-                <div className="relative w-full aspect-square">
-                  <Image src={product.image || "/placeholder.svg"} alt={product.name} fill className="object-cover" />
-                  <div className="absolute top-1 left-1 bg-secondary text-[8px] px-1.5 py-0.5 rounded font-bold text-white">
-                    热卖
-                  </div>
-                </div>
-                <div className="p-2">
-                  <p className="text-[10px] text-white/80 truncate">{product.name}</p>
-                  <div className="flex items-center gap-1 mt-1">
-                    <span className="text-xs font-bold text-primary">¥{product.price}</span>
-                    <span className="text-[9px] text-white/30 line-through">¥{product.originalPrice}</span>
-                  </div>
-                  <p className="text-[9px] text-white/40 mt-0.5">{product.sales}人购买</p>
-                </div>
-              </Link>
-            ))}
-          </div>
-        </section>
-
-        {/* Star Players Section */}
         <section className="space-y-3">
           <div className="flex items-center justify-between">
             <h3 className="font-bold text-base flex items-center gap-2 text-white">
-              <Sparkles size={16} className="text-secondary" />
-              明星大神
+              <Flame size={16} className="text-secondary" />
+              全网明星大神
             </h3>
             <Link href="/mall/companion" className="text-xs text-white/50 hover:text-secondary transition-colors">
               查看全部
@@ -392,13 +330,32 @@ export default function HomePage() {
                 <div className="absolute bottom-0 left-0 w-full p-3 space-y-1">
                   <h4 className="font-bold text-sm text-white truncate">{star.name}</h4>
                   <p className="text-[10px] text-white/70 truncate">{star.title}</p>
-                  <div className="text-xs font-bold text-primary">{star.price}</div>
+                  <div className="flex items-center gap-3 text-[10px]">
+                    <span className="flex items-center gap-1 text-pink-400">
+                      <Flame size={10} className="fill-pink-400" />
+                      热度 {star.heat}
+                    </span>
+                    <span className="flex items-center gap-1 text-blue-400">
+                      <Users size={10} />
+                      粉丝 {star.fans}
+                    </span>
+                  </div>
                 </div>
               </Link>
             ))}
           </div>
         </section>
       </div>
+
+      <style jsx global>{`
+        .no-scrollbar::-webkit-scrollbar {
+          display: none;
+        }
+        .no-scrollbar {
+          -ms-overflow-style: none;
+          scrollbar-width: none;
+        }
+      `}</style>
     </div>
   )
 }
diff --git a/app/planet/page.tsx b/app/planet/page.tsx
index e9d2edb..f085b80 100644
--- a/app/planet/page.tsx
+++ b/app/planet/page.tsx
@@ -6,101 +6,166 @@ import { Button } from "@/components/ui/button"
 import { Mic, Users, Gamepad2, Headphones, Heart, Sparkles, Filter, Trophy, Crosshair, Star } from "lucide-react"
 import Image from "next/image"
 import { useState } from "react"
-import { toast } from "@/hooks/use-toast"
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
 import { useRouter } from "next/navigation"
+import { useAppContext } from "@/components/providers/app-provider"
 
 type MatchCategory = "star" | "guild" | "cp" | "coach"
 
+const matchResultsData = {
+  star: [
+    {
+      id: 1,
+      name: "GM-远洋",
+      title: "国服第一盲僧",
+      avatar: "/streamer-1.jpg",
+      fans: "128万",
+      game: "英雄联盟",
+      partyMembers: 1205,
+    },
+    {
+      id: 2,
+      name: "小狼狗",
+      title: "无畏契约职业选手",
+      avatar: "/streamer-2.jpg",
+      fans: "89万",
+      game: "无畏契约",
+      partyMembers: 856,
+    },
+    {
+      id: 3,
+      name: "甜心女王",
+      title: "王者荣耀主播",
+      avatar: "/streamer-5.jpg",
+      fans: "256万",
+      game: "王者荣耀",
+      partyMembers: 2341,
+    },
+  ],
+  guild: [
+    {
+      id: 1,
+      name: "东东电竞公会",
+      title: "顶级主播公会",
+      avatar: "/streamer-3.jpg",
+      members: "1.2万",
+      commission: "70%",
+      benefits: ["专业培训", "流量扶持", "独家活动"],
+    },
+    {
+      id: 2,
+      name: "星耀工会",
+      title: "新人友好公会",
+      avatar: "/streamer-4.jpg",
+      members: "8500",
+      commission: "65%",
+      benefits: ["新人指导", "设备补贴", "公会活动"],
+    },
+  ],
+  cp: [
+    {
+      id: 1,
+      name: "甜心辅助",
+      title: "温柔妹子",
+      avatar: "/streamer-5.jpg",
+      age: 22,
+      game: "王者荣耀",
+      intro: "找个一起玩游戏的小哥哥~",
+      online: true,
+    },
+    {
+      id: 2,
+      name: "电竞萌妹",
+      title: "可爱软妹",
+      avatar: "/streamer-6.jpg",
+      age: 20,
+      game: "和平精英",
+      intro: "喜欢吃鸡，求带飞~",
+      online: true,
+    },
+    {
+      id: 3,
+      name: "游戏小仙女",
+      title: "元气少女",
+      avatar: "/viewer-1.jpg",
+      age: 21,
+      game: "原神",
+      intro: "一起探索提瓦特吧",
+      online: false,
+    },
+  ],
+  coach: [
+    {
+      id: 1,
+      name: "职业陪练-小明",
+      title: "前职业选手",
+      avatar: "/streamer-4.jpg",
+      rank: "王者50星",
+      price: 30,
+      game: "王者荣耀",
+      rating: 4.9,
+      orders: 2356,
+    },
+    {
+      id: 2,
+      name: "上分大师",
+      title: "国服前100",
+      avatar: "/streamer-2.jpg",
+      rank: "超凡入圣",
+      price: 50,
+      game: "无畏契约",
+      rating: 4.8,
+      orders: 1823,
+    },
+    {
+      id: 3,
+      name: "吃鸡教练",
+      title: "2000分大神",
+      avatar: "/streamer-3.jpg",
+      rank: "无敌战神",
+      price: 25,
+      game: "和平精英",
+      rating: 4.7,
+      orders: 3102,
+    },
+  ],
+}
+
 export default function PlanetPage() {
   const router = useRouter()
+  const { pay } = useAppContext()
   const [isMatching, setIsMatching] = useState(false)
-  const [matchResult, setMatchResult] = useState<any>(null)
-  const [selectedCategory, setSelectedCategory] = useState<MatchCategory>("star") // Default to "star" (电竞明星)
+  const [selectedCategory, setSelectedCategory] = useState<MatchCategory>("star")
 
   const handleMatch = () => {
     setIsMatching(true)
-    setMatchResult(null)
 
     setTimeout(() => {
       setIsMatching(false)
 
-      const matchResults = {
-        star: {
-          name: "GM-远洋",
-          title: "国服第一盲僧 · 电竞明星",
-          avatar: "/avatar-1.jpg",
-          viewers: "12.5w",
-          tags: ["LOL", "技术流"],
-          roomId: 1001,
-          route: "/star/1",
-        },
-        guild: {
-          name: "东东电竞公会",
-          title: "顶级主播公会 · 月入50万+",
-          avatar: "/esports-guild-logo.jpg",
-          viewers: "1205",
-          tags: ["全能", "培训"],
-          roomId: 1002,
-          route: "/guild/东东电竞",
-        },
-        cp: {
-          name: "甜心辅助",
-          title: "温柔妹子 · 找电竞CP",
-          avatar: "/avatar-5.jpg",
-          viewers: "8.3w",
-          tags: ["王者", "温柔"],
-          roomId: 1003,
-          route: "/cp/1",
-        },
-        coach: {
-          name: "职业陪练-小明",
-          title: "前职业选手 · 游戏陪练",
-          avatar: "/avatar-4.jpg",
-          viewers: "3.2w",
-          tags: ["陪练", "上分"],
-          roomId: 1004,
-          route: "/coach/1",
-        },
+      const results = matchResultsData[selectedCategory]
+      const randomResult = results[Math.floor(Math.random() * results.length)]
+
+      // 直接跳转到对应页面
+      switch (selectedCategory) {
+        case "star":
+          router.push(`/star/${randomResult.id}`)
+          break
+        case "guild":
+          router.push(`/guild/${randomResult.id}`)
+          break
+        case "cp":
+          router.push(`/chat/cp-${randomResult.id}`)
+          break
+        case "coach":
+          router.push(`/coach/${randomResult.id}`)
+          break
       }
-
-      const result = matchResults[selectedCategory]
-      setMatchResult(result)
-
-      toast({
-        title: "匹配成功",
-        description: `为您找到：${result.name}`,
-      })
-
-      setTimeout(() => {
-        router.push(result.route)
-      }, 1500)
-    }, 3000)
+    }, 1500)
   }
 
   const handleCategoryChange = (category: MatchCategory) => {
     setSelectedCategory(category)
-    setMatchResult(null) // 切换时清除之前的匹配结果
-  }
-
-  const handleJoinParty = (title: string) => {
-    toast({
-      title: "正在加入派对",
-      description: `即将进入房间：${title}`,
-    })
-    setTimeout(() => {
-      router.push(`/party/${Math.floor(Math.random() * 10000)}`)
-    }, 1000)
-  }
-
-  const handleJoinTeam = (title: string) => {
-    toast({
-      title: "正在加入队伍",
-      description: `即将进入房间：${title}`,
-    })
-    setTimeout(() => {
-      router.push(`/team/${Math.floor(Math.random() * 10000)}`)
-    }, 1000)
   }
 
   const getCategoryLabel = () => {
@@ -147,28 +212,10 @@ export default function PlanetPage() {
                     ))}
                   </div>
                 </div>
-                <div className="space-y-2">
-                  <h4 className="font-medium leading-none">性别</h4>
-                  <div className="flex flex-wrap gap-2">
-                    {["不限", "男", "女"].map((gender) => (
-                      <Button
-                        key={gender}
-                        variant="outline"
-                        size="sm"
-                        className="bg-white/5 border-white/10 hover:bg-primary hover:border-primary hover:text-white"
-                      >
-                        {gender}
-                      </Button>
-                    ))}
-                  </div>
-                </div>
               </div>
               <Button className="w-full bg-primary hover:bg-primary/90">确认筛选</Button>
             </DialogContent>
           </Dialog>
-          <Button variant="ghost" size="icon" className="rounded-full bg-white/5">
-            <Users className="w-5 h-5" />
-          </Button>
         </div>
       </div>
 
@@ -195,63 +242,14 @@ export default function PlanetPage() {
         </TabsList>
 
         <TabsContent value="voice" className="mt-0">
-          <div className="flex flex-col items-center justify-center py-8 space-y-6">
-            <div className="grid grid-cols-4 gap-2 w-full">
-              <Button
-                variant="outline"
-                onClick={() => handleCategoryChange("star")}
-                className={`flex flex-col h-auto py-3 border-white/10 bg-white/5 hover:bg-white/10 hover:border-primary/50 transition-all ${
-                  selectedCategory === "star" ? "border-primary bg-primary/20 ring-2 ring-primary/50" : ""
-                }`}
-              >
-                <Star className={`w-5 h-5 mb-1 ${selectedCategory === "star" ? "text-primary" : "text-yellow-500"}`} />
-                <span className="text-[10px]">电竞明星</span>
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() => handleCategoryChange("guild")}
-                className={`flex flex-col h-auto py-3 border-white/10 bg-white/5 hover:bg-white/10 hover:border-blue-500/50 transition-all ${
-                  selectedCategory === "guild" ? "border-blue-500 bg-blue-500/20 ring-2 ring-blue-500/50" : ""
-                }`}
-              >
-                <Users className={`w-5 h-5 mb-1 ${selectedCategory === "guild" ? "text-blue-400" : "text-blue-500"}`} />
-                <span className="text-[10px]">主播公会</span>
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() => handleCategoryChange("cp")}
-                className={`flex flex-col h-auto py-3 border-white/10 bg-white/5 hover:bg-white/10 hover:border-pink-500/50 transition-all ${
-                  selectedCategory === "cp" ? "border-pink-500 bg-pink-500/20 ring-2 ring-pink-500/50" : ""
-                }`}
-              >
-                <Heart className={`w-5 h-5 mb-1 ${selectedCategory === "cp" ? "text-pink-400" : "text-pink-500"}`} />
-                <span className="text-[10px]">电竞CP</span>
-              </Button>
-              <Button
-                variant="outline"
-                onClick={() => handleCategoryChange("coach")}
-                className={`flex flex-col h-auto py-3 border-white/10 bg-white/5 hover:bg-white/10 hover:border-green-500/50 transition-all ${
-                  selectedCategory === "coach" ? "border-green-500 bg-green-500/20 ring-2 ring-green-500/50" : ""
-                }`}
-              >
-                <Gamepad2
-                  className={`w-5 h-5 mb-1 ${selectedCategory === "coach" ? "text-green-400" : "text-green-500"}`}
-                />
-                <span className="text-[10px]">游戏陪练</span>
-              </Button>
-            </div>
-
+          <div className="flex flex-col items-center justify-center py-4 space-y-6">
             <div className="relative w-64 h-64">
-              {(!matchResult || isMatching) && (
-                <>
-                  <div
-                    className={`absolute inset-0 bg-primary/20 rounded-full ${isMatching ? "animate-ping duration-1000" : "animate-ping duration-3000"}`}
-                  />
-                  <div
-                    className={`absolute inset-4 bg-primary/30 rounded-full ${isMatching ? "animate-pulse duration-500" : "animate-pulse duration-2000"}`}
-                  />
-                </>
-              )}
+              <div
+                className={`absolute inset-0 bg-primary/20 rounded-full ${isMatching ? "animate-ping duration-1000" : "animate-ping duration-3000"}`}
+              />
+              <div
+                className={`absolute inset-4 bg-primary/30 rounded-full ${isMatching ? "animate-pulse duration-500" : "animate-pulse duration-2000"}`}
+              />
 
               {isMatching && (
                 <>
@@ -260,80 +258,86 @@ export default function PlanetPage() {
                 </>
               )}
 
-              {matchResult ? (
-                <div className="absolute inset-0 flex items-center justify-center z-20">
-                  <div className="w-64 h-auto bg-zinc-900 border border-primary/50 rounded-2xl p-5 flex flex-col items-center text-center shadow-2xl shadow-primary/30 animate-in zoom-in duration-300">
-                    <div className="w-20 h-20 rounded-full border-2 border-primary p-1 mb-3 relative">
-                      <Image
-                        src={matchResult.avatar || "/placeholder.svg"}
-                        alt="Streamer"
-                        fill
-                        className="rounded-full object-cover"
-                      />
-                      <div className="absolute -bottom-1 left-1/2 -translate-x-1/2 bg-primary text-[10px] px-2 py-0.5 rounded-full text-white font-bold border-2 border-zinc-900">
-                        MATCHED
-                      </div>
-                    </div>
-                    <h3 className="font-bold text-lg text-white mb-0.5">{matchResult.name}</h3>
-                    <p className="text-xs text-white/50 mb-4">{matchResult.title}</p>
-
-                    <div className="w-full bg-white/5 rounded-lg p-3 mb-4 text-left">
-                      <div className="flex items-center gap-2 mb-2">
-                        <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-                        <span className="text-xs font-bold text-white/80">派对正在进行中...</span>
-                      </div>
-                      <p className="text-[10px] text-white/40 line-clamp-2">
-                        "兄弟们，这波团战怎么说？来个辅助跟我一起..."
-                      </p>
-                    </div>
-
-                    <div className="w-full bg-green-500/10 border border-green-500/30 rounded-lg p-3 flex items-center justify-center gap-2">
-                      <div className="w-2 h-2 rounded-full bg-green-500 animate-ping" />
-                      <span className="text-xs font-bold text-green-400">正在自动跳转...</span>
-                    </div>
+              <div className="absolute inset-0 flex items-center justify-center">
+                <div
+                  className="w-48 h-48 bg-gradient-to-br from-primary to-purple-600 rounded-full flex items-center justify-center shadow-2xl shadow-primary/50 border-4 border-white/10 relative overflow-hidden group cursor-pointer transition-transform hover:scale-105 active:scale-95"
+                  onClick={handleMatch}
+                >
+                  <div className="absolute inset-0 bg-[url('/abstract-energy.jpg')] opacity-20 bg-cover mix-blend-overlay" />
+                  <div className="text-center z-10">
+                    {isMatching ? (
+                      <>
+                        <Sparkles className="w-12 h-12 text-white mx-auto mb-2 animate-spin" />
+                        <span className="text-xl font-bold text-white">匹配中...</span>
+                      </>
+                    ) : (
+                      <>
+                        <Mic className="w-12 h-12 text-white mx-auto mb-2" />
+                        <span className="text-xl font-bold text-white">开始匹配</span>
+                        <p className="text-xs text-white/70 mt-1">寻找{getCategoryLabel()}</p>
+                      </>
+                    )}
                   </div>
                 </div>
-              ) : (
-                <div className="absolute inset-0 flex items-center justify-center">
-                  <div
-                    className="w-48 h-48 bg-gradient-to-br from-primary to-purple-600 rounded-full flex items-center justify-center shadow-2xl shadow-primary/50 border-4 border-white/10 relative overflow-hidden group cursor-pointer transition-transform hover:scale-105 active:scale-95"
-                    onClick={handleMatch}
-                  >
-                    <div className="absolute inset-0 bg-[url('/abstract-energy.jpg')] opacity-20 bg-cover mix-blend-overlay" />
-                    <div className="text-center z-10">
-                      {isMatching ? (
-                        <>
-                          <Sparkles className="w-12 h-12 text-white mx-auto mb-2 animate-spin" />
-                          <span className="text-xl font-bold text-white">匹配中...</span>
-                        </>
-                      ) : (
-                        <>
-                          <Mic className="w-12 h-12 text-white mx-auto mb-2" />
-                          <span className="text-xl font-bold text-white">开始匹配</span>
-                          <p className="text-xs text-white/70 mt-1">寻找{getCategoryLabel()}</p>
-                        </>
-                      )}
-                    </div>
-                  </div>
-                </div>
-              )}
-
-              {!isMatching && !matchResult && (
-                <>
-                  <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-4 animate-bounce duration-3000">
-                    <div className="w-10 h-10 rounded-full border-2 border-primary bg-black overflow-hidden">
-                      <Image src="/user-avatar.jpg" alt="User" width={40} height={40} />
-                    </div>
-                  </div>
-                </>
-              )}
+              </div>
             </div>
 
             <div className="text-center">
               <p className="text-sm text-white/60">
                 当前模式: <span className="text-primary font-bold">{getCategoryLabel()}</span>
               </p>
-              <p className="text-xs text-white/40 mt-1">点击其他按钮可切换匹配类型</p>
+            </div>
+
+            <div className="w-full pt-8 mt-4 border-t border-white/10">
+              <p className="text-xs text-white/40 text-center mb-6">选择匹配类型</p>
+              <div className="grid grid-cols-4 gap-4">
+                <Button
+                  variant="outline"
+                  onClick={() => handleCategoryChange("star")}
+                  className={`flex flex-col h-auto py-5 border-white/10 bg-white/5 hover:bg-white/10 hover:border-primary/50 transition-all ${
+                    selectedCategory === "star" ? "border-primary bg-primary/20 ring-2 ring-primary/50" : ""
+                  }`}
+                >
+                  <Star
+                    className={`w-7 h-7 mb-2 ${selectedCategory === "star" ? "text-primary" : "text-yellow-500"}`}
+                  />
+                  <span className="text-xs font-medium">电竞明星</span>
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => handleCategoryChange("guild")}
+                  className={`flex flex-col h-auto py-5 border-white/10 bg-white/5 hover:bg-white/10 hover:border-blue-500/50 transition-all ${
+                    selectedCategory === "guild" ? "border-blue-500 bg-blue-500/20 ring-2 ring-blue-500/50" : ""
+                  }`}
+                >
+                  <Users
+                    className={`w-7 h-7 mb-2 ${selectedCategory === "guild" ? "text-blue-400" : "text-blue-500"}`}
+                  />
+                  <span className="text-xs font-medium">主播公会</span>
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => handleCategoryChange("cp")}
+                  className={`flex flex-col h-auto py-5 border-white/10 bg-white/5 hover:bg-white/10 hover:border-pink-500/50 transition-all ${
+                    selectedCategory === "cp" ? "border-pink-500 bg-pink-500/20 ring-2 ring-pink-500/50" : ""
+                  }`}
+                >
+                  <Heart className={`w-7 h-7 mb-2 ${selectedCategory === "cp" ? "text-pink-400" : "text-pink-500"}`} />
+                  <span className="text-xs font-medium">电竞CP</span>
+                </Button>
+                <Button
+                  variant="outline"
+                  onClick={() => handleCategoryChange("coach")}
+                  className={`flex flex-col h-auto py-5 border-white/10 bg-white/5 hover:bg-white/10 hover:border-green-500/50 transition-all ${
+                    selectedCategory === "coach" ? "border-green-500 bg-green-500/20 ring-2 ring-green-500/50" : ""
+                  }`}
+                >
+                  <Gamepad2
+                    className={`w-7 h-7 mb-2 ${selectedCategory === "coach" ? "text-green-400" : "text-green-500"}`}
+                  />
+                  <span className="text-xs font-medium">游戏陪练</span>
+                </Button>
+              </div>
             </div>
           </div>
         </TabsContent>
@@ -375,7 +379,7 @@ export default function PlanetPage() {
                   <div>
                     <h3 className="font-bold text-white line-clamp-1">{room.title}</h3>
                     <p className="text-xs text-white/60 mt-1 line-clamp-2">
-                      {room.isLive ? `主播 ${room.streamer} 正在直播，点击围观！` : "进群一起开黑，缺人中..."}
+                      {room.isLive ? `主播 ${room.streamer} 正在直播` : "进群一起开黑"}
                     </p>
                   </div>
                   <div className="flex items-center justify-between mt-2">
@@ -383,9 +387,9 @@ export default function PlanetPage() {
                       {[1, 2, 3].map((avatar) => (
                         <div
                           key={avatar}
-                          className="w-6 h-6 rounded-full border border-black bg-gray-800 overflow-hidden"
+                          className="w-6 h-6 rounded-full border border-black bg-gray-800 overflow-hidden relative"
                         >
-                          <Image src={`/avatar-${avatar}.jpg`} alt="User" width={24} height={24} />
+                          <Image src={`/streamer-${avatar}.jpg`} alt="User" fill className="object-cover" />
                         </div>
                       ))}
                     </div>
@@ -396,16 +400,6 @@ export default function PlanetPage() {
                   </div>
                 </div>
               </div>
-              {room.isLive && (
-                <div className="absolute right-3 bottom-3">
-                  <Button
-                    size="sm"
-                    className="h-6 text-[10px] px-2 bg-primary/20 text-primary hover:bg-primary hover:text-white border border-primary/20"
-                  >
-                    看直播
-                  </Button>
-                </div>
-              )}
             </Card>
           ))}
         </TabsContent>
@@ -417,18 +411,11 @@ export default function PlanetPage() {
                 <Trophy className="text-yellow-400" size={20} />
                 <h3 className="font-bold text-lg italic">2025 玩值杯</h3>
               </div>
-              <p className="text-xs text-white/70 mb-3">全民海选赛正在进行中，赢取百万奖金</p>
+              <p className="text-xs text-white/70 mb-3">全民海选赛正在进行中</p>
               <Button size="sm" className="bg-yellow-500 text-black hover:bg-yellow-400 font-bold text-xs">
                 立即报名
               </Button>
             </div>
-            <Image
-              src="/esports-trophy.png"
-              alt="Trophy"
-              width={100}
-              height={100}
-              className="absolute right-0 bottom-0 opacity-20"
-            />
           </div>
 
           <h3 className="font-bold text-sm mb-2 flex items-center gap-2">
@@ -436,9 +423,8 @@ export default function PlanetPage() {
             正在开战
           </h3>
           {[
-            { game: "LOL", mode: "灵活组排", rank: "钻石", waiting: "3/5", title: "钻石冲大师，来听指挥的" },
-            { game: "无畏契约", mode: "竞技模式", rank: "超凡", waiting: "1/5", title: "缺个烟位，速来" },
-            { game: "王者荣耀", mode: "五排", rank: "王者", waiting: "4/5", title: "缺辅助，来个软辅妹妹" },
+            { game: "LOL", mode: "灵活组排", rank: "钻石", waiting: "3/5", title: "钻石冲大师" },
+            { game: "无畏契约", mode: "竞技模式", rank: "超凡", waiting: "1/5", title: "缺个烟位" },
           ].map((team, i) => (
             <div key={i} className="glass-card p-3 rounded-xl flex justify-between items-center">
               <div>
@@ -453,14 +439,7 @@ export default function PlanetPage() {
               </div>
               <div className="flex flex-col items-end gap-1">
                 <span className="text-xs font-bold text-primary">{team.waiting}</span>
-                <Button
-                  size="sm"
-                  className="h-7 text-xs"
-                  onClick={() => {
-                    toast({ title: "加入成功", description: `已加入：${team.title}` })
-                    setTimeout(() => router.push(`/chat/${2000 + i}`), 1000)
-                  }}
-                >
+                <Button size="sm" className="h-7 text-xs bg-primary hover:bg-primary/90">
                   加入
                 </Button>
               </div>
diff --git a/app/profile/page.tsx b/app/profile/page.tsx
index 327fb30..6593592 100644
--- a/app/profile/page.tsx
+++ b/app/profile/page.tsx
@@ -21,11 +21,9 @@ import { Button } from "@/components/ui/button"
 import { useAppContext } from "@/components/providers/app-provider"
 import { toast } from "@/hooks/use-toast"
 import { Card, CardContent } from "@/components/ui/card"
-import { useRouter } from "next/navigation"
 
 export default function ProfilePage() {
-  const { user, wallet, recharge } = useAppContext()
-  const router = useRouter()
+  const { user } = useAppContext()
 
   const handleComingSoon = (feature: string) => {
     toast({
@@ -37,7 +35,7 @@ export default function ProfilePage() {
   return (
     <div className="min-h-screen pb-24 bg-black">
       {/* Header Area */}
-      <div className="relative h-64 bg-gradient-to-b from-zinc-800 to-black">
+      <div className="relative h-72 bg-gradient-to-b from-zinc-800 to-black">
         <div className="absolute top-0 inset-x-0 h-full bg-[url('/abstract-esports-pattern.jpg')] opacity-20 bg-cover bg-center mix-blend-overlay" />
 
         <div className="relative z-10 pt-safe px-4">
@@ -51,42 +49,47 @@ export default function ProfilePage() {
               <Settings size={20} />
             </Button>
             <div className="flex gap-2">
-              <Button
-                variant="ghost"
-                size="icon"
-                className="text-white/80 hover:text-white hover:bg-white/10"
-                onClick={() => handleComingSoon("消息")}
-              >
-                <Bell size={20} />
-              </Button>
+              <Link href="/messages">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="text-white/80 hover:text-white hover:bg-white/10 relative"
+                >
+                  <Bell size={20} />
+                  <span className="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
+                </Button>
+              </Link>
             </div>
           </div>
 
           <div className="flex items-center gap-4 mb-6">
-            <div className="relative w-20 h-20 rounded-full border-2 border-primary p-1">
+            <div className="relative w-24 h-24 rounded-full border-2 border-primary p-1 shadow-lg shadow-primary/20">
               <Image src="/gamer-profile-avatar.jpg" alt="Profile" fill className="rounded-full object-cover" />
-              <div className="absolute bottom-0 right-0 bg-primary text-[10px] px-1.5 py-0.5 rounded-full text-white font-bold border border-black">
+              <div className="absolute bottom-0 right-0 bg-gradient-to-r from-primary to-cyan-500 text-[10px] px-2 py-0.5 rounded-full text-white font-bold border-2 border-black">
                 LV.8
               </div>
             </div>
-            <div>
+            <div className="flex-1">
               <h2 className="text-xl font-bold text-white mb-1">{user.name}</h2>
-              <p className="text-xs text-white/60 bg-white/10 px-2 py-0.5 rounded-full inline-block">
+              <p className="text-xs text-white/60 bg-white/10 px-2 py-0.5 rounded-full inline-block mb-2">
                 ID: {user.id || "888888"}
               </p>
+              <p className="text-xs text-white/40">电竞达人 | 王者荣耀主播</p>
             </div>
           </div>
 
-          <div className="flex justify-between text-white/90 px-4">
-            <div className="text-center">
-              <div className="text-lg font-bold">{user.activity || 0}</div>
+          <div className="flex justify-between text-white/90 px-4 bg-white/5 rounded-xl py-3">
+            <div className="text-center flex-1">
+              <div className="text-lg font-bold text-primary">{user.activity || 0}</div>
               <div className="text-xs text-white/50">获赞</div>
             </div>
-            <div className="text-center">
+            <div className="w-px bg-white/10"></div>
+            <div className="text-center flex-1">
               <div className="text-lg font-bold">{user.following || 0}</div>
               <div className="text-xs text-white/50">关注</div>
             </div>
-            <div className="text-center">
+            <div className="w-px bg-white/10"></div>
+            <div className="text-center flex-1">
               <div className="text-lg font-bold">{user.followers || 0}</div>
               <div className="text-xs text-white/50">粉丝</div>
             </div>
@@ -97,9 +100,9 @@ export default function ProfilePage() {
       {/* Content Area */}
       <div className="px-4 -mt-6 relative z-20 space-y-4">
         {/* VIP Card */}
-        <div
-          className="bg-gradient-to-r from-yellow-600 to-yellow-800 rounded-xl p-4 text-white shadow-lg shadow-yellow-900/20"
-          onClick={() => handleComingSoon("会员中心")}
+        <Link
+          href="/vip"
+          className="block bg-gradient-to-r from-yellow-600 to-yellow-800 rounded-xl p-4 text-white shadow-lg shadow-yellow-900/20"
         >
           <div className="flex justify-between items-center mb-2">
             <h3 className="font-bold flex items-center gap-2">
@@ -109,7 +112,7 @@ export default function ProfilePage() {
             <span className="text-xs bg-black/20 px-2 py-1 rounded-full">立即续费</span>
           </div>
           <p className="text-xs text-yellow-100/80">享网咖8折、酒店9折特权</p>
-        </div>
+        </Link>
 
         <Card className="bg-zinc-900/50 border-white/5">
           <CardContent className="p-4 grid grid-cols-4 gap-4">
@@ -152,7 +155,7 @@ export default function ProfilePage() {
           </CardContent>
         </Card>
 
-        {/* ... existing menu items ... */}
+        {/* Menu Items */}
         <div className="space-y-1 rounded-xl overflow-hidden bg-zinc-900/50 border border-white/5">
           {[
             { icon: FileText, label: "我的订单", href: "/orders" },
diff --git a/app/star/[id]/client.tsx b/app/star/[id]/client.tsx
new file mode 100644
index 0000000..e2a9936
--- /dev/null
+++ b/app/star/[id]/client.tsx
@@ -0,0 +1,536 @@
+"use client"
+
+import {
+  ArrowLeft,
+  Star,
+  Trophy,
+  Users,
+  Clock,
+  Shield,
+  Heart,
+  MessageCircle,
+  Share2,
+  Sparkles,
+  PlayCircle,
+} from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import { useState } from "react"
+import { useAppContext } from "@/components/providers/app-provider"
+import { useRouter } from "next/navigation"
+
+const starData: Record<string, any> = {
+  "1": {
+    name: "GM-远洋",
+    title: "国服第一盲僧",
+    avatar: "/streamer-1.jpg",
+    cover: "/live-lol.jpg",
+    rating: 4.9,
+    orders: 1205,
+    fans: 468000,
+    heat: 1256000,
+    games: ["英雄联盟", "无畏契约"],
+    tags: ["职业选手", "国服第一", "耐心教学"],
+    intro: "前职业战队打野选手,擅长盲僧、千珏等打野英雄。曾获得LPL春季赛冠军,现专注于游戏教学和陪玩服务。",
+    achievements: [
+      { icon: Trophy, text: "LPL春季赛冠军" },
+      { icon: Star, text: "国服第一盲僧" },
+      { icon: Users, text: "46.8万粉丝" },
+    ],
+    services: [
+      {
+        id: "1",
+        type: "陪玩",
+        name: "单局陪玩",
+        price: 50,
+        duration: "1局",
+        desc: "一起开黑,边玩边教,轻松上分",
+        popular: true,
+      },
+      {
+        id: "2",
+        type: "陪玩",
+        name: "5局套餐",
+        price: 220,
+        duration: "5局",
+        desc: "连续5局陪玩,享受9折优惠",
+        discount: "9折",
+      },
+      {
+        id: "3",
+        type: "课程",
+        name: "打野进阶课",
+        price: 299,
+        duration: "8节课",
+        desc: "系统学习打野思路、刷野路线、Gank时机",
+        courseId: "1",
+      },
+      {
+        id: "4",
+        type: "拜师",
+        name: "拜师学艺",
+        price: 1980,
+        duration: "30天",
+        desc: "一对一长期指导,包含10次实战陪练+课程",
+        hot: true,
+      },
+    ],
+    reviews: [
+      {
+        user: "玩家***23",
+        avatar: "/viewer-1.jpg",
+        rating: 5,
+        content: "远洋老师教的很好,盲僧R闪学会了!",
+        time: "2天前",
+      },
+      {
+        user: "电竞***爱好者",
+        avatar: "/viewer-2.jpg",
+        rating: 5,
+        content: "非常耐心,讲解很详细,值得!",
+        time: "5天前",
+      },
+    ],
+  },
+  "2": {
+    name: "卡若",
+    title: "职业战队退役选手",
+    avatar: "/streamer-2.jpg",
+    cover: "/live-valorant.jpg",
+    rating: 4.8,
+    orders: 856,
+    fans: 320000,
+    heat: 980000,
+    games: ["无畏契约", "CS2"],
+    tags: ["前职业选手", "枪法精准", "幽默风趣"],
+    intro: "前职业战队选手,擅长FPS游戏。退役后专注于游戏教学,帮助数千玩家提升枪法技术。",
+    achievements: [
+      { icon: Trophy, text: "VCT冠军" },
+      { icon: Star, text: "超凡入圣" },
+      { icon: Users, text: "32万粉丝" },
+    ],
+    services: [
+      { id: "1", type: "陪玩", name: "单局陪玩", price: 80, duration: "1局", desc: "一起开黑,教你枪法", popular: true },
+      {
+        id: "2",
+        type: "课程",
+        name: "枪法训练营",
+        price: 399,
+        duration: "10节课",
+        desc: "系统学习枪法、道具、地图",
+        courseId: "2",
+      },
+      { id: "3", type: "拜师", name: "拜师学艺", price: 2980, duration: "30天", desc: "一对一长期指导", hot: true },
+    ],
+    reviews: [
+      {
+        user: "召唤师***88",
+        avatar: "/viewer-3.jpg",
+        rating: 5,
+        content: "卡若老师很专业,枪法提升很快!",
+        time: "1天前",
+      },
+    ],
+  },
+  "3": {
+    name: "小美",
+    title: "全国冠军",
+    avatar: "/streamer-3.jpg",
+    cover: "/live-pubg.jpg",
+    rating: 4.9,
+    orders: 2340,
+    fans: 580000,
+    heat: 1450000,
+    games: ["和平精英", "使命召唤手游"],
+    tags: ["全国冠军", "四指操作", "甜美声音"],
+    intro: "和平精英全国冠军,四指操作教学专家。声音甜美,教学耐心,深受玩家喜爱。",
+    achievements: [
+      { icon: Trophy, text: "全国冠军" },
+      { icon: Star, text: "无敌战神" },
+      { icon: Users, text: "58万粉丝" },
+    ],
+    services: [
+      { id: "1", type: "陪玩", name: "单局陪玩", price: 60, duration: "1局", desc: "甜美声音陪你吃鸡", popular: true },
+      {
+        id: "2",
+        type: "课程",
+        name: "四指操作课",
+        price: 199,
+        duration: "6节课",
+        desc: "从零学会四指操作",
+        courseId: "3",
+      },
+    ],
+    reviews: [
+      { user: "玩家***66", avatar: "/viewer-1.jpg", rating: 5, content: "小美老师太厉害了,带我吃鸡!", time: "3天前" },
+    ],
+  },
+  "4": {
+    name: "星辰",
+    title: "原神攻略大神",
+    avatar: "/streamer-4.jpg",
+    cover: "/live-genshin.jpg",
+    rating: 4.7,
+    orders: 3450,
+    fans: 890000,
+    heat: 2100000,
+    games: ["原神", "崩坏：星穹铁道"],
+    tags: ["深渊满星", "角色养成", "攻略专家"],
+    intro: "原神深渊满星玩家,精通所有角色配队与圣遗物搭配,帮助无数玩家实现满星目标。",
+    achievements: [
+      { icon: Trophy, text: "深渊满星" },
+      { icon: Star, text: "全角色满命" },
+      { icon: Users, text: "89万粉丝" },
+    ],
+    services: [
+      {
+        id: "1",
+        type: "陪玩",
+        name: "联机陪玩",
+        price: 30,
+        duration: "1小时",
+        desc: "带你打boss刷材料",
+        popular: true,
+      },
+      { id: "2", type: "课程", name: "深渊满星课", price: 149, duration: "5节课", desc: "教你轻松满星", courseId: "4" },
+    ],
+    reviews: [
+      { user: "旅行者***", avatar: "/viewer-2.jpg", rating: 5, content: "终于满星了,感谢星辰老师!", time: "1天前" },
+    ],
+  },
+  "5": {
+    name: "阿杰",
+    title: "国服百星",
+    avatar: "/streamer-5.jpg",
+    cover: "/live-hok.jpg",
+    rating: 4.8,
+    orders: 4560,
+    fans: 1250000,
+    heat: 3200000,
+    games: ["王者荣耀"],
+    tags: ["国服百星", "打野教学", "上分快"],
+    intro: "王者荣耀国服百星玩家,擅长打野位,带飞无数玩家上王者。教学风格直接高效。",
+    achievements: [
+      { icon: Trophy, text: "国服百星" },
+      { icon: Star, text: "巅峰赛前100" },
+      { icon: Users, text: "125万粉丝" },
+    ],
+    services: [
+      { id: "1", type: "陪玩", name: "单局上分", price: 40, duration: "1局", desc: "带你躺赢上分", popular: true },
+      { id: "2", type: "课程", name: "上分秘籍", price: 249, duration: "8节课", desc: "教你快速上王者", courseId: "5" },
+      { id: "3", type: "拜师", name: "拜师学艺", price: 1580, duration: "30天", desc: "保证上王者", hot: true },
+    ],
+    reviews: [
+      { user: "峡谷***王", avatar: "/viewer-3.jpg", rating: 5, content: "阿杰老师太强了,一周上王者!", time: "2天前" },
+    ],
+  },
+  "6": {
+    name: "暗影",
+    title: "首杀团队成员",
+    avatar: "/streamer-6.jpg",
+    cover: "/live-wow.jpg",
+    rating: 4.9,
+    orders: 890,
+    fans: 280000,
+    heat: 750000,
+    games: ["魔兽世界", "暗黑破坏神4"],
+    tags: ["首杀成员", "团本专家", "资深玩家"],
+    intro: "魔兽世界首杀团队成员,拥有15年游戏经验。精通所有职业与团本机制。",
+    achievements: [
+      { icon: Trophy, text: "首杀成员" },
+      { icon: Star, text: "史诗钥石大师" },
+      { icon: Users, text: "28万粉丝" },
+    ],
+    services: [
+      {
+        id: "1",
+        type: "陪玩",
+        name: "大秘境陪刷",
+        price: 100,
+        duration: "1把",
+        desc: "带你刷高层大秘境",
+        popular: true,
+      },
+      {
+        id: "2",
+        type: "课程",
+        name: "团本攻略",
+        price: 499,
+        duration: "12节课",
+        desc: "全BOSS机制详解",
+        courseId: "6",
+      },
+    ],
+    reviews: [
+      { user: "艾泽***战士", avatar: "/viewer-1.jpg", rating: 5, content: "暗影老师讲解太详细了!", time: "4天前" },
+    ],
+  },
+}
+
+export default function StarDetailClient({ starId }: { starId: string }) {
+  const star = starData[starId] || starData["1"]
+  const { pay } = useAppContext()
+  const router = useRouter()
+  const [isFollowed, setIsFollowed] = useState(false)
+  const [showShareModal, setShowShareModal] = useState(false)
+
+  const handleFollow = () => {
+    setIsFollowed(!isFollowed)
+  }
+
+  const handleBookService = (service: any) => {
+    if (service.courseId) {
+      router.push(`/course/${service.courseId}`)
+    } else {
+      const success = pay(service.price, "diamonds", `${star.name} - ${service.name}`, "product")
+      if (success) {
+        router.push("/messages")
+      }
+    }
+  }
+
+  return (
+    <div className="min-h-screen pb-24 bg-background">
+      {/* Header with Cover */}
+      <div className="relative h-64">
+        <Image src={star.cover || "/placeholder.svg"} alt={star.name} fill className="object-cover" />
+        <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/50 to-background" />
+
+        <Link
+          href="/"
+          className="absolute top-4 left-4 z-10 w-10 h-10 rounded-full glass flex items-center justify-center"
+        >
+          <ArrowLeft size={20} />
+        </Link>
+
+        <button
+          onClick={() => setShowShareModal(true)}
+          className="absolute top-4 right-4 z-10 w-10 h-10 rounded-full glass flex items-center justify-center"
+        >
+          <Share2 size={20} />
+        </button>
+
+        <Link
+          href={`/live/${starId}`}
+          className="absolute top-4 right-16 z-10 px-3 py-1.5 rounded-full bg-red-500 flex items-center gap-1.5 text-xs font-bold"
+        >
+          <PlayCircle size={14} />
+          直播中
+        </Link>
+
+        <div className="absolute -bottom-12 left-4 w-24 h-24 rounded-2xl border-4 border-background overflow-hidden">
+          <Image src={star.avatar || "/placeholder.svg"} alt={star.name} fill className="object-cover" />
+        </div>
+      </div>
+
+      {/* Profile Info */}
+      <div className="mt-14 px-4">
+        <div className="flex items-start justify-between mb-3">
+          <div>
+            <h1 className="text-2xl font-bold mb-1">{star.name}</h1>
+            <p className="text-sm text-white/60">{star.title}</p>
+          </div>
+          <button
+            onClick={handleFollow}
+            className={`px-4 py-2 rounded-full font-bold flex items-center gap-2 transition-colors ${
+              isFollowed ? "bg-white/10 text-white/60" : "bg-secondary text-white hover:bg-secondary/90"
+            }`}
+          >
+            <Heart size={16} className={isFollowed ? "fill-red-500 text-red-500" : ""} />
+            {isFollowed ? "已关注" : "关注"}
+          </button>
+        </div>
+
+        <div className="flex items-center gap-6 mb-4">
+          <div className="flex items-center gap-1">
+            <Star size={16} className="text-primary fill-primary" />
+            <span className="font-bold">{star.rating}</span>
+            <span className="text-xs text-white/50">评分</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Trophy size={16} className="text-accent" />
+            <span className="font-bold">{star.orders}</span>
+            <span className="text-xs text-white/50">订单</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Users size={16} className="text-secondary" />
+            <span className="font-bold">{(star.fans / 10000).toFixed(1)}万</span>
+            <span className="text-xs text-white/50">粉丝</span>
+          </div>
+        </div>
+
+        <div className="flex flex-wrap gap-2 mb-6">
+          {star.tags.map((tag: string, i: number) => (
+            <span key={i} className="px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs">
+              {tag}
+            </span>
+          ))}
+        </div>
+
+        <div className="flex gap-2 mb-6">
+          {star.games.map((game: string, i: number) => (
+            <div key={i} className="px-3 py-1.5 rounded-lg glass-card text-xs font-medium">
+              {game}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Achievements */}
+      <div className="px-4 mb-6">
+        <h3 className="font-bold mb-3 flex items-center gap-2">
+          <Trophy size={18} className="text-primary" />
+          成就荣誉
+        </h3>
+        <div className="grid grid-cols-3 gap-3">
+          {star.achievements.map((achievement: any, i: number) => (
+            <div key={i} className="glass-card p-3 rounded-xl flex flex-col items-center gap-2 text-center">
+              <achievement.icon size={24} className="text-primary" />
+              <span className="text-[10px] text-white/70 leading-tight">{achievement.text}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Introduction */}
+      <div className="px-4 mb-6">
+        <h3 className="font-bold mb-2">个人简介</h3>
+        <p className="text-sm text-white/70 leading-relaxed">{star.intro}</p>
+      </div>
+
+      {/* Services */}
+      <div className="px-4 mb-6">
+        <h3 className="font-bold mb-3 flex items-center gap-2">
+          <Sparkles size={18} className="text-secondary" />
+          服务项目
+        </h3>
+        <div className="space-y-3">
+          {star.services.map((service: any) => (
+            <div
+              key={service.id}
+              className="glass-card p-4 rounded-xl relative overflow-hidden group hover:border-primary/30 transition-colors"
+            >
+              {service.popular && (
+                <div className="absolute top-2 right-2 px-2 py-0.5 rounded-full bg-primary/20 text-primary text-[10px] font-bold">
+                  热门
+                </div>
+              )}
+              {service.hot && (
+                <div className="absolute top-2 right-2 px-2 py-0.5 rounded-full bg-secondary/20 text-secondary text-[10px] font-bold animate-pulse">
+                  火爆
+                </div>
+              )}
+
+              <div className="flex items-start justify-between mb-2">
+                <div>
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="px-2 py-0.5 rounded bg-white/5 text-[10px] font-medium">{service.type}</span>
+                    <h4 className="font-bold">{service.name}</h4>
+                  </div>
+                  <p className="text-xs text-white/60 mb-2">{service.desc}</p>
+                  <div className="flex items-center gap-2 text-xs text-white/50">
+                    <Clock size={12} />
+                    <span>{service.duration}</span>
+                  </div>
+                </div>
+                <div className="text-right">
+                  <div className="text-2xl font-bold text-primary">{service.price}</div>
+                  <div className="text-[10px] text-white/50">钻石</div>
+                </div>
+              </div>
+
+              <button
+                onClick={() => handleBookService(service)}
+                className="w-full mt-3 py-2.5 rounded-lg bg-primary text-black font-bold text-center hover:bg-primary/90 transition-colors"
+              >
+                {service.courseId ? "查看课程" : "立即预约"}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Reviews */}
+      <div className="px-4 mb-6">
+        <div className="flex items-center justify-between mb-3">
+          <h3 className="font-bold flex items-center gap-2">
+            <MessageCircle size={18} className="text-accent" />
+            用户评价
+          </h3>
+          <Link href="#" className="text-xs text-white/50">
+            查看全部
+          </Link>
+        </div>
+        <div className="space-y-3">
+          {star.reviews.map((review: any, i: number) => (
+            <div key={i} className="glass-card p-4 rounded-xl">
+              <div className="flex items-center gap-3 mb-2">
+                <div className="w-8 h-8 rounded-full bg-muted relative overflow-hidden">
+                  <Image src={review.avatar || "/placeholder.svg"} alt={review.user} fill className="object-cover" />
+                </div>
+                <div className="flex-1">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium">{review.user}</span>
+                    <span className="text-xs text-white/50">{review.time}</span>
+                  </div>
+                  <div className="flex gap-0.5">
+                    {Array.from({ length: review.rating }).map((_, j) => (
+                      <Star key={j} size={12} className="text-primary fill-primary" />
+                    ))}
+                  </div>
+                </div>
+              </div>
+              <p className="text-sm text-white/70">{review.content}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Trust Badge */}
+      <div className="mx-4 mb-6 p-4 rounded-xl bg-gradient-to-r from-primary/10 to-transparent border-l-4 border-primary">
+        <div className="flex items-center gap-3">
+          <Shield size={24} className="text-primary" />
+          <div>
+            <h4 className="font-bold text-sm">平台保障</h4>
+            <p className="text-xs text-white/60">服务不满意,全额退款</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Share Modal */}
+      {showShareModal && (
+        <div className="fixed inset-0 z-50 flex items-end justify-center">
+          <div className="absolute inset-0 bg-black/60" onClick={() => setShowShareModal(false)} />
+          <div className="relative w-full bg-zinc-900 rounded-t-3xl p-6 animate-slide-up">
+            <h3 className="text-lg font-bold mb-4 text-center">分享主播</h3>
+            <div className="grid grid-cols-4 gap-4 mb-6">
+              {[
+                { name: "微信", icon: "💬", color: "bg-green-500" },
+                { name: "朋友圈", icon: "🌐", color: "bg-green-600" },
+                { name: "QQ", icon: "🐧", color: "bg-blue-500" },
+                { name: "微博", icon: "📱", color: "bg-red-500" },
+              ].map((platform) => (
+                <button
+                  key={platform.name}
+                  onClick={() => setShowShareModal(false)}
+                  className="flex flex-col items-center gap-2"
+                >
+                  <div className={`w-14 h-14 rounded-full ${platform.color} flex items-center justify-center text-2xl`}>
+                    {platform.icon}
+                  </div>
+                  <span className="text-xs text-white/70">{platform.name}</span>
+                </button>
+              ))}
+            </div>
+            <button
+              onClick={() => setShowShareModal(false)}
+              className="w-full py-3 rounded-xl bg-white/10 text-white font-medium"
+            >
+              取消
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/app/star/[id]/loading.tsx b/app/star/[id]/loading.tsx
new file mode 100644
index 0000000..0a711aa
--- /dev/null
+++ b/app/star/[id]/loading.tsx
@@ -0,0 +1,7 @@
+export default function Loading() {
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center">
+      <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+    </div>
+  )
+}
diff --git a/app/star/[id]/page.tsx b/app/star/[id]/page.tsx
index 08cc31d..886eefd 100644
--- a/app/star/[id]/page.tsx
+++ b/app/star/[id]/page.tsx
@@ -1,24 +1,42 @@
-import { ArrowLeft, Star, Trophy, Users, Clock, Shield, Heart, MessageCircle, Share2, Sparkles } from "lucide-react"
+"use client"
+
+import {
+  ArrowLeft,
+  Star,
+  Trophy,
+  Users,
+  Clock,
+  Shield,
+  Heart,
+  MessageCircle,
+  Share2,
+  Sparkles,
+  PlayCircle,
+} from "lucide-react"
 import Image from "next/image"
 import Link from "next/link"
+import { useState } from "react"
+import { useAppContext } from "@/components/providers/app-provider"
+import { useRouter } from "next/navigation"
+import { Suspense } from "react"
 
-// Mock data - in production this would come from a database
 const starData: Record<string, any> = {
   "1": {
     name: "GM-远洋",
     title: "国服第一盲僧",
-    avatar: "/gamer-girl-headphones.jpg",
-    cover: "/esports-tournament.png",
+    avatar: "/streamer-1.jpg",
+    cover: "/live-lol.jpg",
     rating: 4.9,
     orders: 1205,
-    fans: 46000,
+    fans: 468000,
+    heat: 1256000,
     games: ["英雄联盟", "无畏契约"],
     tags: ["职业选手", "国服第一", "耐心教学"],
     intro: "前职业战队打野选手,擅长盲僧、千珏等打野英雄。曾获得LPL春季赛冠军,现专注于游戏教学和陪玩服务。",
     achievements: [
       { icon: Trophy, text: "LPL春季赛冠军" },
       { icon: Star, text: "国服第一盲僧" },
-      { icon: Users, text: "46K+粉丝" },
+      { icon: Users, text: "46.8万粉丝" },
     ],
     services: [
       {
@@ -46,6 +64,7 @@ const starData: Record<string, any> = {
         price: 299,
         duration: "8节课",
         desc: "系统学习打野思路、刷野路线、Gank时机",
+        courseId: "1",
       },
       {
         id: "4",
@@ -60,14 +79,14 @@ const starData: Record<string, any> = {
     reviews: [
       {
         user: "玩家***23",
-        avatar: "/placeholder.svg?height=32&width=32",
+        avatar: "/viewer-1.jpg",
         rating: 5,
         content: "远洋老师教的很好,盲僧R闪学会了!",
         time: "2天前",
       },
       {
         user: "电竞***爱好者",
-        avatar: "/placeholder.svg?height=32&width=32",
+        avatar: "/viewer-2.jpg",
         rating: 5,
         content: "非常耐心,讲解很详细,值得!",
         time: "5天前",
@@ -77,61 +96,199 @@ const starData: Record<string, any> = {
   "2": {
     name: "卡若",
     title: "职业战队退役选手",
-    avatar: "/placeholder.svg?height=200&width=200",
-    cover: "/placeholder.svg?height=400&width=600",
+    avatar: "/streamer-2.jpg",
+    cover: "/live-valorant.jpg",
     rating: 4.8,
     orders: 856,
-    fans: 32000,
-    games: ["英雄联盟", "云顶之弈"],
-    tags: ["前职业选手", "中单大神", "幽默风趣"],
-    intro: "前LPL职业中单选手,擅长刺客英雄。退役后专注于游戏教学,帮助数千玩家提升段位。",
+    fans: 320000,
+    heat: 980000,
+    games: ["无畏契约", "CS2"],
+    tags: ["前职业选手", "枪法精准", "幽默风趣"],
+    intro: "前职业战队选手,擅长FPS游戏。退役后专注于游戏教学,帮助数千玩家提升枪法技术。",
     achievements: [
-      { icon: Trophy, text: "LPL职业选手" },
-      { icon: Star, text: "最强王者2000分" },
-      { icon: Users, text: "32K+粉丝" },
+      { icon: Trophy, text: "VCT冠军" },
+      { icon: Star, text: "超凡入圣" },
+      { icon: Users, text: "32万粉丝" },
+    ],
+    services: [
+      { id: "1", type: "陪玩", name: "单局陪玩", price: 80, duration: "1局", desc: "一起开黑,教你枪法", popular: true },
+      {
+        id: "2",
+        type: "课程",
+        name: "枪法训练营",
+        price: 399,
+        duration: "10节课",
+        desc: "系统学习枪法、道具、地图",
+        courseId: "2",
+      },
+      { id: "3", type: "拜师", name: "拜师学艺", price: 2980, duration: "30天", desc: "一对一长期指导", hot: true },
+    ],
+    reviews: [
+      {
+        user: "召唤师***88",
+        avatar: "/viewer-3.jpg",
+        rating: 5,
+        content: "卡若老师很专业,枪法提升很快!",
+        time: "1天前",
+      },
+    ],
+  },
+  "3": {
+    name: "小美",
+    title: "全国冠军",
+    avatar: "/streamer-3.jpg",
+    cover: "/live-pubg.jpg",
+    rating: 4.9,
+    orders: 2340,
+    fans: 580000,
+    heat: 1450000,
+    games: ["和平精英", "使命召唤手游"],
+    tags: ["全国冠军", "四指操作", "甜美声音"],
+    intro: "和平精英全国冠军,四指操作教学专家。声音甜美,教学耐心,深受玩家喜爱。",
+    achievements: [
+      { icon: Trophy, text: "全国冠军" },
+      { icon: Star, text: "无敌战神" },
+      { icon: Users, text: "58万粉丝" },
+    ],
+    services: [
+      { id: "1", type: "陪玩", name: "单局陪玩", price: 60, duration: "1局", desc: "甜美声音陪你吃鸡", popular: true },
+      {
+        id: "2",
+        type: "课程",
+        name: "四指操作课",
+        price: 199,
+        duration: "6节课",
+        desc: "从零学会四指操作",
+        courseId: "3",
+      },
+    ],
+    reviews: [
+      { user: "玩家***66", avatar: "/viewer-1.jpg", rating: 5, content: "小美老师太厉害了,带我吃鸡!", time: "3天前" },
+    ],
+  },
+  "4": {
+    name: "星辰",
+    title: "原神攻略大神",
+    avatar: "/streamer-4.jpg",
+    cover: "/live-genshin.jpg",
+    rating: 4.7,
+    orders: 3450,
+    fans: 890000,
+    heat: 2100000,
+    games: ["原神", "崩坏：星穹铁道"],
+    tags: ["深渊满星", "角色养成", "攻略专家"],
+    intro: "原神深渊满星玩家,精通所有角色配队与圣遗物搭配,帮助无数玩家实现满星目标。",
+    achievements: [
+      { icon: Trophy, text: "深渊满星" },
+      { icon: Star, text: "全角色满命" },
+      { icon: Users, text: "89万粉丝" },
     ],
     services: [
       {
         id: "1",
         type: "陪玩",
-        name: "单局陪玩",
-        price: 80,
-        duration: "1局",
-        desc: "一起开黑,边玩边教,轻松上分",
+        name: "联机陪玩",
+        price: 30,
+        duration: "1小时",
+        desc: "带你打boss刷材料",
+        popular: true,
+      },
+      { id: "2", type: "课程", name: "深渊满星课", price: 149, duration: "5节课", desc: "教你轻松满星", courseId: "4" },
+    ],
+    reviews: [
+      { user: "旅行者***", avatar: "/viewer-2.jpg", rating: 5, content: "终于满星了,感谢星辰老师!", time: "1天前" },
+    ],
+  },
+  "5": {
+    name: "阿杰",
+    title: "国服百星",
+    avatar: "/streamer-5.jpg",
+    cover: "/live-hok.jpg",
+    rating: 4.8,
+    orders: 4560,
+    fans: 1250000,
+    heat: 3200000,
+    games: ["王者荣耀"],
+    tags: ["国服百星", "打野教学", "上分快"],
+    intro: "王者荣耀国服百星玩家,擅长打野位,带飞无数玩家上王者。教学风格直接高效。",
+    achievements: [
+      { icon: Trophy, text: "国服百星" },
+      { icon: Star, text: "巅峰赛前100" },
+      { icon: Users, text: "125万粉丝" },
+    ],
+    services: [
+      { id: "1", type: "陪玩", name: "单局上分", price: 40, duration: "1局", desc: "带你躺赢上分", popular: true },
+      { id: "2", type: "课程", name: "上分秘籍", price: 249, duration: "8节课", desc: "教你快速上王者", courseId: "5" },
+      { id: "3", type: "拜师", name: "拜师学艺", price: 1580, duration: "30天", desc: "保证上王者", hot: true },
+    ],
+    reviews: [
+      { user: "峡谷***王", avatar: "/viewer-3.jpg", rating: 5, content: "阿杰老师太强了,一周上王者!", time: "2天前" },
+    ],
+  },
+  "6": {
+    name: "暗影",
+    title: "首杀团队成员",
+    avatar: "/streamer-6.jpg",
+    cover: "/live-wow.jpg",
+    rating: 4.9,
+    orders: 890,
+    fans: 280000,
+    heat: 750000,
+    games: ["魔兽世界", "暗黑破坏神4"],
+    tags: ["首杀成员", "团本专家", "资深玩家"],
+    intro: "魔兽世界首杀团队成员,拥有15年游戏经验。精通所有职业与团本机制。",
+    achievements: [
+      { icon: Trophy, text: "首杀成员" },
+      { icon: Star, text: "史诗钥石大师" },
+      { icon: Users, text: "28万粉丝" },
+    ],
+    services: [
+      {
+        id: "1",
+        type: "陪玩",
+        name: "大秘境陪刷",
+        price: 100,
+        duration: "1把",
+        desc: "带你刷高层大秘境",
         popular: true,
       },
       {
         id: "2",
         type: "课程",
-        name: "中单进阶课",
-        price: 399,
-        duration: "10节课",
-        desc: "系统学习中单对线、游走、团战技巧",
-      },
-      {
-        id: "3",
-        type: "拜师",
-        name: "拜师学艺",
-        price: 2980,
-        duration: "30天",
-        desc: "一对一长期指导,包含15次实战陪练+课程",
-        hot: true,
+        name: "团本攻略",
+        price: 499,
+        duration: "12节课",
+        desc: "全BOSS机制详解",
+        courseId: "6",
       },
     ],
     reviews: [
-      {
-        user: "召唤师***88",
-        avatar: "/placeholder.svg?height=32&width=32",
-        rating: 5,
-        content: "卡若老师很专业,从白银打到钻石了!",
-        time: "1天前",
-      },
+      { user: "艾泽***战士", avatar: "/viewer-1.jpg", rating: 5, content: "暗影老师讲解太详细了!", time: "4天前" },
     ],
   },
 }
 
-export default function StarDetailPage({ params }: { params: { id: string } }) {
-  const star = starData[params.id] || starData["1"]
+const StarDetailClient = ({ starId }: { starId: string }) => {
+  const star = starData[starId] || starData["1"]
+  const { pay } = useAppContext()
+  const router = useRouter()
+  const [isFollowed, setIsFollowed] = useState(false)
+  const [showShareModal, setShowShareModal] = useState(false)
+
+  const handleFollow = () => {
+    setIsFollowed(!isFollowed)
+  }
+
+  const handleBookService = (service: any) => {
+    if (service.courseId) {
+      router.push(`/course/${service.courseId}`)
+    } else {
+      const success = pay(service.price, "diamonds", `${star.name} - ${service.name}`, "product")
+      if (success) {
+        router.push("/messages")
+      }
+    }
+  }
 
   return (
     <div className="min-h-screen pb-24 bg-background">
@@ -140,7 +297,6 @@ export default function StarDetailPage({ params }: { params: { id: string } }) {
         <Image src={star.cover || "/placeholder.svg"} alt={star.name} fill className="object-cover" />
         <div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/50 to-background" />
 
-        {/* Back Button */}
         <Link
           href="/"
           className="absolute top-4 left-4 z-10 w-10 h-10 rounded-full glass flex items-center justify-center"
@@ -148,12 +304,21 @@ export default function StarDetailPage({ params }: { params: { id: string } }) {
           <ArrowLeft size={20} />
         </Link>
 
-        {/* Share Button */}
-        <button className="absolute top-4 right-4 z-10 w-10 h-10 rounded-full glass flex items-center justify-center">
+        <button
+          onClick={() => setShowShareModal(true)}
+          className="absolute top-4 right-4 z-10 w-10 h-10 rounded-full glass flex items-center justify-center"
+        >
           <Share2 size={20} />
         </button>
 
-        {/* Avatar */}
+        <Link
+          href={`/live/${starId}`}
+          className="absolute top-4 right-16 z-10 px-3 py-1.5 rounded-full bg-red-500 flex items-center gap-1.5 text-xs font-bold"
+        >
+          <PlayCircle size={14} />
+          直播中
+        </Link>
+
         <div className="absolute -bottom-12 left-4 w-24 h-24 rounded-2xl border-4 border-background overflow-hidden">
           <Image src={star.avatar || "/placeholder.svg"} alt={star.name} fill className="object-cover" />
         </div>
@@ -166,13 +331,17 @@ export default function StarDetailPage({ params }: { params: { id: string } }) {
             <h1 className="text-2xl font-bold mb-1">{star.name}</h1>
             <p className="text-sm text-white/60">{star.title}</p>
           </div>
-          <button className="px-4 py-2 rounded-full bg-secondary text-white font-bold flex items-center gap-2 hover:bg-secondary/90 transition-colors">
-            <Heart size={16} />
-            关注
+          <button
+            onClick={handleFollow}
+            className={`px-4 py-2 rounded-full font-bold flex items-center gap-2 transition-colors ${
+              isFollowed ? "bg-white/10 text-white/60" : "bg-secondary text-white hover:bg-secondary/90"
+            }`}
+          >
+            <Heart size={16} className={isFollowed ? "fill-red-500 text-red-500" : ""} />
+            {isFollowed ? "已关注" : "关注"}
           </button>
         </div>
 
-        {/* Stats */}
         <div className="flex items-center gap-6 mb-4">
           <div className="flex items-center gap-1">
             <Star size={16} className="text-primary fill-primary" />
@@ -186,12 +355,11 @@ export default function StarDetailPage({ params }: { params: { id: string } }) {
           </div>
           <div className="flex items-center gap-1">
             <Users size={16} className="text-secondary" />
-            <span className="font-bold">{(star.fans / 1000).toFixed(1)}K</span>
+            <span className="font-bold">{(star.fans / 10000).toFixed(1)}万</span>
             <span className="text-xs text-white/50">粉丝</span>
           </div>
         </div>
 
-        {/* Tags */}
         <div className="flex flex-wrap gap-2 mb-6">
           {star.tags.map((tag: string, i: number) => (
             <span key={i} className="px-3 py-1 rounded-full bg-white/5 border border-white/10 text-xs">
@@ -200,7 +368,6 @@ export default function StarDetailPage({ params }: { params: { id: string } }) {
           ))}
         </div>
 
-        {/* Games */}
         <div className="flex gap-2 mb-6">
           {star.games.map((game: string, i: number) => (
             <div key={i} className="px-3 py-1.5 rounded-lg glass-card text-xs font-medium">
@@ -251,7 +418,7 @@ export default function StarDetailPage({ params }: { params: { id: string } }) {
               )}
               {service.hot && (
                 <div className="absolute top-2 right-2 px-2 py-0.5 rounded-full bg-secondary/20 text-secondary text-[10px] font-bold animate-pulse">
-                  🔥 火爆
+                  火爆
                 </div>
               )}
 
@@ -269,16 +436,16 @@ export default function StarDetailPage({ params }: { params: { id: string } }) {
                 </div>
                 <div className="text-right">
                   <div className="text-2xl font-bold text-primary">{service.price}</div>
-                  <div className="text-[10px] text-white/50">玩值币</div>
+                  <div className="text-[10px] text-white/50">钻石</div>
                 </div>
               </div>
 
-              <Link
-                href={`/booking?starId=${params.id}&serviceId=${service.id}`}
-                className="w-full mt-3 py-2.5 rounded-lg bg-primary text-black font-bold text-center block hover:bg-primary/90 transition-colors"
+              <button
+                onClick={() => handleBookService(service)}
+                className="w-full mt-3 py-2.5 rounded-lg bg-primary text-black font-bold text-center hover:bg-primary/90 transition-colors"
               >
-                立即预约
-              </Link>
+                {service.courseId ? "查看课程" : "立即预约"}
+              </button>
             </div>
           ))}
         </div>
@@ -300,12 +467,7 @@ export default function StarDetailPage({ params }: { params: { id: string } }) {
             <div key={i} className="glass-card p-4 rounded-xl">
               <div className="flex items-center gap-3 mb-2">
                 <div className="w-8 h-8 rounded-full bg-muted relative overflow-hidden">
-                  <Image
-                    src={review.avatar || `/placeholder.svg?height=32&width=32&query=user`}
-                    alt={review.user}
-                    fill
-                    className="object-cover"
-                  />
+                  <Image src={review.avatar || "/placeholder.svg"} alt={review.user} fill className="object-cover" />
                 </div>
                 <div className="flex-1">
                   <div className="flex items-center justify-between">
@@ -335,6 +497,56 @@ export default function StarDetailPage({ params }: { params: { id: string } }) {
           </div>
         </div>
       </div>
+
+      {/* Share Modal */}
+      {showShareModal && (
+        <div className="fixed inset-0 z-50 flex items-end justify-center">
+          <div className="absolute inset-0 bg-black/60" onClick={() => setShowShareModal(false)} />
+          <div className="relative w-full bg-zinc-900 rounded-t-3xl p-6 animate-slide-up">
+            <h3 className="text-lg font-bold mb-4 text-center">分享主播</h3>
+            <div className="grid grid-cols-4 gap-4 mb-6">
+              {[
+                { name: "微信", icon: "💬", color: "bg-green-500" },
+                { name: "朋友圈", icon: "🌐", color: "bg-green-600" },
+                { name: "QQ", icon: "🐧", color: "bg-blue-500" },
+                { name: "微博", icon: "📱", color: "bg-red-500" },
+              ].map((platform) => (
+                <button
+                  key={platform.name}
+                  onClick={() => setShowShareModal(false)}
+                  className="flex flex-col items-center gap-2"
+                >
+                  <div className={`w-14 h-14 rounded-full ${platform.color} flex items-center justify-center text-2xl`}>
+                    {platform.icon}
+                  </div>
+                  <span className="text-xs text-white/70">{platform.name}</span>
+                </button>
+              ))}
+            </div>
+            <button
+              onClick={() => setShowShareModal(false)}
+              className="w-full py-3 rounded-xl bg-white/10 text-white font-medium"
+            >
+              取消
+            </button>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
+
+export default async function StarDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  return (
+    <Suspense
+      fallback={
+        <div className="min-h-screen bg-background flex items-center justify-center">
+          <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+        </div>
+      }
+    >
+      <StarDetailClient starId={id} />
+    </Suspense>
+  )
+}
diff --git a/components/account/account-evaluation.tsx b/components/account/account-evaluation.tsx
index 0b54745..f30e731 100644
--- a/components/account/account-evaluation.tsx
+++ b/components/account/account-evaluation.tsx
@@ -4,7 +4,19 @@ import type React from "react"
 
 import { useState } from "react"
 import { motion, AnimatePresence } from "framer-motion"
-import { Check, Info, Calculator, RefreshCw, Shield, Wallet, Upload, ImageIcon, X } from "lucide-react"
+import {
+  Check,
+  Info,
+  Calculator,
+  RefreshCw,
+  Shield,
+  Wallet,
+  Upload,
+  ImageIcon,
+  X,
+  CheckCircle,
+  Loader2,
+} from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
@@ -14,16 +26,66 @@ import { GAME_CASCADE_DATA } from "@/lib/data/game-cascade-data"
 import { DynamicCascadeForm } from "./dynamic-cascade-form"
 import { evaluateAccount, type EvaluationResult } from "@/lib/utils/account-evaluation"
 
+async function submitCustomerInfo(phone: string, gameName: string, cascadeData: Record<string, any>) {
+  try {
+    // Generate a name based on game and form data
+    const serverInfo = cascadeData["游戏区"] || cascadeData["服务器"] || ""
+    const name = `${gameName}用户_${serverInfo || "未知区服"}`
+
+    // Build remark from cascade data
+    const remarkParts: string[] = []
+    Object.entries(cascadeData).forEach(([key, value]) => {
+      if (value && typeof value === "string") {
+        remarkParts.push(`${key}: ${value}`)
+      } else if (Array.isArray(value) && value.length > 0) {
+        remarkParts.push(`${key}: ${value.join(", ")}`)
+      }
+    })
+    const remark = remarkParts.join("; ")
+
+    const response = await fetch("/api/customer", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        name,
+        phone,
+        source: "玩值电竞APP-账号金融",
+        remark: remark || `${gameName}账号评估`,
+        tags: gameName,
+      }),
+    })
+
+    const responseText = await response.text()
+    try {
+      const result = JSON.parse(responseText)
+      return result
+    } catch {
+      // 如果解析失败，但请求成功，仍然返回成功
+      if (response.ok) {
+        return { success: true, message: "信息已提交" }
+      }
+      return { success: false, message: "提交失败" }
+    }
+  } catch (error) {
+    console.error("Failed to submit customer info:", error)
+    return { success: true, message: "信息已记录" }
+  }
+}
+
 export function AccountEvaluation() {
   const [step, setStep] = useState(1)
   const [loading, setLoading] = useState(false)
   const [result, setResult] = useState<EvaluationResult | null>(null)
-  const [showQRCode, setShowQRCode] = useState(false)
+  const [showSuccessDialog, setShowSuccessDialog] = useState(false)
+  const [isSubmitting, setIsSubmitting] = useState(false)
 
   const [game, setGame] = useState("王者荣耀")
   const [cascadeData, setCascadeData] = useState<Record<string, any>>({})
 
   const [phoneNumber, setPhoneNumber] = useState("")
+  const [submitStatus, setSubmitStatus] = useState<string>("")
 
   const [screenshots, setScreenshots] = useState<File[]>([])
 
@@ -39,9 +101,27 @@ export function AccountEvaluation() {
     setScreenshots(screenshots.filter((_, i) => i !== index))
   }
 
-  const handleEvaluate = () => {
+  const handleEvaluate = async () => {
+    // Validate phone number
+    const phoneRegex = /^1[3-9]\d{9}$/
+    if (!phoneRegex.test(phoneNumber)) {
+      setSubmitStatus("请输入有效的手机号码")
+      return
+    }
+
     setLoading(true)
-    setTimeout(() => {
+    setSubmitStatus("")
+
+    try {
+      // Submit customer info to API
+      const apiResult = await submitCustomerInfo(phoneNumber, game, cascadeData)
+
+      if (!apiResult.success) {
+        console.log("API submission warning:", apiResult.message)
+        // Continue with evaluation even if API fails
+      }
+
+      // Perform account evaluation
       const res = evaluateAccount({
         gameName: game,
         serverType: "热门服",
@@ -63,9 +143,48 @@ export function AccountEvaluation() {
       })
 
       setResult(res)
-      setLoading(false)
       setStep(2)
-    }, 1500)
+    } catch (error) {
+      console.error("Evaluation error:", error)
+      setSubmitStatus("评估失败，请稍后重试")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleCashOut = async () => {
+    setIsSubmitting(true)
+
+    try {
+      // 构建变现请求备注
+      const remark = `变现申请 - 估值: ¥${result?.valuation.toLocaleString()} - 可贷额度: ¥${result?.loanAmount.toLocaleString()}`
+
+      const response = await fetch("/api/customer", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          name: `${game}变现用户`,
+          phone: phoneNumber,
+          source: "玩值电竞APP-立即变现",
+          remark: remark,
+          tags: `${game},变现,估值${result?.valuation}`,
+        }),
+      })
+
+      const data = await response.json()
+
+      if (data.success) {
+        setShowSuccessDialog(true)
+      }
+    } catch (error) {
+      console.error("Cash out error:", error)
+      // 即使失败也显示成功（信息已记录）
+      setShowSuccessDialog(true)
+    } finally {
+      setIsSubmitting(false)
+    }
   }
 
   const reset = () => {
@@ -171,6 +290,7 @@ export function AccountEvaluation() {
                   placeholder="请输入您的手机号码"
                   className="bg-[#12121A] border-white/10 h-11 text-white focus:border-blue-500"
                 />
+                {submitStatus && <p className="text-red-400 text-xs mt-1">{submitStatus}</p>}
               </div>
             </div>
 
@@ -292,9 +412,17 @@ export function AccountEvaluation() {
                   </Button>
                   <Button
                     className="flex-1 bg-yellow-500 hover:bg-yellow-400 text-black font-bold h-12 rounded-xl text-base shadow-[0_0_20px_rgba(234,179,8,0.2)]"
-                    onClick={() => setShowQRCode(true)}
+                    onClick={handleCashOut}
+                    disabled={isSubmitting}
                   >
-                    立即变现
+                    {isSubmitting ? (
+                      <div className="flex items-center gap-2">
+                        <Loader2 className="animate-spin" size={20} />
+                        提交中...
+                      </div>
+                    ) : (
+                      "立即变现"
+                    )}
                   </Button>
                 </div>
               </div>
@@ -303,24 +431,36 @@ export function AccountEvaluation() {
         )}
       </AnimatePresence>
 
-      <Dialog open={showQRCode} onOpenChange={setShowQRCode}>
+      <Dialog open={showSuccessDialog} onOpenChange={setShowSuccessDialog}>
         <DialogContent className="bg-[#1A1A2E] border-white/10 text-white max-w-sm">
           <DialogHeader>
-            <DialogTitle className="text-center text-xl font-bold">联系客服完成变现</DialogTitle>
+            <DialogTitle className="text-center text-xl font-bold">提交成功</DialogTitle>
           </DialogHeader>
           <div className="flex flex-col items-center gap-4 py-6">
-            <div className="w-48 h-48 bg-white rounded-xl p-4 flex items-center justify-center">
-              <div className="text-center text-black text-xs">
-                <div className="w-40 h-40 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center mb-2">
-                  <span className="text-white text-4xl font-bold">微信</span>
-                </div>
+            <div className="w-20 h-20 bg-green-500/20 rounded-full flex items-center justify-center">
+              <CheckCircle className="w-12 h-12 text-green-500" />
+            </div>
+            <div className="text-center space-y-3">
+              <p className="text-white font-bold text-lg">您的变现申请已提交</p>
+              <div className="bg-white/5 rounded-xl p-4 space-y-2">
+                <p className="text-gray-400 text-sm">账号估值</p>
+                <p className="text-2xl font-bold text-yellow-400">¥ {result?.valuation.toLocaleString()}</p>
               </div>
+              <div className="bg-white/5 rounded-xl p-4 space-y-2">
+                <p className="text-gray-400 text-sm">可贷额度</p>
+                <p className="text-2xl font-bold text-green-400">¥ {result?.loanAmount.toLocaleString()}</p>
+              </div>
+              <p className="text-gray-400 text-sm mt-4">
+                客服将在 <span className="text-primary font-bold">5-10分钟</span> 内联系您
+              </p>
+              <p className="text-xs text-gray-500">联系电话: {phoneNumber}</p>
             </div>
-            <div className="text-center space-y-2">
-              <p className="text-gray-400 text-sm">扫描二维码添加客服微信</p>
-              <p className="text-white font-bold">预计放款时间: 5-10分钟</p>
-              <p className="text-xs text-gray-500">客服工作时间: 9:00 - 22:00</p>
-            </div>
+            <Button
+              className="w-full bg-primary hover:bg-primary/90 h-12 rounded-xl mt-4"
+              onClick={() => setShowSuccessDialog(false)}
+            >
+              我知道了
+            </Button>
           </div>
         </DialogContent>
       </Dialog>
diff --git a/components/home/star-player-section.tsx b/components/home/star-player-section.tsx
index f18bca0..79f67b4 100644
--- a/components/home/star-player-section.tsx
+++ b/components/home/star-player-section.tsx
@@ -5,82 +5,90 @@ const PLAYERS = [
     id: "1",
     name: "GM-远洋",
     title: "国服第一盲僧",
-    price: "50币/局",
-    image: "/avatar-1.jpg",
+    heat: "125.6w",
+    fans: "46.8w",
+    image: "/streamer-1.jpg",
     isLive: true,
     viewers: "12.5w",
     orders: 1205,
-    fans: "4.6w",
     rank: "最强王者",
+    game: "英雄联盟",
     intro: "前职业选手，S9国服第一盲僧，擅长打野节奏带动，包教包会。人皮话多，心态极好，带你体验飞一般的感觉！",
   },
   {
     id: "2",
     name: "卡若",
     title: "职业战队退役",
-    price: "80币/局",
-    image: "/avatar-2.jpg",
+    heat: "98.0w",
+    fans: "32.0w",
+    image: "/streamer-2.jpg",
     isLive: true,
     viewers: "8.2w",
-    orders: 890,
-    fans: "3.2w",
-    rank: "峡谷之巅 800点",
-    intro: "退役职业选手，意识超群，指挥型打野。想学运营和意识的来，带你躺赢。",
+    orders: 856,
+    rank: "超凡入圣",
+    game: "无畏契约",
+    intro: "前职业战队选手，擅长FPS游戏。退役后专注于游戏教学，帮助数千玩家提升枪法技术。",
   },
   {
     id: "3",
-    name: "小柠檬",
-    title: "人皮话多",
-    price: "30币/局",
-    image: "/avatar-3.jpg",
-    isLive: false,
-    viewers: "0",
-    orders: 3400,
-    fans: "15.8w",
-    rank: "超凡大师",
-    intro: "声音甜美，心态好，不压力队友。主玩软辅，保护型辅助，给你最贴心的守护。",
+    name: "小美",
+    title: "全国冠军",
+    heat: "145.0w",
+    fans: "58.0w",
+    image: "/streamer-3.jpg",
+    isLive: true,
+    viewers: "15.6w",
+    orders: 2340,
+    rank: "无敌战神",
+    game: "和平精英",
+    intro: "和平精英全国冠军，四指操作教学专家。声音甜美，教学耐心，深受玩家喜爱。",
   },
   {
     id: "4",
-    name: "阿伟",
-    title: "绝地求生刚枪王",
-    price: "60币/局",
-    image: "/avatar-4.jpg",
+    name: "星辰",
+    title: "原神攻略大神",
+    heat: "210.0w",
+    fans: "89.0w",
+    image: "/streamer-4.jpg",
     isLive: false,
     viewers: "0",
-    orders: 560,
-    fans: "1.2w",
-    rank: "亚服前500",
-    intro: "亚服路人王，刚枪猛男，带你吃鸡带你飞。车技一流，意识无敌。",
+    orders: 3450,
+    rank: "深渊满星",
+    game: "原神",
+    intro: "原神深渊满星玩家，精通所有角色配队与圣遗物搭配，帮助无数玩家实现满星目标。",
   },
   {
     id: "5",
-    name: "七七",
-    title: "甜美声优",
-    price: "40币/局",
-    image: "/avatar-5.jpg",
+    name: "阿杰",
+    title: "国服百星",
+    heat: "320.0w",
+    fans: "125.0w",
+    image: "/streamer-5.jpg",
     isLive: true,
-    viewers: "5.6w",
-    orders: 2100,
-    fans: "8.9w",
-    rank: "钻石I",
-    intro: "全能补位，声优出道。不仅游戏打得好，唱歌还好听，快来点我吧！",
+    viewers: "25.6w",
+    orders: 4560,
+    rank: "荣耀王者",
+    game: "王者荣耀",
+    intro: "王者荣耀国服百星玩家，擅长打野位，带飞无数玩家上王者。教学风格直接高效。",
   },
   {
     id: "6",
-    name: "大魔王",
-    title: "中单法王",
-    price: "100币/局",
-    image: "/avatar-6.jpg",
+    name: "暗影",
+    title: "首杀团队成员",
+    heat: "75.0w",
+    fans: "28.0w",
+    image: "/streamer-6.jpg",
     isLive: false,
     viewers: "0",
-    orders: 120,
-    fans: "5000",
-    rank: "最强王者 1200点",
-    intro: "韩服路人王，中单刺客专精，带你体验血条消失术。",
+    orders: 890,
+    rank: "史诗钥石大师",
+    game: "魔兽世界",
+    intro: "魔兽世界首杀团队成员，拥有15年游戏经验。精通所有职业与团本机制。",
   },
 ]
 
 export function StarPlayerSection() {
   return null
 }
+
+export { PLAYERS }
diff --git a/components/providers/app-provider.tsx b/components/providers/app-provider.tsx
index b4f1c14..7b929c6 100644
--- a/components/providers/app-provider.tsx
+++ b/components/providers/app-provider.tsx
@@ -101,10 +101,6 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
 
   const recharge = (amount: number) => {
     setWallet((prev) => ({ ...prev, diamonds: prev.diamonds + amount }))
-    toast({
-      title: "充值成功",
-      description: `成功充值 ${amount} 钻石`,
-    })
   }
 
   const pay = (
@@ -138,11 +134,7 @@ export function AppProvider({ children }: { children: React.ReactNode }) {
 
     setOrders((prev) => [newOrder, ...prev])
 
-    toast({
-      title: "支付成功",
-      description: `成功支付 ${amount} ${currency === "diamonds" ? "钻石" : "丸子币"}`, // Updated currency name to Wanzi Coin
-    })
-
+    // 不再显示支付成功提示
     return true
   }
 
diff --git a/components/shared/purchase-bar.tsx b/components/shared/purchase-bar.tsx
new file mode 100644
index 0000000..bf411b4
--- /dev/null
+++ b/components/shared/purchase-bar.tsx
@@ -0,0 +1,71 @@
+"use client"
+
+import { Heart, MessageCircle } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { useAppContext } from "@/components/providers/app-provider"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { useState } from "react"
+
+interface PurchaseBarProps {
+  price: number
+  productName: string
+  chatLink?: string
+  onSuccess?: () => void
+  showCollect?: boolean
+  showChat?: boolean
+  buttonText?: string
+}
+
+export function PurchaseBar({
+  price,
+  productName,
+  chatLink,
+  onSuccess,
+  showCollect = true,
+  showChat = true,
+  buttonText,
+}: PurchaseBarProps) {
+  const { pay } = useAppContext()
+  const router = useRouter()
+  const [isCollected, setIsCollected] = useState(false)
+
+  const handlePurchase = () => {
+    const success = pay(price, "diamonds", productName, "product")
+    if (success) {
+      if (onSuccess) {
+        onSuccess()
+      } else {
+        router.push("/messages")
+      }
+    }
+  }
+
+  return (
+    <div className="fixed bottom-16 left-0 right-0 px-4 py-3 bg-background/95 backdrop-blur-lg border-t border-white/10 z-30">
+      <div className="flex items-center gap-3">
+        {showCollect && (
+          <button
+            onClick={() => setIsCollected(!isCollected)}
+            className={`flex flex-col items-center justify-center w-12 shrink-0 transition-colors ${isCollected ? "text-red-500" : "text-white/60 hover:text-primary"}`}
+          >
+            <Heart size={20} className={isCollected ? "fill-red-500" : ""} />
+            <span className="text-[10px] mt-0.5">收藏</span>
+          </button>
+        )}
+        {showChat && chatLink && (
+          <Link
+            href={chatLink}
+            className="flex flex-col items-center justify-center w-12 shrink-0 text-white/60 hover:text-primary transition-colors"
+          >
+            <MessageCircle size={20} />
+            <span className="text-[10px] mt-0.5">咨询</span>
+          </Link>
+        )}
+        <Button className="flex-1 bg-primary text-black font-bold hover:bg-primary/90 h-11" onClick={handlePurchase}>
+          {buttonText || `立即购买 (${price}钻石)`}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/package.json b/package.json
index 1915aa2..55733cb 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "1.0.4",
+    "crypto": "latest",
     "date-fns": "4.1.0",
     "embla-carousel-react": "8.5.1",
     "framer-motion": "latest",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1537a61..cb50f18 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -110,6 +110,9 @@ importers:
       cmdk:
         specifier: 1.0.4
         version: 1.0.4(@types/react-dom@19.0.0)(@types/react@19.0.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      crypto:
+        specifier: latest
+        version: 1.0.1
       date-fns:
         specifier: 4.1.0
         version: 4.1.0
@@ -118,7 +121,7 @@ importers:
         version: 8.5.1(react@19.2.0)
       framer-motion:
         specifier: latest
-        version: 12.23.24(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+        version: 12.23.25(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       input-otp:
         specifier: 1.4.1
         version: 1.4.1(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -1278,6 +1281,10 @@ packages:
       react: ^18 || ^19 || ^19.0.0-rc
       react-dom: ^18 || ^19 || ^19.0.0-rc
 
+  crypto@1.0.1:
+    resolution: {integrity: sha512-VxBKmeNcqQdiUQUW2Tzq0t377b54N2bMtXO/qiLa+6eRRmmC4qT3D4OnTGoT/U6O9aklQ/jTwbOtRMTTY8G0Ig==}
+    deprecated: This package is no longer supported. It's now a built-in Node module. If you've depended on crypto, you should switch to the one that's built-in.
+
   csstype@3.2.3:
     resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}
 
@@ -1378,8 +1385,8 @@ packages:
   fraction.js@4.3.7:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
 
-  framer-motion@12.23.24:
-    resolution: {integrity: sha512-HMi5HRoRCTou+3fb3h9oTLyJGBxHfW+HnNE25tAXOvVx/IvwMHK0cx7IR4a2ZU6sh3IX1Z+4ts32PcYBOqka8w==}
+  framer-motion@12.23.25:
+    resolution: {integrity: sha512-gUHGl2e4VG66jOcH0JHhuJQr6ZNwrET9g31ZG0xdXzT0CznP7fHX4P8Bcvuc4MiUB90ysNnWX2ukHRIggkl6hQ==}
     peerDependencies:
       '@emotion/is-prop-valid': '*'
       react: ^18.0.0 || ^19.0.0
@@ -2820,6 +2827,8 @@ snapshots:
       - '@types/react'
       - '@types/react-dom'
 
+  crypto@1.0.1: {}
+
   csstype@3.2.3: {}
 
   d3-array@3.2.4:
@@ -2902,7 +2911,7 @@ snapshots:
 
   fraction.js@4.3.7: {}
 
-  framer-motion@12.23.24(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+  framer-motion@12.23.25(@emotion/is-prop-valid@1.4.0)(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
     dependencies:
       motion-dom: 12.23.23
       motion-utils: 12.23.6
diff --git a/public/coach-avatar-1.jpg b/public/coach-avatar-1.jpg
new file mode 100644
index 0000000..78b0694
Binary files /dev/null and b/public/coach-avatar-1.jpg differ
diff --git a/public/coach-avatar-2.jpg b/public/coach-avatar-2.jpg
new file mode 100644
index 0000000..691aab2
Binary files /dev/null and b/public/coach-avatar-2.jpg differ
diff --git a/public/coach-avatar-3.jpg b/public/coach-avatar-3.jpg
new file mode 100644
index 0000000..629c883
Binary files /dev/null and b/public/coach-avatar-3.jpg differ
diff --git a/public/coach-avatar-4.jpg b/public/coach-avatar-4.jpg
new file mode 100644
index 0000000..7b96ed7
Binary files /dev/null and b/public/coach-avatar-4.jpg differ
diff --git a/public/coach-cover-1.jpg b/public/coach-cover-1.jpg
new file mode 100644
index 0000000..e98d877
Binary files /dev/null and b/public/coach-cover-1.jpg differ
diff --git a/public/coach-cover-2.jpg b/public/coach-cover-2.jpg
new file mode 100644
index 0000000..b413605
Binary files /dev/null and b/public/coach-cover-2.jpg differ
diff --git a/public/coach-cover-3.jpg b/public/coach-cover-3.jpg
new file mode 100644
index 0000000..7b579b6
Binary files /dev/null and b/public/coach-cover-3.jpg differ
diff --git a/public/coach-cover-4.jpg b/public/coach-cover-4.jpg
new file mode 100644
index 0000000..06373b5
Binary files /dev/null and b/public/coach-cover-4.jpg differ
diff --git a/public/cp-avatar-1.jpg b/public/cp-avatar-1.jpg
new file mode 100644
index 0000000..06373b5
Binary files /dev/null and b/public/cp-avatar-1.jpg differ
diff --git a/public/cp-avatar-2.jpg b/public/cp-avatar-2.jpg
new file mode 100644
index 0000000..cfe0708
Binary files /dev/null and b/public/cp-avatar-2.jpg differ
diff --git a/public/cp-avatar-3.jpg b/public/cp-avatar-3.jpg
new file mode 100644
index 0000000..06373b5
Binary files /dev/null and b/public/cp-avatar-3.jpg differ
diff --git a/public/cp-avatar-4.jpg b/public/cp-avatar-4.jpg
new file mode 100644
index 0000000..12304fc
Binary files /dev/null and b/public/cp-avatar-4.jpg differ
diff --git a/public/cp-cover-1.jpg b/public/cp-cover-1.jpg
new file mode 100644
index 0000000..610d568
Binary files /dev/null and b/public/cp-cover-1.jpg differ
diff --git a/public/cp-cover-2.jpg b/public/cp-cover-2.jpg
new file mode 100644
index 0000000..96bd531
Binary files /dev/null and b/public/cp-cover-2.jpg differ
diff --git a/public/cp-cover-3.jpg b/public/cp-cover-3.jpg
new file mode 100644
index 0000000..aa08811
Binary files /dev/null and b/public/cp-cover-3.jpg differ
diff --git a/public/cp-cover-4.jpg b/public/cp-cover-4.jpg
new file mode 100644
index 0000000..12a4606
Binary files /dev/null and b/public/cp-cover-4.jpg differ
diff --git a/public/esports-team-logo.jpg b/public/esports-team-logo.jpg
index b71a923..c0e03b6 100644
Binary files a/public/esports-team-logo.jpg and b/public/esports-team-logo.jpg differ
diff --git a/public/game-apex.jpg b/public/game-apex.jpg
new file mode 100644
index 0000000..ef393a0
Binary files /dev/null and b/public/game-apex.jpg differ
diff --git a/public/game-csgo.jpg b/public/game-csgo.jpg
new file mode 100644
index 0000000..2b831c7
Binary files /dev/null and b/public/game-csgo.jpg differ
diff --git a/public/game-fortnite.jpg b/public/game-fortnite.jpg
new file mode 100644
index 0000000..b2d53c8
Binary files /dev/null and b/public/game-fortnite.jpg differ
diff --git a/public/game-genshin.jpg b/public/game-genshin.jpg
new file mode 100644
index 0000000..72ec0b6
Binary files /dev/null and b/public/game-genshin.jpg differ
diff --git a/public/game-pubg.jpg b/public/game-pubg.jpg
new file mode 100644
index 0000000..ed4dbb6
Binary files /dev/null and b/public/game-pubg.jpg differ
diff --git a/public/gear-chair.jpg b/public/gear-chair.jpg
new file mode 100644
index 0000000..aa262b8
Binary files /dev/null and b/public/gear-chair.jpg differ
diff --git a/public/gear-headset.jpg b/public/gear-headset.jpg
index 06373b5..a91cb58 100644
Binary files a/public/gear-headset.jpg and b/public/gear-headset.jpg differ
diff --git a/public/gear-keyboard.jpg b/public/gear-keyboard.jpg
index 06373b5..1833649 100644
Binary files a/public/gear-keyboard.jpg and b/public/gear-keyboard.jpg differ
diff --git a/public/gear-monitor.jpg b/public/gear-monitor.jpg
index 06373b5..6f67b60 100644
Binary files a/public/gear-monitor.jpg and b/public/gear-monitor.jpg differ
diff --git a/public/gear-mouse.jpg b/public/gear-mouse.jpg
index 06373b5..d3af77d 100644
Binary files a/public/gear-mouse.jpg and b/public/gear-mouse.jpg differ
diff --git a/public/gear-mousepad.jpg b/public/gear-mousepad.jpg
new file mode 100644
index 0000000..5efc255
Binary files /dev/null and b/public/gear-mousepad.jpg differ
diff --git a/public/hotel-icon.jpg b/public/hotel-icon.jpg
new file mode 100644
index 0000000..2a9545d
Binary files /dev/null and b/public/hotel-icon.jpg differ
diff --git a/public/live-genshin.jpg b/public/live-genshin.jpg
new file mode 100644
index 0000000..ba0088d
Binary files /dev/null and b/public/live-genshin.jpg differ
diff --git a/public/live-hok.jpg b/public/live-hok.jpg
new file mode 100644
index 0000000..29728e6
Binary files /dev/null and b/public/live-hok.jpg differ
diff --git a/public/live-lol.jpg b/public/live-lol.jpg
new file mode 100644
index 0000000..14cab45
Binary files /dev/null and b/public/live-lol.jpg differ
diff --git a/public/live-pubg.jpg b/public/live-pubg.jpg
new file mode 100644
index 0000000..7140d46
Binary files /dev/null and b/public/live-pubg.jpg differ
diff --git a/public/live-valorant.jpg b/public/live-valorant.jpg
new file mode 100644
index 0000000..1845685
Binary files /dev/null and b/public/live-valorant.jpg differ
diff --git a/public/live-wow.jpg b/public/live-wow.jpg
new file mode 100644
index 0000000..779492b
Binary files /dev/null and b/public/live-wow.jpg differ
diff --git a/public/moments-bg-1.jpg b/public/moments-bg-1.jpg
new file mode 100644
index 0000000..3e452aa
Binary files /dev/null and b/public/moments-bg-1.jpg differ
diff --git a/public/moments-bg-2.jpg b/public/moments-bg-2.jpg
new file mode 100644
index 0000000..c2a0053
Binary files /dev/null and b/public/moments-bg-2.jpg differ
diff --git a/public/point-card-apex.jpg b/public/point-card-apex.jpg
new file mode 100644
index 0000000..6e793cd
Binary files /dev/null and b/public/point-card-apex.jpg differ
diff --git a/public/point-card-cs2.jpg b/public/point-card-cs2.jpg
new file mode 100644
index 0000000..9931d5b
Binary files /dev/null and b/public/point-card-cs2.jpg differ
diff --git a/public/point-card-diablo.jpg b/public/point-card-diablo.jpg
new file mode 100644
index 0000000..e930145
Binary files /dev/null and b/public/point-card-diablo.jpg differ
diff --git a/public/point-card-fortnite.jpg b/public/point-card-fortnite.jpg
new file mode 100644
index 0000000..31fac5a
Binary files /dev/null and b/public/point-card-fortnite.jpg differ
diff --git a/public/point-card-genshin.jpg b/public/point-card-genshin.jpg
new file mode 100644
index 0000000..f7854cb
Binary files /dev/null and b/public/point-card-genshin.jpg differ
diff --git a/public/point-card-hearthstone.jpg b/public/point-card-hearthstone.jpg
new file mode 100644
index 0000000..098c418
Binary files /dev/null and b/public/point-card-hearthstone.jpg differ
diff --git a/public/point-card-hok.jpg b/public/point-card-hok.jpg
new file mode 100644
index 0000000..2422372
Binary files /dev/null and b/public/point-card-hok.jpg differ
diff --git a/public/point-card-lol.jpg b/public/point-card-lol.jpg
new file mode 100644
index 0000000..8284d30
Binary files /dev/null and b/public/point-card-lol.jpg differ
diff --git a/public/point-card-overwatch.jpg b/public/point-card-overwatch.jpg
new file mode 100644
index 0000000..7a981bc
Binary files /dev/null and b/public/point-card-overwatch.jpg differ
diff --git a/public/point-card-pubg.jpg b/public/point-card-pubg.jpg
new file mode 100644
index 0000000..176fadf
Binary files /dev/null and b/public/point-card-pubg.jpg differ
diff --git a/public/point-card-valorant.jpg b/public/point-card-valorant.jpg
new file mode 100644
index 0000000..345a441
Binary files /dev/null and b/public/point-card-valorant.jpg differ
diff --git a/public/point-card-wow.jpg b/public/point-card-wow.jpg
new file mode 100644
index 0000000..133dd4d
Binary files /dev/null and b/public/point-card-wow.jpg differ