/**
 * ThinkSchool Public Website — Accessible Mobile Navigation Drawer
 */
function MobileMenu({ isOpen, onClose, links = [], ctas = {}, currentPath = "/" }) {
  React.useEffect(() => {
    const handleKeyDown = (e) => {
      if (e.key === "Escape" && isOpen) {
        onClose();
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [isOpen, onClose]);

  if (!isOpen) return null;

  return (
    <div
      className="fixed inset-0 z-50 flex flex-col bg-black/95 backdrop-blur-2xl text-white transition-opacity duration-300"
      role="dialog"
      aria-modal="true"
      aria-label="Mobile Navigation Menu"
    >
      {/* Top Bar inside Drawer */}
      <div className="flex items-center justify-between px-6 py-5 border-b border-white/10">
        <a href="/" onClick={onClose} className="flex items-center gap-2.5">
          <div className="w-8 h-8 rounded-lg overflow-hidden bg-zinc-900 border border-white/10 p-1">
            <img src="/ASSETS/logo.png" alt="ThinkSchool" className="w-full h-full object-contain" />
          </div>
          <span className="font-heading italic text-xl text-white">ThinkSchool</span>
        </a>

        <button
          type="button"
          onClick={onClose}
          className="p-2 rounded-full bg-zinc-900 border border-white/10 text-zinc-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400"
          aria-label="Close menu"
        >
          <Icon name="x" size={20} />
        </button>
      </div>

      {/* Navigation Links List */}
      <div className="flex-1 overflow-y-auto px-6 py-8 flex flex-col justify-between">
        <nav className="flex flex-col space-y-2">
          {links.map((link) => {
            const isActive = currentPath === link.href;
            return (
              <a
                key={link.label}
                href={link.href}
                onClick={onClose}
                className={`text-2xl font-heading italic py-2.5 px-3 rounded-xl transition-colors ${
                  isActive
                    ? "text-amber-400 bg-white/5 font-normal"
                    : "text-zinc-300 hover:text-white hover:bg-white/5"
                }`}
              >
                {link.label}
              </a>
            );
          })}
        </nav>

        {/* Bottom CTAs */}
        <div className="pt-8 border-t border-white/10 flex flex-col gap-3">
          {ctas.demo && (
            <Button
              href={ctas.demo.href}
              size="lg"
              variant="primary"
              className="w-full"
              onClick={onClose}
            >
              {ctas.demo.label}
            </Button>
          )}
          {ctas.login && (
            <a
              href={ctas.login.href}
              target="_blank"
              rel="noopener noreferrer"
              className="w-full py-3 rounded-full text-center text-sm font-semibold font-body text-zinc-300 hover:text-white bg-zinc-900 border border-white/10 flex items-center justify-center gap-2"
            >
              <span>Sign in to ThinkSchool ERP</span>
              <Icon name="external-link" size={14} className="opacity-70" />
            </a>
          )}
          <p className="text-center text-xs text-zinc-600 mt-2 font-mono">
            Direct ERP portal: app.thinkschool.live
          </p>
        </div>
      </div>
    </div>
  );
}

window.MobileMenu = MobileMenu;