import {Link} from 'react-router-dom'
import Navbar from '../components/Navbar'
import {ArrowRight, MessageSquare, Sparkles, Star, Users, Zap} from 'lucide-react'

const featuredCharacters = [
  { id: 1, name: '艾莉娅', role: '冒险向导', avatar: '🧝‍♀️', chats: 12500, rating: 4.9 },
  { id: 2, name: '智者墨菲', role: '知识导师', avatar: '🧙‍♂️', chats: 8900, rating: 4.8 },
  { id: 3, name: '赛博朋克', role: '未来战士', avatar: '🤖', chats: 15200, rating: 4.9 },
  { id: 4, name: '月影', role: '神秘刺客', avatar: '🥷', chats: 10300, rating: 4.7 },
]

export default function HomePage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-[#0A0A0F] via-[#1A0B2E] to-[#0A0A0F]">
      <Navbar />

      <section className="pt-32 pb-20 px-4">
        <div className="max-w-6xl mx-auto text-center">
          <div className="inline-flex items-center gap-2 glass rounded-full px-4 py-2 mb-6">
            <Sparkles className="w-4 h-4 text-primary" />
            <span className="text-sm">AI 驱动的角色对话平台</span>
          </div>

          <h1 className="text-5xl md:text-7xl font-bold mb-6 leading-tight">
            与 AI 角色
            <br />
            <span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
              开启无限对话
            </span>
          </h1>

          <p className="text-lg text-white/60 mb-8 max-w-2xl mx-auto">
            探索数千个精心设计的 AI 角色，从冒险伙伴到知识导师，开启你的专属对话体验
          </p>

          <div className="flex items-center justify-center gap-4">
            <Link
              to="/market"
              className="px-8 py-4 bg-gradient-to-r from-primary to-secondary rounded-xl font-medium hover:opacity-90 transition-opacity cursor-pointer inline-flex items-center gap-2"
            >
              探索角色广场
              <ArrowRight className="w-5 h-5" />
            </Link>
            <button className="px-8 py-4 glass-hover rounded-xl font-medium cursor-pointer">
              了解更多
            </button>
          </div>
        </div>
      </section>

      <section className="py-20 px-4">
        <div className="max-w-6xl mx-auto">
          <div className="grid md:grid-cols-3 gap-6">
            <div className="glass-hover rounded-2xl p-8 text-center">
              <div className="w-16 h-16 bg-primary/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <Users className="w-8 h-8 text-primary" />
              </div>
              <h3 className="text-xl font-semibold mb-2">丰富角色库</h3>
              <p className="text-white/60">数千个精心设计的 AI 角色，涵盖各种类型和风格</p>
            </div>

            <div className="glass-hover rounded-2xl p-8 text-center">
              <div className="w-16 h-16 bg-secondary/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <MessageSquare className="w-8 h-8 text-secondary" />
              </div>
              <h3 className="text-xl font-semibold mb-2">智能对话</h3>
              <p className="text-white/60">基于先进 AI 技术，提供自然流畅的对话体验</p>
            </div>

            <div className="glass-hover rounded-2xl p-8 text-center">
              <div className="w-16 h-16 bg-cta/20 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <Zap className="w-8 h-8 text-cta" />
              </div>
              <h3 className="text-xl font-semibold mb-2">即时响应</h3>
              <p className="text-white/60">快速响应，无需等待，随时随地开启对话</p>
            </div>
          </div>
        </div>
      </section>

      <section className="py-20 px-4">
        <div className="max-w-6xl mx-auto">
          <div className="flex items-center justify-between mb-8">
            <div>
              <h2 className="text-3xl font-bold mb-2">热门角色</h2>
              <p className="text-white/60">最受欢迎的 AI 角色</p>
            </div>
            <Link
              to="/market"
              className="text-primary hover:text-secondary transition-colors cursor-pointer inline-flex items-center gap-2"
            >
              查看全部
              <ArrowRight className="w-4 h-4" />
            </Link>
          </div>

          <div className="grid md:grid-cols-4 gap-6">
            {featuredCharacters.map((char) => (
              <Link
                key={char.id}
                to={`/character/${char.id}`}
                className="glass-hover rounded-2xl p-6 text-center cursor-pointer group"
              >
                <div className="text-6xl mb-4">{char.avatar}</div>
                <h3 className="text-lg font-semibold mb-1 group-hover:text-primary transition-colors">
                  {char.name}
                </h3>
                <p className="text-sm text-white/60 mb-4">{char.role}</p>
                <div className="flex items-center justify-center gap-4 text-xs text-white/40">
                  <div className="flex items-center gap-1">
                    <MessageSquare className="w-3 h-3" />
                    <span>{(char.chats / 1000).toFixed(1)}k</span>
                  </div>
                  <div className="flex items-center gap-1">
                    <Star className="w-3 h-3 fill-yellow-400 text-yellow-400" />
                    <span>{char.rating}</span>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <footer className="py-12 px-4 border-t border-white/10">
        <div className="max-w-6xl mx-auto text-center text-white/40 text-sm">
          <p>© 2024 云酒馆. All rights reserved.</p>
        </div>
      </footer>
    </div>
  )
}
