'use client';
import { useState, useEffect } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import { 
  ChevronRight, 
  Clock, 
  Users, 
  Award, 
  Calendar, 
  BookOpen, 
  MapPin,
  GraduationCap,
  FlaskConical
} from 'lucide-react';
import { educationService, Course } from '../../services/educationService';
import { upcomingEventsService, UpcomingEvent } from '../../services/upcomingEventsService';

const AcademicResearch: React.FC = () => {
  const [mounted, setMounted] = useState(false);
  const [courses, setCourses] = useState<Course[]>([]);
  const [upcomingEvents, setUpcomingEvents] = useState<UpcomingEvent[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedCategory, setSelectedCategory] = useState<string>('All');
  const [searchQuery, setSearchQuery] = useState<string>('');
  const [activeTab, setActiveTab] = useState<'education' | 'research'>('education');

  const categories = ['All', 'Certification', 'Training', 'Workshop', 'Fellowship'];

  // Research Projects Data
  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: <FlaskConical 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" }
  ];

  useEffect(() => {
    setMounted(true);
    loadData();
  }, []);

  const loadData = async () => {
    try {
      setLoading(true);
      setError(null);
      
      const [fetchedCourses, fetchedEvents] = await Promise.all([
        educationService.getActiveCourses(),
        upcomingEventsService.getActiveUpcomingEvents()
      ]);
      
      setCourses(fetchedCourses);
      setUpcomingEvents(fetchedEvents);
    } catch (err) {
      setError('Failed to load courses and events. Please try again later.');
      console.error('Error loading data:', err);
    } finally {
      setLoading(false);
    }
  };

  if (!mounted) {
    return null;
  }

  const filteredCourses = courses.filter(course => {
    const matchesCategory = selectedCategory === 'All' || course.category === selectedCategory;
    const matchesSearch = !searchQuery.trim() || 
      course.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      course.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
      course.instructor.toLowerCase().includes(searchQuery.toLowerCase());
    
    return matchesCategory && matchesSearch;
  });

  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchQuery(e.target.value);
  };

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-900 mx-auto mb-4"></div>
          <p className="text-gray-600">Loading content...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-white">
      {/* Header Section */}
      <section className="py-4" style={{ backgroundColor: '#f4f4f4' }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          {/* Breadcrumb */}
          <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' }}>
              Academic & Research
            </span>
          </nav>

          {/* Page Header */}
          <div className="mt-6">
            <h1 className="text-4xl font-bold mb-4" style={{ color: '#012068' }}>
              Academic & Research
            </h1>
            <p className="text-lg max-w-3xl leading-relaxed" style={{ color: '#333' }}>
              Advancing trauma care through innovative research, evidence-based practices, and comprehensive training programs
            </p>
          </div>

          {/* Tab Navigation */}
          <div className="mt-8 flex gap-4 border-b-2" style={{ borderColor: '#e5e7eb' }}>
            <button
              onClick={() => setActiveTab('education')}
              className={`pb-4 px-6 font-semibold transition-all duration-200 relative ${
                activeTab === 'education' ? 'border-b-4' : ''
              }`}
              style={{
                color: activeTab === 'education' ? '#012068' : '#666',
                borderColor: activeTab === 'education' ? '#e64838' : 'transparent'
              }}
            >
              <div className="flex items-center gap-2">
                <GraduationCap className="w-5 h-5" />
                <span>Education & Training</span>
              </div>
            </button>
            <button
              onClick={() => setActiveTab('research')}
              className={`pb-4 px-6 font-semibold transition-all duration-200 relative ${
                activeTab === 'research' ? 'border-b-4' : ''
              }`}
              style={{
                color: activeTab === 'research' ? '#012068' : '#666',
                borderColor: activeTab === 'research' ? '#e64838' : 'transparent'
              }}
            >
              <div className="flex items-center gap-2">
                <FlaskConical className="w-5 h-5" />
                <span>Research</span>
              </div>
            </button>
          </div>
        </div>
      </section>

      {/* Error Message */}
      {error && (
        <div className="max-w-7xl mx-auto px-4 py-4">
          <div className="bg-red-50 border border-red-200 rounded-lg p-4">
            <p className="text-red-800 text-sm">{error}</p>
            <button 
              onClick={loadData}
              className="text-red-600 underline text-sm mt-2"
            >
              Try again
            </button>
          </div>
        </div>
      )}

      {/* Education & Training Tab Content */}
      {activeTab === 'education' && (
        <>
          {/* Upcoming Training Section */}
          <section className="py-12" style={{ backgroundColor: '#fff' }}>
            <div className="max-w-7xl mx-auto px-4">
              <h2 className="text-3xl font-bold mb-8 text-center" style={{ color: '#012068' }}>
                Upcoming Training Programs
              </h2>
              <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                {upcomingEvents.length > 0 ? (
                  upcomingEvents.map((event) => (
                    <div 
                      key={event.id} 
                      className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 border-l-4" 
                      style={{ borderLeftColor: '#012068' }}
                    >
                      <div className="flex items-center mb-4">
                        <div>
                          <h3 className="text-lg font-bold" style={{ color: '#012068' }}>
                            {event.title}
                          </h3>
                          <div className="flex items-center text-sm">
                            <Calendar className="w-4 h-4 mr-1" style={{ color: '#e64838' }} />
                            <span style={{ color: '#666' }}>{event.schedule}</span>
                          </div>
                        </div>
                      </div>
                      <p className="text-sm leading-relaxed" style={{ color: '#666' }}>
                        {event.description}
                      </p>
                    </div>
                  ))
                ) : (
                  <>
                    <div className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 border-l-4" style={{ borderLeftColor: '#012068' }}>
                      <div className="flex items-center mb-4">
                        <div>
                          <h3 className="text-lg font-bold" style={{ color: '#012068' }}>
                            Simulation-based Team Drills
                          </h3>
                          <div className="flex items-center text-sm">
                            <Calendar className="w-4 h-4 mr-1" style={{ color: '#e64838' }} />
                            <span>Q3 2025</span>
                          </div>
                        </div>
                      </div>
                      <p className="text-sm leading-relaxed" style={{ color: '#666' }}>
                        Hands-on simulation training designed to improve team coordination and emergency response in high-pressure trauma situations.
                      </p>
                    </div>

                    <div className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 border-l-4" style={{ borderLeftColor: '#012068' }}>
                      <div className="flex items-center mb-4">
                        <div>
                          <h3 className="text-lg font-bold" style={{ color: '#012068' }}>
                            Online Webinar Series
                          </h3>
                          <div className="flex items-center text-sm">
                            <Calendar className="w-4 h-4 mr-1" style={{ color: '#e64838' }} />
                            <span>Monthly Sessions</span>
                          </div>
                        </div>
                      </div>
                      <p className="text-sm leading-relaxed" style={{ color: '#666' }}>
                        Monthly online sessions covering trauma ethics, young doctor support, and professional development in emergency medicine.
                      </p>
                    </div>

                    <div className="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-shadow duration-300 border-l-4" style={{ borderLeftColor: '#012068' }}>
                      <div className="flex items-center mb-4">
                        <div>
                          <h3 className="text-lg font-bold" style={{ color: '#012068' }}>
                            Community Education
                          </h3>
                          <div className="flex items-center text-sm">
                            <Calendar className="w-4 h-4 mr-1" style={{ color: '#e64838' }} />
                            <span>Ongoing</span>
                          </div>
                        </div>
                      </div>
                      <p className="text-sm leading-relaxed" style={{ color: '#666' }}>
                        Road safety fairs and school education sessions to promote trauma prevention and basic first aid awareness in the community.
                      </p>
                    </div>
                  </>
                )}
              </div>
            </div>
          </section>

          {/* Filter & Search */}
          <section className="py-8" style={{ backgroundColor: '#fff' }}>
            <div className="max-w-7xl mx-auto px-4">
              <h2 className="text-3xl font-bold mb-8 text-center" style={{ color: '#012068' }}>
                Available Courses
              </h2>
              <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
                {/* Category Filter */}
                <div className="flex flex-wrap gap-2">
                  {categories.map((category) => (
                    <button
                      key={category}
                      onClick={() => setSelectedCategory(category)}
                      className={`px-4 py-2 text-sm font-medium rounded-lg transition-colors duration-200 ${
                        selectedCategory === category ? 'text-white' : 'border-2'
                      }`}
                      style={{
                        backgroundColor: selectedCategory === category ? '#012068' : 'transparent',
                        borderColor: '#012068',
                        color: selectedCategory === category ? 'white' : '#012068'
                      }}
                    >
                      {category}
                    </button>
                  ))}
                </div>

                {/* Search */}
                <div className="relative">
                  <input
                    type="text"
                    placeholder="Search programs..."
                    value={searchQuery}
                    onChange={handleSearchChange}
                    className="border-2 rounded-lg px-4 py-2 pl-4 pr-10 text-sm focus:outline-none w-64"
                    style={{ borderColor: '#012068', color: '#333' }}
                  />
                  <button 
                    className="absolute inset-y-0 right-0 flex items-center px-3 rounded-lg"
                    style={{ backgroundColor: '#012068' }}
                  >
                    <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                  </button>
                </div>
              </div>

              {/* Results Info */}
              {(selectedCategory !== 'All' || searchQuery.trim()) && (
                <div className="mb-4">
                  <p className="text-sm text-gray-600">
                    {filteredCourses.length === 0 
                      ? 'No courses found matching your criteria.' 
                      : `Showing ${filteredCourses.length} of ${courses.length} course${courses.length !== 1 ? 's' : ''}`
                    }
                  </p>
                </div>
              )}
            </div>
          </section>

          {/* Courses Grid */}
          <section className="pb-12" style={{ backgroundColor: '#fff' }}>
            <div className="max-w-7xl mx-auto px-4">
              {filteredCourses.length === 0 && !error ? (
                <div className="text-center py-12">
                  <p className="text-gray-500 text-lg mb-4">
                    {searchQuery.trim() || selectedCategory !== 'All' 
                      ? 'No courses match your search criteria.' 
                      : 'No courses available at the moment.'
                    }
                  </p>
                  {(searchQuery.trim() || selectedCategory !== 'All') && (
                    <button
                      onClick={() => {
                        setSearchQuery('');
                        setSelectedCategory('All');
                      }}
                      className="px-4 py-2 text-sm border border-blue-900 text-blue-900 rounded hover:bg-blue-50"
                    >
                      Clear Filters
                    </button>
                  )}
                </div>
              ) : (
                <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 auto-rows-fr">
                  {filteredCourses.map((course) => (
                    <Link
                      key={course.id}
                      href={`/education-training/course-detail?id=${course.id}`}
                      className="group bg-white rounded-lg overflow-hidden border border-gray-300 hover:shadow-xl transition-all duration-300 flex flex-col h-full cursor-pointer"
                    >
                      {/* Image */}
                      <div className="relative h-48 overflow-hidden flex-shrink-0">
                        <Image
                          src={course.image}
                          alt={course.title}
                          fill
                          className="object-cover transition-transform duration-300 group-hover:scale-105"
                        />
                      </div>

                      {/* Content */}
                      <div className="flex flex-col flex-grow">
                        <div className="p-6 flex-grow flex flex-col">
                          <h3
                            className="text-lg font-semibold mb-3 group-hover:opacity-70 transition-opacity duration-300 h-14 overflow-hidden"
                            style={{
                              color: '#012068',
                              display: '-webkit-box',
                              WebkitLineClamp: 2,
                              WebkitBoxOrient: 'vertical'
                            }}
                          >
                            {course.title}
                          </h3>
                          <p
                            className="text-sm leading-relaxed mb-4 flex-grow overflow-hidden"
                            style={{
                              color: '#666',
                              display: '-webkit-box',
                              WebkitLineClamp: 4,
                              WebkitBoxOrient: 'vertical'
                            }}
                          >
                            {course.description}
                          </p>
                          <div className="mt-auto">
                            <span
                              className="inline-block px-3 py-1 text-xs font-medium rounded-full border-2"
                              style={{
                                color: '#e64838',
                                backgroundColor: 'transparent'
                              }}
                            >
                              {course.category}
                            </span>
                          </div>
                        </div>

                        <div className="px-6 pb-6 pt-2 border-t border-gray-100 flex-shrink-0">
                          <div className="flex items-end mb-3">
                            <span className="text-sm font-medium truncate" style={{ color: '#012068' }}>
                              {course.instructor}
                            </span>
                          </div>
                          <div className="flex justify-between items-center mb-3 text-sm" style={{ color: '#666' }}>
                            <div className="flex items-center">
                              <Clock className="w-4 h-4 mr-1 flex-shrink-0" />
                              <span className="truncate">{course.duration}</span>
                            </div>
                            <div className="flex items-center ml-2">
                              <Users className="w-4 h-4 mr-1 flex-shrink-0" />
                              <span>{course.seats}</span>
                            </div>
                          </div>
                          <div className="flex justify-between items-center">
                            <div className="text-sm" style={{ color: '#666' }}>
                              {course.startDate ? `Starts: ${new Date(course.startDate).toLocaleDateString()}` : 'Contact for dates'}
                            </div>
                          </div>
                        </div>
                      </div>
                    </Link>
                  ))}
                </div>
              )}
            </div>
          </section>

          {/* CTA Section */}
          <section className="py-16" style={{ backgroundColor: '#f4f4f4' }}>
            <div className="max-w-4xl mx-auto px-4 text-center">
              <Award className="w-12 h-12 mx-auto mb-6" style={{ color: '#e64838' }} />
              <h2 className="text-3xl font-bold mb-4" style={{ color: '#012068' }}>
                Ready to Advance Your Trauma Care Expertise?
              </h2>
              <p className="text-lg mb-8 max-w-2xl mx-auto" style={{ color: '#666' }}>
                Join our structured training programs designed to empower healthcare professionals, nurses, and community responders with critical trauma care skills.
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <Link
                  href="/contact"
                  className="inline-block px-6 py-3 text-sm font-medium rounded hover:opacity-90 transition-opacity duration-300"
                  style={{
                    backgroundColor: '#012068',
                    color: 'white'
                  }}
                >
                  Contact Admissions
                </Link>
                <Link
                  href="/#"
                  className="inline-block px-6 py-3 text-sm font-medium rounded border-2 hover:opacity-70 transition-opacity duration-300"
                  style={{
                    borderColor: '#012068',
                    color: '#012068'
                  }}
                >
                  Download Brochure
                </Link>
              </div>
            </div>
          </section>
        </>
      )}

      {/* Research Tab Content */}
      {activeTab === 'research' && (
        <>
          {/* Ongoing Projects Section */}
          <section className="py-12">
            <div className="max-w-7xl mx-auto px-4">
              <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>
          </section>

          {/* Past Work Section */}
          <section className="py-12" style={{ backgroundColor: '#f4f4f4' }}>
            <div className="max-w-7xl mx-auto px-4">
              <h2 className="text-3xl font-semibold mb-12 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>
          </section>

          {/* Collaborators Section */}
          <section className="py-12">
            <div className="max-w-7xl mx-auto px-4">
              <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>
          </section>
        </>
      )}
    </div>
  );
};

export default AcademicResearch;