import React from 'react';

const HomePage = ({ onNavigate }) => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4">
      <div className="bg-white dark:bg-gray-800 p-8 sm:p-12 rounded-lg shadow-xl text-center max-w-2xl w-full">
        <h1 className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-4">
          Welcome to Our App! 🚀
        </h1>
        <p className="text-lg text-gray-700 dark:text-gray-300 mb-8">
          Engage in seamless, interactive conversations with our AI-powered voice chat.
          Speak naturally and receive instant, intelligent responses.
        </p>
        <div className="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
          <button
            onClick={() => onNavigate("voice-chat")}
            className="w-full sm:w-auto bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
          >
            Start Voice Chat 🔊
          </button>
          <button
            onClick={() => onNavigate("login")}
            className="w-full sm:w-auto bg-gray-500 hover:bg-gray-600 text-white font-bold py-3 px-6 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50"
          >
            Log In 🔐
          </button>
        </div>
      </div>
    </div>
  );
};

export default HomePage;