import Link from "next/link";
import { db } from "@/lib/db";

export default async function HomePage() {
  const [playerCount, matchCount, teamCount] = await Promise.all([
    db.player.count(),
    db.match.count(),
    db.team.count(),
  ]);

  return (
    <main>
      {/* Hero */}
      <section className="bg-gradient-to-br from-green-900 via-green-700 to-green-500 text-white py-24 px-6 text-center">
        <div className="max-w-3xl mx-auto">
          <div className="text-7xl mb-6">🏆</div>
          <h1 className="text-5xl font-bold mb-4">فانتزی جام جهانی</h1>
          <p className="text-xl text-green-200 mb-10">
            تیم رویاییت رو از بهترین بازیکنان جهان بساز، امتیاز جمع کن و با بقیه رقابت کن
          </p>
          <div className="flex gap-4 justify-center">
            <Link href="/register" className="bg-white text-green-800 font-bold px-8 py-3 rounded-xl hover:bg-green-100 transition text-lg">
              شروع کن
            </Link>
            <Link href="/players" className="border-2 border-white text-white font-bold px-8 py-3 rounded-xl hover:bg-white/10 transition text-lg">
              بازیکنان
            </Link>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="max-w-4xl mx-auto py-16 px-6 grid grid-cols-3 gap-6 text-center">
        <div className="bg-white rounded-2xl shadow p-8">
          <div className="text-4xl font-bold text-green-700">{playerCount}</div>
          <div className="text-gray-500 mt-2">بازیکن</div>
        </div>
        <div className="bg-white rounded-2xl shadow p-8">
          <div className="text-4xl font-bold text-green-700">{matchCount}</div>
          <div className="text-gray-500 mt-2">بازی</div>
        </div>
        <div className="bg-white rounded-2xl shadow p-8">
          <div className="text-4xl font-bold text-green-700">{teamCount}</div>
          <div className="text-gray-500 mt-2">تیم فانتزی</div>
        </div>
      </section>

      {/* How it works */}
      <section className="bg-white py-16 px-6">
        <div className="max-w-4xl mx-auto">
          <h2 className="text-3xl font-bold text-center mb-12">چطور کار می‌کنه؟</h2>
          <div className="grid grid-cols-3 gap-8">
            {[
              { icon: "👤", title: "ثبت‌نام کن", desc: "یه حساب بساز و وارد شو" },
              { icon: "⚽", title: "تیم بساز", desc: "۱۵ بازیکن با بودجه ۱۰۰ میلیون انتخاب کن" },
              { icon: "📊", title: "امتیاز جمع کن", desc: "بر اساس عملکرد واقعی بازیکنا امتیاز بگیر" },
            ].map((item) => (
              <div key={item.title} className="text-center">
                <div className="text-5xl mb-4">{item.icon}</div>
                <h3 className="text-xl font-bold mb-2">{item.title}</h3>
                <p className="text-gray-500">{item.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}