import Link from "next/link";

export default function HomePage() {
  return (
    <div className="space-y-6">
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl p-6 text-white">
        <h1 className="text-2xl font-bold">BookShelf</h1>
        <p className="mt-2 text-blue-100 text-sm">应用首页</p>
      </section>

      {/* Quick Actions */}
      <section>
        <h2 className="text-lg font-semibold text-gray-800 mb-3">快捷入口</h2>
        <div className="grid grid-cols-2 gap-3">
          <Link key="0" href="/home" className="bg-white rounded-xl border border-gray-100 p-4 text-center hover:shadow-md transition-shadow">
            <span className="text-2xl block mb-1">📋</span>
            <span className="text-sm text-gray-600">书籍库</span>
          </Link>
          <Link key="1" href="/home" className="bg-white rounded-xl border border-gray-100 p-4 text-center hover:shadow-md transition-shadow">
            <span className="text-2xl block mb-1">📅</span>
            <span className="text-sm text-gray-600">阅读状态</span>
          </Link>
          <Link key="2" href="/home" className="bg-white rounded-xl border border-gray-100 p-4 text-center hover:shadow-md transition-shadow">
            <span className="text-2xl block mb-1">📝</span>
            <span className="text-sm text-gray-600">阅读进度</span>
          </Link>
          <Link key="3" href="/home" className="bg-white rounded-xl border border-gray-100 p-4 text-center hover:shadow-md transition-shadow">
            <span className="text-2xl block mb-1">📸</span>
            <span className="text-sm text-gray-600">笔记和标注</span>
          </Link>
        </div>
      </section>

      {/* Recent Activity / Stats */}
      <section>
        <h2 className="text-lg font-semibold text-gray-800 mb-3">今日概览</h2>
        <div className="bg-white rounded-xl border border-gray-100 p-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-500">欢迎使用 BookShelf</p>
              <p className="text-xs text-gray-400 mt-1">开始探索功能吧</p>
            </div>
            <span className="text-3xl">👋</span>
          </div>
        </div>
      </section>
    </div>
  );
}