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

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

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

  useNavEffect(() => { setMobileOpen(false); }, [page]);

  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: isMobile ? '0 20px' : '0 48px',
        background: scrolled || mobileOpen ? bgSolid : 'transparent',
        backdropFilter: scrolled || mobileOpen ? '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 */}
        {!isMobile && (
          <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>
        )}

        {/* Hamburger */}
        {isMobile && (
          <button
            onClick={() => setMobileOpen(o => !o)}
            aria-label="Toggle menu"
            style={{
              background: 'none', border: 'none', cursor: 'pointer',
              padding: 8, display: 'flex', flexDirection: 'column',
              gap: 5, justifyContent: 'center', alignItems: 'center',
            }}
          >
            <span style={{
              display: 'block', width: 22, height: 2,
              background: 'var(--text)', borderRadius: 1,
              transition: 'transform 0.25s',
              transform: mobileOpen ? 'translateY(7px) rotate(45deg)' : 'none',
            }} />
            <span style={{
              display: 'block', width: 22, height: 2,
              background: 'var(--text)', borderRadius: 1,
              transition: 'opacity 0.25s',
              opacity: mobileOpen ? 0 : 1,
            }} />
            <span style={{
              display: 'block', width: 22, height: 2,
              background: 'var(--text)', borderRadius: 1,
              transition: 'transform 0.25s',
              transform: mobileOpen ? 'translateY(-7px) rotate(-45deg)' : 'none',
            }} />
          </button>
        )}
      </nav>

      {/* Mobile Drawer */}
      {isMobile && mobileOpen && (
        <div style={{
          position: 'fixed', top: 72, left: 0, right: 0, bottom: 0,
          zIndex: 199, background: bgSolid,
          backdropFilter: 'blur(20px)',
          overflowY: 'auto',
          display: 'flex', flexDirection: 'column',
          padding: '12px 20px 32px',
          borderTop: '1px solid var(--border)',
        }}>
          {navLinks.map(({ label, key, href }) => (
            href ? (
              <a key={label} href={href} target="_blank" rel="noopener noreferrer" style={{
                color: 'var(--text-sub)', fontSize: 17, fontFamily: 'DM Sans', fontWeight: 500,
                textDecoration: 'none', padding: '16px 0',
                borderBottom: '1px solid var(--border)', display: 'block',
              }}>{label}</a>
            ) : (
              <button key={key} onClick={() => setPage(key)} style={{
                background: 'none', border: 'none', cursor: 'pointer',
                color: page === key ? 'var(--accent)' : 'var(--text)',
                fontSize: 17, fontFamily: 'DM Sans',
                fontWeight: page === key ? 700 : 500,
                letterSpacing: '0.01em', padding: '16px 0', textAlign: 'left',
                borderBottom: '1px solid var(--border)',
              }}>{label}</button>
            )
          ))}
          <button
            onClick={() => setPage('contact')}
            style={{
              background: 'var(--accent)', color: '#000',
              border: 'none', cursor: 'pointer',
              padding: '15px 22px', borderRadius: 4,
              fontFamily: 'DM Sans', fontWeight: 700, fontSize: 15,
              marginTop: 24,
            }}
          >Contact Sales</button>
        </div>
      )}
    </>
  );
}

Object.assign(window, { Nav });