// Nav.jsx — Promo bar + Top navigation
const PromoBar = ({ message = "Limited-time offer—all camps are 20% off.", cta = "See Camps", onCta }) => (
  <div className="bee-promo-bar">
    <span>{message}</span>
    <span className="cta" onClick={onCta} style={{ cursor: "pointer" }}>{cta}</span>
  </div>
);

const TopNav = ({ light, current = "home", onNav, onCta }) => {
  const links = [
    { id: "home", label: "Home" },
    { id: "camps", label: "Find a Camp" },
    { id: "app", label: "The App" },
    { id: "host", label: "Host a Camp" },
    { id: "support", label: "Support" },
  ];
  return (
    <nav className={`bee-nav ${light ? "light" : ""}`}>
      <div className="logo" onClick={() => onNav && onNav("home")} style={{ cursor: "pointer" }}>
        <img src={light ? "../../assets/logo-mark-black.png" : "../../assets/logo-mark-white.png"} alt="Beestera" />
        <img src={light ? "../../assets/wordmark-black.png" : "../../assets/wordmark-white.png"} alt="beestera" style={{ height: 18 }} />
      </div>
      <div className="links">
        {links.map((l) => (
          <a key={l.id} className={current === l.id ? "active" : ""} onClick={() => onNav && onNav(l.id)}>
            {l.label}
          </a>
        ))}
      </div>
      <div className="actions">
        <Btn variant="ghost" size="sm" style={{ color: light ? "var(--bee-ink)" : "var(--bee-white)", borderColor: light ? "var(--bee-gray-300)" : "rgba(255,255,255,.3)" }} onClick={() => onNav && onNav("login")}>
          Sign in
        </Btn>
        <Btn variant="yellow" size="sm" onClick={onCta || (() => onNav && onNav("camps"))}>Register</Btn>
      </div>
    </nav>
  );
};

window.PromoBar = PromoBar;
window.TopNav = TopNav;