/* People & Organisations CRM - master-detail lists that replace the
   Directory, matching the Projects CRM pattern. Orgs open a tabbed
   full-page record. Exports: PeopleCRM, OrgsCRM.                        */

function CRMShell({ title, icon, count, search, setSearch, filters, children, detail }) {
  return (
    <div style={{ position: "absolute", inset: 0, display: "flex" }}>
      <div style={{ width: 420, flex: "none", display: "flex", flexDirection: "column", borderRight: "1px solid var(--border)", background: "var(--surface)" }}>
        <div style={{ padding: "18px 18px 12px", borderBottom: "1px solid var(--border)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 9, marginBottom: 12 }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, display: "grid", placeItems: "center", background: "var(--accent-soft)", color: "var(--accent)" }}><Icon name={icon} size={16} /></div>
            <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: "-0.01em" }}>{title}</div>
            <span className="badge mono" style={{ marginLeft: "auto" }}>{count}</span>
          </div>
          <div style={{ position: "relative", marginBottom: filters ? 10 : 0 }}>
            <Icon name="search" size={15} style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: "var(--text-faint)", pointerEvents: "none" }} />
            <input className="input focusable" placeholder={`Search ${title.toLowerCase()}…`} value={search} onChange={(e) => setSearch(e.target.value)} style={{ paddingLeft: 32, height: 36, fontSize: 13 }} />
          </div>
          {filters}
        </div>
        <div style={{ flex: 1, overflow: "auto", padding: 8 }}>{children}</div>
      </div>
      <div style={{ flex: 1, minWidth: 0, position: "relative", background: "var(--bg)" }}>{detail}</div>
    </div>
  );
}

function FilterPills({ value, set, options }) {
  return (
    <div style={{ display: "flex", flexWrap: "wrap", gap: 5 }}>
      {options.map(([v, l]) => {
        const on = value === v;
        return <button key={v} className="tap focusable" onClick={() => set(v)}
          style={{ font: "inherit", fontSize: 11.5, fontWeight: 550, cursor: "pointer", padding: "4px 9px", borderRadius: 999, border: "1px solid " + (on ? "transparent" : "var(--border)"), background: on ? "var(--accent)" : "var(--surface-2)", color: on ? "var(--accent-contrast)" : "var(--text-muted)" }}>{l}</button>;
      })}
    </div>
  );
}

/* ---------------- PEOPLE ---------------- */
function PeopleCRM({ onOpen, onMutate, onViewConnections, onOpenIntel }) {
  const D = window.DATA;
  const [q, setQ] = React.useState("");
  const [filter, setFilter] = React.useState("all");
  const [sel, setSel] = React.useState(D.people[0] ? D.people[0].id : null);
  const [, force] = React.useReducer((x) => x + 1, 0);
  const rows = D.people.filter((p) =>
    (filter === "all" || (filter === "team" ? p.team : !p.team)) &&
    (!q || p.name.toLowerCase().includes(q.toLowerCase()) || (p.title || "").toLowerCase().includes(q.toLowerCase()))
  );
  return (
    <CRMShell title="People" icon="directory" count={rows.length} search={q} setSearch={setQ}
      filters={<FilterPills value={filter} set={setFilter} options={[["all", "All"], ["team", "Wellspring team"], ["external", "External"]]} />}
      detail={sel
        ? <PersonPage key={sel} id={sel} onOpen={(id) => { if (D.kindOf(id) === "person") setSel(id); else onOpen(id); }} onMutate={() => { force(); onMutate && onMutate(); }} onViewConnections={onViewConnections} onOpenIntel={onOpenIntel} />
        : <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", padding: 40 }}><EmptyState icon="user" title="Select a person" body="Choose someone from the list to see their record." /></div>}>
      {rows.map((p) => {
        const org = p.org ? D.byId[p.org] : null;
        const active = sel === p.id;
        return (
          <button key={p.id} className="focusable" onClick={() => setSel(p.id)}
            style={{ display: "flex", gap: 11, width: "100%", textAlign: "left", padding: "10px 11px", marginBottom: 3, borderRadius: 10, border: "1px solid " + (active ? "var(--accent)" : "transparent"), background: active ? "var(--accent-soft)" : "transparent", cursor: "pointer", alignItems: "center" }}
            onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "var(--surface-2)"; }}
            onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}>
            {p.photo ? <Portrait p={p} w={32} h={32} radius={999} /> : <Avatar name={p.name} size={32} accent={p.team} />}
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: active ? "var(--accent)" : "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.name}</div>
              <div style={{ fontSize: 11.5, color: "var(--text-muted)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{p.title}{org ? " · " + org.name : p.team ? " · Wellspring Fund" : ""}</div>
            </div>
            {isScanned(p.id) && <ScanSpiral size={14} />}
            {p.team && <span className="badge" style={{ flex: "none", fontSize: 10, background: "var(--accent-soft)", color: "var(--accent)", borderColor: "transparent" }}>Team</span>}
          </button>
        );
      })}
      {rows.length === 0 && <div style={{ padding: 24, textAlign: "center", fontSize: 13, color: "var(--text-faint)" }}>No people match.</div>}
    </CRMShell>
  );
}

