const RouteContext = React.createContext({ path: '/', navigate: () => {} });

function useRoute() {
  const [path, setPath] = React.useState(() => {
    const h = window.location.hash.replace(/^#/, '');
    return h || '/';
  });
  React.useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace(/^#/, '');
      setPath(h || '/');
      window.scrollTo({ top: 0, behavior: 'instant' });
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  const navigate = (to) => { window.location.hash = to; };
  return { path, navigate };
}

function NavLink({ to, children, className = '', onClick }) {
  const { path, navigate } = React.useContext(RouteContext);
  const active = path === to || (to !== '/' && path.startsWith(to));
  return (
    <a
      href={'#' + to}
      className={`${className} ${active ? 'active' : ''}`}
      onClick={(e) => {
        e.preventDefault();
        navigate(to);
        if (onClick) onClick(e);
      }}
    >
      {children}
    </a>
  );
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const close = () => setMobileOpen(false);

  const links = [
    { to: '/', label: 'Home' },
    { to: '/courses', label: 'Courses' },
    { to: '/universities', label: 'Universities' },
    { to: '/services', label: 'Student Services' },
    { to: '/admission', label: 'Admission' },
    { to: '/about', label: 'About' },
    { to: '/contact', label: 'Contact' },
  ];

  const [mobileHidden, setMobileHidden] = useState(false);
  const [idleHidden, setIdleHidden] = useState(false);
  useEffect(() => {
    let idleTimer;
    const show = () => {
      setIdleHidden(false);
      clearTimeout(idleTimer);
      idleTimer = setTimeout(() => {
        if (window.scrollY > 80) setIdleHidden(true);
      }, 1500);
    };
    const onScroll = () => {
      setMobileHidden(false);
      show();
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => {
      clearTimeout(idleTimer);
      window.removeEventListener('scroll', onScroll);
    };
  }, []);

  return (
    <nav className={`nav ${scrolled || mobileOpen ? 'scrolled' : 'on-top'} ${(mobileHidden || idleHidden) && !mobileOpen ? 'nav-mobile-hidden' : ''}`}>
      <div className="container">
        <div className="nav-inner">
          <NavLink to="/" className="nav-brand">
            <img src={(window.__resources && window.__resources.logo) || 'assets/logo.png'} alt="MentVecity" className="nav-brand-img" />
          </NavLink>
          <div className={`nav-links ${mobileOpen ? 'open' : ''}`}>
            {links.map(l => (
              <NavLink key={l.to} to={l.to} className="nav-link" onClick={close}>{l.label}</NavLink>
            ))}
          </div>
          <div className="nav-cta">
            <button className="btn btn-ghost btn-sm hide-sm">Log In</button>
            <NavLink to="/contact" className="btn btn-primary btn-sm">Free Counseling <ArrowIcon size={14}/></NavLink>
            <button
              className={`nav-burger ${mobileOpen ? 'open' : ''}`}
              aria-label="Menu"
              onClick={() => setMobileOpen(v => !v)}
            ><span/><span/><span/></button>
          </div>
        </div>
      </div>
    </nav>
  );
}
window.Nav = Nav;
window.RouteContext = RouteContext;
window.useRoute = useRoute;
window.NavLink = NavLink;