const Nav = () => {
  const t = window.ATTO_TOKENS;
  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);
  }, []);

  return (
    <nav className="atto-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(244,239,230,0.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
      borderBottom: scrolled ? `1px solid ${t.rule}` : '1px solid transparent',
      transition: 'all 260ms cubic-bezier(.2,.8,.2,1)',
      fontFamily: 'var(--atto-sans)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <img src="assets/attoflow-logo.png" alt="AttoFlow"
          style={{ height: 26, width: 'auto', display: 'block' }} />
        <span style={{
          fontSize: 17, fontWeight: 600, letterSpacing: '-0.01em', color: t.ink,
        }}>AttoFlow</span>
      </div>

      {/* Desktop links */}
      <div className="atto-nav-links" style={{ display: 'flex', alignItems: 'center', gap: 36, fontSize: 13.5 }}>
        {['Research', 'Products', 'Manifesto', 'Company'].map(l => (
          <a key={l} href={`#${l.toLowerCase()}`} style={{
            color: t.ink, textDecoration: 'none', opacity: 0.72,
            transition: 'opacity 200ms',
          }} onMouseEnter={e => e.currentTarget.style.opacity = '1'}
             onMouseLeave={e => e.currentTarget.style.opacity = '0.72'}>{l}</a>
        ))}
        <a href="#waitlist" style={{
          padding: '8px 16px', fontSize: 13,
          background: t.ink, color: t.ivory, textDecoration: 'none',
          borderRadius: 999, fontWeight: 500, letterSpacing: '-0.005em',
        }}>Join waitlist</a>
      </div>

      {/* Mobile: CTA + Hamburger */}
      <div className="atto-nav-cta" style={{ display: 'none', alignItems: 'center', gap: 12 }}>
        <a href="#waitlist" style={{
          padding: '8px 14px', fontSize: 12,
          background: t.ink, color: t.ivory, textDecoration: 'none',
          borderRadius: 999, fontWeight: 500, letterSpacing: '-0.005em',
          whiteSpace: 'nowrap',
        }}>Join waitlist</a>
        <button onClick={() => setMenuOpen(o => !o)} style={{
          background: 'none', border: 'none', cursor: 'pointer',
          padding: 4, display: 'flex', flexDirection: 'column', gap: 5,
        }}>
          <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>

      {/* Mobile dropdown menu */}
      {menuOpen && (
        <div style={{
          position: 'absolute', top: '100%', left: 0, right: 0,
          background: 'rgba(244,239,230,0.97)', backdropFilter: 'blur(20px)',
          WebkitBackdropFilter: 'blur(20px)',
          borderBottom: `1px solid ${t.rule}`,
          padding: '8px 20px 20px',
          fontFamily: 'var(--atto-sans)',
        }}>
          {['Research', 'Products', 'Manifesto', 'Company'].map(l => (
            <a key={l} href={`#${l.toLowerCase()}`}
              onClick={() => setMenuOpen(false)}
              style={{
                display: 'block', padding: '14px 0',
                borderBottom: `1px solid ${t.rule}`,
                color: t.ink, textDecoration: 'none',
                fontSize: 16, fontWeight: 500, letterSpacing: '-0.01em',
              }}>{l}</a>
          ))}
        </div>
      )}
    </nav>
  );
};

window.Nav = Nav;
