```javascript
import React from 'react';

const Features = () => {
  const features = [
    {
      title: "Drug Interaction Checker",
      icon: "activity",
      description: "Real-time analysis of potential drug interactions with comprehensive risk assessment.",
      benefits: [
        "Reduces adverse drug events",
        "Identifies high-risk combinations",
        "Provides severity ratings"
      ]
    },
    {
      title: "Patient Risk Assessment",
      icon: "user",
      description: "Personalized risk evaluation based on patient-specific factors and medical history.",
      benefits: [
        "Considers age, weight, and comorbidities",
        "Adjusts for renal/hepatic function",
        "Flags high-risk patients"
      ]
    },
    {
      title: "Safe Alternative Finder",
      icon: "shield",
      description: "Recommends safer medication alternatives based on evidence-based guidelines.",
      benefits: [
        "Suggests equally effective options",
        "Highlights cost-effective alternatives",
        "Provides transition guidance"
      ]
    },
    {
      title: "Dosing Optimization",
      icon: "bar-chart-2",
      description: "Precision dosing recommendations tailored to individual patient characteristics.",
      benefits: [
        "Adjusts for pharmacokinetic factors",
        "Considers drug-disease interactions",
        "Provides loading/maintenance dose guidance"
      ]
    },
    {
      title: "Allergy Alerts",
      icon: "alert-triangle",
      description: "Comprehensive allergy checking against medication components and cross-reactivity.",
      benefits: [
        "Checks for inactive ingredients",
        "Identifies structural similarities",
        "Provides cross-sensitivity warnings"
      ]
    },
    {
      title: "Clinical Guidelines",
      icon: "book",
      description: "Integrated access to current clinical guidelines and treatment protocols.",
      benefits: [
        "Condition-specific recommendations",
        "Links to primary sources",
        "Keeps guidelines up-to-date"
      ]
    }
  ];

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <div className="text-center mb-12">
        <h1 className="text-3xl font-bold text-gray-800 mb-4">CureLens AI Features</h1>
        <p className="text-xl text-gray-600 max-w-3xl mx-auto">
          Comprehensive clinical decision support tools designed to enhance medication safety and patient outcomes.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {features.map((feature, index) => (
          <div key={index} className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition duration-300">
            <div className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
              <i data-feather={feature.icon} className="text-blue-600"></i>
            </div>
            <h2 className="text-xl font-semibold mb-3">{feature.title}</h2>
            <p className="text-gray-600 mb-4">{feature.description}</p>
            <ul className="space