export default function Landing({ onLogin }: { onLogin: () => void }) {
  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-600 to-purple-700 text-white">
      <div className="max-w-6xl mx-auto px-6 py-24 text-center">
        <h1 className="text-5xl font-bold mb-6">Cardify</h1>
        <p className="text-xl opacity-90 mb-12">
          Learn smarter with flashcards & spaced repetition
        </p>

        <div className="grid md:grid-cols-3 gap-6 mb-12">
          {["HTTP", "JWT", "REST"].map(t => (
            <div key={t} className="bg-white/10 p-6 rounded-xl backdrop-blur">
              <h3 className="font-semibold text-lg">{t}</h3>
              <p className="opacity-80 mt-2">Sample definition</p>
            </div>
          ))}
        </div>

        <button
          onClick={onLogin}
          className="bg-white text-indigo-700 px-8 py-3 rounded-xl font-semibold hover:scale-105 transition"
        >
          Get Started
        </button>
      </div>
    </div>
  );
}