const { useState: useNavState, useEffect: useNavEffect } = React;

function Nav({ page, setPage, theme }) {
  const [scrolled, setScrolled] = useNavState(false);
  const [mobileOpen, setMobileOpen] = useNavState(false);
  const isDark = theme !== 'white';

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

  const navLinks = [
    { label: 'Products',   key: 'products' },
    { label: 'Use Cases',  key: 'use-cases' },
    { label: 'Training',   href: 'https://www.wrap-tactics.com/events-cal' },
    { label: 'Support',    href: 'https://knowledge.wrap.com/en/' },
    { label: 'Investors',  href: 'https://ir.wrap.com/' },
    { label: 'About',      key: 'about' },
  ];

  const bgSolid = isDark ? (theme === 'navy' ? 'rgba(6,12,28,0.97)' : 'rgba(9,9,11,0.97)') : 'rgba(250,250,249,0.97)';

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 200,
      height: 72, display: 'flex', alignItems: 'center',
      padding: '0 48px',
      background: scrolled ? bgSolid : 'transparent',
      backdropFilter: scrolled ? 'blur(20px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : 'none',
      transition: 'background 0.3s ease, border-color 0.3s ease, backdrop-filter 0.3s ease',
      justifyContent: 'space-between',
    }}>
      {/* Logo */}
      <button
        onClick={() => setPage('home')}
        style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 0, display: 'flex', alignItems: 'center' }}
      >
        <img
          src={isDark ? 'assets/wrap-logo-white.svg' : 'assets/wrap-logo.svg'}
          alt="WRAP"
          style={{ height: 22, transition: 'filter 0.3s' }}
        />
      </button>

      {/* Desktop Links */}
      <div style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
        {navLinks.map(({ label, key, href }) => (
          href ? (
            <a key={label} href={href} target="_blank" rel="noopener noreferrer" style={{
              color: 'var(--text-sub)', fontSize: 14, fontFamily: 'DM Sans', fontWeight: 500,
              letterSpacing: '0.01em', textDecoration: 'none', paddingBottom: 2,
              borderBottom: '1px solid transparent', transition: 'color 0.2s',
            }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
            onMouseLeave={e => e.currentTarget.style.color = 'var(--text-sub)'}
            >{label}</a>
          ) : (
          <button
            key={key}
            onClick={() => setPage(key)}
            style={{
              background: 'none', border: 'none', cursor: 'pointer',
              color: page === key ? 'var(--text)' : 'var(--text-sub)',
              fontSize: 14, fontFamily: 'DM Sans', fontWeight: 500,
              letterSpacing: '0.01em', padding: 0,
              borderBottom: page === key ? '1px solid var(--accent)' : '1px solid transparent',
              paddingBottom: 2,
              transition: 'color 0.2s, border-color 0.2s',
            }}
            onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
            onMouseLeave={e => e.currentTarget.style.color = page === key ? 'var(--text)' : 'var(--text-sub)'}
          >{label}</button>
          )
        ))}

        <button
          onClick={() => setPage('contact')}
          style={{
            background: 'var(--accent)', color: '#000',
            border: 'none', cursor: 'pointer',
            padding: '9px 22px', borderRadius: 4,
            fontFamily: 'DM Sans', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.01em', transition: 'opacity 0.2s',
          }}
          onMouseEnter={e => e.currentTarget.style.opacity = '0.82'}
          onMouseLeave={e => e.currentTarget.style.opacity = '1'}
        >Contact Sales</button>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav });