window.EventModal = function EventModal({ event, onClose }) {
  if (!event) return null;

  const teamData = window.DataManager.getTeamByName(event.team);

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 modal-overlay" onClick={onClose}>
      <div 
        className="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden modal-content"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="p-4 flex justify-between items-start" style={{ backgroundColor: teamData.bgColor, color: teamData.textColor }}>
          <div>
            <h3 className="text-xl font-bold">{event.title}</h3>
            <p className="text-sm opacity-90">{event.team} • {event.eventType}</p>
          </div>
          <button onClick={onClose} className="p-1 hover:bg-black/10 rounded-full transition-colors">
            <i data-lucide="x" className="w-5 h-5"></i>
          </button>
        </div>
        
        <div className="p-5 space-y-4">
          <div className="flex items-center text-gray-600">
            <i data-lucide="clock" className="w-5 h-5 mr-3 text-gray-400"></i>
            <span className="text-sm sm:text-base">{event.date} • {event.startTime} - {event.endTime}</span>
          </div>
          
          <div className="flex items-center text-gray-600">
            <i data-lucide="map-pin" className="w-5 h-5 mr-3 text-gray-400"></i>
            <span className="text-sm sm:text-base">
              {event.location} 
              {event.isGroundBooking && (
                <span className="ml-2 text-xs font-semibold bg-gray-100 px-2 py-0.5 rounded text-gray-600 inline-block">
                  St Andrew's Ground Booked
                </span>
              )}
            </span>
          </div>

          {event.notes && (
            <div className="flex items-start text-gray-600">
              <i data-lucide="flag" className="w-5 h-5 mr-3 text-gray-400 mt-0.5"></i>
              <p className="text-sm whitespace-pre-line">{event.notes}</p>
            </div>
          )}
        </div>

        <div className="p-3 border-t border-gray-100 flex justify-end bg-gray-50">
          <button 
            onClick={onClose}
            className="px-4 py-2 bg-gray-200 text-gray-700 hover:bg-gray-300 rounded-lg text-sm font-medium transition-colors"
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
};