// ═══════════════════════════════════════════════════════════════════
// src/components/Nav.jsx
// Sticky top navigation. Reads scroll position via useScrolled hook.
// Receives menu state from App — no internal open/close logic.
// ═══════════════════════════════════════════════════════════════════

function Nav({ onMenuToggle, menuOpen }) {
  const scrolled = useScrolled();

  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="container nav-inner">

        <a href="#top" className="brand">
          <span className="brand-mark">O</span>
          <span><b>Odonto</b><span>Pro</span></span>
        </a>

        <nav aria-label="Principal">
          <ul className="nav-links">
            {NAV_LINKS.map(({ href, label }) => (
              <li key={href}><a href={href}>{label}</a></li>
            ))}
          </ul>
        </nav>

        <div className="nav-cta">
          <a href="#agendar" className="btn btn-ghost">Agendar avaliação</a>
          <a href={CONTACT.waLink} className="btn btn-primary" target="_blank" rel="noopener noreferrer">
            <Icon.whatsapp className="wa-icon"/> WhatsApp
          </a>
          <button
            className="menu-toggle"
            onClick={onMenuToggle}
            aria-label={menuOpen ? "Fechar menu" : "Abrir menu"}
            aria-expanded={menuOpen}
          >
            {menuOpen ? <Icon.close/> : <Icon.menu/>}
          </button>
        </div>

      </div>
    </header>
  );
}