// Sidebar.jsx — 48px paper-wash rail

const NAV_ICONS = {
  toggle:   "M3 5h18M3 12h18M3 19h18",
  home:     "M3 11l9-7 9 7v10H3z M9 21v-6h6v6",
  study:    "M4 4h16v16H4z M4 10h16 M10 4v16",
  graph:    "M6 6a2 2 0 114 0 2 2 0 01-4 0zM14 6a2 2 0 114 0 2 2 0 01-4 0zM10 18a2 2 0 114 0 2 2 0 01-4 0zM8 7l3 10M16 7l-3 10",
  dash:     "M3 12h4v9H3zM10 6h4v15h-4zM17 9h4v12h-4z",
  reflect:  "M12 3a9 9 0 100 18 9 9 0 000-18z M12 8v5l3 2",
  firstwin: "M6 3h10l4 4v14H6z M14 3v4h4 M9 13h6 M9 17h6",
  plan:     "M5 4h14v16H5z M5 9h14 M9 4v16 M8 13h3 M8 16h3",
  tutor:    "M3 20v-2a5 5 0 015-5h3a5 5 0 015 5v2 M8.5 8.5a3 3 0 106 0 3 3 0 00-6 0 M17 3a4 4 0 014 4 M17 7a4 4 0 014 4",
  reel:     "M4 5h16v14H4z M4 9h16 M4 15h16 M7 5v14 M17 5v14",
  search:   "M11 11m-7 0a7 7 0 1014 0 7 7 0 10-14 0M21 21l-5-5",
};

function Sidebar({ current, onNav }) {
  const items = [
    { id: "home",     label: "Home" },
    { id: "study",    label: "Study" },
    { id: "reflect",  label: "Reflect" },
    { id: "firstwin", label: "First win" },
    { id: "plan",     label: "Plan" },
    { id: "graph",    label: "Graph" },
    { id: "dash",     label: "Dashboard" },
    { id: "tutor",    label: "Tutor view" },
    { id: "reel",     label: "Struggle reel" },
  ];
  return (
    <aside className="didactic-rail">
      <button className="rail-toggle" aria-label="toggle sidebar">
        <svg viewBox="0 0 24 24" width="18" height="18"><path d={NAV_ICONS.toggle}/></svg>
      </button>
      <div className="rail-items">
        {items.map(it => (
          <button
            key={it.id}
            className={"rail-btn" + (current === it.id ? " active" : "")}
            onClick={() => onNav(it.id)}
            title={it.label}
          >
            <svg viewBox="0 0 24 24" width="18" height="18"><path d={NAV_ICONS[it.id]}/></svg>
          </button>
        ))}
      </div>
    </aside>
  );
}

Object.assign(window, { Sidebar });