import { useState } from 'react';

const WelcomeScreen = ({ onGetStarted }) => {
  return (
    <div className="h-full flex flex-col items-center justify-center p-8 bg-gradient-to-br from-blue-50 to-indigo-100">
      <div className="max-w-lg text-center space-y-6">
        <div className="space-y-4">
          <h1 className="text-4xl font-bold text-gray-900">
            Welcome to SokratesAI
          </h1>
          <p className="text-lg text-gray-600 leading-relaxed">
            Master complex documents without the overwhelm. 
            Your document becomes your tutor, questioning you to deepen understanding.
          </p>
        </div>
        
        <div className="space-y-6">
          <div className="text-sm text-gray-700">
            <h3 className="font-semibold text-gray-900 mb-3">How it works:</h3>
            <div className="space-y-2">
              <div className="flex items-start space-x-3">
                <div className="w-2 h-2 bg-blue-500 rounded-full mt-1.5"></div>
                <span>Document appears highlighted in digestible sections</span>
              </div>
              <div className="flex items-start space-x-3">
                <div className="w-2 h-2 bg-green-500 rounded-full mt-1.5"></div>
                <span>AI tutor questions <em>you</em> about each chunk</span>
              </div>
              <div className="flex items-start space-x-3">
                <div className="w-2 h-2 bg-purple-500 rounded-full mt-1.5"></div>
                <span>Progress only when you truly understand</span>
              </div>
            </div>
          </div>
          
          <div className="text-sm text-gray-600 bg-gray-50 p-4 rounded-lg">
            <div className="grid grid-cols-2 gap-4">
              <div className="flex items-center space-x-2">
                <div className="p-1.5 rounded-full bg-green-100">
                  <svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                </div>
                <span>Master current topic</span>
              </div>
              <div className="flex items-center space-x-2">
                <div className="p-1.5 rounded-full bg-gray-100">
                  <svg className="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
                    <path fillRule="evenodd" d="M12.293 14.707a1 1 0 010-1.414L15.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
                  </svg>
                </div>
                <span>Focus elsewhere</span>
              </div>
              <div className="flex items-center space-x-2">
                <div className="p-1.5 rounded-full bg-gray-100">
                  <svg className="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clipRule="evenodd" />
                  </svg>
                </div>
                <span>Review previous sections</span>
              </div>
              <div className="flex items-center space-x-2">
                <div className="w-6 h-2 bg-blue-200 rounded-full overflow-hidden">
                  <div className="w-2/3 h-full bg-blue-500 rounded-full"></div>
                </div>
                <span>Track your journey</span>
              </div>
            </div>
          </div>
        </div>

        <button
          onClick={onGetStarted}
          className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 px-8 rounded-lg transition-all duration-200 transform hover:scale-105 shadow-lg hover:shadow-xl"
        >
          Let's Start
        </button>
      </div>
    </div>
  );
};

export default WelcomeScreen;