import { Calendar, Users, BookOpen, MapPin, Award, ChevronRight } from "lucide-react";
import Link from 'next/link';

const ResearchComponent = () => {
  const ongoingProjects = [
    {
      icon: <BookOpen className="w-6 h-6" />,
      title: "Chest Trauma Outcomes",
      description: "Comprehensive analysis of mortality rates, ventilation requirements, and rib fixation effectiveness in chest trauma patients."
    },
    {
      icon: <Users className="w-6 h-6" />,
      title: "Rib Fixation Study",
      description: "Comparative study analyzing recovery outcomes between operative and non-operative treatment approaches for rib fractures."
    },
    {
      icon: <Calendar className="w-6 h-6" />,
      title: "Pre-hospital Time Study",
      description: "Investigating the impact of Golden Hour protocols versus standard transport timelines on patient outcomes."
    }
  ];

  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: "Royal College of Physicians & Surgeons", location: "Glasgow", short: "RCPS" },
    { name: "All India Institute of Medical Sciences", location: "New Delhi", short: "AIIMS" },
    { name: "Post Graduate Institute", location: "Chandigarh", short: "PGI" },
    { name: "All India Institute of Medical Sciences", location: "Jodhpur", short: "AIIMS" }
  ];

  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">
            <Link 
              href="/" 
              className="hover:opacity-70 transition-opacity duration-200"
              style={{ color: '#012068' }}
            >
              Home
            </Link>
            <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 md:grid-cols-2 lg:grid-cols-3 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-center mb-4">
                  <div 
                    className="p-3 rounded-lg mr-4"
                    style={{color: '#012068'}}
                  >
                    {project.icon}
                  </div>
                  <h3 className="text-xl font-semibold" style={{color: '#012068'}}>
                    {project.title}
                  </h3>
                </div>
                <p className="text-gray-700 leading-relaxed">
                  {project.description}
                </p>
              </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-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {collaborators.map((collaborator, index) => (
              <div 
                key={index}
                className="text-center p-6 rounded-lg border hover:shadow-md transition-shadow duration-300"
                style={{backgroundColor: '#f4f4f4', borderColor: '#f4f4f4'}}
              >
                <div 
                  className="w-20 h-20 mx-auto mb-4 rounded-full flex items-center justify-center text-2xl font-bold"
                  style={{backgroundColor: '#012068', color: 'white'}}
                >
                  {collaborator.short.substring(0, 2)}
                </div>
                <h3 className="font-semibold mb-2" style={{color: '#012068'}}>
                  {collaborator.short}
                </h3>
                <p className="text-sm text-gray-600 mb-1">
                  {collaborator.name}
                </p>
                <div className="flex items-center justify-center text-sm text-gray-500">
                  <MapPin className="w-4 h-4 mr-1" />
                  {collaborator.location}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default ResearchComponent;