function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  // Lock body scroll when mobile menu is open
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const links = [
    { href: '#about', label: 'About' },
    { href: '#products', label: 'Products' },
    { href: '#industries', label: 'Industries' },
    { href: '#quality', label: 'Quality' },
    { href: '#insights', label: 'Insights' },
    { href: '#contact', label: 'Contact' },
  ];

  return (
    <>
      <header style={{
        position: 'fixed',
        top: 0, left: 0, right: 0,
        zIndex: 100,
        background: scrolled ? 'rgba(245,243,238,0.92)' : 'transparent',
        backdropFilter: scrolled ? 'blur(24px) saturate(1.4)' : 'none',
        WebkitBackdropFilter: scrolled ? 'blur(24px) saturate(1.4)' : 'none',
        borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent',
        transition: 'all 0.35s ease',
      }}>
        <div style={{
          maxWidth: 1360,
          margin: '0 auto',
          padding: '14px 40px',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 32,
        }} className="sse-nav-inner">
          {/* Brand — logo + company name text */}
          <a href="#top" aria-label="Sakshi Saurabh Enterprises — Home" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <img
              src="assets/sse-logo.png"
              alt="Sakshi Saurabh Enterprises"
              style={{
                height: 44,
                width: 'auto',
                objectFit: 'contain',
                display: 'block',
                imageRendering: '-webkit-optimize-contrast',
                transition: 'opacity 0.2s',
                flexShrink: 0,
              }}
            />
            <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1 }}>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, letterSpacing: '-0.02em', color: 'var(--navy)' }}>
                Sakshi Saurabh
              </span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.2em', color: 'var(--steel-dark)', textTransform: 'uppercase', marginTop: 3 }}>
                Enterprises · SSE
              </span>
            </div>
          </a>

          {/* Desktop nav */}
          <nav aria-label="Main navigation" style={{ display: 'flex', alignItems: 'center', gap: 4 }} className="sse-desktop-nav">
            {links.map(l => (
              <a key={l.href} href={l.href} style={{
                fontSize: 14,
                fontWeight: 500,
                padding: '10px 14px',
                color: 'var(--navy)',
                borderRadius: 8,
                transition: 'background 0.15s',
              }}
                onMouseEnter={e => e.currentTarget.style.background = 'rgba(10,26,62,0.06)'}
                onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                {l.label}
              </a>
            ))}
          </nav>

          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <Button variant="primary" href="#contact" style={{ padding: '11px 20px', fontSize: 14 }} className="sse-desktop-nav">
              Get a Quote <Arrow />
            </Button>

            {/* Mobile hamburger */}
            <button
              aria-label={menuOpen ? 'Close menu' : 'Open menu'}
              onClick={() => setMenuOpen(o => !o)}
              className="sse-mobile-menu-btn"
              style={{
                display: 'none',
                width: 44,
                height: 44,
                alignItems: 'center',
                justifyContent: 'center',
                borderRadius: 8,
                background: menuOpen ? 'var(--navy)' : 'rgba(10,26,62,0.06)',
                color: menuOpen ? 'var(--paper)' : 'var(--navy)',
                transition: 'all 0.2s',
                flexShrink: 0,
              }}>
              {menuOpen ? (
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M3 3 L15 15 M15 3 L3 15" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
                </svg>
              ) : (
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
                  <path d="M2 5 H16 M2 9 H16 M2 13 H16" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"/>
                </svg>
              )}
            </button>
          </div>
        </div>
      </header>

      {/* Mobile drawer */}
      <div style={{
        position: 'fixed',
        inset: 0,
        zIndex: 99,
        background: 'var(--paper)',
        transform: menuOpen ? 'translateX(0)' : 'translateX(100%)',
        transition: 'transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)',
        display: 'flex',
        flexDirection: 'column',
        padding: '100px 40px 40px',
        gap: 8,
      }} className="sse-mobile-drawer">
        {links.map((l, i) => (
          <a
            key={l.href}
            href={l.href}
            onClick={() => setMenuOpen(false)}
            style={{
              fontSize: 32,
              fontFamily: 'var(--font-display)',
              fontWeight: 500,
              letterSpacing: '-0.025em',
              color: 'var(--navy)',
              padding: '16px 0',
              borderBottom: '1px solid var(--line)',
              opacity: menuOpen ? 1 : 0,
              transform: menuOpen ? 'translateX(0)' : 'translateX(24px)',
              transition: `all 0.4s cubic-bezier(0.4, 0, 0.2, 1) ${i * 0.05 + 0.1}s`,
            }}
          >
            {l.label}
          </a>
        ))}
        <div style={{ marginTop: 32, opacity: menuOpen ? 1 : 0, transition: 'opacity 0.4s ease 0.4s' }}>
          <Button variant="primary" href="#contact" onClick={() => setMenuOpen(false)} style={{ width: '100%', justifyContent: 'center', fontSize: 16, padding: '16px 24px' }}>
            Get a Quote <Arrow />
          </Button>
        </div>
        <div style={{
          marginTop: 'auto',
          fontFamily: 'var(--font-mono)',
          fontSize: 11,
          letterSpacing: '0.15em',
          color: 'var(--steel-dark)',
          textTransform: 'uppercase',
          opacity: menuOpen ? 1 : 0,
          transition: 'opacity 0.4s ease 0.5s',
        }}>
          {SSE_INFO.phone} · Silvassa, India
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .sse-desktop-nav { display: none !important; }
          .sse-mobile-menu-btn { display: flex !important; }
          .sse-nav-inner { padding: 14px 24px !important; }
          .sse-mobile-drawer { padding: 100px 24px 24px !important; }
        }
        @media (max-width: 600px) {
          .sse-nav-inner { padding: 14px 20px !important; }
          .sse-mobile-drawer { padding: 80px 20px 20px !important; }
        }
      `}</style>
    </>
  );
}

Object.assign(window, { Nav });