/* ---------------- ORGANISATIONS ---------------- */
function OrgsCRM({ onOpen, onMutate, onViewConnections, onOpenIntel, initialId }) {
  const D = window.DATA;
  const [q, setQ] = React.useState("");
  const [filter, setFilter] = React.useState("all");
  const [sel, setSel] = React.useState(initialId || (D.orgs[0] ? D.orgs[0].id : null));
  const [, force] = React.useReducer((x) => x + 1, 0);
  React.useEffect(() => { if (initialId) setSel(initialId); }, [initialId]);
  const rows = D.orgs.filter((o) =>
    (filter === "all" || (filter === "funded" ? o.funded : filter === "prospect" ? o.relationship === "Prospect" : filter === "key" ? o.priority === "key" : true)) &&
    (!q || o.name.toLowerCase().includes(q.toLowerCase()))
  );
  return (
    <CRMShell title="Organisations" icon="building" count={rows.length} search={q} setSearch={setQ}
      filters={<FilterPills value={filter} set={setFilter} options={[["all", "All"], ["funded", "Funded"], ["prospect", "Prospects"], ["key", "Key orgs"]]} />}
      detail={sel
        ? <OrgPage key={sel} id={sel} onOpen={(id) => { if (D.kindOf(id) === "org") setSel(id); else onOpen(id); }} onMutate={() => { force(); onMutate && onMutate(); }} onViewConnections={onViewConnections} onOpenIntel={onOpenIntel} />
        : <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", padding: 40 }}><EmptyState icon="building" title="Select an organisation" body="Choose an organisation to see its full record." /></div>}>
      {rows.map((o) => {
        const active = sel === o.id;
        const band = window.scoreBand ? window.scoreBand(o.priorityScore) : { c: "var(--accent)", bg: "var(--accent-soft)" };
        return (
          <button key={o.id} className="focusable" onClick={() => setSel(o.id)}
            style={{ display: "flex", gap: 11, width: "100%", textAlign: "left", padding: "10px 11px", marginBottom: 3, borderRadius: 10, border: "1px solid " + (active ? "var(--accent)" : "transparent"), background: active ? "var(--accent-soft)" : "transparent", cursor: "pointer", alignItems: "center" }}
            onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "var(--surface-2)"; }}
            onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: domainColor(o.domain), flex: "none" }} />
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: active ? "var(--accent)" : "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{o.name}</div>
              <div style={{ fontSize: 11.5, color: "var(--text-muted)" }}>{o.relationship} · {o.geography}</div>
            </div>
            <span className="badge mono" style={{ flex: "none", color: band.c, background: band.bg, borderColor: "transparent", fontWeight: 700 }}>{o.priorityScore}</span>
          </button>
        );
      })}
      {rows.length === 0 && <div style={{ padding: 24, textAlign: "center", fontSize: 13, color: "var(--text-faint)" }}>No organisations match.</div>}
    </CRMShell>
  );
}

