{
  "id": "agent-sdr",
  "name": "Sales Development Rep",
  "category": "agents",
  "tags": ["sales", "sdr", "lead", "outreach", "crm"],
  "description": "Sales development rep with lead qualification form and outreach tracker.",
  "triggers": ["sales rep", "sdr", "lead qualifier", "outreach"],
  "defaultSize": { "w": 4, "h": 4 },
  "source": "const AgentSDR = () => {\n  const [leads, setLeads] = React.useState([\n    { id: 1, name: 'Acme Inc', contact: 'Jane Doe', score: 85, status: 'qualified', lastTouch: '2d ago' },\n    { id: 2, name: 'BetaCorp', contact: 'John Smith', score: 62, status: 'contacted', lastTouch: '5d ago' },\n    { id: 3, name: 'Gamma LLC', contact: 'Alice Lee', score: 45, status: 'new', lastTouch: '-' }\n  ]);\n  const [form, setForm] = React.useState({ name: '', contact: '', score: '', status: 'new' });\n  const [filter, setFilter] = React.useState('all');\n\n  const addLead = () => {\n    if (!form.name || !form.contact) return;\n    setLeads([{ id: Date.now(), name: form.name, contact: form.contact, score: Number(form.score) || 0, status: form.status, lastTouch: 'Just now' }, ...leads]);\n    setForm({ name: '', contact: '', score: '', status: 'new' });\n  };\n\n  const statusColor = (s) => ({ new: '#6b7280', contacted: '#2563eb', qualified: '#16a34a', lost: '#dc2626' }[s] || '#6b7280');\n  const scoreColor = (s) => s >= 80 ? '#16a34a' : s >= 50 ? '#ca8a04' : '#dc2626';\n\n  const filtered = filter === 'all' ? leads : leads.filter(l => l.status === filter);\n\n  return React.createElement('div', { style: { fontFamily: 'system-ui, sans-serif', padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px', height: '100%', overflow: 'auto' } },\n    React.createElement('h3', { style: { margin: 0, fontSize: '16px', fontWeight: 600, color: '#111827' } }, 'Sales Development Rep'),\n    React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' } },\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px' } },\n        React.createElement('div', { style: { fontSize: '12px', fontWeight: 600, color: '#6b7280', marginBottom: '4px', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Qualify Lead'),\n        React.createElement('input', { value: form.name, onChange: e => setForm({ ...form, name: e.target.value }), placeholder: 'Company Name', style: { fontSize: '12px', padding: '6px', borderRadius: '4px', border: '1px solid #d1d5db' } }),\n        React.createElement('input', { value: form.contact, onChange: e => setForm({ ...form, contact: e.target.value }), placeholder: 'Contact Name', style: { fontSize: '12px', padding: '6px', borderRadius: '4px', border: '1px solid #d1d5db' } }),\n        React.createElement('input', { type: 'number', value: form.score, onChange: e => setForm({ ...form, score: e.target.value }), placeholder: 'Qualification Score (0-100)', style: { fontSize: '12px', padding: '6px', borderRadius: '4px', border: '1px solid #d1d5db' } }),\n        React.createElement('select', { value: form.status, onChange: e => setForm({ ...form, status: e.target.value }), style: { fontSize: '12px', padding: '6px', borderRadius: '4px', border: '1px solid #d1d5db' } },\n          React.createElement('option', { value: 'new' }, 'New'),\n          React.createElement('option', { value: 'contacted' }, 'Contacted'),\n          React.createElement('option', { value: 'qualified' }, 'Qualified'),\n          React.createElement('option', { value: 'lost' }, 'Lost')\n        ),\n        React.createElement('button', { onClick: addLead, style: { fontSize: '12px', padding: '8px', borderRadius: '4px', border: 'none', background: '#2563eb', color: '#fff', cursor: 'pointer', fontWeight: 600 } }, 'Add Lead')\n      ),\n      React.createElement('div', { style: { background: '#f9fafb', borderRadius: '8px', padding: '12px', display: 'flex', flexDirection: 'column', gap: '8px' } },\n        React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },\n          React.createElement('div', { style: { fontSize: '12px', fontWeight: 600, color: '#6b7280', textTransform: 'uppercase', letterSpacing: '0.05em' } }, 'Outreach Tracker'),\n          React.createElement('select', { value: filter, onChange: e => setFilter(e.target.value), style: { fontSize: '11px', padding: '4px', borderRadius: '4px', border: '1px solid #d1d5db' } },\n            React.createElement('option', { value: 'all' }, 'All'),\n            React.createElement('option', { value: 'new' }, 'New'),\n            React.createElement('option', { value: 'contacted' }, 'Contacted'),\n            React.createElement('option', { value: 'qualified' }, 'Qualified'),\n            React.createElement('option', { value: 'lost' }, 'Lost')\n          )\n        ),\n        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: '6px', overflow: 'auto' } },\n          filtered.map(l => React.createElement('div', { key: l.id, style: { background: '#fff', borderRadius: '6px', padding: '10px', border: '1px solid #e5e7eb' } },\n            React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' } },\n              React.createElement('span', { style: { fontWeight: 600, fontSize: '13px', color: '#111827' } }, l.name),\n              React.createElement('span', { style: { fontSize: '11px', fontWeight: 600, color: statusColor(l.status), textTransform: 'uppercase' } }, l.status)\n            ),\n            React.createElement('div', { style: { fontSize: '12px', color: '#374151', marginBottom: '4px' } }, l.contact),\n            React.createElement('div', { style: { display: 'flex', justifyContent: 'space-between', alignItems: 'center' } },\n              React.createElement('span', { style: { fontSize: '11px', color: scoreColor(l.score), fontWeight: 700 } }, 'Score: ', l.score),\n              React.createElement('span', { style: { fontSize: '11px', color: '#9ca3af' } }, l.lastTouch)\n            )\n          ))\n        )\n      )\n    )\n  );\n};\nrender(<AgentSDR/>);",
  "placeholders": [{ "name": "REPLACE_WITH_CRM_WEBHOOK", "description": "Webhook URL to sync leads with CRM", "default": "https://api.example.com/crm/leads" }]
}