// Reusable Cyber Modal Container - Sharp Square Theme
window.Modal = function Modal({ isOpen, onClose, title, icon, children, maxWidth = 'max-w-2xl' }) {
  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-4 bg-black/85 backdrop-blur-sm animate-modal-backdrop overflow-y-auto"
      onClick={onClose}
    >
      <div
        className={`w-full ${maxWidth} max-w-[calc(100vw-1.5rem)] bg-[#0E1626] border border-[#1E2D4A] rounded-none shadow-2xl overflow-hidden flex flex-col max-h-[92vh] my-auto animate-modal-enter`}
        onClick={(e) => e.stopPropagation()}
      >
        {/* Modal Header */}
        <div className="flex items-center justify-between px-4 sm:px-6 py-3.5 sm:py-4 border-b border-[#1E2D4A] bg-[#0A0F1D] shrink-0">
          <div className="flex items-center gap-2.5 sm:gap-3 min-w-0">
            {icon && (
              <div className="w-8 h-8 sm:w-9 sm:h-9 rounded-none bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-400 shrink-0">
                <i className={`fa-solid ${icon} text-sm`}></i>
              </div>
            )}
            <h3 className="text-sm sm:text-base font-semibold text-white font-brand tracking-wide truncate">
              {title}
            </h3>
          </div>
          <button
            onClick={onClose}
            className="w-8 h-8 rounded-none border border-transparent hover:border-[#1E2D4A] flex items-center justify-center text-slate-400 hover:text-white hover:bg-slate-800 transition shrink-0 ml-2"
          >
            <i className="fa-solid fa-xmark text-base"></i>
          </button>
        </div>

        {/* Modal Content */}
        <div className="p-4 sm:p-6 overflow-y-auto custom-scroll flex-1 text-slate-200 min-w-0">
          {children}
        </div>
      </div>
    </div>
  );
};