import React from 'react';
import { Users, Calendar, BarChart3, Shield, Globe, Database } from 'lucide-react';

export function Solutions() {
  const solutions = [
    {
      icon: Shield,
      title: 'Policy Management',
      description: 'Automated compliance tracking with real-time policy updates and violation alerts.',
      gradient: 'from-blue-500 to-indigo-600',
      features: ['Automated Compliance', 'Real-time Updates', 'Violation Alerts']
    },
    {
      icon: Users,
      title: 'Clinical Workforce Management',
      description: 'AI-powered scheduling and staffing optimization for maximum efficiency.',
      gradient: 'from-teal-500 to-cyan-600',
      features: ['Smart Scheduling', 'Skill Matching', 'Workload Balance']
    },
    {
      icon: BarChart3,
      title: 'Advanced Analytics',
      description: 'Predictive insights and performance metrics for data-driven decisions.',
      gradient: 'from-purple-500 to-pink-600',
      features: ['Predictive Analytics', 'KPI Tracking', 'Custom Reports']
    },
    {
      icon: Calendar,
      title: 'Clinical Surveillance',
      description: 'Continuous monitoring and early detection of clinical anomalies.',
      gradient: 'from-green-500 to-emerald-600',
      features: ['Anomaly Detection', 'Early Warnings', 'Quality Assurance']
    },
    {
      icon: Globe,
      title: 'Global AI Disease Intelligence',
      description: 'Worldwide disease tracking and outbreak prediction capabilities.',
      gradient: 'from-orange-500 to-red-600',
      features: ['Disease Tracking', 'Outbreak Prediction', 'Global Intelligence']
    },
    {
      icon: Database,
      title: 'Public Health Platform',
      description: 'Comprehensive population health management and reporting tools.',
      gradient: 'from-slate-500 to-gray-600',
      features: ['Population Health', 'Public Reporting', 'Health Metrics']
    }
  ];

  return (
    <section id="solutions" className="py-24 bg-gradient-to-b from-white to-slate-50 dark:from-slate-800 dark:to-slate-900">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-16">
          <h2 className="text-4xl lg:text-5xl font-black text-slate-900 dark:text-white mb-6">
            Digital Health Transformation
            <span className="block text-3xl lg:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-teal-500">
              Solutions
            </span>
          </h2>
          <p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto">
            Comprehensive suite of AI-powered tools designed to revolutionize healthcare operations 
            and improve patient outcomes across all care settings.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {solutions.map((solution, index) => (
            <div
              key={index}
              className="group bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-3xl p-8 border border-slate-200/50 dark:border-slate-700/50 hover:border-transparent hover:shadow-2xl hover:shadow-blue-500/10 transition-all duration-500 transform hover:scale-[1.02]"
            >
              <div className={`w-16 h-16 rounded-2xl bg-gradient-to-r ${solution.gradient} flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
                <solution.icon className="w-8 h-8 text-white" />
              </div>
              
              <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-4 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-200">
                {solution.title}
              </h3>
              
              <p className="text-slate-600 dark:text-slate-300 mb-6 leading-relaxed">
                {solution.description}
              </p>

              <div className="space-y-2">
                {solution.features.map((feature, featureIndex) => (
                  <div key={featureIndex} className="flex items-center text-sm">
                    <div className="w-2 h-2 rounded-full bg-gradient-to-r from-blue-400 to-teal-400 mr-3"></div>
                    <span className="text-slate-600 dark:text-slate-400">{feature}</span>
                  </div>
                ))}
              </div>

              <div className="mt-6 pt-6 border-t border-slate-200/50 dark:border-slate-700/50">
                <button className="text-blue-600 dark:text-blue-400 font-medium hover:text-blue-700 dark:hover:text-blue-300 transition-colors duration-200 group">
                  Learn More 
                  <span className="ml-1 group-hover:translate-x-1 transition-transform duration-200 inline-block">→</span>
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}