// Executive sidebar — slimmer than admin (read-mostly).

function ExecSidebar({ section, setSection }) {
  const nav = [
    { id: "overview",      icon: "ti-chart-arcs",      label: "Overview" },
    { id: "leaderboards",  icon: "ti-trophy",          label: "Leaderboards" },
    { id: "quarterly",     icon: "ti-file-text",       label: "Quarterly pack" },
    { id: "compliance",    icon: "ti-shield-half",     label: "Compliance" },
    { id: "targets",       icon: "ti-target",          label: "Targets · I7" },
  ];
  return (
    <aside className="sidebar">
      <div className="brand">
        <a href="../../index.html" target="_top" title="Back to home" aria-label="ThaiHao — back to home" style={{display:"inline-flex"}}>
          <img src="../../assets/thaihao-logo-mark.png" alt="ThaiHao" />
        </a>
        <div>
          <div className="label">ThaiHao</div>
          <div className="body-sm" style={{fontSize:11, color:"var(--on-surface-variant)"}}>Executive</div>
        </div>
      </div>
      <div className="nav-section">
        <div className="label-caps">Board</div>
        {nav.map(n => (
          <div key={n.id} className={"nav-item" + (section===n.id ? " active":"")} onClick={() => setSection(n.id)}>
            <i className={"ti " + n.icon}></i>
            <span>{n.label}</span>
          </div>
        ))}
      </div>
      <div className="sidebar-foot">
        <div className="avatar">D</div>
        <div>
          <div className="name">Daniel Park</div>
          <div className="role">CEO · Executive</div>
        </div>
      </div>
    </aside>
  );
}

window.ExecSidebar = ExecSidebar;