src/pages/HomePage.tsx

import { Users, ArrowRight } from 'lucide-react';

type Props = {
  onNavigateToPatients: () => void;
  onNext: () => void;
};

export function HomePage({ onNavigateToPatients, onNext }: Props) {
  return (
    <div className="flex-1 flex flex-col items-center justify-center py-8 px-4">
      <div className="w-full max-w-2xl mx-auto text-center space-y-8">
        {/* Welcome Section */}
        <div className="space-y-4">
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-extrabold text-[#0A2540]">
            Welcome to Pathora
          </h1>
          <p className="text-base md:text-lg text-gray-600">
            Manalife's AI-Powered Colposcopy Assistant
          </p>
        </div>

        {/* Main CTA */}
        <div className="mt-12">
          <button
            onClick={onNavigateToPatients}
            className="inline-flex items-center gap-3 px-8 md:px-10 py-3 md:py-4 rounded-xl bg-[#05998c] text-white font-bold text-base md:text-lg shadow-lg shadow-teal-500/20 hover:bg-[#047569] hover:shadow-teal-500/30 transition-all"
          >
            <Users className="w-5 h-5 md:w-6 md:h-6" />
            Manage Patients
            <ArrowRight className="w-5 h-5 md:w-6 md:h-6" />
          </button>
        </div>

        {/* Info Section */}
        <div className="mt-16 pt-8 border-t border-gray-200">
          <p className="text-sm md:text-base text-gray-600">
            Select or create a patient to begin a colposcopy examination
          </p>
        </div>
      </div>
    </div>
  );
}

export default HomePage;