src/components/Features.tsx

import React from 'react';
import { Code, Server, Database, Wifi, Shield, Zap } from 'lucide-react';

export function Features() {
  const integrations = [
    { name: 'HL7 FHIR', icon: Database, status: 'active' },
    { name: 'REST API', icon: Server, status: 'active' },
    { name: 'SFTP', icon: Wifi, status: 'active' },
    { name: 'SOAP', icon: Code, status: 'active' },
    { name: 'OAuth 2.0', icon: Shield, status: 'active' },
    { name: 'WebSockets', icon: Zap, status: 'active' },
  ];

  const features = [
    {
      title: 'Predictive AI Intelligence',
      description: 'Advanced machine learning algorithms predict staffing needs, identify potential issues, and optimize resource allocation in real-time.',
      image: 'https://images.pexels.com/photos/8386440/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      title: 'Global Disease Monitoring',
      description: 'Comprehensive worldwide disease tracking with outbreak prediction capabilities and early warning systems for healthcare preparedness.',
      image: 'https://images.pexels.com/photos/3985167/pexels-photo-3985167.jpeg?auto=compress&cs=tinysrgb&w=600'
    },
    {
      title: 'Compliance & Quality Assurance',
      description: 'Automated compliance monitoring ensures adherence to healthcare regulations with real-time alerts and comprehensive audit trails.',
      image: 'https://images.pexels.com/photos/4386467/pexels-photo-4386467.jpeg?auto=compress&cs=tinysrgb&w=600'
    }
  ];

  return (
    <section id="integrations" 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">
        {/* Integrations Section */}
        <div className="text-center mb-16">
          <h2 className="text-4xl lg:text-5xl font-black text-slate-900 dark:text-white mb-6">
            Enterprise
            <span className="block text-3xl lg:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-teal-500">
              Integrations
            </span>
          </h2>
          <p className="text-xl text-slate-600 dark:text-slate-300 max-w-3xl mx-auto mb-12">
            Seamlessly connect with your existing healthcare infrastructure through our comprehensive integration suite.
          </p>

          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6 mb-16">
            {integrations.map((integration, index) => (
              <div
                key={index}
                className="group bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm rounded-2xl p-6 border border-slate-200/50 dark:border-slate-700/50 hover:border-green-300 dark:hover:border-green-600 transition-all duration-300 hover:shadow-xl hover:shadow-green-500/10"
              >
                <div className="w-12 h-12 rounded-xl bg-gradient-to-r from-green-500 to-emerald-600 flex items-center justify-center mb-4 mx-auto group-hover:scale-110 transition-transform duration-300">
                  <integration.icon className="w-6 h-6 text-white" />
                </div>
                <h3 className="font-bold text-slate-900 dark:text-white text-sm mb-2">{integration.name}</h3>
                <div className="flex items-center justify-center">
                  <div className="w-2 h-2 bg-green-500 rounded-full mr-2 animate-pulse"></div>
                  <span className="text-xs text-green-600 dark:text-green-400 font-medium">Connected</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Features Showcase */}
        <div className="space-y-24">
          {features.map((feature, index) => (
            <div
              key={index}
              className={`flex flex-col ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'} items-center gap-12 lg:gap-16`}
            >
              <div className="flex-1 space-y-6">
                <h3 className="text-3xl lg:text-4xl font-black text-slate-900 dark:text-white">
                  {feature.title}
                </h3>
                <p className="text-lg text-slate-600 dark:text-slate-300 leading-relaxed">
                  {feature.description}
                </p>
                <div className="flex space-x-4">
                  <button className="px-6 py-3 bg-gradient-to-r from-blue-600 to-teal-500 text-white font-bold rounded-xl hover:from-blue-700 hover:to-teal-600 transition-all duration-300 transform hover:scale-105">
                    Learn More
                  </button>
                  <button className="px-6 py-3 border-2 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300 font-bold rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-all duration-300">
                    View Demo
                  </button>
                </div>
              </div>
              <div className="flex-1">
                <div className="relative group">
                  <div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-teal-500/20 rounded-3xl blur-2xl group-hover:blur-3xl transition-all duration-500"></div>
                  <img
                    src={feature.image}
                    alt={feature.title}
                    className="relative w-full h-80 object-cover rounded-3xl shadow-2xl border border-slate-200/50 dark:border-slate-700/50 group-hover:scale-105 transition-transform duration-500"
                  />
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* ROI Section */}
        <div className="mt-24 text-center">
          <div className="bg-gradient-to-r from-blue-600 to-teal-500 rounded-3xl p-12 text-white">
            <h3 className="text-3xl lg:text-4xl font-black mb-6">
              Measurable ROI in Healthcare Operations
            </h3>
            <p className="text-xl mb-8 opacity-90 max-w-3xl mx-auto">
              Join leading healthcare organizations achieving significant cost savings and improved patient outcomes through AI-driven automation.
            </p>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
              <div className="text-center">
                <div className="text-4xl font-black mb-2">45%</div>
                <div className="text-lg opacity-90">Efficiency Increase</div>
              </div>
              <div className="text-center">
                <div className="text-4xl font-black mb-2">$2.3M</div>
                <div className="text-lg opacity-90">Annual Savings</div>
              </div>
              <div className="text-center">
                <div className="text-4xl font-black mb-2">99.8%</div>
                <div className="text-lg opacity-90">Compliance Rate</div>
              </div>
            </div>
            <button className="px-8 py-4 bg-white text-blue-600 font-bold rounded-2xl hover:bg-slate-50 transition-all duration-300 transform hover:scale-105 shadow-lg">
              Schedule a Consultation
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}