// Suspect roster — left column
function Roster({ suspects, activeId, listened, onPick }) {
  return (
    <aside className="roster">
      <div className="col-header">
        <span className="col-header-num">01</span>
        <span className="col-header-label">SUSPECTS</span>
        <span className="col-header-count">{listened.size}/{suspects.length}</span>
      </div>
      <div className="roster-list">
        {suspects.map((s, i) => {
          const isActive = s.id === activeId;
          const heard = listened.has(s.id);
          return (
            <button
              key={s.id}
              className={"suspect-card" + (isActive ? " active" : "") + (heard ? " heard" : "")}
              onClick={() => onPick(s.id)}
            >
              <div className="suspect-portrait">
                <SuspectSilhouette id={s.id} />
                <div className="suspect-portrait-grid" />
              </div>
              <div className="suspect-meta">
                <div className="suspect-num">No. 0{i + 1}</div>
                <div className="suspect-name">{s.name}</div>
                <div className="suspect-role">{s.role}</div>
                <div className="suspect-status">
                  <span className={"dot " + (heard ? "on" : "off")} />
                  <span>{heard ? "LISTENED" : "NOT LISTENED"}</span>
                </div>
              </div>
            </button>
          );
        })}
      </div>
    </aside>
  );
}

function SuspectSilhouette({ id }) {
  // Four distinct profile silhouettes — abstract, no faces.
  const paths = {
    husband:
      "M50 102 C50 78 62 68 78 68 C92 68 100 56 100 42 C100 28 90 18 76 18 C58 18 48 32 48 46 C48 56 52 62 52 70 L52 84 L36 92 L36 130 L100 130 L100 102 Z",
    maid:
      "M50 130 L50 100 C50 84 60 76 70 74 C70 64 64 56 64 44 C64 28 74 20 86 20 C98 20 108 30 108 44 C108 56 102 64 102 74 C112 76 122 84 122 100 L122 130 Z",
    partner:
      "M40 130 L40 102 C40 88 50 80 64 78 L64 70 C58 64 54 56 54 46 C54 30 64 20 78 20 C92 20 102 30 102 46 C102 56 98 64 92 70 L92 78 C106 80 116 88 116 102 L116 130 Z",
    daughter:
      "M44 130 L44 104 C44 92 52 84 62 80 L62 76 C56 70 52 60 52 48 C52 30 62 18 78 18 C94 18 104 30 104 48 C104 60 100 70 94 76 L94 80 C104 84 112 92 112 104 L112 130 Z M62 76 C56 86 52 100 56 130",
  };
  return (
    <svg viewBox="0 0 156 130" className="silhouette" preserveAspectRatio="xMidYMax meet">
      <path d={paths[id] || paths.husband} fill="currentColor" />
    </svg>
  );
}

window.Roster = Roster;
window.SuspectSilhouette = SuspectSilhouette;