// COVIA Navigation Bar — single MENU button triggers spatial menu
function CoviaNav({ onMenu }) {
  const { lang, t } = useLang();
  const [scrolled, setScrolled] = React.useState(false);

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

  return React.createElement('nav', {
    className: 'covia-nav',
    style: {
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1000,
      height: 64,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '0 clamp(16px, 4vw, 48px)',
      background: scrolled ? 'rgba(10,10,14,0.72)' : 'transparent',
      backdropFilter: scrolled ? 'blur(24px) saturate(1.4)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(24px) saturate(1.4)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border-subtle)' : '1px solid transparent',
      transition: 'all 0.4s cubic-bezier(0.16, 1, 0.3, 1)',
    }
  },
    // Logo
    React.createElement('a', {
      href: '#',
      style: {
        display: 'flex', alignItems: 'center', gap: 12,
        fontFamily: 'var(--font-display)', fontSize: 22, letterSpacing: '0.05em',
        color: 'var(--text-0)',
      }
    },
      React.createElement('div', {
        style: {
          width: 32, height: 32, borderRadius: 8,
          background: 'linear-gradient(135deg, var(--gold), var(--gold-dim))',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }
      },
        React.createElement('img', {
          src: '/img/favicon.ico',
          alt: 'COVIA',
          style: { width: 22, height: 22 },
        })
      ),
      'COVIA'
    ),

    // Right side — single MENU button + language
    React.createElement('div', {
      style: { display: 'flex', alignItems: 'center', gap: 14 }
    },
      React.createElement('button', {
        className: 'nav-menu-btn',
        onClick: onMenu,
        'aria-label': 'Open menu',
      },
        React.createElement('span', { className: 'nav-menu-bars' },
          React.createElement('span'),
          React.createElement('span'),
          React.createElement('span'),
        ),
        React.createElement('span', { className: 'nav-menu-label' }, 'MENU'),
        React.createElement('kbd', { className: 'nav-menu-kbd' }, '⌘K'),
      ),

      React.createElement('button', {
        onClick: () => {
          const next = window.COVIA_I18N.lang === 'zh-TW' ? 'en' : 'zh-TW';
          window.COVIA_I18N.setLang(next);
        },
        style: {
          fontSize: 12, color: 'var(--text-2)', padding: '4px 10px',
          border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)',
          fontFamily: 'var(--font-mono)', letterSpacing: '0.05em',
          background: 'transparent', cursor: 'pointer',
          transition: 'all 200ms',
        },
        onMouseEnter: (e) => { e.currentTarget.style.borderColor = 'var(--gold-dim)'; e.currentTarget.style.color = 'var(--gold)'; },
        onMouseLeave: (e) => { e.currentTarget.style.borderColor = 'var(--border-subtle)'; e.currentTarget.style.color = 'var(--text-2)'; },
      }, t('nav.lang')),
    )
  );
}

window.CoviaNav = CoviaNav;