// Nav.jsx — sticky top nav
const { useState, useEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const jump = (id) => (e) => {
    e.preventDefault();
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      backdropFilter: 'blur(20px)',
      background: scrolled ? 'rgba(0,0,0,0.82)' : 'rgba(0,0,0,0.35)',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
      transition: 'background .3s, border-color .3s',
    }}>
      <div className="wrap" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 0',
      }}>
        <a href="#top" onClick={jump('top')} style={{
          display: 'flex', alignItems: 'center',
          mixBlendMode: 'screen',
        }}>
          <img
            src="./logo.png"
            alt="Business Control"
            style={{
              height: 22,
              width: 'auto',
              display: 'block',
              filter: 'invert(1) brightness(0.92)',
            }}
          />
        </a>

        <div style={{
          display: 'flex', gap: 36, alignItems: 'center',
          fontFamily: 'var(--font-mono)', fontSize: '0.78rem',
          letterSpacing: '0.14em', textTransform: 'uppercase',
        }} className="nav-links">
          <a href="#case" onClick={jump('case')} className="nav-link">Case</a>
          <a href="#dores" onClick={jump('dores')} className="nav-link">Dores</a>
          <a href="#diagnostico" onClick={jump('diagnostico')} className="nav-link">Diagnóstico</a>
          <a href="#servicos" onClick={jump('servicos')} className="nav-link">Serviços</a>
          <a
            href="#diagnostico"
            onClick={jump('diagnostico')}
            className="btn btn-primary"
            style={{ padding: '12px 20px', fontSize: '0.78rem', letterSpacing: '0.12em' }}
          >
            Diagnóstico grátis <span className="arrow">→</span>
          </a>
        </div>
      </div>
      <style>{`
        .nav-link { color: var(--t2); transition: color .2s; }
        .nav-link:hover { color: var(--white); }
        @media (max-width: 900px) {
          .nav-links a:not(.btn):not(:last-child) { display: none; }
        }
      `}</style>
    </nav>
  );
}

window.Nav = Nav;