function Nav({ onBook, accent }) {
  const { page } = useRoute();
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    const s = () => setScrolled(window.scrollY > 6);
    s();
    window.addEventListener('scroll', s, { passive: true });
    return () => window.removeEventListener('scroll', s);
  }, []);

  const navStyle = {
    position: 'sticky',
    top: 0,
    zIndex: 50,
    background: 'rgba(250,248,245,0.85)',
    backdropFilter: 'blur(12px)',
    WebkitBackdropFilter: 'blur(12px)',
    borderBottom: scrolled ? '1px solid var(--hairline)' : '1px solid transparent',
    transition: 'border-color var(--dur) var(--ease)',
  };
  const inner = {
    maxWidth: 'var(--container)',
    margin: '0 auto',
    padding: '14px 24px',
    display: 'flex',
    alignItems: 'center',
    gap: 32,
  };
  const links = [
    { l: 'Specialties', to: 'specialties' },
    { l: 'Conditions', to: 'conditions' },
    { l: 'Doctors', to: 'doctors' },
    { l: 'Diagnostics', to: 'diagnostics' },
    { l: 'Locations', to: 'locations' },
  ];
  const isActive = (to) => {
    if (to === 'specialties' && (page === 'specialties' || page === 'specialty')) return true;
    return page === to;
  };
  const linkStyle = (active) => ({
    color: active ? 'var(--violet-700)' : 'var(--ink-700)',
    fontFamily: 'var(--font-body)',
    fontWeight: active ? 600 : 500,
    fontSize: 14,
    textDecoration: 'none',
    transition: 'color var(--dur) var(--ease)',
    position: 'relative',
    paddingBottom: 4,
    borderBottom: active ? '1.5px solid var(--violet-700)' : '1.5px solid transparent',
  });

  return (
    <nav style={navStyle}>
      <div style={inner}>
        <Link to="home" style={{ display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none' }}>
          <img src="assets/logo-prashanti.png" alt="Prashanti Clinic" style={{ height: 38 }} />
        </Link>
        <div className="nav-links" style={{ display: 'flex', gap: 28, marginLeft: 'auto' }}>
          {links.map(({ l, to }) => (
            <Link key={l} to={to} style={linkStyle(isActive(to))}>{l}</Link>
          ))}
        </div>
        <div className="nav-cta" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <a className="nav-phone" href="tel:+912612770000" style={{ font: 'var(--t-body-sm)', color: 'var(--ink-700)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, whiteSpace: 'nowrap' }}>
            <PhoneIcon size={14}/> +91 261 277 0000
          </a>
          <Button onClick={onBook} accent={accent}>Book an Appointment</Button>
        </div>
        <button className="nav-burger" onClick={() => setOpen(!open)} style={{
          display: 'none', background: 'transparent', border: 'none', padding: 6, cursor: 'pointer', color: 'var(--ink-900)',
        }} aria-label="Menu">
          {open ? <CloseIcon size={22}/> : <MenuIcon size={22}/>}
        </button>
      </div>

      {open && (
        <div className="nav-mobile-panel" style={{
          background: 'var(--bg)',
          borderTop: '1px solid var(--hairline)',
          padding: '16px 24px 22px',
          display: 'none',
        }}>
          {links.map(({ l, to }) => (
            <Link key={l} to={to} onClick={() => setOpen(false)} style={{
              display: 'block', padding: '12px 0', font: 'var(--t-body)', color: 'var(--ink-900)',
              borderBottom: '1px solid var(--hairline-cool)', textDecoration: 'none',
            }}>{l}</Link>
          ))}
          <div style={{ marginTop: 16 }}>
            <Button onClick={() => { setOpen(false); onBook(); }} accent={accent}>Book an Appointment</Button>
          </div>
        </div>
      )}

      <style>{`
        @media (max-width: 1080px) {
          .nav-phone { display: none !important; }
        }
        @media (max-width: 1024px) {
          .nav-links { display: none !important; }
          .nav-cta { display: none !important; }
          .nav-burger { display: inline-flex !important; margin-left: auto; }
          .nav-mobile-panel { display: block !important; }
        }
      `}</style>
    </nav>
  );
}

window.Nav = Nav;