/* ---------------- ORG PAGE (tabbed, Reform-style) ---------------- */
function OrgPage({ id, onOpen, onMutate, onViewConnections, onOpenIntel }) {
  const D = window.DATA;
  const e = D.byId[id];
  const [tab, setTab] = React.useState("overview");
  React.useEffect(() => { setTab("overview"); }, [id]);
  if (!e) return null;
  const dc = domainColor(e.domain);
  const projects = D.projectsByOrg(id), ppl = D.peopleByOrg(id), evs = D.eventsByOrg(id);
  const band = window.scoreBand ? window.scoreBand(e.priorityScore) : { label: "-", c: "var(--accent)", bg: "var(--accent-soft)" };
  const account = e.account ? D.byId[e.account] : null;
  const fmtMoney = D.fmtMoney;

  const team = [...new Set([...(e.accountHolders || []), e.contact, ...(e.teamMembers || [])].filter(Boolean))];
  const TABS = [
    { id: "overview", label: "Overview", icon: "building" },
    { id: "people", label: "People", icon: "users", n: team.length },
    { id: "projects", label: "Projects", icon: "folder", n: projects.length },
    { id: "events", label: "Events", icon: "calendar", n: evs.length },
    { id: "assessment", label: "Assessment", icon: "target" },
  ];
  const Card = ({ title, children, right }) => (
    <div className="card" style={{ padding: 18 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}><div className="t-eyebrow">{title}</div>{right}</div>
      {children}
    </div>
  );

  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      {/* hero header */}
      <div style={{ flex: "none", borderBottom: "1px solid var(--border)", background: "linear-gradient(180deg, var(--surface-2), var(--surface) 70%)" }}>
        <div style={{ padding: "22px 26px 0" }}>
          <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
            <div style={{ width: 52, height: 52, flex: "none", borderRadius: 14, display: "grid", placeItems: "center", background: domainColor(e.domain, true), color: dc, border: "1px solid var(--border)" }}><Icon name="building" size={26} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="t-eyebrow" style={{ marginBottom: 4 }}>Organisation overview</div>
              <div className="display" style={{ fontSize: 30, lineHeight: 1.04 }}>{e.name}</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 9, flexWrap: "wrap" }}>
                <span className="badge" style={{ background: "var(--surface-2)" }}><span style={{ width: 7, height: 7, borderRadius: 999, background: dc }} /> {(D.domains.find((d) => d.id === e.domain) || {}).label}</span>
                <span className="badge" style={{ background: "var(--surface-2)" }}><Icon name="map" size={12} /> {e.geography}</span>
                <span className="badge" style={{ background: "var(--surface-2)" }}>{e.legalEntity}</span>
                <span className="badge" style={{ background: "var(--accent-soft)", color: "var(--accent)", borderColor: "transparent" }}>{e.maturityStage}</span>
                {e.funded ? <FundingBadge funded /> : <span className="badge" style={{ background: "var(--warn-bg)", color: "var(--warn)", borderColor: "transparent" }}>Not funded</span>}
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 8 }}>
              <span className="badge mono" style={{ color: band.c, background: band.bg, borderColor: "transparent", fontWeight: 700, fontSize: 13, padding: "6px 11px" }}>{e.priorityScore}/100 · {band.label}</span>
              <div style={{ display: "flex", gap: 8 }}>
                <button className="btn btn-sm" onClick={() => onViewConnections && onViewConnections(id)}><Icon name="link" size={14} /> Connections</button>
                <button className="btn btn-sm" onClick={() => onOpenIntel && onOpenIntel(id)}><Icon name="target" size={14} /> Intel</button>
              </div>
            </div>
          </div>
          <div style={{ display: "flex", gap: 4, marginTop: 16 }}>
            {TABS.map((t) => {
              const on = tab === t.id;
              return <button key={t.id + (on ? "1" : "0")} className="focusable" onClick={() => setTab(t.id)}
                style={{ display: "inline-flex", alignItems: "center", gap: 7, font: "inherit", fontSize: 13.5, fontWeight: 550, cursor: "pointer", padding: "9px 14px", border: "none", borderBottom: "2px solid " + (on ? "var(--accent)" : "transparent"), background: "none", color: on ? "var(--text)" : "var(--text-muted)", marginBottom: -1 }}>
                <Icon name={t.icon} size={15} /> {t.label}{t.n != null && <span className="badge mono" style={{ fontSize: 10.5, padding: "1px 6px" }}>{t.n}</span>}
              </button>;
            })}
          </div>
        </div>
      </div>

      <div style={{ flex: 1, overflow: "auto", padding: 26 }}>
        <div style={{ maxWidth: 1000, margin: "0 auto" }}>
          {tab === "overview" && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "start" }}>
              <Card title="Aims & activities"><div style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--text-muted)" }}>{e.aims}</div></Card>
              <Card title="Funding picture">
                <FieldRow label="Status" icon="funding">{e.fundingPicture}</FieldRow>
                <FieldRow label="Need" icon="target">{e.fundingNeed}</FieldRow>
                <FieldRow label="Would enable" icon="spark">{e.fundingEnable}</FieldRow>
              </Card>
              <Card title="Characteristics">
                <FieldRow label="Relationship" icon="link"><RelBadge value={e.relationship} /></FieldRow>
                <FieldRow label="Category" icon="search"><span className="badge" style={{ background: "var(--surface-2)" }}>{e.category}</span></FieldRow>
                <FieldRow label="Importance" icon="target"><Meter value={e.importance} invert words={["Critical", "High", "Medium", "Low", "Minimal"]} /></FieldRow>
                <FieldRow label="Intensity" icon="bolt"><Meter value={e.intensity} words={["Dormant", "Light", "Steady", "Active", "Intensive"]} color="var(--info)" /></FieldRow>
              </Card>
              <Card title="Support & recognition">
                <FieldRow label="Benefits in kind" icon="spark"><span style={{ display: "inline-flex", flexWrap: "wrap", gap: 5 }}>{(e.bik || []).length ? e.bik.map((b) => <span key={b} className="badge">{b}</span>) : "-"}</span></FieldRow>
                <FieldRow label="Engagement" icon="signal"><span className="badge" style={{ background: "var(--accent-soft)", color: "var(--accent)", borderColor: "transparent" }}>{e.engagementTier}</span></FieldRow>
                {(e.badges || []).length > 0 && <FieldRow label="Badges" icon="spark"><span style={{ display: "inline-flex", flexWrap: "wrap", gap: 5 }}>{e.badges.map((b) => <span key={b} className="badge" style={{ background: "var(--warn-bg)", color: "var(--warn)", borderColor: "transparent" }}>★ {b}</span>)}</span></FieldRow>}
              </Card>
            </div>
          )}
          {tab === "people" && (
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <Card title="Account holder">{account ? <PersonPill id={account.id} onOpen={onOpen} sub /> : "-"}</Card>
              <Card title="Main contact">{e.contact ? <PersonPill id={e.contact} onOpen={onOpen} sub /> : "-"}</Card>
              {(e.teamMembers || []).length > 0 && <Card title="Team"><ChipWrap>{e.teamMembers.map((pid) => <PersonPill key={pid} id={pid} onOpen={onOpen} sub />)}</ChipWrap></Card>}
              <Card title="RACI">
                <div style={{ borderTop: "1px solid var(--border)" }}>
                  <RaciRow label="Responsible" ids={e.raci.responsible} onOpen={onOpen} color="var(--good)" />
                  <RaciRow label="Accountable" ids={e.raci.accountable} onOpen={onOpen} color="var(--accent)" />
                  <RaciRow label="Consulted" ids={e.raci.consulted} onOpen={onOpen} color="var(--info)" />
                  <RaciRow label="Informed" ids={e.raci.informed} onOpen={onOpen} color="var(--warn)" />
                </div>
              </Card>
            </div>
          )}
          {tab === "projects" && (
            <Card title={`Projects (${projects.length})`}>
              {projects.length ? <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {projects.map((pr) => (
                  <button key={pr.id} className="focusable" onClick={() => onOpen(pr.id)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 13px", border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface-2)", cursor: "pointer", textAlign: "left" }}>
                    <Icon name="folder" size={16} style={{ color: "var(--text-muted)" }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 550 }}>{pr.name}</div>
                      <div style={{ fontSize: 12, color: "var(--text-muted)" }}><span className="mono">{pr.year}</span> · {pr.type} · {pr.status}</div>
                    </div>
                    <Icon name="chevronRight" size={16} style={{ color: "var(--text-faint)" }} />
                  </button>
                ))}
              </div> : <div style={{ fontSize: 13, color: "var(--text-faint)" }}>No projects.</div>}
            </Card>
          )}
          {tab === "events" && (
            <Card title={`Events (${evs.length})`}>
              {evs.length ? <ChipWrap>{evs.map((ev) => <EntityChip key={ev.id} id={ev.id} onOpen={onOpen} />)}</ChipWrap> : <div style={{ fontSize: 13, color: "var(--text-faint)" }}>No events.</div>}
            </Card>
          )}
          {tab === "assessment" && (
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <ScoreCard e={e} />
              <Card title="Risk notes"><div style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--text-muted)" }}>{e.riskNotes || "None recorded."}</div></Card>
              <div style={{ display: "flex", gap: 10, padding: "14px 16px", borderRadius: 12, background: "var(--accent-soft)", border: "1px solid color-mix(in srgb, var(--accent) 28%, transparent)" }}>
                <Icon name="arrowRight" size={17} style={{ color: "var(--accent)", flex: "none", marginTop: 1 }} />
                <div>
                  <div style={{ fontSize: 11.5, fontWeight: 600, color: "var(--accent)", marginBottom: 2 }}>RECOMMENDED NEXT STEP</div>
                  <div style={{ fontSize: 14, color: "var(--text)", lineHeight: 1.5 }}>{e.nextStep}</div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------------- PERSON PAGE (tabbed, full-width) ---------------- */
function PersonPage({ id, onOpen, onMutate, onViewConnections, onOpenIntel }) {
  const D = window.DATA;
  const e = D.byId[id];
  const [tab, setTab] = React.useState("overview");
  React.useEffect(() => { setTab("overview"); }, [id]);
  if (!e) return null;
  const org = e.org ? D.byId[e.org] : null;
  const evs = (e.events || []).map((x) => D.byId[x]).filter(Boolean)
    .sort((a, b) => new Date(b.date) - new Date(a.date));
  const ownedOrgs = D.orgs.filter((o) => o.account === id);
  const contactOrgs = D.orgs.filter((o) => o.contact === id);
  const projects = D.projects.filter((p) => p.contact === id);
  // colleagues: other people at the same org
  const colleagues = org ? D.people.filter((p) => p.org === org.id && p.id !== id) : [];
  const attended = evs.filter((ev) => (e.rsvp && (e.rsvp[ev.id] === "Attended" || e.rsvp[ev.id] === "Yes")) || !e.rsvp);

  const Card = ({ title, children, right }) => (
    <div className="card" style={{ padding: 18 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}><div className="t-eyebrow">{title}</div>{right}</div>
      {children}
    </div>
  );
  const rsvpMeta = {
    Attended: { c: "var(--good)", bg: "var(--good-bg)", icon: "check" },
    Yes: { c: "var(--info)", bg: "var(--info-bg)", icon: "check" },
    Regrets: { c: "var(--text-muted)", bg: "var(--surface-2)", icon: "x" },
    Invited: { c: "var(--warn)", bg: "var(--warn-bg)", icon: "clock" },
  };

  const TABS = [
    { id: "overview", label: "Overview", icon: "user" },
    { id: "events", label: "Events", icon: "calendar", n: evs.length },
    { id: "portfolio", label: "Organisations", icon: "building", n: ownedOrgs.length + contactOrgs.length },
    { id: "activity", label: "Activity", icon: "history" },
  ];

  const EventRow = ({ ev }) => {
    const st = (e.rsvp && e.rsvp[ev.id]) || "Invited"; const sm = rsvpMeta[st] || rsvpMeta.Invited;
    const d = new Date(ev.date);
    return (
      <button className="focusable" onClick={() => onOpen(ev.id)} style={{ display: "flex", alignItems: "center", gap: 13, padding: "12px 14px", border: "1px solid var(--border)", borderRadius: 12, background: "var(--surface-2)", cursor: "pointer", textAlign: "left", width: "100%" }}>
        <div style={{ width: 46, flex: "none", textAlign: "center", padding: "6px 0", borderRadius: 9, background: "var(--surface)", border: "1px solid var(--border)" }}>
          <div className="mono" style={{ fontSize: 16, fontWeight: 600, lineHeight: 1 }}>{d.getDate()}</div>
          <div style={{ fontSize: 9.5, color: "var(--text-muted)", textTransform: "uppercase", marginTop: 1 }}>{d.toLocaleDateString("en-GB", { month: "short" })}</div>
          <div style={{ fontSize: 9, color: "var(--text-faint)" }}>{d.getFullYear()}</div>
        </div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 14, fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{ev.name}</div>
          <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 2 }}>{(ev.orgs || []).length} orgs · {(ev.attendees || []).length} attendees</div>
        </div>
        <span className="badge" style={{ flex: "none", background: sm.bg, color: sm.c, borderColor: "transparent" }}><Icon name={sm.icon} size={11} /> {st}</span>
      </button>
    );
  };

  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      {/* hero header */}
      <div style={{ flex: "none", borderBottom: "1px solid var(--border)", background: "linear-gradient(180deg, var(--surface-2), var(--surface) 70%)" }}>
        <div style={{ padding: "22px 26px 0" }}>
          <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
            {e.photo ? <Portrait p={e} w={64} h={64} radius={999} /> : <Avatar name={e.name} size={64} accent={e.team} />}
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                <span className="badge"><Icon name="user" size={12} /> Person</span>
                {e.team && <span className="badge" style={{ background: "var(--accent-soft)", color: "var(--accent)", borderColor: "transparent" }}>Wellspring team</span>}
                {e.codename && <span className="badge mono" style={{ background: "var(--surface-2)" }}>"{e.codename}"</span>}
              </div>
              <div className="display" style={{ fontSize: 29, lineHeight: 1.04 }}>{e.name}</div>
              <div style={{ fontSize: 14, color: "var(--text-muted)", marginTop: 4 }}>{e.title}{org ? " · " + org.name : e.team ? " · The Wellspring Fund" : ""}</div>
              {/* quick stats */}
              <div style={{ display: "flex", gap: 22, marginTop: 14 }}>
                <div><span className="mono" style={{ fontSize: 18, fontWeight: 600 }}>{evs.length}</span> <span style={{ fontSize: 12, color: "var(--text-muted)" }}>events</span></div>
                <div><span className="mono" style={{ fontSize: 18, fontWeight: 600 }}>{ownedOrgs.length + contactOrgs.length}</span> <span style={{ fontSize: 12, color: "var(--text-muted)" }}>orgs</span></div>
                <div><span className="mono" style={{ fontSize: 18, fontWeight: 600 }}>{projects.length}</span> <span style={{ fontSize: 12, color: "var(--text-muted)" }}>projects</span></div>
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 8 }}>
              <div style={{ display: "flex", gap: 8 }}>
                <button className="btn btn-sm" onClick={() => onViewConnections && onViewConnections(id)}><Icon name="link" size={14} /> Connections</button>
                <button className="btn btn-sm" onClick={() => onOpenIntel && onOpenIntel(id)}><Icon name="target" size={14} /> Intel</button>
              </div>
              {e.lastContact && <span className="badge" style={{ background: "var(--good-bg)", color: "var(--good)", borderColor: "transparent" }}><span className="statdot" style={{ background: "var(--good)" }} /> Last contact {e.lastContact}</span>}
            </div>
          </div>
          {/* tabs */}
          <div style={{ display: "flex", gap: 4, marginTop: 16 }}>
            {TABS.map((t) => {
              const on = tab === t.id;
              return <button key={t.id + (on ? "1" : "0")} className="focusable" onClick={() => setTab(t.id)}
                style={{ display: "inline-flex", alignItems: "center", gap: 7, font: "inherit", fontSize: 13.5, fontWeight: 550, cursor: "pointer", padding: "9px 14px", border: "none", borderBottom: "2px solid " + (on ? "var(--accent)" : "transparent"), background: "none", color: on ? "var(--text)" : "var(--text-muted)", marginBottom: -1 }}>
                <Icon name={t.icon} size={15} /> {t.label}{t.n != null && t.n > 0 && <span className="badge mono" style={{ fontSize: 10.5, padding: "1px 6px" }}>{t.n}</span>}
              </button>;
            })}
          </div>
        </div>
      </div>

      <div style={{ flex: 1, overflow: "auto", padding: 26 }}>
        <div style={{ maxWidth: tab === "overview" ? 1360 : 1080, margin: "0 auto" }}>
          {tab === "overview" && (
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: 16, alignItems: "start" }}>
                <Card title="Contact">
                  <FieldRow label="Email" icon="mail"><span className="mono" style={{ color: "var(--accent)", wordBreak: "break-all", lineHeight: 1.4 }}>{e.email}</span></FieldRow>
                  <FieldRow label="Phone" icon="phone"><span className="mono">{e.phone}</span></FieldRow>
                  <FieldRow label="Role" icon="user">{e.title}{e.team ? " · The Wellspring Fund" : ""}</FieldRow>
                  {org && <FieldRow label="Works at" icon="building"><EntityChip id={org.id} onOpen={onOpen} /></FieldRow>}
                  <FieldRow label="Reach out" icon="clock">
                    {e.lastContact
                      ? <span style={{ display: "inline-flex", alignItems: "center", gap: 7 }}><span className="statdot" style={{ background: "var(--good)" }} />Last interaction <strong style={{ fontWeight: 600 }}>{e.lastContact}</strong></span>
                      : <span style={{ display: "inline-flex", alignItems: "center", gap: 7, color: "var(--text-muted)" }}><span className="statdot" style={{ background: "var(--text-faint)" }} />No last interaction recorded</span>}
                  </FieldRow>
                </Card>
                <Card title="Recent events" right={<span className="badge mono">{evs.length}</span>}>
                  {evs.length ? <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    {evs.slice(0, 2).map((ev) => <EventRow key={ev.id} ev={ev} />)}
                    {evs.length > 2 && <button className="btn btn-sm btn-ghost" style={{ color: "var(--accent)", justifyContent: "center" }} onClick={() => setTab("events")}>All {evs.length} events <Icon name="arrowRight" size={14} /></button>}
                  </div> : <div style={{ fontSize: 13, color: "var(--text-faint)" }}>No events recorded.</div>}
                </Card>
              </div>

              {/* full-width intelligence dossier */}
              <IntelliScan person={e} onOpen={onOpen} />

              {/* notes - last box */}
              <Card title="Notes"><div style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--text-muted)" }}>{e.notes || "-"}</div></Card>
            </div>
          )}

          {tab === "events" && (
            <Card title={`Events (${evs.length})`}>
              {evs.length ? <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
                {evs.map((ev) => <EventRow key={ev.id} ev={ev} />)}
              </div> : <div style={{ fontSize: 13, color: "var(--text-faint)" }}>No events recorded for this person.</div>}
            </Card>
          )}

          {tab === "portfolio" && (
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              {ownedOrgs.length > 0 && <Card title="Account holder for" right={<span className="badge mono">{ownedOrgs.length}</span>}>
                <ChipWrap>{ownedOrgs.map((o) => <EntityChip key={o.id} id={o.id} onOpen={onOpen} />)}</ChipWrap>
              </Card>}
              {contactOrgs.length > 0 && <Card title="Main contact at" right={<span className="badge mono">{contactOrgs.length}</span>}>
                <ChipWrap>{contactOrgs.map((o) => <EntityChip key={o.id} id={o.id} onOpen={onOpen} />)}</ChipWrap>
              </Card>}
              {projects.length > 0 && <Card title="Projects" right={<span className="badge mono">{projects.length}</span>}>
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {projects.map((pr) => (
                    <button key={pr.id} className="focusable" onClick={() => onOpen(pr.id)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 13px", border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface-2)", cursor: "pointer", textAlign: "left" }}>
                      <Icon name="folder" size={16} style={{ color: "var(--text-muted)" }} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 550 }}>{pr.name}</div>
                        <div style={{ fontSize: 12, color: "var(--text-muted)" }}><span className="mono">{pr.year}</span> · {pr.type} · {pr.status}</div>
                      </div>
                      <Icon name="chevronRight" size={16} style={{ color: "var(--text-faint)" }} />
                    </button>
                  ))}
                </div>
              </Card>}
              {ownedOrgs.length === 0 && contactOrgs.length === 0 && projects.length === 0 &&
                <div style={{ fontSize: 13, color: "var(--text-faint)", padding: 8 }}>No organisations or projects linked to this person.</div>}
            </div>
          )}

          {tab === "activity" && (
            <Card title="Activity timeline">
              <div style={{ position: "relative", paddingLeft: 22 }}>
                <div style={{ position: "absolute", left: 5, top: 4, bottom: 4, width: 2, background: "var(--border)" }} />
                {[
                  ...(e.lastContact ? [{ k: "contact", label: `Last interaction · ${e.lastContact}`, sub: "Logged by the relationship team", c: "var(--good)", icon: "phone" }] : []),
                  ...evs.map((ev) => {
                    const st = (e.rsvp && e.rsvp[ev.id]) || "Invited";
                    return { k: ev.id, label: ev.name, sub: `${new Date(ev.date).toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })} · ${st}`, c: (rsvpMeta[st] || rsvpMeta.Invited).c, icon: "calendar", onClick: () => onOpen(ev.id) };
                  }),
                ].map((item, i) => (
                  <div key={item.k + i} onClick={item.onClick} style={{ position: "relative", paddingBottom: 18, cursor: item.onClick ? "pointer" : "default" }}>
                    <span style={{ position: "absolute", left: -22, top: 2, width: 12, height: 12, borderRadius: 999, background: "var(--surface)", border: `2px solid ${item.c}` }} />
                    <div style={{ fontSize: 13.5, fontWeight: 600 }}>{item.label}</div>
                    <div style={{ fontSize: 12, color: "var(--text-muted)", marginTop: 2 }}>{item.sub}</div>
                  </div>
                ))}
                {!e.lastContact && evs.length === 0 && <div style={{ fontSize: 13, color: "var(--text-faint)" }}>No recorded activity yet.</div>}
              </div>
            </Card>
          )}
        </div>
      </div>
    </div>
  );
}

