function Logo({ size = 28 }) {
  // Logo asset is a tight-cropped mark+wordmark (~3.5:1 aspect).
  // `size` is the rendered height in px.
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 0 }}>
      <img
        src="assets/nexcut-logo.png"
        alt="Nexcut Media"
        style={{
          height: size,
          width: 'auto',
          filter: 'invert(1) brightness(1.1)',
          objectFit: 'contain',
          display: 'block',
        }}
      />
    </div>
  );
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { label: 'Review', href: '#testimonial' },
    { label: 'Work', href: '#work' },
    { label: 'Packages', href: '#packages' },
    { label: 'Process', href: '#process' },
  ];

  return (
    <header style={{
      position: 'fixed',
      top: scrolled ? 10 : 16, left: 0, right: 0,
      zIndex: 100,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      pointerEvents: 'none',
      transition: 'top 0.35s cubic-bezier(.22,.61,.36,1)',
    }}>
      <div className="nav-shell" style={{
        pointerEvents: 'auto',
        display: 'flex', alignItems: 'center', gap: scrolled ? 26 : 32,
        padding: scrolled ? '6px 6px 6px 20px' : '8px 8px 8px 24px',
        borderRadius: 999,
        background: scrolled ? 'rgba(8,11,20,0.78)' : 'rgba(8,11,20,0.4)',
        backdropFilter: 'blur(14px) saturate(150%)',
        WebkitBackdropFilter: 'blur(14px) saturate(150%)',
        border: '1px solid rgba(255,255,255,0.08)',
        boxShadow: scrolled
          ? '0 14px 44px -10px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06)'
          : '0 10px 40px -10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05)',
        maxWidth: 'calc(100vw - 28px)',
        transition: 'gap 0.35s ease, padding 0.35s ease, background 0.35s ease, box-shadow 0.35s ease',
      }}>
        <Logo size={22} />
        <nav className="nav-links" style={{ display: 'flex', gap: 28 }}>
          {links.map(l => (
            <a key={l.label} href={l.href} className="nav-link" style={{
              fontSize: 13.5, color: 'var(--ink-dim)',
              transition: 'color 0.2s', whiteSpace: 'nowrap',
            }} onMouseEnter={e => e.target.style.color = 'var(--ink)'}
              onMouseLeave={e => e.target.style.color = 'var(--ink-dim)'}>
              {l.label}
            </a>
          ))}
        </nav>
        <a href="#book-a-call" className="btn btn-primary nav-cta" aria-label="Book a call" style={{ padding: '10px 20px', fontSize: 13.5 }}>
          <span className="nav-cta-phone" style={{ display: 'none', alignItems: 'center' }}><IconPhone size={15} /></span>
          <span className="nav-cta-label">Book a call</span>
          <span className="nav-cta-arrow" style={{ display: 'inline-flex', alignItems: 'center' }}><IconArrow size={12} /></span>
        </a>
      </div>
    </header>
  );
}

Object.assign(window, { Nav, Logo });