import { Calendar, Users, BookOpen, MapPin, Award, ChevronRight } from "lucide-react";

const ResearchComponent = () => {
  const ongoingProjects = [
    {
      icon: <BookOpen className="w-6 h-6" />,
      title: "Trauma Registry – CMC – Pilot Study (T-ReCS)",
      subtitle: "In association with TCI",
      description: "TRECS is a comprehensive digital platform designed to systematically capture, store, and analyze trauma patient data at our Ranipet Level-1 Trauma Center. The platform enables monitoring of clinical outcomes, identification of gaps in care, and improvement of patient management protocols.",
      features: [
        "Patient Demographics & Injury Details: Captures age, gender, mechanism of injury, and severity scoring",
        "Clinical Data Tracking: Includes vital signs at admission, laboratory investigations, imaging, operative interventions, and ICU care",
        "Outcome Analysis: Tracks mortality, morbidity, complications, length of stay, and functional recovery",
        "Quality Improvement: Supports audits, departmental reviews, and research projects",
        "Research Support: TRECS data contributes to peer-reviewed publications, national trauma policies, and predictive modeling"
      ]
    },
    {
      icon: <Users className="w-6 h-6" />,
      title: "Trauma Quality Improvement Programme (TQIP)",
      subtitle: "In association with ICMR",
      description: "TQIP is an evidence-based framework adopted to ensure excellence in patient care through continuous monitoring and benchmarking. The program integrates data-driven approaches to improve safety, reduce complications, and standardize protocols.",
      features: [
        "Performance Metrics: Tracks key indicators including time to intervention, mortality, ICU stay, and surgical outcomes",
        "Benchmarking: Compares departmental outcomes with national and international trauma centers",
        "Clinical Audits: Regularly conducted to assess adherence to trauma protocols",
        "Education & Training: Provides feedback loops for residents, nursing staff, and trauma coordinators",
        "Quality Initiatives: Implements targeted interventions for overstay management and Golden Hour optimization"
      ]
    }
  ];

  const milestones = [
    {
      year: "2023",
      event: "ACTraM 2023",
      description: "Presented 3 comprehensive audits covering surgical intervention times, ICU stay duration, and patient outcome metrics",
      position: "left"
    },
    {
      year: "2022",
      event: "Q4 Resource Audit",
      description: "Completed comprehensive audit on trauma patient overstay patterns and healthcare resource utilization optimization",
      position: "right"
    }
  ];

  const collaborators = [
    { name: "American College of Surgeons", location: "", short: "ACS", logo: "/logos/acs.jpg" },
    { name: "BMJ Global", location: "", short: "BMJ", logo: "/logos/bmj.png" },
    { name: "Michigan University", location: "", short: "UM", logo: "/logos/michigan.jpg" },
    { name: "Indian Council of Medical Research", location: "", short: "ICMR", logo: "/logos/icmr.png" },
    { name: "ISTAC", location: "", short: "ISTAC", logo: "/logos/istac.png" },
    { name: "All India Institute of Medical Sciences", location: "", short: "AIIMS", logo: "/logos/aiims.png" },
    { name: "JPNATC AIIMS Delhi", location: "New Delhi", short: "JPNATC", logo: "/logos/jpnatc.png" },
    { name: "JIPMER", location: "", short: "JIPMER", logo: "/logos/jipmer.png" },
    { name: "IPGMER", location: "Kolkata", short: "IPGMER", logo: "/logos/ipgmer.png" },
    { name: "TCI", location: "", short: "TCI", logo: "/logos/tci.png" },
    { name: "GVK EMRI", location: "", short: "GVK EMRI", logo: "/logos/gvk-emri.jpg" },
    { name: "TAEI", location: "", short: "TAEI", logo: "/logos/taei.png" }
  ];

  return (
    <div className="bg-white min-h-screen">
      {/* Breadcrumb Section */}
      <section className="py-4" style={{ backgroundColor: '#f4f4f4' }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <nav className="flex items-center space-x-2 text-sm">
            <a 
              href="/" 
              className="hover:opacity-70 transition-opacity duration-200"
              style={{ color: '#012068' }}
            >
              Home
            </a>
            <ChevronRight className="w-4 h-4" style={{ color: '#012068' }} />
            <span className="font-medium" style={{ color: '#e64838' }}>
              Research
            </span>
          </nav>
          
          {/* Page Header */}
          <div className="mt-6">
            <div className="flex items-center mb-4">
              <h1 className="text-3xl font-bold" style={{ color: '#012068' }}>
                Research
              </h1>
            </div>
            <p className="text-base max-w-2xl leading-relaxed">
              Advancing trauma care through innovative research and evidence-based medical practices
            </p>
          </div>
        </div>
      </section>

      {/* Main Content */}
      <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        {/* Ongoing Projects Section */}
        <div className="mb-20">
          <h2 className="text-3xl font-semibold mb-12 text-center" style={{color: '#012068'}}>
            Ongoing Projects
          </h2>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8" >
            {ongoingProjects.map((project, index) => (
              <div 
                key={index} 
                className="rounded-lg p-6 hover:shadow-lg transition-shadow duration-300"
                style={{backgroundColor:'#f4f4f4'}}
              >
                <div className="flex items-start mb-4">
                  <div 
                    className="p-3 rounded-lg mr-4 flex-shrink-0"
                    style={{color: '#012068'}}
                  >
                    {project.icon}
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold mb-1" style={{color: '#012068'}}>
                      {project.title}
                    </h3>
                    <p className="text-sm font-medium mb-3" style={{color: '#e64838'}}>
                      {project.subtitle}
                    </p>
                  </div>
                </div>
                <p className="text-gray-700 leading-relaxed mb-4">
                  {project.description}
                </p>
                <div className="space-y-2">
                  <h4 className="text-sm font-semibold" style={{color: '#012068'}}>Key Features:</h4>
                  <ul className="space-y-2">
                    {project.features.map((feature, idx) => (
                      <li key={idx} className="text-sm text-gray-700 leading-relaxed flex">
                        <span className="mr-2" style={{color: '#e64838'}}>•</span>
                        <span>{feature}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Past Work Section */}
        <div className="mb-6 p-8"style={{backgroundColor:'#f4f4f4'}}>
          <h2 className="text-3xl font-semibold mb-4 text-center" style={{color: '#012068'}}>
            Past Work
          </h2>
          <div className="relative">
            {/* Timeline line */}
            <div 
              className="absolute left-1/2 h-full w-0.5"
              style={{backgroundColor: '#012068'}}
            ></div>
            
            {milestones.map((milestone, index) => (
              <div key={index} className={`flex items-center mb-12 ${milestone.position === 'left' ? 'flex-row-reverse' : ''}`}>
                <div className={`w-1/2 ${milestone.position === 'left' ? 'pr-8 text-right' : 'pl-8'}`}>
                  <div 
                    className="p-6 rounded-lg shadow-sm group"
                    style={{backgroundColor: 'white', borderColor: '#f4f4f4'}}
                  >
                    <div className="flex items-center mb-3">
                      <span 
                        className="text-2xl font-bold mr-3 group-hover:scale-110 transition-transform duration-300"
                        style={{color: '#e64838'}}
                      >
                        {milestone.year}
                      </span>
                      <Award className="w-5 h-5 group-hover:rotate-12 transition-transform duration-300" style={{color: '#012068'}} />
                    </div>
                    <h3 className="text-xl font-semibold mb-2 group-hover:text-opacity-80 transition-all duration-300" style={{color: '#012068'}}>
                      {milestone.event}
                    </h3>
                    <p className="text-gray-700 group-hover:text-gray-600 transition-colors duration-300">
                      {milestone.description}
                    </p>
                  </div>
                </div>
                
                {/* Timeline dot */}
                <div 
                  className="absolute left-1/2 transform -translate-x-1/2 w-4 h-4 rounded-full border-4 border-white shadow-lg hover:scale-125 transition-transform duration-300"
                  style={{backgroundColor: '#e64838'}}
                ></div>
              </div>
            ))}
          </div>
        </div>

        {/* Collaborators Section */}
        <div>
          <h2 className="text-3xl font-semibold mb-4 text-center" style={{color: '#012068'}}>
            Collaborators
          </h2>
          <p className="text-center text-gray-600 mb-12">
            Our research partnerships span leading medical institutions worldwide
          </p>
          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-8">
            {collaborators.map((collaborator, index) => (
              <div 
                key={index}
                className="text-center p-6 rounded-lg border hover:shadow-md transition-shadow duration-300 flex flex-col items-center justify-center"
                style={{backgroundColor: '#f4f4f4', borderColor: '#f4f4f4'}}
              >
                <div className="w-24 h-24 mb-4 flex items-center justify-center">
                  <img 
                    src={collaborator.logo} 
                    alt={`${collaborator.short} logo`}
                    className="max-w-full max-h-full object-contain"
                  />
                </div>
                <h3 className="font-semibold text-sm" style={{color: '#012068'}}>
                  {collaborator.short}
                </h3>
                {collaborator.location && (
                  <div className="flex items-center justify-center text-xs text-gray-500 mt-1">
                    <MapPin className="w-3 h-3 mr-1" />
                    {collaborator.location}
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ResearchComponent;