// src/app/page.tsx
import Link from 'next/link';
import Image from 'next/image';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';

export default function HomePage() {
  return (
      <div className="min-h-screen bg-gradient-to-br from-green-50 to-cyan-100 dark:from-gray-900 dark:to-gray-800">
        {/* 导航栏 */}
        <nav className="bg-white dark:bg-gray-800 shadow-md py-4 px-6 flex justify-between items-center">
          <div className="flex items-center space-x-2">
            <div className="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10" />
            <span className="text-xl font-bold text-green-600 dark:text-green-400">HITWH皮肤库</span>
          </div>
          <div className="flex space-x-4">
            <Button asChild variant="outline" className="border-green-600 text-green-600 hover:bg-green-50">
              <Link href="/login">登录</Link>
            </Button>
            <Button asChild className="bg-green-600 hover:bg-green-700">
              <Link href="/register">注册账号</Link>
            </Button>
          </div>
        </nav>

        {/* 区域 */}
        <section className="container mx-auto px-4 py-16 flex flex-col md:flex-row items-center justify-between">
          <div className="md:w-1/2 mb-12 md:mb-0">
            <h1 className="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-6">
              创建、分享和管理你的
              <span className="text-green-600 dark:text-green-400"> Minecraft 皮肤</span>
            </h1>
            <p className="text-lg text-gray-600 dark:text-gray-300 mb-8 max-w-lg">
              上传你的自定义皮肤，在3D预览中查看效果，并与HITWH的大家分享你的创作。简单、快捷！
            </p>
            <div className="flex flex-col sm:flex-row gap-4">
              <Button asChild size="lg" className="text-lg bg-green-600 hover:bg-green-700 py-6">
                <Link href="/skins/upload">立即上传皮肤</Link>
              </Button>
              <Button asChild variant="outline" size="lg" className="text-lg border-green-600 text-green-600 hover:bg-green-50 py-6">
                <Link href="/dashboard">浏览皮肤库</Link>
              </Button>
            </div>
          </div>
          <div className="md:w-1/2 flex justify-center">
            <div className="relative w-full max-w-md">
              <div className="absolute inset-0 bg-green-500 rounded-2xl transform rotate-6"></div>
              <div className="relative bg-gray-200 border-2 border-dashed rounded-xl w-full h-96 flex items-center justify-center">
                <div className="text-center p-6">
                  <h3 className="text-xl font-bold mb-4">皮肤预览区域</h3>
                  <p className="text-gray-600">这里将展示3D皮肤预览</p>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 功能特性区域 */}
        <section className="py-16 bg-white dark:bg-gray-800">
          <div className="container mx-auto px-4">
            <h2 className="text-3xl font-bold text-center text-gray-800 dark:text-white mb-16">
              为什么选择我们的皮肤库？
            </h2>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              <FeatureCard
                  title="3D实时预览"
                  description="上传后立即在3D模型中查看皮肤效果，支持360度旋转查看"
                  icon="👁️"
              />
              <FeatureCard
                  title="一键应用"
                  description="获取皮肤链接，在Minecraft游戏中一键应用你的新皮肤"
                  icon="⚡"
              />
              <FeatureCard
                  title="社区分享"
                  description="社区认同和安全保障（大概？"
                  icon="🌍"
              />
            </div>
          </div>
        </section>

        {/* 行动号召区域 */}
        <section className="py-20 bg-gradient-to-r from-green-500 to-cyan-500 dark:from-green-700 dark:to-cyan-700">
          <div className="container mx-auto px-4 text-center">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
              加入HITWH300众（误
            </h2>
            <p className="text-xl text-green-100 max-w-2xl mx-auto mb-10">
              免费注册账号，开始创建和分享你的独特皮肤
            </p>
            <div className="flex flex-col sm:flex-row justify-center gap-4">
              <Button asChild size="lg" className="text-lg bg-white text-green-600 hover:bg-green-50 py-6">
                <Link href="/register">立即注册</Link>
              </Button>
              <Button asChild variant="outline" size="lg" className="text-lg border-white text-white hover:bg-green-600 py-6">
                <Link href="/login">登录账号</Link>
              </Button>
            </div>
          </div>
        </section>

        {/* 页脚 */}
        <footer className="bg-gray-800 text-gray-300 py-10">
          <div className="container mx-auto px-4">
            <div className="flex flex-col md:flex-row justify-between items-center">
              <div className="mb-6 md:mb-0">
                <div className="flex items-center space-x-2">
                  <div className="bg-gray-200 border-2 border-dashed rounded-xl w-8 h-8" />
                  <span className="text-xl font-bold text-green-400">HITWH皮肤库</span>
                </div>
                <p className="mt-2 text-sm">创建、分享和管理你的 Minecraft 皮肤</p>
              </div>

              <div className="grid grid-cols-2 md:grid-cols-3 gap-8">
                <div>
                  <h3 className="text-green-400 font-semibold mb-3">导航</h3>
                  <ul className="space-y-2">
                    <li><Link href="/" className="hover:text-white">首页</Link></li>
                    <li><Link href="/dashboard" className="hover:text-white">皮肤库</Link></li>
                    <li><Link href="/skins/upload" className="hover:text-white">上传皮肤</Link></li>
                  </ul>
                </div>

                <div>
                  <h3 className="text-green-400 font-semibold mb-3">账号</h3>
                  <ul className="space-y-2">
                    <li><Link href="/login" className="hover:text-white">登录</Link></li>
                    <li><Link href="/register" className="hover:text-white">注册</Link></li>
                    <li><Link href="/dashboard" className="hover:text-white">我的皮肤</Link></li>
                  </ul>
                </div>

                <div>
                  <h3 className="text-green-400 font-semibold mb-3">支持</h3>
                  <ul className="space-y-2">
                    <li><Link href="/help" className="hover:text-white">帮助中心</Link></li>
                    <li><Link href="/contact" className="hover:text-white">联系我们</Link></li>
                    <li><Link href="/terms" className="hover:text-white">服务条款</Link></li>
                  </ul>
                </div>
              </div>
            </div>

            <div className="border-t border-gray-700 mt-10 pt-6 text-center text-sm">
              <p>© {new Date().getFullYear()} HITWHGAMES. 保留所有权利.</p>
            </div>
          </div>
        </footer>
      </div>
  );
}

// 功能卡片组件
function FeatureCard({ title, description, icon }: { title: string; description: string; icon: string }) {
  return (
      <Card className="h-full transition-transform hover:scale-[1.02] hover:shadow-lg">
        <CardHeader>
          <div className="text-4xl mb-4">{icon}</div>
          <CardTitle className="text-xl">{title}</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-gray-600 dark:text-gray-300">{description}</p>
        </CardContent>
        <CardFooter>
          <Button variant="link" className="text-green-600 dark:text-green-400 p-0">
            了解更多 →
          </Button>
        </CardFooter>
      </Card>
  );
}