// Sidebar.jsx — Club Portal left nav
const NAV_ICONS = {
  home: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 9.5L12 3l9 6.5V20a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V9.5z"/></svg>),
  camps: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 21l9-18 9 18M12 12v9"/></svg>),
  players: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 11a4 4 0 1 0-8 0 4 4 0 0 0 8 0z"/><path d="M3 21v-2a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v2"/></svg>),
  schedule: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>),
  reports: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>),
  billing: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>),
  settings: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>),
  help: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12" y2="17.01"/></svg>),
};

const Sidebar = ({ current = "home", onNav }) => {
  const main = [
    { id: "home",     label: "Home" },
    { id: "camps",    label: "Camps", count: 12 },
    { id: "players",  label: "Players", count: 248 },
    { id: "schedule", label: "Schedule" },
    { id: "reports",  label: "Reports" },
    { id: "billing",  label: "Billing" },
  ];
  const sec = [
    { id: "settings", label: "Settings" },
    { id: "help",     label: "Get Help" },
  ];
  return (
    <aside className="cp-side">
      <div className="brand">
        <img src="../../assets/logo-mark-black.png" alt="Beestera" />
        <img src="../../assets/wordmark-black.png" alt="beestera" />
      </div>
      <div className="cp-section">Workspace</div>
      {main.map((n) => (
        <div key={n.id} className={`cp-nav-item ${current === n.id ? "active" : ""}`} onClick={() => onNav && onNav(n.id)}>
          <span className="ic">{NAV_ICONS[n.id]}</span>
          <span>{n.label}</span>
          {n.count != null && <span className="count">{n.count}</span>}
        </div>
      ))}
      <div className="cp-section">Account</div>
      {sec.map((n) => (
        <div key={n.id} className={`cp-nav-item ${current === n.id ? "active" : ""}`} onClick={() => onNav && onNav(n.id)}>
          <span className="ic">{NAV_ICONS[n.id]}</span>
          <span>{n.label}</span>
        </div>
      ))}
      <div className="cp-user">
        <div className="av">DM</div>
        <div className="meta">
          <span className="nm">Diego Morales</span>
          <span className="role">Club Director</span>
        </div>
      </div>
    </aside>
  );
};

window.Sidebar = Sidebar;