/* ---------------- INITIATIVES (programme areas) ----------------
   Mirrors the Organisations page exactly: master list + tabbed record.  */
function initiativeStats(domId) {
  const D = window.DATA;
  const orgs = D.orgs.filter((o) => o.domain === domId);
  const funded = orgs.filter((o) => o.funded);
  const awarded = orgs.reduce((s, o) => s + (o.funding ? o.funding.awarded : 0), 0);
  const ask = orgs.reduce((s, o) => s + (o.funding ? o.funding.ask : 0), 0);
  const gap = orgs.reduce((s, o) => s + D.orgGap(o), 0);
  const projects = D.projects.filter((p) => orgs.some((o) => o.id === p.org));
  const people = D.people.filter((p) => orgs.some((o) => o.id === p.org));
  const key = orgs.filter((o) => o.priority === "key").length;
  const need = orgs.filter((o) => o.priority === "need").length;
  return { orgs, funded, awarded, ask, gap, projects, people, key, need };
}

const INITIATIVE_AIMS = {
  education: "Improve literacy and learning outcomes through whole-school programmes and open curriculum work.",
  arts: "Sustain a resilient cultural sector - from flagship theatres to grassroots arts networks.",
  science: "Back open science, shared research infrastructure and the next generation of researchers.",
  health: "Expand access to mental-health and community care across under-served regions.",
  civic: "Strengthen local democracy and community-led action through place-based partnerships.",
  media: "Protect independent journalism and fund public-interest investigations.",
};

