import Link from "next/link";

export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-gradient-to-b from-white to-gray-50 dark:from-gray-900 dark:to-black">
      <main className="flex flex-col items-center justify-center px-8 py-16 text-center max-w-4xl">
        <div className="mb-8">
          <h1 className="text-6xl font-bold text-gray-900 dark:text-white mb-4">
            MemoHanzi
          </h1>
          <p className="text-4xl text-gray-600 dark:text-gray-400 mb-2">
            记汉字
          </p>
          <p className="text-xl text-gray-500 dark:text-gray-500 italic">
            Remember Hanzi, effortlessly
          </p>
        </div>

        <p className="text-lg text-gray-700 dark:text-gray-300 mb-12 max-w-2xl">
          A self-hosted web application for learning Chinese characters using spaced repetition.
          Master Hanzi with the proven SM-2 algorithm.
        </p>

        <div className="flex flex-col sm:flex-row gap-4 mb-16">
          <Link
            href="/login"
            className="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
          >
            Get Started
          </Link>
          <Link
            href="/register"
            className="px-8 py-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors font-medium"
          >
            Sign Up
          </Link>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full max-w-3xl">
          <div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
            <h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">Spaced Repetition</h3>
            <p className="text-gray-600 dark:text-gray-400 text-sm">
              Learn efficiently with the scientifically-proven SM-2 algorithm
            </p>
          </div>
          <div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
            <h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">HSK Collections</h3>
            <p className="text-gray-600 dark:text-gray-400 text-sm">
              Access complete HSK vocabulary or create your own collections
            </p>
          </div>
          <div className="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
            <h3 className="text-lg font-semibold mb-2 text-gray-900 dark:text-white">Self-Hosted</h3>
            <p className="text-gray-600 dark:text-gray-400 text-sm">
              Your data stays yours. Deploy and control your own instance
            </p>
          </div>
        </div>
      </main>
    </div>
  );
}