import Image from "next/image"
import { MapPin, Play, Home, User, Clock, Zap } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"

export default function LimoMobile() {
  return (
    <div className="min-h-screen bg-white">
      {/* Header with subtle gradient */}
      <div className="bg-gradient-to-b from-white to-gray-50/30 px-4 py-4 sticky top-0 z-10 backdrop-blur-md border-b border-gray-100/50">
        <div className="flex items-center justify-between">
          <Image src="/images/limo-logo.png" alt="LIMO来刻" width={120} height={40} className="h-8 w-auto" />
          <Link href="/m-space">
            <Button className="bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] hover:from-[#04B5B5] hover:to-[#039999] text-white p-2.5 rounded-xl shadow-lg shadow-[#05C7C7]/20 transition-all duration-300 hover:scale-105">
              <Zap className="w-4 h-4" />
            </Button>
          </Link>
        </div>

        {/* Navigation Tabs with enhanced styling */}
        <div className="flex mt-6 space-x-8">
          <div className="relative">
            <span className="text-[#05C7C7] font-semibold text-base">发现</span>
            <div className="absolute -bottom-3 left-0 right-0 h-0.5 bg-gradient-to-r from-[#05C7C7] to-[#04B5B5] rounded-full"></div>
          </div>
          <span className="text-gray-400 font-medium text-base">关注</span>
        </div>
      </div>

      {/* Sports Categories with glassmorphism effect */}
      <div className="bg-white/80 backdrop-blur-sm px-4 py-6 mb-6 border-b border-gray-100/50">
        <div className="flex space-x-5 overflow-x-auto scrollbar-hide">
          <div className="flex-shrink-0">
            <div className="bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] text-white px-4 py-3 rounded-2xl text-sm font-semibold flex flex-col items-center justify-center min-w-[70px] shadow-lg shadow-[#05C7C7]/20 transition-all duration-300 hover:scale-105">
              <span>全部</span>
              <span>项目</span>
            </div>
          </div>
          <div className="flex-shrink-0 flex flex-col items-center space-y-2">
            <div className="w-14 h-14 bg-gradient-to-br from-orange-100 to-orange-50 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300 hover:scale-105">
              <span className="text-3xl leading-none">🏀</span>
            </div>
            <span className="text-xs text-gray-600 font-medium">篮球</span>
          </div>
          <div className="flex-shrink-0 flex flex-col items-center space-y-2">
            <div className="w-14 h-14 bg-gradient-to-br from-green-100 to-green-50 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300 hover:scale-105">
              <span className="text-3xl leading-none">⚽</span>
            </div>
            <span className="text-xs text-gray-600 font-medium">足球</span>
          </div>
          <div className="flex-shrink-0 flex flex-col items-center space-y-2">
            <div className="w-14 h-14 bg-gradient-to-br from-yellow-100 to-yellow-50 rounded-2xl flex items-center justify-center shadow-sm transition-all duration-300 hover:scale-105">
              <span className="text-3xl leading-none">🎾</span>
            </div>
            <span className="text-xs text-gray-600 font-medium">网球</span>
          </div>
        </div>
      </div>

      {/* Location with enhanced styling */}
      <div className="px-4 mb-6">
        <div className="flex items-center text-gray-500 text-sm bg-gray-50/50 rounded-xl px-3 py-2">
          <MapPin className="w-4 h-4 mr-2 text-[#05C7C7]" />
          <span className="flex-1">杭州市文一西路未来科技城万利大厦0701</span>
          <span className="text-[#05C7C7] text-xs font-medium">切换</span>
        </div>
      </div>

      {/* Venue Cards with premium styling */}
      <div className="px-4 space-y-6">
        {/* Distance Timeline */}
        <div className="relative">
          <div className="absolute left-6 top-0 bottom-0 w-px bg-gradient-to-b from-[#05C7C7]/30 via-gray-200 to-gray-200"></div>

          {/* First Venue */}
          <div className="relative">
            <div className="absolute left-4 w-4 h-4 bg-gradient-to-br from-yellow-400 to-yellow-500 rounded-full border-2 border-white shadow-lg"></div>
            <div className="ml-12">
              <div className="flex items-center space-x-2 mb-3">
                <div className="text-xs text-gray-400 font-medium">120km</div>
                <div className="w-1 h-1 bg-gray-300 rounded-full"></div>
                <div className="flex items-center text-xs text-gray-400">
                  <Clock className="w-3 h-3 mr-1" />
                  <span>2分钟前更新</span>
                </div>
              </div>
              <div className="bg-white rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 hover:shadow-2xl hover:shadow-gray-200/60 hover:-translate-y-1">
                <div className="relative">
                  <Image
                    src="/placeholder.svg?height=200&width=400"
                    alt="Basketball court"
                    width={400}
                    height={200}
                    className="w-full h-48 object-cover"
                  />
                  <div className="absolute top-3 left-3">
                    <div className="bg-black/20 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs font-medium">
                      🔥 热门
                    </div>
                  </div>
                  <div className="absolute top-3 right-3">
                    <div className="bg-green-500 w-2 h-2 rounded-full animate-pulse"></div>
                  </div>
                </div>
                <div className="p-5">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                      <div className="w-12 h-12 bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl flex items-center justify-center shadow-lg">
                        <span className="text-white text-sm font-bold">R</span>
                      </div>
                      <div>
                        <h3 className="font-bold text-gray-900 text-base">RONIN黄金篮球馆</h3>
                        <p className="text-sm text-gray-500 mt-0.5">杭州拱墅区黑马路124号（肯德基对面）</p>
                      </div>
                    </div>
                    <Link href="/zone">
                      <Button className="bg-gradient-to-r from-orange-400 to-orange-500 hover:from-orange-500 hover:to-orange-600 text-white px-5 py-2.5 rounded-2xl text-sm font-semibold shadow-lg shadow-orange-400/30 transition-all duration-300 hover:scale-105">
                        进入ZONE
                      </Button>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Second Venue */}
          <div className="relative mt-10">
            <div className="absolute left-4 w-4 h-4 bg-gradient-to-br from-gray-300 to-gray-400 rounded-full border-2 border-white shadow-lg"></div>
            <div className="ml-12">
              <div className="flex items-center space-x-2 mb-3">
                <div className="text-xs text-gray-400 font-medium">140km</div>
                <div className="w-1 h-1 bg-gray-300 rounded-full"></div>
                <div className="flex items-center text-xs text-gray-400">
                  <Clock className="w-3 h-3 mr-1" />
                  <span>5分钟前更新</span>
                </div>
              </div>
              <div className="bg-white rounded-3xl overflow-hidden shadow-xl shadow-gray-200/50 border border-gray-100/50 transition-all duration-300 hover:shadow-2xl hover:shadow-gray-200/60 hover:-translate-y-1">
                <div className="relative">
                  <Image
                    src="/placeholder.svg?height=200&width=400"
                    alt="Basketball court with crowd"
                    width={400}
                    height={200}
                    className="w-full h-48 object-cover"
                  />
                  <div className="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center">
                    <div className="w-16 h-16 bg-white/90 backdrop-blur-sm rounded-full flex items-center justify-center shadow-xl transition-all duration-300 hover:scale-110">
                      <Play className="w-8 h-8 text-gray-800 ml-1" fill="currentColor" />
                    </div>
                  </div>
                  <div className="absolute top-3 left-3">
                    <div className="bg-red-500/90 backdrop-blur-sm text-white px-2 py-1 rounded-lg text-xs font-medium flex items-center">
                      <div className="w-1.5 h-1.5 bg-white rounded-full mr-1 animate-pulse"></div>
                      直播中
                    </div>
                  </div>
                </div>
                <div className="p-5">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-3">
                      <div className="w-12 h-12 bg-gradient-to-br from-gray-800 to-gray-900 rounded-xl flex items-center justify-center shadow-lg">
                        <span className="text-white text-sm font-bold">P</span>
                      </div>
                      <div>
                        <h3 className="font-bold text-gray-900 text-base">Panda惊怒熊猫运动俱乐部</h3>
                        <p className="text-sm text-gray-500 mt-0.5">杭州拱墅区黑马路124号（肯德基对面）</p>
                      </div>
                    </div>
                    <Link href="/zone">
                      <Button className="bg-gradient-to-r from-orange-400 to-orange-500 hover:from-orange-500 hover:to-orange-600 text-white px-5 py-2.5 rounded-2xl text-sm font-semibold shadow-lg shadow-orange-400/30 transition-all duration-300 hover:scale-105">
                        进入ZONE
                      </Button>
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Bottom Spacing for Fixed Navigation */}
      <div className="h-24"></div>

      {/* Bottom Navigation with glassmorphism */}
      <div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-xl border-t border-gray-200/50 px-4 py-3">
        <div className="flex justify-around">
          <Link href="/" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
            <div className="w-8 h-8 bg-gradient-to-br from-[#05C7C7] to-[#04B5B5] rounded-xl flex items-center justify-center shadow-lg shadow-[#05C7C7]/20">
              <Home className="w-4 h-4 text-white" />
            </div>
            <span className="text-xs text-[#05C7C7] font-semibold mt-1">首页</span>
          </Link>
          <Link href="/profile" className="flex flex-col items-center py-2 transition-all duration-300 hover:scale-105">
            <div className="w-8 h-8 bg-gray-100 rounded-xl flex items-center justify-center">
              <User className="w-4 h-4 text-gray-400" />
            </div>
            <span className="text-xs text-gray-400 mt-1">我的</span>
          </Link>
        </div>
      </div>

      {/* Bottom Watermark with fade effect */}
      <div className="fixed bottom-20 left-1/2 transform -translate-x-1/2">
        <div className="text-gray-300 text-xs font-light tracking-wider opacity-60">You Only Live Once.</div>
      </div>
    </div>
  )
}