wzdj/app/page.tsx

"use client" // Convert to client component

import { Search, Bell, Flame, Trophy, Users, Star, Sword, Crosshair, Crown } from "lucide-react"
import Image from "next/image"
import Link from "next/link"
import { toast } from "@/hooks/use-toast" // Import toast

export default function HomePage() {
  const handleJoinTeam = () => {
    toast({
      title: "申请已发送",
      description: "车队队长稍后会联系您",
    })
  }

  return (
    <div className="flex flex-col min-h-screen pb-24">
      {/* Header */}
      <header className="sticky top-0 z-40 glass px-4 py-3 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-accent flex items-center justify-center">
            <span className="font-bold text-black text-xs">WZ</span>
          </div>
          <h1 className="font-bold text-lg tracking-tight">玩值电竞</h1>
        </div>
        <div className="flex items-center gap-3">
          <button className="p-2 rounded-full bg-white/5 hover:bg-white/10 transition-colors">
            <Search size={20} className="text-white/80" />
          </button>
          <Link href="/messages" className="p-2 rounded-full bg-white/5 hover:bg-white/10 transition-colors relative">
            <Bell size={20} className="text-white/80" />
            <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-secondary rounded-full border border-background" />
          </Link>
          {/* </CHANGE> */}
        </div>
      </header>

      <div className="p-4 space-y-6">
        {/* Hero Banner */}
        <div className="relative w-full aspect-[16/9] rounded-2xl overflow-hidden group">
          <Image
            src="/esports-tournament-stadium-neon-lights-crowd.jpg"
            alt="Tournament"
            fill
            className="object-cover transition-transform duration-700 group-hover:scale-105"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent" />
          <div className="absolute bottom-0 left-0 p-4 w-full">
            <div className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-secondary/80 backdrop-blur-md text-[10px] font-bold mb-2">
              <span className="w-1.5 h-1.5 rounded-full bg-white animate-pulse" />
              LIVE
            </div>
            <h2 className="text-xl font-bold leading-tight mb-1">2025 玩值杯全明星邀请赛</h2>
            <p className="text-sm text-white/70">顶级战队集结，争夺百万奖金池</p>
          </div>
        </div>

        {/* WoW Section */}
        <section className="relative overflow-hidden rounded-2xl border border-yellow-500/20">
          <div className="absolute inset-0 bg-[url('/wow-bg.jpg')] bg-cover bg-center opacity-40" />
          <div className="absolute inset-0 bg-gradient-to-r from-black/90 to-transparent" />
          <div className="relative p-4">
            <div className="flex items-center justify-between mb-3">
              <h3 className="font-bold text-lg flex items-center gap-2 text-yellow-500">
                <Sword size={18} />
                魔兽世界专区
              </h3>
              <Link href="/wow" className="text-xs text-yellow-500/70 hover:text-yellow-500">
                进入艾泽拉斯 &gt;
              </Link>
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div className="glass-card p-3 rounded-xl border-l-2 border-yellow-500/50">
                <h4 className="font-bold text-sm text-yellow-100">金团招募</h4>
                <p className="text-[10px] text-white/60 mt-1">ICC 25人H全通团，来强力DPS</p>
                <button
                  className="mt-2 w-full py-1 rounded bg-yellow-600/20 text-yellow-500 text-xs font-bold hover:bg-yellow-600/30"
                  onClick={() => toast({ title: "即将开放", description: "金团招募功能正在内测中" })}
                >
                  查看详情
                </button>
              </div>
              <div className="glass-card p-3 rounded-xl border-l-2 border-blue-500/50">
                <h4 className="font-bold text-sm text-blue-100">大秘境车队</h4>
                <p className="text-[10px] text-white/60 mt-1">20层低保来个奶，车头已就位</p>
                <button
                  className="mt-2 w-full py-1 rounded bg-blue-600/20 text-blue-500 text-xs font-bold hover:bg-blue-600/30"
                  onClick={handleJoinTeam}
                >
                  立即上车
                </button>
              </div>
            </div>
          </div>
        </section>

        {/* Game Icons */}
        <div className="grid grid-cols-4 gap-3 px-2">
          {[
            { name: "英雄联盟", icon: "Sword", color: "text-blue-400", bg: "bg-blue-500/10", link: "/games/lol" },
            { name: "无畏契约", icon: "Crosshair", color: "text-red-400", bg: "bg-red-500/10", link: "/games/val" },
            { name: "王者荣耀", icon: "Crown", color: "text-yellow-400", bg: "bg-yellow-500/10", link: "/games/hok" },
            { name: "CS:GO", icon: "Target", color: "text-orange-400", bg: "bg-orange-500/10", link: "/games/csgo" },
          ].map((game, i) => (
            <Link
              href={game.link}
              key={i}
              className="flex flex-col items-center gap-2 group cursor-pointer p-2 rounded-xl hover:bg-white/5 transition-colors"
            >
              <div
                className={`w-12 h-12 rounded-2xl ${game.bg} flex items-center justify-center border border-white/5 group-hover:scale-105 transition-transform relative overflow-hidden`}
              >
                <div className={`absolute inset-0 bg-current opacity-10 ${game.color}`} />
                {/* Using Lucide icons mapped manually for now as dynamic import is complex in this snippet */}
                {game.icon === "Sword" && <Sword className={game.color} size={24} />}
                {game.icon === "Crosshair" && <Crosshair className={game.color} size={24} />}
                {game.icon === "Crown" && <Crown className={game.color} size={24} />}
                {game.icon === "Target" && <Crosshair className={game.color} size={24} />}
              </div>
              <span className="text-xs font-medium text-white/80 group-hover:text-white transition-colors">
                {game.name}
              </span>
            </Link>
          ))}
        </div>

        {/* Industry Recommendations */}
        <section className="space-y-3 mt-2">
          <div className="flex items-center justify-between">
            <h3 className="font-bold text-lg flex items-center gap-2">
              <Flame size={18} className="text-red-500" />
              热门推荐
            </h3>
          </div>

          <div className="grid grid-cols-2 gap-3">
            <Link
              href="/hotel"
              className="glass-card p-0 rounded-xl border-0 relative overflow-hidden group cursor-pointer aspect-[4/3]"
            >
              <Image
                src="/esports-hotel-cyberpunk-room.jpg"
                alt="Hotel"
                fill
                className="object-cover transition-transform duration-700 group-hover:scale-110"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent" />
              <div className="absolute bottom-0 left-0 p-3 w-full">
                <div className="flex items-center justify-between mb-1">
                  <h4 className="font-bold text-sm text-white">电竞酒店</h4>
                  <Trophy size={14} className="text-yellow-500" />
                </div>
                <p className="text-[10px] text-white/70">高端配置 组队开黑</p>
              </div>
            </Link>
            <Link
              href="/hotel"
              className="glass-card p-0 rounded-xl border-0 relative overflow-hidden group cursor-pointer aspect-[4/3]"
            >
              <Image
                src="/internet-cafe-luxury-interior.jpg"
                alt="Cafe"
                fill
                className="object-cover transition-transform duration-700 group-hover:scale-110"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/20 to-transparent" />
              <div className="absolute bottom-0 left-0 p-3 w-full">
                <div className="flex items-center justify-between mb-1">
                  <h4 className="font-bold text-sm text-white">附近网咖</h4>
                  <Users size={14} className="text-blue-500" />
                </div>
                <p className="text-[10px] text-white/70">特权网吧 极速体验</p>
              </div>
            </Link>
          </div>
        </section>

        {/* Club Recommendations */}
        <section>
          <div className="flex items-center justify-between mb-3">
            <h3 className="font-bold text-lg flex items-center gap-2">
              <Trophy size={18} className="text-primary" />
              推荐俱乐部
            </h3>
            <Link href="#" className="text-xs text-white/50 hover:text-primary transition-colors">
              查看全部
            </Link>
          </div>

          <div className="space-y-3">
            {[
              {
                name: "洲越电竞",
                status: "即将开业",
                id: "50310",
                members: 26,
                tags: ["三角洲", "无畏契约"],
                logo: "esports_team_blue_logo",
              },
              {
                name: "机枪电竞",
                status: "火热招募",
                id: "50130",
                members: 60,
                tags: ["LOL", "云顶"],
                logo: "esports_team_red_logo",
              },
              {
                name: "东东电竞",
                status: "官方自营",
                id: "88888",
                members: 1205,
                tags: ["全能", "陪玩"],
                logo: "esports_team_gold_logo",
              },
            ].map((club, i) => (
              <Link
                href={`/club/${club.id}`}
                key={i}
                className="glass-card p-3 rounded-xl flex items-center gap-3 hover:bg-white/5 transition-colors cursor-pointer"
              >
                <div className="w-14 h-14 rounded-lg bg-muted relative overflow-hidden shrink-0 border border-white/10">
                  <Image
                    src={`/.jpg?key=6lzl1&height=100&width=100&query=${club.logo}`}
                    alt={club.name}
                    fill
                    className="object-cover"
                  />
                </div>
                <div className="flex-1 min-w-0">
                  <div className="flex items-center justify-between mb-1">
                    <h4 className="font-bold truncate">{club.name}</h4>
                    <div className="flex -space-x-1">
                      {club.tags.map((tag, j) => (
                        <div
                          key={j}
                          className="w-5 h-5 rounded-full bg-muted border border-card flex items-center justify-center text-[8px] overflow-hidden"
                        >
                          {tag[0]}
                        </div>
                      ))}
                    </div>
                  </div>
                  <p className="text-xs text-white/50 mb-2">{club.status}</p>
                  <div className="flex items-center gap-3 text-[10px] text-white/40">
                    <span className="flex items-center gap-1">
                      <span className="font-mono">ID:</span> {club.id}
                    </span>
                    <span className="flex items-center gap-1">
                      <Users size={10} /> {club.members}
                    </span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </section>

        {/* Star Players / Streamers */}
        <section>
          <div className="flex items-center justify-between mb-3">
            <h3 className="font-bold text-lg flex items-center gap-2">
              <Star size={18} className="text-secondary" />
              明星大神
            </h3>
            <Link href="#" className="text-xs text-white/50 hover:text-secondary transition-colors">
              查看全部
            </Link>
          </div>

          <div className="grid grid-cols-2 gap-3">
            {[
              {
                id: "1",
                name: "GM-远洋",
                title: "国服第一盲僧",
                price: "50币/局",
                image: "professional esports player male headset focused",
              },
              {
                id: "2",
                name: "卡若",
                title: "职业战队退役",
                price: "80币/局",
                image: "esports pro gamer male jersey confident",
              },
              {
                id: "3",
                name: "小柠檬",
                title: "人皮话多",
                price: "30币/局",
                image: "cute female gamer streamer headphones smiling",
              },
              {
                id: "4",
                name: "阿伟",
                title: "绝地求生刚枪王",
                price: "60币/局",
                image: "fps gamer male intense focus tactical",
              },
              {
                id: "5",
                name: "七七",
                title: "甜美声优",
                price: "40币/局",
                image: "anime style female gamer kawaii pink",
              },
              {
                id: "6",
                name: "大魔王",
                title: "中单法王",
                price: "100币/局",
                image: "legendary esports player male champion trophy",
              },
            ].map((star, i) => (
              <Link
                key={i}
                href={`/star/${star.id}`}
                className="glass-card rounded-xl overflow-hidden group cursor-pointer"
              >
                <div className="relative aspect-[3/4]">
                  <Image
                    src={`/.jpg?key=ao2up&height=400&width=300&query=${star.image}`}
                    alt={star.name}
                    fill
                    className="object-cover transition-transform duration-500 group-hover:scale-110"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent" />
                  <div className="absolute bottom-0 left-0 w-full p-3">
                    <h4 className="font-bold text-sm">{star.name}</h4>
                    <p className="text-[10px] text-white/70 mb-1">{star.title}</p>
                    <div className="flex items-center justify-between">
                      <span className="text-xs font-bold text-primary">{star.price}</span>
                      <button className="w-6 h-6 rounded-full bg-secondary flex items-center justify-center">
                        <Flame size={12} className="text-white" />
                      </button>
                    </div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </section>
      </div>
    </div>
  )
}