// Top nav — scroll progress bar, active-link spy, on-scroll shrink.
const Nav = ({ active = 'home', onNav }) => {
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'features', label: 'Features' },
    { id: 'pricing', label: 'Pricing' },
    { id: 'about', label: 'About' },
  ];
  const [hover, setHover] = React.useState(null);
  const [scrolled, setScrolled] = React.useState(false);
  const progress = useScrollProgress();
  const isMobile = useResponsive();
  React.useEffect(() => {
    const onS = () => setScrolled(window.scrollY > 8);
    onS();
    window.addEventListener('scroll', onS, { passive: true });
    return () => window.removeEventListener('scroll', onS);
  }, []);

  return (
    <header style={{
      position: 'sticky',
      top: 0,
      zIndex: 50,
      height: scrolled ? 56 : 68,
      background: scrolled ? 'rgba(14,14,16,0.88)' : 'rgba(14,14,16,0.55)',
      backdropFilter: 'blur(14px)',
      WebkitBackdropFilter: 'blur(14px)',
      borderBottom: scrolled ? '1px solid #18181B' : '1px solid transparent',
      transition: 'height 200ms cubic-bezier(0.2,0,0,1), background 200ms, border-color 200ms',
    }}>
      <Container style={{ height: '100%', display: 'flex', alignItems: 'center', gap: 32 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}
             onClick={() => onNav?.('home')}>
          <img src="favicon.png" width="30" height="30" alt="BlinkFree" style={{ borderRadius: '50%' }} />
          <span style={{ fontWeight: 800, fontSize: 21.25, letterSpacing: '-0.02em', color: '#EFEFF1' }}>
            BlinkFree
          </span>
        </div>
        <nav className="bf-nav-links" style={{ display: isMobile ? 'none' : 'flex', gap: 2, marginLeft: 24 }}>
          {links.map(l => {
            const isActive = active === l.id;
            const isHover = hover === l.id;
            return (
              <button key={l.id}
                onClick={() => onNav?.(l.id)}
                onMouseEnter={() => setHover(l.id)}
                onMouseLeave={() => setHover(null)}
                style={{
                  background: isHover ? '#18181B' : 'transparent',
                  border: 'none',
                  color: isActive || isHover ? '#EFEFF1' : '#ADADB8',
                  fontSize: 16.25, fontWeight: 600, cursor: 'pointer',
                  padding: '8px 14px', borderRadius: 4, fontFamily: 'inherit',
                  transition: 'color 80ms cubic-bezier(0.2,0,0,1), background 80ms',
                  position: 'relative',
                }}>
                {l.label}
                <span style={{
                  position: 'absolute', bottom: -6, left: '50%', transform: `translateX(-50%) scaleX(${isActive ? 1 : 0})`,
                  width: 22, height: 2, background: '#9146FF', borderRadius: 1,
                  transition: 'transform 200ms cubic-bezier(0.2,0,0,1)',
                  transformOrigin: 'center',
                }} />
              </button>
            );
          })}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
          <Button variant="primary" onClick={() => onNav?.('demo')}>Book a Demo</Button>
        </div>
      </Container>
      {/* progress bar */}
      <div style={{
        position: 'absolute', left: 0, bottom: -1, height: 2,
        width: `${progress * 100}%`,
        background: 'linear-gradient(90deg, #9146FF, #BF94FF)',
        boxShadow: '0 0 8px rgba(145,70,255,0.6)',
        transition: 'width 80ms linear',
      }} />
    </header>
  );
};

window.Nav = Nav;