/* Navigation - sticky top bar */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? 'rgba(251,250,247,.92)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'all 200ms',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 24px',
      }}>
        <a href="#" style={{display:'flex',alignItems:'center',gap:10}}>
          <img src="../../assets/ATU_JOBS_Logotipo_Azul.svg" alt="atu JOBS" style={{height:40,width:'auto'}} />
        </a>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <a href="#faq" className="btn btn-ghost" style={{display:'none'}}>FAQ</a>
          <a href="#form" className="btn btn-primary" style={{padding:'12px 18px',fontSize:14}}>
            Quiero que revisen mi caso
          </a>
        </div>
      </div>
    </nav>
  );
}
window.Nav = Nav;