/* global React, BtnPrimary */
// Top nav — sticky, blur backdrop after scroll.

const Navbar = ({ onNavigate }) => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const link = (id, label) => (
    <a
      key={id}
      href={`#${id}`}
      onClick={(e) => { e.preventDefault(); onNavigate?.(id); }}
      style={{
        color: 'rgba(254,255,238,0.45)',
        textDecoration: 'none',
        fontSize: 14,
        fontWeight: 400,
        transition: 'color .2s',
      }}
      onMouseEnter={(e) => (e.currentTarget.style.color = 'rgba(254,255,238,0.9)')}
      onMouseLeave={(e) => (e.currentTarget.style.color = 'rgba(254,255,238,0.45)')}
    >
      {label}
    </a>
  );

  return (
    <nav
      style={{
        position: 'fixed',
        top: 0, left: 0, right: 0,
        zIndex: 100,
        background: scrolled ? 'rgba(10,15,26,0.72)' : 'rgba(10,15,26,0.0)',
        backdropFilter: scrolled ? 'blur(18px) saturate(1.2)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(18px) saturate(1.2)' : 'none',
        borderBottom: scrolled ? '1px solid rgba(254,255,238,0.06)' : '1px solid transparent',
        transition: 'background .25s, backdrop-filter .25s, border-color .25s',
      }}
    >
      <div
        style={{
          maxWidth: 1200,
          margin: '0 auto',
          padding: '18px 32px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 24,
        }}
      >
        <a
          href="#hero"
          onClick={(e) => { e.preventDefault(); onNavigate?.('hero'); }}
          style={{
            fontSize: 18,
            fontWeight: 600,
            color: 'var(--mlc-cream)',
            textDecoration: 'none',
            letterSpacing: '-0.01em',
          }}
        >
          mylittlechart
        </a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          {link('hero', 'Home')}
          {link('features', 'Features')}
          {link('pricing', 'Pricing')}
          {link('capabilities', 'About')}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <a
            href="/login"
            style={{
              fontSize: 14,
              fontWeight: 400,
              color: 'rgba(254,255,238,0.45)',
              textDecoration: 'none',
              transition: 'color .2s',
            }}
            onMouseEnter={(e) => (e.currentTarget.style.color = 'rgba(254,255,238,0.9)')}
            onMouseLeave={(e) => (e.currentTarget.style.color = 'rgba(254,255,238,0.45)')}
          >
            Login
          </a>
          <BtnPrimary
            large={false}
            onClick={(e) => { e.preventDefault(); onNavigate?.('download'); }}
            style={{ fontSize: 13, fontWeight: 600, padding: '10px 20px' }}
          >
            Get Started Free
          </BtnPrimary>
        </div>
      </div>
    </nav>
  );
};

window.Navbar = Navbar;