// Sticky nav with scroll-shade
window.AtNav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobile, setMobile] = React.useState(false);
  React.useEffect(() => {
    const h = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', h, { passive: true });
    return () => window.removeEventListener('scroll', h);
  }, []);
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      display: 'flex', alignItems: 'center', gap: 40,
      padding: scrolled ? '14px 40px' : '22px 40px',
      background: scrolled ? 'rgba(241,233,218,0.92)' : 'rgba(241,233,218,0.0)',
      backdropFilter: scrolled ? 'blur(16px) saturate(1.2)' : 'none',
      borderBottom: scrolled ? `1px solid ${TC.lineSoft}` : '1px solid transparent',
      transition: 'all .3s ease',
    }}>
      <a href="#top" style={{ textDecoration: 'none' }}><AtLogo size={26} /></a>
      <div style={{ flex: 1, display: 'flex', justifyContent: 'center', gap: 38 }}>
        <a href="#services" className="at-nav-link">Services</a>
        <a href="#work" className="at-nav-link">Work</a>
        <a href="#process" className="at-nav-link">Process</a>
        <a href="#about" className="at-nav-link">Team</a>
        <a href="#contact" className="at-nav-link">Contact</a>
      </div>
      <a href="#contact" className="at-btn at-btn-pri" style={{ padding: '10px 18px', fontSize: 13 }}>
        Start a project
        <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.8">
          <path d="M3 9L9 3M9 3H4M9 3V8" strokeLinecap="round" />
        </svg>
      </a>
    </nav>
  );
};