/* ═══════════════════════════════════════════════════════════════════
   NAVIGATION COMPONENT
   Fixed header, logo, nav links
═══════════════════════════════════════════════════════════════════ */

function Logo() {
  return (
    <img
      src="assets/aurum-header-footer.png"
      alt="Aurum Growth Partners"
      style={{ height: "32px", width: "auto", objectFit: "contain" }}
    />
  );
}

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

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

  const scrollTo = (idx) => smoothScrollTo(panelDocTop(idx));

  return (
    <nav
      className={`nav ${scrolled ? "scrolled" : ""}`}
      aria-label="Navegação principal"
    >
      <div className="nav-inner">
        <Logo />
        <div className="nav-links">
          {/* <button> em vez de <a> para ações que não são links — acessível via teclado */}
          <button className="navlink" onClick={() => scrollTo(3)}>Metodologia</button>
          <button className="navlink" onClick={() => scrollTo(4)}>Resultados</button>
          <button className="navlink" onClick={() => scrollTo(5)}>Quem Atendemos</button>
          <button className="btn" onClick={onCTA}>
            Aplicar <span className="arrow" aria-hidden="true">→</span>
          </button>
        </div>
      </div>
    </nav>
  );
}