// Advanced hub — the full page inventory that used to live directly in the
// sidebar. Groups mirror the old nav sections (Workspace / Knowledge / System
// / Admin); each card routes to its page via `go(id)`. See ADVANCED_GROUPS in
// app.jsx for the source of truth on routes/icons/descriptions.
function AdvancedCard({ item, go }) {
  return (
    <button type="button" className="card advanced-card" onClick={() => go(item.id)}>
      <div className="flex" style={{ gap: 12, alignItems: "center" }}>
        <div className="glyph" style={{ width: 38, height: 38 }}><Icon name={item.icon} size={18} /></div>
        <b style={{ fontSize: 14.5 }}>{item.label}</b>
      </div>
      <p className="faint" style={{ fontSize: 13, lineHeight: 1.5, margin: 0 }}>{item.desc}</p>
    </button>
  );
}

function PageAdvanced({ go }) {
  return (
    <div className="page">
      <PageHead eyebrow="Workspace" title="Advanced" sub="Deeper configuration — everything not needed day-to-day lives here." />

      {ADVANCED_GROUPS.map((grp) => (
        <div className="card" key={grp.id} style={{ marginBottom: "var(--gap)" }}>
          <div className="card-head">
            <div>
              <h2>{grp.section}</h2>
            </div>
          </div>
          <div className="grid" style={{ gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))" }}>
            {grp.items.map((it) => <AdvancedCard key={it.id} item={it} go={go} />)}
          </div>
        </div>
      ))}
    </div>
  );
}
window.PageAdvanced = PageAdvanced;