function InitiativesCRM({ onOpen, onMutate, onViewConnections, onOpenIntel }) {
  const D = window.DATA;
  const [q, setQ] = React.useState("");
  const [filter, setFilter] = React.useState("all");
  const [sel, setSel] = React.useState(D.domains[0] ? D.domains[0].id : null);
  const rows = D.domains.filter((d) => {
    const st = initiativeStats(d.id);
    return (filter === "all" || (filter === "funded" ? st.funded.length > 0 : filter === "gap" ? st.gap > 0 : filter === "key" ? st.key > 0 : true)) &&
      (!q || d.label.toLowerCase().includes(q.toLowerCase()));
  });
  return (
    <CRMShell title="Initiatives" icon="grid" count={rows.length} search={q} setSearch={setQ}
      filters={<FilterPills value={filter} set={setFilter} options={[["all", "All"], ["funded", "Funded"], ["gap", "Has gap"], ["key", "Has key orgs"]]} />}
      detail={sel
        ? <InitiativePage key={sel} id={sel} onOpen={onOpen} onViewConnections={onViewConnections} onOpenIntel={onOpenIntel} />
        : <div style={{ position: "absolute", inset: 0, display: "grid", placeItems: "center", padding: 40 }}><EmptyState icon="grid" title="Select an initiative" body="Choose a programme area to see its full record." /></div>}>
      {rows.map((d) => {
        const active = sel === d.id;
        const st = initiativeStats(d.id);
        return (
          <button key={d.id} className="focusable" onClick={() => setSel(d.id)}
            style={{ display: "flex", gap: 11, width: "100%", textAlign: "left", padding: "10px 11px", marginBottom: 3, borderRadius: 10, border: "1px solid " + (active ? "var(--accent)" : "transparent"), background: active ? "var(--accent-soft)" : "transparent", cursor: "pointer", alignItems: "center" }}
            onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "var(--surface-2)"; }}
            onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}>
            <span style={{ width: 8, height: 8, borderRadius: 999, background: domainColor(d.id), flex: "none" }} />
            <div style={{ minWidth: 0, flex: 1 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: active ? "var(--accent)" : "var(--text)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{d.label}</div>
              <div style={{ fontSize: 11.5, color: "var(--text-muted)" }}>{st.orgs.length} orgs · {st.funded.length} funded</div>
            </div>
            <span className="badge mono" style={{ flex: "none" }}>{D.fmtMoney(st.awarded)}</span>
          </button>
        );
      })}
      {rows.length === 0 && <div style={{ padding: 24, textAlign: "center", fontSize: 13, color: "var(--text-faint)" }}>No initiatives match.</div>}
    </CRMShell>
  );
}

