// ============================================================
// NAV
// ============================================================

function Nav({ active, onNav }) {
  const y = useScrollY();
  return (
    <nav className={"nav " + (y > 30 ? "scrolled" : "")}>
      <div className="nav-brand">
        <span><span className="mark"></span>NOIR</span>
        <span className="sub">Private Lounge · Cheongdam</span>
      </div>
      <div className="nav-links">
        {[
          ["hero", "홈"],
          ["rooms", "룸 안내"],
          ["collection", "주류"],
          ["events", "이벤트"],
          ["membership", "문의"],
        ].map(([id, label]) => (
          <button
            key={id}
            className={"nav-link " + (active === id ? "active" : "")}
            onClick={() => onNav(id)}
          >{label}</button>
        ))}
      </div>
      <div className="nav-actions">
        <span className="nav-concierge">
          <span className="live"></span>24시 상담 가능
        </span>
        <button className="icon-btn" aria-label="account"><I.User /></button>
        <button className="icon-btn" aria-label="inbox"><I.Bell /><span className="dot"></span></button>
      </div>
    </nav>
  );
}
window.Nav = Nav;