/* global React */
function NavBar({ onNav, onDownload }) {
  const t = window.theme;
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);

  const links = [
  { label: '功能', key: 'features' },
  { label: 'Q&A', key: 'qa' },
  { label: '下載', key: 'download' },
  { label: '使用手冊', href: '/docs' }];


  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(14,14,26,0.72)' : 'transparent',
      backdropFilter: scrolled ? 'blur(20px) saturate(180%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(180%)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(255,255,255,0.08)' : '1px solid transparent',
      padding: '14px 40px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      transition: 'background 0.3s, border 0.3s'
    }}>
      <a href="#hero" onClick={(e) => {e.preventDefault();onNav && onNav('hero');}}
      style={{ display: 'inline-flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
        <img src="assets/keycap.png" alt="" style={{

          filter: 'drop-shadow(0 0 12px rgba(155,127,255,0.45))', width: "50px", height: "50px", objectFit: "cover"
        }} />
        <span style={{
          fontFamily: t.fontDisplay, fontWeight: 700, fontSize: 20,
          letterSpacing: '-0.02em', color: '#fff', lineHeight: 1
        }}>
          Zing<span style={{ color: t.deepBlue }}>IME</span>
        </span>
      </a>

      <div style={{
        display: 'flex', gap: 2,
        background: 'rgba(255,255,255,0.04)',
        border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: 999, padding: 4,
        backdropFilter: 'blur(20px)'
      }}>
        {links.map((l) =>
        <a key={l.key || l.href} href={l.href || `#${l.key}`}
        onClick={(e) => {if (!l.href) {e.preventDefault();onNav && onNav(l.key);}}}
        style={{
          fontFamily: t.fontBody, fontSize: 14, fontWeight: 500,
          color: 'rgba(255,255,255,0.72)', textDecoration: 'none',
          padding: '8px 16px', borderRadius: 999,
          transition: 'all 0.15s'
        }}
        onMouseEnter={(e) => {e.currentTarget.style.background = 'rgba(255,255,255,0.08)';e.currentTarget.style.color = '#fff';}}
        onMouseLeave={(e) => {e.currentTarget.style.background = 'transparent';e.currentTarget.style.color = 'rgba(255,255,255,0.72)';}}>

            {l.label}
          </a>
        )}
      </div>

      <button onClick={onDownload} style={{
        fontFamily: t.fontDisplay, fontSize: 14, fontWeight: 600,
        background: t.gradEnergetic, color: '#fff', border: 0, borderRadius: 999,
        padding: '10px 20px', cursor: 'pointer',
        boxShadow: '0 4px 16px rgba(155,127,255,0.4)'
      }}>
        免費下載
      </button>
    </nav>);

}
window.NavBar = NavBar;