// Área do Sócio — Sidebar + ícones SVG inline

const ICON = {
  doc: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z"/><path d="M14 3v6h6"/></svg>,
  heart: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></svg>,
  receipt: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 2v20l3-2 3 2 3-2 3 2 3-2 3 2V2H4z"/><path d="M8 7h8M8 11h8M8 15h6"/></svg>,
  cal: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="4" width="18" height="18" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>,
  hist: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 12a9 9 0 109-9 9 9 0 00-7 3.3L3 8"/><path d="M3 3v5h5M12 7v5l3 2"/></svg>,
  card: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h4"/></svg>,
  book: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 19.5A2.5 2.5 0 016.5 17H20V2H6.5A2.5 2.5 0 004 4.5z"/><path d="M4 19.5V22h16"/></svg>,
  belt: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 10h16v4H4z"/><path d="M14 10v4M16 8v8"/></svg>,
  star: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01z"/></svg>,
  cash: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="2.5"/><path d="M6 9v.01M18 15v.01"/></svg>,
  scroll: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M8 3h11a2 2 0 012 2v3h-3"/><path d="M5 21h11a2 2 0 002-2v-3H8a2 2 0 00-2 2v3a2 2 0 01-4 0V5a2 2 0 014 0v3"/></svg>,
  cog: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 11-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 11-4 0v-.09a1.65 1.65 0 00-1.08-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 11-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 110-4h.09a1.65 1.65 0 001.51-1.08 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 112.83-2.83l.06.06a1.65 1.65 0 001.82.33h.01a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51h.01a1.65 1.65 0 001.82-.33l.06-.06a2 2 0 112.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82v.01a1.65 1.65 0 001.51 1H21a2 2 0 110 4h-.09a1.65 1.65 0 00-1.51 1z"/></svg>,
  power: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M18.36 6.64a9 9 0 11-12.73 0M12 2v10"/></svg>,
  search: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>,
  menu: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 6h16M4 12h16M4 18h16"/></svg>,
  clock: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>,
  user: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>,
  ban: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="10"/><path d="M4.93 4.93l14.14 14.14"/></svg>,
  cap: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M22 10L12 5 2 10l10 5 10-5z"/><path d="M6 12v5c0 1 3 3 6 3s6-2 6-3v-5"/></svg>,
  trophy: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M8 21h8M12 17v4M7 4h10v5a5 5 0 01-10 0V4z"/><path d="M17 4h3v3a3 3 0 01-3 3M7 4H4v3a3 3 0 003 3"/></svg>,
  video: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>,
  download: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>,
  x: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M18 6L6 18M6 6l12 12"/></svg>,
};

const NAV_SECTIONS = [
  {
    label: "Meu Perfil",
    items: [
      { id: "dashboard", label: "Dashboard", icon: "menu" },
      { id: "dados", label: "Dados pessoais", icon: "doc" },
      { id: "questionario", label: "Questionário prontidão", icon: "heart" },
      { id: "mensalidades", label: "Minhas mensalidades", icon: "receipt" },
      { id: "agendar", label: "Agendar aula", icon: "cal" },
      { id: "historico", label: "Histórico", icon: "hist" },
      { id: "credencial", label: "Credencial", icon: "card" },
      { id: "material", label: "Material didático", icon: "book" },
    ],
  },
  {
    label: "Dojo",
    items: [
      { id: "graduacoes", label: "Graduações / faixas", icon: "belt" },
      { id: "eventos", label: "Eventos e exames", icon: "trophy" },
      { id: "valores", label: "Tabela de valores", icon: "cash" },
      { id: "estatuto", label: "Estatuto", icon: "scroll" },
    ],
  },
  {
    label: "Conta",
    items: [
      { id: "seguranca", label: "Segurança (2FA)", icon: "card" },
      { id: "alterar-senha", label: "Alterar senha", icon: "doc" },
      { id: "privacidade", label: "Privacidade & dados", icon: "scroll" },
      { id: "config", label: "Configurações", icon: "cog" },
    ],
  },
];

function Sidebar({ socio, route, setRoute, onClose, onLogout }) {
  return (
    <aside className="as-sidebar">
      <div className="as-side-header">
        <img src="assets/logo-ikigai.png" alt="Ikigai" style={{ width: 36, height: 36, objectFit: "contain" }}/>
        <div>
          <div className="as-brand">IKIGAI</div>
          <div className="as-brand-sub">Área do Sócio</div>
        </div>
        <span className="as-side-close" onClick={onClose} title="Fechar área do sócio">{ICON.x}</span>
      </div>

      <div className="as-side-profile">
        <div className="as-avatar" aria-label={socio.nome}>{socio.iniciais}</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="as-avatar-name">{socio.nomeCurto}</div>
          <div className="as-avatar-code">{socio.id}</div>
          {socio.online && <div className="as-avatar-status">Online</div>}
        </div>
      </div>

      <div className="as-side-search">
        <input type="text" placeholder="Procurar…" />
      </div>

      <nav className="as-side-nav">
        {NAV_SECTIONS.map((sec) => (
          <div key={sec.label}>
            <div className="as-side-section-label">{sec.label}</div>
            {sec.items.map((it) => (
              <a
                key={it.id}
                className={`as-side-link ${route === it.id ? "is-active" : ""}`}
                onClick={(e) => { e.preventDefault(); setRoute(it.id); }}
                href={`#area-socio/${it.id}`}
              >
                {ICON[it.icon]}
                <span>{it.label}</span>
              </a>
            ))}
          </div>
        ))}
      </nav>

      <div className="as-side-footer">
        <span className="as-side-icon-btn" title="Configurações" onClick={() => setRoute("config")}>{ICON.cog}</span>
        <span style={{ fontSize: 11, color: "var(--k-ink-3)" }}>v 2.1.0</span>
        <span className="as-side-icon-btn" title="Sair" onClick={onLogout}>{ICON.power}</span>
      </div>
    </aside>
  );
}

Object.assign(window, { Sidebar, ICON, NAV_SECTIONS });