function LogoMark({ size = 28 }) {
  const [err, setErr] = useState(false);
  if (err) return null;
  return (
    <img
      src="images/logo-mark.webp"
      alt=""
      onError={() => setErr(true)}
      style={{ width: size, height: size, objectFit: 'contain', display: 'block', flexShrink: 0 }}
    />
  );
}

window.LogoMark = LogoMark;

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

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

  const links = [
    { href: '#metodo',      label: 'Método' },
    { href: '#entregaveis', label: 'Entregáveis' },
    { href: '#cases',       label: 'Cases' },
    { href: '#objecoes',    label: 'Dúvidas' },
  ];

  const isBg = scrolled || open;
  const wrap = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
    padding: scrolled || open ? '12px 0' : '20px 0',
    transition: 'all .45s cubic-bezier(.2,.7,.2,1)',
    background: isBg ? 'oklch(from var(--bg) l c h / 0.95)' : 'transparent',
    backdropFilter: isBg ? 'blur(14px)' : 'none',
    WebkitBackdropFilter: isBg ? 'blur(14px)' : 'none',
    borderBottom: isBg ? '1px solid var(--line-soft)' : '1px solid transparent',
  };

  const linkStyle = { fontSize: 13, color: 'var(--fg-dim)', transition: 'color .3s', letterSpacing: '-0.005em' };

  return (
    <nav style={wrap}>
      <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#top" onClick={() => setOpen(false)} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <LogoMark size={28} />
          <span className="serif" style={{ fontSize: 20, letterSpacing: '-0.01em' }}>
            Método <span className="italic">PHI</span>
          </span>
        </a>

        <div className="nav-links" style={{ display: 'flex', gap: 36, alignItems: 'center' }}>
          {links.map(l => (
            <a key={l.href} href={l.href} style={linkStyle} className="nav-a">{l.label}</a>
          ))}
        </div>

        <button onClick={() => window.__openContactModal()} className="nav-cta" style={{
          fontSize: 13, padding: '10px 18px', borderRadius: 999,
          border: '1px solid var(--line)', color: 'var(--fg)',
          display: 'inline-flex', alignItems: 'center', gap: 8, transition: 'all .3s',
        }}
          onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--fg)'; e.currentTarget.style.color = 'var(--bg)'; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--fg)'; }}
        >
          Diagnóstico
          <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }} />
        </button>

        {/* Hamburger — shown only on mobile via CSS */}
        <button
          className="nav-burger"
          onClick={() => setOpen(o => !o)}
          aria-label={open ? 'Fechar menu' : 'Abrir menu'}
          style={{ display: 'none', flexDirection: 'column', gap: 5, width: 36, height: 36, alignItems: 'center', justifyContent: 'center' }}
        >
          <span style={{ display: 'block', width: 22, height: 1.5, background: 'var(--fg)', transition: 'transform .35s, opacity .35s', transform: open ? 'translateY(6.5px) rotate(45deg)' : 'none' }} />
          <span style={{ display: 'block', width: 22, height: 1.5, background: 'var(--fg)', transition: 'opacity .35s', opacity: open ? 0 : 1 }} />
          <span style={{ display: 'block', width: 22, height: 1.5, background: 'var(--fg)', transition: 'transform .35s, opacity .35s', transform: open ? 'translateY(-6.5px) rotate(-45deg)' : 'none' }} />
        </button>
      </div>

      {/* Mobile drawer */}
      <div style={{ maxHeight: open ? '400px' : 0, overflow: 'hidden', transition: 'max-height .4s cubic-bezier(.2,.7,.2,1)' }}>
        <div className="container" style={{ paddingTop: 8, paddingBottom: 24, display: 'flex', flexDirection: 'column' }}>
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)} style={{
              padding: '15px 0',
              fontSize: 20, fontFamily: 'var(--serif)', letterSpacing: '-0.01em',
              color: 'var(--fg)', borderBottom: '1px solid var(--line-soft)', display: 'block',
            }}>{l.label}</a>
          ))}
          <button onClick={() => { setOpen(false); window.__openContactModal(); }} style={{
            marginTop: 20, alignSelf: 'flex-start',
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '13px 24px', borderRadius: 999,
            background: 'var(--fg)', color: 'var(--bg)',
            fontSize: 12, fontFamily: 'var(--mono)', letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>
            Diagnóstico
            <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--accent)' }} />
          </button>
        </div>
      </div>

      <style>{`
        .nav-a:hover { color: var(--fg) !important; }
        @media (max-width: 820px) {
          .nav-links { display: none !important; }
          .nav-cta  { display: none !important; }
          .nav-burger { display: flex !important; }
        }
        @media (max-width: 480px) {
          .nav-burger { width: 44px !important; height: 44px !important; }
        }
      `}</style>
    </nav>
  );
}

window.Nav = Nav;