wzdj/components/layout/mobile-nav.tsx

"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"
import { Home, Radio, ShoppingBag, User, Globe } from "lucide-react"
import { cn } from "@/lib/utils"

export function MobileNav() {
  const pathname = usePathname()

  const navItems = [
    { href: "/", icon: Home, label: "首页" },
    { href: "/moments", icon: Radio, label: "直播" },
    { href: "/planet", icon: Globe, label: "星球", isHighlight: true }, // Mark planet as highlight
    { href: "/mall", icon: ShoppingBag, label: "商城" },
    { href: "/profile", icon: User, label: "我的" },
  ]

  return (
    <div className="fixed bottom-0 left-0 right-0 z-50 flex justify-center">
      <div className="w-full max-w-md glass border-t border-white/10 pb-safe">
        <nav className="flex items-center justify-around h-16 px-2">
          {navItems.map((item) => {
            const isActive = pathname === item.href
            const isPlanet = item.isHighlight

            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  "flex flex-col items-center justify-center w-full h-full space-y-1 transition-all duration-300 relative",
                  isActive ? "text-primary" : "text-muted-foreground hover:text-foreground",
                )}
              >
                <div
                  className={cn(
                    "relative p-1 rounded-xl transition-all",
                    isActive && "bg-primary/10",
                    isPlanet && "scale-125 -translate-y-1", // Planet is 25% larger and lifted
                  )}
                >
                  <item.icon
                    size={isPlanet ? 28 : 22} // Planet icon is larger
                    strokeWidth={isActive ? 2.5 : 2}
                    className={cn(isPlanet && "text-purple-400")} // Planet has unique purple color
                  />
                  {isActive && <span className="absolute inset-0 rounded-xl bg-primary/20 blur-lg animate-pulse" />}
                  {isPlanet && !isActive && <span className="absolute inset-0 rounded-xl bg-purple-400/10 blur-md" />}
                </div>
                <span
                  className={cn(
                    "text-[10px] font-medium",
                    isPlanet && "font-bold text-purple-400", // Planet label is bold and purple
                  )}
                >
                  {item.label}
                </span>
              </Link>
            )
          })}
        </nav>
      </div>
    </div>
  )
}