function CrmExportPanel({ exports = [], templates = [], onCreate, onDownload }) {
  const [target, setTarget] = React.useState('generic');
  const [raw, setRaw] = React.useState('[{"domain":"example.com","companyName":"Example Co","source":"manual"}]');
  function submit() {
    let leads = [];
    try { leads = JSON.parse(raw); } catch (error) { alert('Invalid JSON leads array'); return; }
    onCreate({ target, leads });
  }
  return (
    <section className="free-seo-card">
      <h2>CRM Export</h2>
      <select value={target} onChange={e => setTarget(e.target.value)}>{templates.map(t => <option value={t.id} key={t.id}>{t.label}</option>)}</select>
      <textarea value={raw} onChange={e => setRaw(e.target.value)} rows="6" />
      <button onClick={submit}>Create CRM export</button>
      <ul>{exports.map(item => <li key={item.id}>{item.target} - {item.leadCount} leads <button onClick={() => onDownload(item.id, 'csv')}>CSV</button><button onClick={() => onDownload(item.id, 'markdown')}>Markdown</button></li>)}</ul>
    </section>
  );
}
window.CrmExportPanel = CrmExportPanel;