import React from 'react';
import { Target, Eye } from 'lucide-react';

const MissionVision = () => {
  return (
    <section className="py-8 sm:py-12 bg-white">
      <div className="max-w-7xl mx-auto px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
          {/* Vision */}
          <div className="rounded-lg p-6 border-l-4" style={{ backgroundColor: '#f4f4f4', borderColor: '#012068' }}>
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 rounded-full flex items-center justify-center mr-3" style={{ backgroundColor: '#012068' }}>
                <Eye className="w-5 h-5 text-white" />
              </div>
              <h2 className="text-xl font-semibold" style={{ color: '#012068' }}>Our Vision</h2>
            </div>
            <p className="leading-relaxed text-base"style={{ color: '#333' }}>
              To stand as a centre of excellence for trauma care in South India—combining world-class clinical service with teaching and outreach grounded in faith.
            </p>
          </div>

          {/* Mission */}
          <div className="rounded-lg p-6 border-l-4" style={{ backgroundColor: '#f4f4f4', borderColor: '#012068' }}>
            <div className="flex items-center mb-4">
              <div className="w-10 h-10 rounded-full flex items-center justify-center mr-3" style={{ backgroundColor: '#012068' }}>
                <Target className="w-5 h-5 text-white" />
              </div>
              <h2 className="text-xl font-semibold" style={{ color: '#012068' }}>Our Mission</h2>
            </div>
            <p className="leading-relaxed text-base"style={{ color: '#333' }}>
              To reduce trauma-related deaths and lifelong disabilities by providing integrated, compassionate, evidence-based care.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
};

export default MissionVision;