/* Global left rail — full logo on desktop, icon-only on tablet, stacked icon-over-label */

function GlobalRail({ active, onNavigate, mode }) {
  const top = [
    { id: "home",     label: "Home",        icon: "Practice" }, /* piano-keys glyph */
    { id: "library",  label: "My Library",  icon: "Library" },
    { id: "pass",     label: "Access Pass", icon: "Pass" },
    { id: "discover", label: "Discover",    icon: "Discover" },
    { id: "practice", label: "Practice",    icon: "Home" },     /* metronome glyph */
  ];
  const bottom = [
    { id: "help",    label: "Help",    icon: "Help" },
    { id: "account", label: "Account", icon: "Account" },
  ];

  const Render = (item) => {
    const Ic = Icon[item.icon];
    return (
      <button
        key={item.id}
        className={`gr-item ${active === item.id ? "is-active" : ""}`}
        onClick={() => onNavigate && onNavigate(item.id)}
        title={item.label}
        aria-current={active === item.id ? "page" : undefined}
      >
        <span className="gr-icon"><Ic size={22} /></span>
        <span className="gr-label">{item.label}</span>
      </button>
    );
  };

  const isTablet = mode === "tablet";

  return (
    <aside className="global-rail" data-mode={mode}>
      <div className="gr-logo">
        <img src="assets/cpa-icon.png" alt="Creative Piano Academy" className="gr-logo-icon" />
      </div>

      <div className="gr-list gr-list-top">
        {top.map(Render)}
      </div>

      <div className="gr-bottom">
        <div className="gr-list">
          {bottom.map(Render)}
        </div>
      </div>
    </aside>
  );
}

window.GlobalRail = GlobalRail;