// Nav — sticky, transparent over hero, solid-navy on scroll.
const Nav = () => {
  const [scrolled, setScrolled] = React.useState(false);
  const mob = useIsMobile();
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const linkStyle = {
    fontSize: 14, fontWeight: 500, letterSpacing: '0.01em',
    color: '#FFFFFF', textDecoration: 'none', opacity: 0.82,
    transition: 'opacity 200ms cubic-bezier(0.2,0.6,0.2,1)',
    whiteSpace: 'nowrap',
  };

  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      padding: mob ? '14px 20px' : (scrolled ? '16px 32px' : '28px 32px'),
      background: scrolled ? 'rgba(28,37,64,0.88)' : 'transparent',
      backdropFilter: scrolled ? 'blur(8px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(8px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(238,232,223,0.08)' : '1px solid transparent',
      transition: 'padding 240ms cubic-bezier(0.2,0.6,0.2,1), background 240ms, border-color 240ms',
    }}>
      <a href="#top" aria-label="Andri Rivera" style={{ display: 'inline-flex', lineHeight: 0 }}>
        <svg width="128" height="56" viewBox="100 285 620 270" fill="none" xmlns="http://www.w3.org/2000/svg">
          <defs>
            <mask id="arCutout">
              <rect width="800" height="800" fill="white"/>
              <line x1="356" y1="424" x2="576" y2="324" stroke="black" strokeWidth="22" strokeLinecap="round"/>
              <line x1="356" y1="424" x2="624" y2="512" stroke="black" strokeWidth="22" strokeLinecap="round"/>
              <circle cx="356" cy="424" r="44" fill="black"/>
              <circle cx="576" cy="324" r="30" fill="black"/>
              <circle cx="624" cy="512" r="30" fill="black"/>
            </mask>
          </defs>
          <g mask="url(#arCutout)">
            <g transform="translate(200.19,490) scale(0.26,-0.26)">
              <path d="M201 0H-10L279 670H548L838 0H622L571 124H253ZM363 387 324 293H502L463 387L419 500H406Z" fill="#edeae2"/>
            </g>
            <g transform="translate(415.47,490) scale(0.26,-0.26)">
              <path d="M218 0H30V670H421Q553 670 622.0 617.0Q691 564 691 465Q691 384 647.5 338.0Q604 292 510 280V270Q558 258 581.5 235.0Q605 212 626 168L709 0H492L412 164Q394 202 371.5 215.0Q349 228 295 228H218ZM218 501V368H419Q462 368 478.0 381.0Q494 394 494 435Q494 474 477.5 487.5Q461 501 419 501Z" fill="#C4BCB0"/>
            </g>
          </g>
        </svg>
      </a>
      <nav style={{ display: 'flex', alignItems: 'center', gap: mob ? 16 : 32 }}>
        {!mob && <>
          <a href="#services" style={linkStyle}
             onMouseEnter={e => e.currentTarget.style.opacity = '1'}
             onMouseLeave={e => e.currentTarget.style.opacity = '0.82'}>What I build</a>
          <a href="#how-it-works" style={linkStyle}
             onMouseEnter={e => e.currentTarget.style.opacity = '1'}
             onMouseLeave={e => e.currentTarget.style.opacity = '0.82'}>How it works</a>
          <a href="#about" style={linkStyle}
             onMouseEnter={e => e.currentTarget.style.opacity = '1'}
             onMouseLeave={e => e.currentTarget.style.opacity = '0.82'}>About</a>
        </>}
        <CTA size="sm" withArrow={false} href="#final-cta">See if it's a fit</CTA>
      </nav>
    </header>
  );
};

window.Nav = Nav;