import React from 'react';
import { Book, Sparkles, Shield } from 'lucide-react';

interface Props {
  onLoginClick: () => void;
  onRegisterClick: () => void;
}

export function WelcomePage({ onLoginClick, onRegisterClick }: Props) {
  return (
    <div className="min-h-screen bg-gradient-to-b from-purple-100 to-blue-100">
      <div className="max-w-6xl mx-auto px-6 py-16">
        <div className="text-center mb-16">
          <h1 className="text-5xl font-bold text-purple-600 mb-4">
            Histórias Mágicas
          </h1>
          <p className="text-xl text-gray-600">
            Embarque em uma jornada de aprendizado e diversão!
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
          <div className="bg-white p-6 rounded-xl shadow-lg text-center">
            <Book className="w-12 h-12 text-purple-600 mx-auto mb-4" />
            <h2 className="text-xl font-semibold mb-2">Histórias Educativas</h2>
            <p className="text-gray-600">
              Aprenda sobre cultura, meio ambiente e muito mais
            </p>
          </div>

          <div className="bg-white p-6 rounded-xl shadow-lg text-center">
            <Sparkles className="w-12 h-12 text-purple-600 mx-auto mb-4" />
            <h2 className="text-xl font-semibold mb-2">Personalize sua Jornada</h2>
            <p className="text-gray-600">
              Crie seu próprio personagem e escolha suas aventuras
            </p>
          </div>

          <div className="bg-white p-6 rounded-xl shadow-lg text-center">
            <Shield className="w-12 h-12 text-purple-600 mx-auto mb-4" />
            <h2 className="text-xl font-semibold mb-2">Ambiente Seguro</h2>
            <p className="text-gray-600">
              Conteúdo adequado e proteção de dados
            </p>
          </div>
        </div>

        <div className="flex justify-center gap-4">
          <button
            onClick={onLoginClick}
            className="px-8 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
          >
            Entrar
          </button>
          <button
            onClick={onRegisterClick}
            className="px-8 py-3 bg-white text-purple-600 rounded-lg hover:bg-purple-50 transition"
          >
            Criar Conta
          </button>
        </div>
      </div>
    </div>
  );
}