function Notes({ clients: _clients, onOpenClient }) {
  const src = (_clients || CLIENTS).filter(c => c.notes && c.notes.trim().length > 0);
  const [selected, setSelected] = React.useState(src[0]?.id || null);
  const client = src.find(c => c.id === selected);

  return (
    <div className="cm-page" style={{ display:"flex", flexDirection:"column", overflow:"hidden" }}>
      <div className="cm-bar">
        <div className="cm-bar__l">
          <span className="cm-bar__crumb">Notes <span className="cm-bar__crumbSep">/</span> <span className="cm-bar__crumbMuted">All clients</span></span>
        </div>
        <div className="cm-bar__r">
          <span style={{ fontSize:12, color:"var(--color-ink-subtle)" }}>{src.length} notes</span>
        </div>
      </div>

      <div style={{ display:"flex", flex:1, overflow:"hidden" }}>
        {/* Client list */}
        <div style={{ width:240, borderRight:"1px solid var(--color-hairline)", overflowY:"auto", flexShrink:0 }}>
          {src.map(c => (
            <div key={c.id} onClick={() => setSelected(c.id)} style={{
              padding:"10px 14px", cursor:"pointer", borderBottom:"1px solid var(--color-hairline)",
              background: selected === c.id ? "var(--color-surface-2)" : "transparent",
            }}>
              <div style={{ display:"flex", alignItems:"center", gap:6, marginBottom:2 }}>
                <span className="cm-side__dot" style={{ background: stageColor(c.stage), flexShrink:0 }} />
                <span style={{ fontSize:13, fontWeight:500, color:"var(--color-ink)", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap" }}>{c.name}</span>
              </div>
              <div style={{ fontSize:11.5, color:"var(--color-ink-subtle)", overflow:"hidden", textOverflow:"ellipsis", whiteSpace:"nowrap", paddingLeft:14 }}>
                {c.notes}
              </div>
            </div>
          ))}
          {src.length === 0 && (
            <div style={{ padding:20, fontSize:12, color:"var(--color-ink-subtle)" }}>No notes yet. Add notes in a client drawer.</div>
          )}
        </div>

        {/* Note content */}
        <div style={{ flex:1, padding:24, overflowY:"auto" }}>
          {client ? (
            <>
              <div style={{ display:"flex", alignItems:"center", gap:10, marginBottom:16 }}>
                <span className="cm-side__dot" style={{ background: stageColor(client.stage), width:10, height:10 }} />
                <span style={{ fontSize:16, fontWeight:600, color:"var(--color-ink)" }}>{client.name}</span>
                <span style={{ fontSize:12, color:"var(--color-ink-subtle)", marginLeft:2 }}>{client.city}</span>
                <button className="cm-btn cm-btn--ghost" style={{ marginLeft:"auto" }} onClick={() => onOpenClient && onOpenClient(client.id)}>
                  <i data-lucide="external-link" className="cm-icon-xs"></i>Open client
                </button>
              </div>
              <div style={{ fontSize:13, color:"var(--color-ink-muted)", lineHeight:1.7, whiteSpace:"pre-wrap", background:"var(--color-surface-1)", border:"1px solid var(--color-hairline)", borderRadius:8, padding:16 }}>
                {client.notes}
              </div>
            </>
          ) : (
            <div style={{ display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", height:"100%", gap:8, color:"var(--color-ink-subtle)" }}>
              <i data-lucide="sticky-note" className="cm-icon-lg"></i>
              <p style={{ fontSize:13, margin:0 }}>Select a client to view their notes.</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
window.Notes = Notes;