const TraceNav = () => {
  const t = window.TRACE;
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);

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

  const links = ['How it works', 'Inside Trace', 'Privacy'];
  const slugs = ['how-it-works', 'inside-trace', 'privacy'];

  return (
    <nav className="trace-nav" style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '18px 48px',
      background: scrolled ? 'rgba(252,247,248,0.9)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      borderBottom: scrolled ? `1px solid ${t.hair}` : '1px solid transparent',
      transition: 'all 260ms cubic-bezier(.2,.8,.2,1)',
      fontFamily: t.sans,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <a href="../../index.html" style={{
          fontSize: 11, color: t.faint, textDecoration: 'none',
          letterSpacing: '0.06em', display: 'flex', alignItems: 'center', gap: 6,
        }}>
          <span aria-hidden="true">←</span> AttoFlow
        </a>
        <span style={{ width: 1, height: 14, background: t.hair }} />
        <Wordmark size={15} />
      </div>

      <div className="trace-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 32, fontSize: 13.5 }}>
        {links.map((l, i) => (
          <a key={l} href={`#${slugs[i]}`} style={{
            color: t.ink, textDecoration: 'none', opacity: 0.68,
            transition: 'opacity 200ms',
          }} onMouseEnter={e => e.currentTarget.style.opacity = '1'}
             onMouseLeave={e => e.currentTarget.style.opacity = '0.68'}>{l}</a>
        ))}
        <a href="#download" style={{
          padding: '9px 18px', fontSize: 13,
          background: t.ink, color: t.bg, textDecoration: 'none',
          borderRadius: 999, fontWeight: 500, letterSpacing: '-0.005em',
        }}>Download beta</a>
      </div>

      <div className="trace-nav-cta" style={{ display: 'none', alignItems: 'center', gap: 12 }}>
        <a href="#download" style={{
          padding: '8px 14px', fontSize: 12,
          background: t.ink, color: t.bg, textDecoration: 'none',
          borderRadius: 999, fontWeight: 500, whiteSpace: 'nowrap',
        }}>Download</a>
        <button onClick={() => setMenuOpen(o => !o)} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          padding: 4, display: 'flex', flexDirection: 'column', gap: 5,
        }} aria-label={menuOpen ? 'Close navigation menu' : 'Open navigation menu'}
           aria-expanded={menuOpen} aria-controls="trace-mobile-menu">
          <span style={{ display: 'block', width: 22, height: 1.5, background: t.ink,
            transition: 'all 240ms',
            transform: menuOpen ? 'translateY(6.5px) rotate(45deg)' : 'none' }} />
          <span style={{ display: 'block', width: 22, height: 1.5, background: t.ink,
            transition: 'all 240ms', opacity: menuOpen ? 0 : 1 }} />
          <span style={{ display: 'block', width: 22, height: 1.5, background: t.ink,
            transition: 'all 240ms',
            transform: menuOpen ? 'translateY(-6.5px) rotate(-45deg)' : 'none' }} />
        </button>
      </div>

      {menuOpen && (
        <div id="trace-mobile-menu" style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'rgba(252,247,248,0.97)', backdropFilter: 'blur(20px)',
          borderBottom: `1px solid ${t.hair}`, padding: '8px 20px 20px',
        }}>
          {links.map((l, i) => (
            <a key={l} href={`#${slugs[i]}`} onClick={() => setMenuOpen(false)} style={{
              display: 'block', padding: '14px 0', borderBottom: `1px solid ${t.hair}`,
              color: t.ink, textDecoration: 'none', fontSize: 16, fontWeight: 500,
            }}>{l}</a>
          ))}
        </div>
      )}
    </nav>
  );
};

window.TraceNav = TraceNav;