/**
 * ThinkSchool Public Website — Main Navigation Component
 * Sticky navbar with dynamic scroll blur, logo branding, and direct ERP login anchor.
 */
function Navbar({ currentPath = "/" }) {
  const [isScrolled, setIsScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  const config = window.NAVIGATION_CONFIG || {};
  const siteConfig = window.SITE_CONFIG || {};
  const assetsConfig = window.ASSETS_CONFIG || {};

  React.useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener("scroll", handleScroll, { passive: true });
    handleScroll();
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  // Sync mobile drawer state to body overflow
  React.useEffect(() => {
    if (mobileOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "";
    }
  }, [mobileOpen]);

  const links = (config.header && config.header.links) || [];
  const ctas = (config.header && config.header.ctas) || {};

  return (
    <>
      <header
        className={`fixed top-0 left-0 right-0 z-40 transition-all duration-300 ${
          isScrolled
            ? "bg-black/80 backdrop-blur-xl border-b border-white/10 py-3 shadow-[0_10px_30px_rgba(0,0,0,0.8)]"
            : "bg-transparent py-5 border-b border-transparent"
        }`}
      >
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
          {/* Brand Logo & Name */}
          <a
            href="/"
            className="flex items-center gap-3 group focus:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 rounded-lg p-1"
            aria-label="ThinkSchool Home"
          >
            <div className="w-9 h-9 rounded-xl overflow-hidden bg-zinc-900 border border-white/10 flex items-center justify-center p-1 group-hover:border-amber-500/40 transition-colors shadow-md">
              <img
                src={(assetsConfig.logo && assetsConfig.logo.primary) || "/ASSETS/logo.png"}
                alt="ThinkSchool Logo"
                className="w-full h-full object-contain"
              />
            </div>
            <div className="flex flex-col">
              <span className="font-heading italic text-xl text-white tracking-tight group-hover:text-amber-400 transition-colors">
                ThinkSchool
              </span>
              <span className="text-[10px] text-zinc-400 tracking-wider uppercase font-body font-semibold -mt-1">
                School ERP
              </span>
            </div>
          </a>

          {/* Desktop Navigation Links */}
          <nav className="hidden md:flex items-center gap-1 lg:gap-2 px-3 py-1.5 rounded-full bg-zinc-950/60 border border-white/10 backdrop-blur-md">
            {links.map((link) => {
              const isActive = currentPath === link.href || (link.href !== "/" && currentPath.startsWith(link.href));
              return (
                <a
                  key={link.label}
                  href={link.href}
                  className={`px-3 py-1 rounded-full text-xs font-medium font-body transition-colors ${
                    isActive
                      ? "text-amber-400 bg-white/5 shadow-inner"
                      : "text-zinc-300 hover:text-white hover:bg-white/5"
                  }`}
                >
                  {link.label}
                </a>
              );
            })}
          </nav>

          {/* Right Action CTAs */}
          <div className="hidden sm:flex items-center gap-3">
            {ctas.login && (
              <a
                href={ctas.login.href}
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs font-semibold font-body text-zinc-300 hover:text-white px-3.5 py-2 rounded-full hover:bg-white/5 transition-colors inline-flex items-center gap-1.5"
              >
                <span>{ctas.login.label}</span>
                <Icon name="external-link" size={12} className="w-3 h-3 opacity-70" />
              </a>
            )}
            {ctas.demo && (
              <Button href={ctas.demo.href} size="sm" variant="primary">
                {ctas.demo.label}
              </Button>
            )}
          </div>

          {/* Mobile Menu Button */}
          <div className="flex sm:hidden items-center gap-2">
            {ctas.login && (
              <a
                href={ctas.login.href}
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs font-semibold text-amber-400 px-2.5 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/20"
              >
                Login
              </a>
            )}
            <button
              type="button"
              onClick={() => setMobileOpen(true)}
              className="p-2 rounded-lg bg-zinc-900/80 border border-white/10 text-zinc-300 hover:text-white focus:outline-none focus:ring-2 focus:ring-amber-400"
              aria-label="Open navigation menu"
              aria-expanded={mobileOpen}
            >
              <Icon name="menu" size={20} />
            </button>
          </div>
        </div>
      </header>

      {/* Full-screen Mobile Drawer Menu */}
      {window.MobileMenu && (
        <window.MobileMenu
          isOpen={mobileOpen}
          onClose={() => setMobileOpen(false)}
          links={links}
          ctas={ctas}
          currentPath={currentPath}
        />
      )}
    </>
  );
}

window.Navbar = Navbar;