// Navbar.jsx — frosted slate-950/80 sticky bar with auth-aware CTA.
function Navbar({ activeSection, onNavigate }) {
  const cfg = window.SPIDERNET_CONFIG || {};
  const items = [
    { id: "hero",     label: "Inicio" },
    { id: "how",      label: "Cómo funciona" },
    { id: "features", label: "Características" },
    { id: "download", label: "Descargar" },
  ];
  return (
    <header className="sn-nav">
      <div className="sn-nav-inner">
        <a className="sn-nav-brand" href="#hero" onClick={(e) => { e.preventDefault(); onNavigate("hero"); }}>
          <img src="/images/logo.png" alt="SpiderNet" />
          <span>SpiderNet</span>
        </a>
        <nav className="sn-nav-links">
          {items.map((it) => (
            <a
              key={it.id}
              href={`#${it.id}`}
              className={activeSection === it.id ? "active" : ""}
              onClick={(e) => { e.preventDefault(); onNavigate(it.id); }}
            >
              {it.label}
            </a>
          ))}
        </nav>
        <div className="sn-nav-right">
          <span className="sn-lang">
            <Icon.Globe size={12} />
            <span>ES</span>
            <span className="caret">▾</span>
          </span>
          {cfg.isLoggedIn ? (
            <a className="sn-btn-pill-primary" href={`/${cfg.userUsername}`}>
              Mi perfil
            </a>
          ) : (
            <a className="sn-btn-pill-primary" href="#download" onClick={(e) => { e.preventDefault(); onNavigate("download"); }}>
              Descargar
            </a>
          )}
        </div>
      </div>
    </header>
  );
}

window.Navbar = Navbar;