const Nav = ({ activeSection, onNav, darkMode, toggleDark }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const site = (window.zData && window.zData('site')) || {};
  const brandName = (site.companyName || 'Ziverse Technologies').replace(/\s+Technologies\s*$/i, '') || 'Ziverse';

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

  const links = [
    { id: 'home', label: 'Home' },
    { id: 'services', label: 'Services' },
    { id: 'about', label: 'About' },
    { id: 'portfolio', label: 'Work' },
    { id: 'contact', label: 'Contact' },
  ];

  const handleNav = (id) => { onNav(id); setMenuOpen(false); };

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
      padding: '0',
      background: scrolled ? 'rgba(255,255,255,0.95)' : 'rgba(255,255,255,0.8)',
      backdropFilter: 'blur(16px)',
      borderBottom: '1px solid rgba(0,0,0,0.07)',
      boxShadow: scrolled ? '0 2px 20px rgba(0,0,0,0.08)' : 'none',
      transition: 'all 0.3s ease',
    }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '0 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 68 }}>
        {/* Logo */}
        <div onClick={() => handleNav('home')} style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 9,
            background: 'linear-gradient(135deg, #1d4ed8, #3b82f6)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 4px 12px rgba(29,78,216,0.3)',
          }}>
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <path d="M9 2L16 6.5V11.5L9 16L2 11.5V6.5L9 2Z" stroke="white" strokeWidth="1.5" fill="none"/>
              <circle cx="9" cy="9" r="2.5" fill="white"/>
            </svg>
          </div>
          <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, fontSize: 18, color: '#0f172a', letterSpacing: '-0.02em' }}>
            {brandName}<span style={{ color: '#2563eb' }}>.</span>
          </span>
        </div>

        {/* Desktop Links */}
        <div style={{ display: 'flex', gap: 2, alignItems: 'center' }} className="nav-links">
          {links.map(l => (
            <button key={l.id} onClick={() => handleNav(l.id)} style={{
              background: activeSection === l.id ? 'rgba(37,99,235,0.08)' : 'none',
              border: 'none', cursor: 'pointer',
              padding: '7px 16px', borderRadius: 8,
              fontFamily: "'DM Sans', sans-serif", fontSize: 14.5, fontWeight: activeSection === l.id ? 600 : 500,
              color: activeSection === l.id ? '#1d4ed8' : '#475569',
              transition: 'all 0.15s',
            }}
            onMouseEnter={e => { if (activeSection !== l.id) { e.currentTarget.style.color = '#0f172a'; e.currentTarget.style.background = 'rgba(0,0,0,0.04)'; }}}
            onMouseLeave={e => { if (activeSection !== l.id) { e.currentTarget.style.color = '#475569'; e.currentTarget.style.background = 'none'; }}}>
              {l.label}
            </button>
          ))}
          <button onClick={toggleDark} title="Toggle dark mode" style={{
            width: 36, height: 36, borderRadius: 8, border: '1.5px solid rgba(0,0,0,0.1)',
            background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
            color: '#475569', marginRight: 4, transition: 'all 0.2s', flexShrink: 0,
          }}
          onMouseEnter={e => { e.currentTarget.style.borderColor = '#2563eb'; e.currentTarget.style.color = '#1d4ed8'; e.currentTarget.style.background = 'rgba(37,99,235,0.06)'; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(0,0,0,0.1)'; e.currentTarget.style.color = '#475569'; e.currentTarget.style.background = 'transparent'; }}>
            {darkMode
              ? <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="3.5" stroke="currentColor" strokeWidth="1.4"/><path d="M8 1V2.5M8 13.5V15M1 8H2.5M13.5 8H15M3.05 3.05L4.11 4.11M11.89 11.89L12.95 12.95M3.05 12.95L4.11 11.89M11.89 4.11L12.95 3.05" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
              : <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M13.5 9.5A6 6 0 0 1 6.5 2.5a6 6 0 1 0 7 7z" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="round"/></svg>
            }
          </button>
          <button onClick={() => handleNav('contact')} style={{
            marginLeft: 10, padding: '9px 22px', borderRadius: 8,
            background: 'linear-gradient(135deg, #1d4ed8, #2563eb)',
            border: 'none', cursor: 'pointer',
            fontFamily: "'DM Sans', sans-serif", fontSize: 14, fontWeight: 600,
            color: '#fff', boxShadow: '0 4px 14px rgba(29,78,216,0.3)',
            transition: 'all 0.2s',
          }}
          onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 6px 20px rgba(29,78,216,0.45)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
          onMouseLeave={e => { e.currentTarget.style.boxShadow = '0 4px 14px rgba(29,78,216,0.3)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
            Get Started
          </button>
        </div>

        {/* Mobile Hamburger */}
        <button onClick={() => setMenuOpen(!menuOpen)} className="hamburger" style={{
          background: 'none', border: 'none', cursor: 'pointer',
          color: '#0f172a', padding: 4,
        }}>
          <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
            {menuOpen
              ? <><path d="M4 4L18 18M18 4L4 18" stroke="currentColor" strokeWidth="1.8"/></>
              : <><rect y="4" width="22" height="1.8" rx="1" fill="currentColor"/><rect y="10" width="22" height="1.8" rx="1" fill="currentColor"/><rect y="16" width="22" height="1.8" rx="1" fill="currentColor"/></>
            }
          </svg>
        </button>
      </div>

      {/* Mobile Menu */}
      {menuOpen && (
        <div style={{
          background: '#fff', borderBottom: '1px solid rgba(0,0,0,0.07)',
          padding: '8px 32px 20px',
        }}>
          {links.map(l => (
            <button key={l.id} onClick={() => handleNav(l.id)} style={{
              display: 'block', width: '100%', textAlign: 'left',
              background: 'none', border: 'none', cursor: 'pointer',
              padding: '12px 0', fontFamily: "'DM Sans', sans-serif",
              fontSize: 16, fontWeight: 500,
              color: activeSection === l.id ? '#1d4ed8' : '#475569',
              borderBottom: '1px solid rgba(0,0,0,0.05)',
            }}>{l.label}</button>
          ))}
        </div>
      )}
    </nav>
  );
};

Object.assign(window, { Nav });