function InitiativePage({ id, onOpen, onViewConnections, onOpenIntel }) {
  const D = window.DATA;
  const d = D.domains.find((x) => x.id === id);
  const [tab, setTab] = React.useState("overview");
  React.useEffect(() => { setTab("overview"); }, [id]);
  if (!d) return null;
  const dc = domainColor(id);
  const st = initiativeStats(id);
  const fmtMoney = D.fmtMoney;
  const fundedPct = st.orgs.length ? Math.round((st.funded.length / st.orgs.length) * 100) : 0;

  const TABS = [
    { id: "overview", label: "Overview", icon: "grid" },
    { id: "orgs", label: "Organisations", icon: "building", n: st.orgs.length },
    { id: "projects", label: "Projects", icon: "folder", n: st.projects.length },
    { id: "people", label: "People", icon: "users", n: st.people.length },
  ];
  const Card = ({ title, children, right }) => (
    <div className="card" style={{ padding: 18 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}><div className="t-eyebrow">{title}</div>{right}</div>
      {children}
    </div>
  );

  return (
    <div style={{ position: "absolute", inset: 0, display: "flex", flexDirection: "column", background: "var(--bg)" }}>
      {/* hero header */}
      <div style={{ flex: "none", borderBottom: "1px solid var(--border)", background: "linear-gradient(180deg, var(--surface-2), var(--surface) 70%)" }}>
        <div style={{ padding: "22px 26px 0" }}>
          <div style={{ display: "flex", alignItems: "flex-start", gap: 16 }}>
            <div style={{ width: 52, height: 52, flex: "none", borderRadius: 14, display: "grid", placeItems: "center", background: domainColor(id, true), color: dc, border: "1px solid var(--border)" }}><Icon name="grid" size={26} /></div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="t-eyebrow" style={{ marginBottom: 4 }}>Programme area</div>
              <div className="display" style={{ fontSize: 30, lineHeight: 1.04 }}>{d.label}</div>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 9, flexWrap: "wrap" }}>
                <span className="badge" style={{ background: "var(--surface-2)" }}><span style={{ width: 7, height: 7, borderRadius: 999, background: dc }} /> {st.orgs.length} organisations</span>
                <span className="badge" style={{ background: "var(--surface-2)" }}>{st.funded.length} funded · {fundedPct}%</span>
                {st.key > 0 && <span className="badge" style={{ background: "var(--accent-soft)", color: "var(--accent)", borderColor: "transparent" }}><Icon name="spark" size={11} /> {st.key} key</span>}
                {st.need > 0 && <span className="badge" style={{ background: "var(--rose-bg)", color: "var(--rose)", borderColor: "transparent" }}>{st.need} high-need</span>}
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 8 }}>
              <span className="badge mono" style={{ fontWeight: 700, fontSize: 13, padding: "6px 11px", background: "var(--surface-2)" }}>{fmtMoney(st.awarded)} committed</span>
              {st.gap > 0 && <span className="badge mono" style={{ color: "var(--rose)", background: "var(--rose-bg)", borderColor: "transparent", fontWeight: 700 }}>{fmtMoney(st.gap)} gap</span>}
            </div>
          </div>
          <div style={{ display: "flex", gap: 4, marginTop: 16 }}>
            {TABS.map((t) => {
              const on = tab === t.id;
              return <button key={t.id + (on ? "1" : "0")} className="focusable" onClick={() => setTab(t.id)}
                style={{ display: "inline-flex", alignItems: "center", gap: 7, font: "inherit", fontSize: 13.5, fontWeight: 550, cursor: "pointer", padding: "9px 14px", border: "none", borderBottom: "2px solid " + (on ? "var(--accent)" : "transparent"), background: "none", color: on ? "var(--text)" : "var(--text-muted)", marginBottom: -1 }}>
                <Icon name={t.icon} size={15} /> {t.label}{t.n != null && <span className="badge mono" style={{ fontSize: 10.5, padding: "1px 6px" }}>{t.n}</span>}
              </button>;
            })}
          </div>
        </div>
      </div>

      <div style={{ flex: 1, overflow: "auto", padding: 26 }}>
        <div style={{ maxWidth: 1000, margin: "0 auto" }}>
          {tab === "overview" && (
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16, alignItems: "start" }}>
              <Card title="Aims & focus"><div style={{ fontSize: 13.5, lineHeight: 1.6, color: "var(--text-muted)" }}>{INITIATIVE_AIMS[id] || "Programme area within the fund's portfolio."}</div></Card>
              <Card title="Funding picture">
                <FieldRow label="Committed" icon="funding"><span className="mono">{fmtMoney(st.awarded)}</span></FieldRow>
                <FieldRow label="Total ask" icon="target"><span className="mono">{fmtMoney(st.ask)}</span></FieldRow>
                <FieldRow label="Open gap" icon="bolt"><span className="mono" style={{ color: st.gap > 0 ? "var(--rose)" : "var(--good)" }}>{st.gap > 0 ? fmtMoney(st.gap) : "Fully funded"}</span></FieldRow>
                <FieldRow label="Funded ratio" icon="building">{st.funded.length} of {st.orgs.length} ({fundedPct}%)</FieldRow>
              </Card>
              <Card title="Portfolio mix">
                <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
                  {["Grantee", "Active supporter", "Prospect"].map((rel) => {
                    const n = st.orgs.filter((o) => o.relationship === rel).length;
                    const pct = st.orgs.length ? Math.round((n / st.orgs.length) * 100) : 0;
                    return (
                      <div key={rel} style={{ display: "flex", alignItems: "center", gap: 12 }}>
                        <div style={{ width: 120, flex: "none", fontSize: 12.5, color: "var(--text-muted)" }}>{rel}</div>
                        <div style={{ flex: 1, height: 8, borderRadius: 5, background: "var(--surface-3)", overflow: "hidden" }}><div style={{ width: pct + "%", height: "100%", background: dc, borderRadius: 5 }} /></div>
                        <div className="mono" style={{ width: 30, textAlign: "right", fontSize: 12, color: "var(--text-muted)" }}>{n}</div>
                      </div>
                    );
                  })}
                </div>
              </Card>
              <Card title="Top organisations">
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {[...st.orgs].sort((a, b) => b.priorityScore - a.priorityScore).slice(0, 4).map((o) => {
                    const band = window.scoreBand ? window.scoreBand(o.priorityScore) : { c: "var(--accent)", bg: "var(--accent-soft)" };
                    return (
                      <button key={o.id} className="focusable" onClick={() => onOpen(o.id)} style={{ display: "flex", alignItems: "center", gap: 10, padding: "9px 11px", border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface-2)", cursor: "pointer", textAlign: "left" }}>
                        <span style={{ width: 7, height: 7, borderRadius: 999, background: dc, flex: "none" }} />
                        <span style={{ flex: 1, fontSize: 13, fontWeight: 550, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{o.name}</span>
                        <span className="badge mono" style={{ color: band.c, background: band.bg, borderColor: "transparent", fontWeight: 700 }}>{o.priorityScore}</span>
                      </button>
                    );
                  })}
                </div>
              </Card>
            </div>
          )}
          {tab === "orgs" && (
            <Card title={`Organisations (${st.orgs.length})`}>
              <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {st.orgs.map((o) => {
                  const band = window.scoreBand ? window.scoreBand(o.priorityScore) : { c: "var(--accent)", bg: "var(--accent-soft)" };
                  return (
                    <button key={o.id} className="focusable" onClick={() => onOpen(o.id)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 13px", border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface-2)", cursor: "pointer", textAlign: "left" }}>
                      <span style={{ width: 8, height: 8, borderRadius: 999, background: domainColor(o.domain), flex: "none" }} />
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 600 }}>{o.name}</div>
                        <div style={{ fontSize: 12, color: "var(--text-muted)" }}>{o.relationship} · {o.geography}</div>
                      </div>
                      <span className="badge mono" style={{ color: band.c, background: band.bg, borderColor: "transparent", fontWeight: 700 }}>{o.priorityScore}</span>
                    </button>
                  );
                })}
              </div>
            </Card>
          )}
          {tab === "projects" && (
            <Card title={`Projects (${st.projects.length})`}>
              {st.projects.length ? <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {st.projects.map((pr) => (
                  <button key={pr.id} className="focusable" onClick={() => onOpen(pr.id)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "11px 13px", border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface-2)", cursor: "pointer", textAlign: "left" }}>
                    <Icon name="folder" size={16} style={{ color: "var(--text-muted)" }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 13.5, fontWeight: 550 }}>{pr.name}</div>
                      <div style={{ fontSize: 12, color: "var(--text-muted)" }}><span className="mono">{pr.year}</span> · {pr.type} · {pr.status}</div>
                    </div>
                    <Icon name="chevronRight" size={16} style={{ color: "var(--text-faint)" }} />
                  </button>
                ))}
              </div> : <div style={{ fontSize: 13, color: "var(--text-faint)" }}>No projects.</div>}
            </Card>
          )}
          {tab === "people" && (
            <Card title={`People (${st.people.length})`}>
              {st.people.length ? <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                {st.people.map((p) => {
                  const org = p.org ? D.byId[p.org] : null;
                  return (
                    <button key={p.id} className="focusable" onClick={() => onOpen(p.id)} style={{ display: "flex", alignItems: "center", gap: 11, padding: "9px 11px", border: "1px solid var(--border)", borderRadius: 10, background: "var(--surface-2)", cursor: "pointer", textAlign: "left" }}>
                      {p.photo ? <Portrait p={p} w={32} h={32} radius={999} /> : <Avatar name={p.name} size={32} accent={p.team} />}
                      <div style={{ flex: 1, minWidth: 0 }}>
                        <div style={{ fontSize: 13, fontWeight: 600 }}>{p.name}</div>
                        <div style={{ fontSize: 11.5, color: "var(--text-muted)" }}>{p.title}{org ? " · " + org.name : ""}</div>
                      </div>
                      <Icon name="chevronRight" size={15} style={{ color: "var(--text-faint)" }} />
                    </button>
                  );
                })}
              </div> : <div style={{ fontSize: 13, color: "var(--text-faint)" }}>No people.</div>}
            </Card>
          )}
        </div>
      </div>
    </div>
  );
}

function Initiatives(props) { return <InitiativesCRM {...props} />; }

Object.assign(window, { PeopleCRM, OrgsCRM, OrgPage, PersonPage, InitiativesCRM, Initiatives });