// ESIGN PLATFORM — custom SVG icon library (stroke-based, 16x16, 1.5px)
// All icons accept { size, color, strokeWidth } and render currentColor-compatible SVG.

const EsIcon = ({ size = 16, color = 'currentColor', strokeWidth = 1.5, children, viewBox = '0 0 16 16' }) => (
  <svg width={size} height={size} viewBox={viewBox} fill="none" stroke={color}
    strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
    style={{ display: 'block', flexShrink: 0 }}>
    {children}
  </svg>
);

const EsIcons = {
  // Platform — pen nib / signature
  Signature: (p) => (
    <EsIcon {...p}>
      <path d="M2 14 L6 10 L12 4 L14 6 L8 12 L4 14 Z" />
      <path d="M11 5 L13 7" />
      <path d="M2 14 L4 12" />
    </EsIcon>
  ),
  // Inbox — tray with line
  Inbox: (p) => (
    <EsIcon {...p}>
      <path d="M2 9 L2 13 A1 1 0 0 0 3 14 L13 14 A1 1 0 0 0 14 13 L14 9" />
      <path d="M2 9 L4 3 L12 3 L14 9" />
      <path d="M2 9 L5.5 9 L7 11 L9 11 L10.5 9 L14 9" />
    </EsIcon>
  ),
  // Envelope
  Envelope: (p) => (
    <EsIcon {...p}>
      <rect x="1.5" y="3.5" width="13" height="9" rx="1" />
      <path d="M1.5 4.5 L8 9 L14.5 4.5" />
    </EsIcon>
  ),
  // Compose — square with pen
  Compose: (p) => (
    <EsIcon {...p}>
      <path d="M13 3 L13.5 2.5 A1 1 0 0 1 15 4 L14.5 4.5 L9 10 L7 10.5 L7.5 8.5 Z" />
      <path d="M12 5 L3 5 L3 13 L11 13 L11 7" />
    </EsIcon>
  ),
  // Template — stacked documents
  Template: (p) => (
    <EsIcon {...p}>
      <rect x="4" y="2" width="9" height="11" rx="1" />
      <rect x="2" y="4" width="9" height="11" rx="1" fill="var(--es-tmpl-fill, transparent)" />
      <path d="M4.5 7.5 L8.5 7.5" />
      <path d="M4.5 10 L8.5 10" />
      <path d="M4.5 12.5 L7 12.5" />
    </EsIcon>
  ),
  // Bulk — grid 2x2
  Bulk: (p) => (
    <EsIcon {...p}>
      <rect x="2" y="2" width="5" height="5" rx="0.5" />
      <rect x="9" y="2" width="5" height="5" rx="0.5" />
      <rect x="2" y="9" width="5" height="5" rx="0.5" />
      <rect x="9" y="9" width="5" height="5" rx="0.5" />
    </EsIcon>
  ),
  // Audit — shield check
  Audit: (p) => (
    <EsIcon {...p}>
      <path d="M8 1.5 L13.5 3.5 L13.5 8 Q13.5 12 8 14.5 Q2.5 12 2.5 8 L2.5 3.5 Z" />
      <path d="M5.5 8 L7.5 10 L11 6.5" />
    </EsIcon>
  ),
  // Contacts — user circle
  Contacts: (p) => (
    <EsIcon {...p}>
      <circle cx="8" cy="5.5" r="2.5" />
      <path d="M3 13.5 Q3 9.5 8 9.5 Q13 9.5 13 13.5" />
    </EsIcon>
  ),
  // Analytics — bar chart
  Analytics: (p) => (
    <EsIcon {...p}>
      <path d="M2 14 L14 14" />
      <rect x="3" y="9" width="2" height="5" />
      <rect x="7" y="6" width="2" height="8" />
      <rect x="11" y="3" width="2" height="11" />
    </EsIcon>
  ),
  // Seal — certificate ribbon
  Seal: (p) => (
    <EsIcon {...p}>
      <circle cx="8" cy="6.5" r="4" />
      <path d="M5.5 9.5 L4.5 14 L8 12 L11.5 14 L10.5 9.5" />
      <circle cx="8" cy="6.5" r="1.5" />
    </EsIcon>
  ),
  // Plus
  Plus: (p) => (
    <EsIcon {...p}>
      <path d="M8 3 L8 13" />
      <path d="M3 8 L13 8" />
    </EsIcon>
  ),
  // X / close
  X: (p) => (
    <EsIcon {...p}>
      <path d="M3.5 3.5 L12.5 12.5" />
      <path d="M12.5 3.5 L3.5 12.5" />
    </EsIcon>
  ),
  // Chevron right
  ChevronRight: (p) => (
    <EsIcon {...p}>
      <path d="M6 3 L11 8 L6 13" />
    </EsIcon>
  ),
  ChevronDown: (p) => (
    <EsIcon {...p}>
      <path d="M3 6 L8 11 L13 6" />
    </EsIcon>
  ),
  // Download
  Download: (p) => (
    <EsIcon {...p}>
      <path d="M8 2 L8 11" />
      <path d="M4 7.5 L8 11.5 L12 7.5" />
      <path d="M2.5 14 L13.5 14" />
    </EsIcon>
  ),
  // Check
  Check: (p) => (
    <EsIcon {...p}>
      <path d="M3 8.5 L6.5 12 L13 4.5" />
    </EsIcon>
  ),
  // Clock
  Clock: (p) => (
    <EsIcon {...p}>
      <circle cx="8" cy="8" r="6" />
      <path d="M8 4.5 L8 8 L10.5 9.5" />
    </EsIcon>
  ),
  // Eye
  Eye: (p) => (
    <EsIcon {...p}>
      <path d="M1.5 8 Q4.5 3.5 8 3.5 Q11.5 3.5 14.5 8 Q11.5 12.5 8 12.5 Q4.5 12.5 1.5 8 Z" />
      <circle cx="8" cy="8" r="1.8" />
    </EsIcon>
  ),
  // X circle
  XCircle: (p) => (
    <EsIcon {...p}>
      <circle cx="8" cy="8" r="6" />
      <path d="M5.5 5.5 L10.5 10.5" />
      <path d="M10.5 5.5 L5.5 10.5" />
    </EsIcon>
  ),
  // Alert triangle
  Alert: (p) => (
    <EsIcon {...p}>
      <path d="M8 2 L14.5 13 L1.5 13 Z" />
      <path d="M8 6 L8 9.5" />
      <circle cx="8" cy="11.5" r="0.5" fill={p && p.color ? p.color : 'currentColor'} />
    </EsIcon>
  ),
  // Calendar
  Calendar: (p) => (
    <EsIcon {...p}>
      <rect x="2" y="3" width="12" height="11" rx="1" />
      <path d="M2 6.5 L14 6.5" />
      <path d="M5 1.5 L5 4" />
      <path d="M11 1.5 L11 4" />
    </EsIcon>
  ),
  // Text field (T)
  Text: (p) => (
    <EsIcon {...p}>
      <path d="M3 4 L13 4" />
      <path d="M8 4 L8 13" />
      <path d="M6 13 L10 13" />
    </EsIcon>
  ),
  // Checkbox
  Checkbox: (p) => (
    <EsIcon {...p}>
      <rect x="2.5" y="2.5" width="11" height="11" rx="1.5" />
      <path d="M5 8.5 L7.5 11 L11.5 5.5" />
    </EsIcon>
  ),
  // Initial — lowercase i / circled dot
  Initial: (p) => (
    <EsIcon {...p}>
      <circle cx="8" cy="8" r="6" />
      <path d="M8 7 L8 11.5" />
      <circle cx="8" cy="5" r="0.6" fill={p && p.color ? p.color : 'currentColor'} />
    </EsIcon>
  ),
  // Sparkle — AI detect
  Sparkle: (p) => (
    <EsIcon {...p}>
      <path d="M8 2 L9 6 L13 7 L9 8 L8 12 L7 8 L3 7 L7 6 Z" />
      <path d="M13 11 L13.5 12.5 L15 13 L13.5 13.5 L13 15 L12.5 13.5 L11 13 L12.5 12.5 Z" />
    </EsIcon>
  ),
  // Filter
  Filter: (p) => (
    <EsIcon {...p}>
      <path d="M2 3.5 L14 3.5 L9.5 9 L9.5 13.5 L6.5 12 L6.5 9 Z" />
    </EsIcon>
  ),
  // Search
  Search: (p) => (
    <EsIcon {...p}>
      <circle cx="7" cy="7" r="4.5" />
      <path d="M10.5 10.5 L13.5 13.5" />
    </EsIcon>
  ),
  // More horizontal
  More: (p) => (
    <EsIcon {...p}>
      <circle cx="3.5" cy="8" r="0.8" fill={p && p.color ? p.color : 'currentColor'} />
      <circle cx="8" cy="8" r="0.8" fill={p && p.color ? p.color : 'currentColor'} />
      <circle cx="12.5" cy="8" r="0.8" fill={p && p.color ? p.color : 'currentColor'} />
    </EsIcon>
  ),
  // Drag handle
  Drag: (p) => (
    <EsIcon {...p}>
      <circle cx="6" cy="4" r="0.8" fill={p && p.color ? p.color : 'currentColor'} />
      <circle cx="10" cy="4" r="0.8" fill={p && p.color ? p.color : 'currentColor'} />
      <circle cx="6" cy="8" r="0.8" fill={p && p.color ? p.color : 'currentColor'} />
      <circle cx="10" cy="8" r="0.8" fill={p && p.color ? p.color : 'currentColor'} />
      <circle cx="6" cy="12" r="0.8" fill={p && p.color ? p.color : 'currentColor'} />
      <circle cx="10" cy="12" r="0.8" fill={p && p.color ? p.color : 'currentColor'} />
    </EsIcon>
  ),
  // Upload
  Upload: (p) => (
    <EsIcon {...p}>
      <path d="M8 11 L8 2.5" />
      <path d="M4 6 L8 2 L12 6" />
      <path d="M2.5 14 L13.5 14" />
    </EsIcon>
  ),
  // Send — paper plane
  Send: (p) => (
    <EsIcon {...p}>
      <path d="M2 8 L14 2 L11 14 L8 9 Z" />
      <path d="M8 9 L14 2" />
    </EsIcon>
  ),
  // Doc — page with fold
  Doc: (p) => (
    <EsIcon {...p}>
      <path d="M3 2 L10 2 L13 5 L13 14 L3 14 Z" />
      <path d="M10 2 L10 5 L13 5" />
      <path d="M5.5 8 L10.5 8" />
      <path d="M5.5 10.5 L10.5 10.5" />
    </EsIcon>
  ),
  // User plus
  UserPlus: (p) => (
    <EsIcon {...p}>
      <circle cx="6" cy="5.5" r="2.2" />
      <path d="M2 13 Q2 9.5 6 9.5 Q9 9.5 10 11" />
      <path d="M12.5 10 L12.5 14" />
      <path d="M10.5 12 L14.5 12" />
    </EsIcon>
  ),
  // Link
  Link: (p) => (
    <EsIcon {...p}>
      <path d="M7 9 Q5 11 4 10 Q2.5 8.5 4 7 L6 5 Q7.5 3.5 9 5 Q10 6 9 7.5" />
      <path d="M9 7 Q11 5 12 6 Q13.5 7.5 12 9 L10 11 Q8.5 12.5 7 11 Q6 10 7 8.5" />
    </EsIcon>
  ),
  // Dot — colored status dot
  Dot: ({ size = 8, color = 'currentColor' }) => (
    <svg width={size} height={size} viewBox="0 0 8 8" style={{ display: 'block', flexShrink: 0 }}>
      <circle cx="4" cy="4" r="3.5" fill={color} />
    </svg>
  ),
  // Shield (compliance / privilege)
  Shield: (p) => (
    <EsIcon {...p}>
      <path d="M8 1.5 L13.5 3.5 L13.5 8 Q13.5 12 8 14.5 Q2.5 12 2.5 8 L2.5 3.5 Z" />
    </EsIcon>
  ),
  // Gavel (notary / court / legal action)
  Gavel: (p) => (
    <EsIcon {...p}>
      <path d="M2 9 L7 4" />
      <path d="M4.5 1.5 L9.5 6.5" />
      <path d="M5.5 0.5 L10.5 5.5" />
      <path d="M9 6 L14 11 L11 14 L6 9 Z" />
      <path d="M2 14 L6 14" />
    </EsIcon>
  ),
  // Webcam (RON session)
  Webcam: (p) => (
    <EsIcon {...p}>
      <rect x="1.5" y="4" width="9" height="8" rx="1" />
      <path d="M10.5 7 L14.5 4.5 L14.5 11.5 L10.5 9 Z" />
    </EsIcon>
  ),
  // Fingerprint (KBA / identity)
  Fingerprint: (p) => (
    <EsIcon {...p}>
      <path d="M4 11 Q4 6 8 6 Q12 6 12 11" />
      <path d="M5.5 13 Q5.5 8 8 8 Q10.5 8 10.5 12" />
      <path d="M7 14 Q7 10 8 10 Q9 10 9 13" />
      <path d="M3 8 Q4.5 4 8 4 Q11.5 4 13 7" />
    </EsIcon>
  ),
  // Chain (hash chain / blockchain)
  Chain: (p) => (
    <EsIcon {...p}>
      <rect x="2" y="5" width="5" height="6" rx="2.5" />
      <rect x="9" y="5" width="5" height="6" rx="2.5" />
      <path d="M7 8 L9 8" />
    </EsIcon>
  ),
  // Code (SDK / embed)
  Code: (p) => (
    <EsIcon {...p}>
      <path d="M5 4 L1.5 8 L5 12" />
      <path d="M11 4 L14.5 8 L11 12" />
      <path d="M9.5 3 L6.5 13" />
    </EsIcon>
  ),
  // Webhook
  Webhook: (p) => (
    <EsIcon {...p}>
      <circle cx="5" cy="4.5" r="1.8" />
      <circle cx="11.5" cy="11.5" r="1.8" />
      <circle cx="3.5" cy="11.5" r="1.8" />
      <path d="M5.5 6 L8 10" />
      <path d="M10 10 L7 5.5" />
      <path d="M5.5 11.5 L9.5 11.5" />
    </EsIcon>
  ),
  // Payment (card)
  Payment: (p) => (
    <EsIcon {...p}>
      <rect x="1.5" y="4" width="13" height="9" rx="1" />
      <path d="M1.5 7 L14.5 7" />
      <path d="M3.5 10.5 L6 10.5" />
    </EsIcon>
  ),
  // Key (vault)
  Key: (p) => (
    <EsIcon {...p}>
      <circle cx="5" cy="11" r="2.5" />
      <path d="M7 9.5 L14 2.5" />
      <path d="M11 5.5 L13 7.5" />
      <path d="M12.5 4 L14 5.5" />
    </EsIcon>
  ),
  // Lock
  Lock: (p) => (
    <EsIcon {...p}>
      <rect x="3" y="7" width="10" height="7" rx="1" />
      <path d="M5 7 L5 4.5 Q5 2 8 2 Q11 2 11 4.5 L11 7" />
    </EsIcon>
  ),
  // Flag (risk / governance)
  Flag: (p) => (
    <EsIcon {...p}>
      <path d="M3 14 L3 2" />
      <path d="M3 2 L13 2 L11 5.5 L13 9 L3 9" />
    </EsIcon>
  ),
  // Gear (settings)
  Gear: (p) => (
    <EsIcon {...p}>
      <circle cx="8" cy="8" r="2.5" />
      <path d="M8 1 L8 3 M8 13 L8 15 M1 8 L3 8 M13 8 L15 8 M3 3 L4.5 4.5 M11.5 11.5 L13 13 M3 13 L4.5 11.5 M11.5 4.5 L13 3" />
    </EsIcon>
  ),
  // Network / DAG
  Network: (p) => (
    <EsIcon {...p}>
      <circle cx="3" cy="4" r="1.5" />
      <circle cx="13" cy="4" r="1.5" />
      <circle cx="8" cy="12" r="1.5" />
      <path d="M4 5 L7.3 10.8" />
      <path d="M12 5 L8.7 10.8" />
      <path d="M4.5 4 L11.5 4" />
    </EsIcon>
  ),
  // Branch (conditional routing)
  Branch: (p) => (
    <EsIcon {...p}>
      <circle cx="4" cy="3" r="1.2" />
      <circle cx="4" cy="13" r="1.2" />
      <circle cx="12" cy="7" r="1.2" />
      <path d="M4 4.2 L4 11.8" />
      <path d="M4 7 Q4 6 8 6 L10.8 6.5" />
    </EsIcon>
  ),
  // Brain (AI)
  Brain: (p) => (
    <EsIcon {...p}>
      <path d="M7.5 2 Q5 2 4 4 Q2 4.5 2 6.5 Q2 8 3 9 Q2.5 10.5 3.5 12 Q5 13.5 7.5 13 L7.5 2 Z" />
      <path d="M8.5 2 Q11 2 12 4 Q14 4.5 14 6.5 Q14 8 13 9 Q13.5 10.5 12.5 12 Q11 13.5 8.5 13 L8.5 2 Z" />
      <path d="M5 7 L8 7 L11 7" />
    </EsIcon>
  ),
  // Notary star / seal
  Star: (p) => (
    <EsIcon {...p}>
      <path d="M8 1.5 L9.8 5.7 L14.3 6.3 L11 9.4 L11.9 14 L8 11.8 L4.1 14 L5 9.4 L1.7 6.3 L6.2 5.7 Z" />
    </EsIcon>
  ),
  // Scale (compliance)
  Scale: (p) => (
    <EsIcon {...p}>
      <path d="M8 2 L8 14" />
      <path d="M4 14 L12 14" />
      <path d="M3 3 L13 3" />
      <path d="M5 3 L2 9 Q2 10.5 5 10.5 Q8 10.5 8 9 Z" />
      <path d="M11 3 L8 9 Q8 10.5 11 10.5 Q14 10.5 14 9 Z" />
    </EsIcon>
  ),
  // Refresh (retry / rerun)
  Refresh: (p) => (
    <EsIcon {...p}>
      <path d="M2 8 Q2 3 8 3 Q11.5 3 13.5 5.5" />
      <path d="M14 8 Q14 13 8 13 Q4.5 13 2.5 10.5" />
      <path d="M11 2 L13.5 5.5 L10 6.5" />
      <path d="M5 14 L2.5 10.5 L6 9.5" />
    </EsIcon>
  ),
  // Bell (reminders / nudge)
  Bell: (p) => (
    <EsIcon {...p}>
      <path d="M4 11 L4 7 Q4 3.5 8 3.5 Q12 3.5 12 7 L12 11 L13 12.5 L3 12.5 Z" />
      <path d="M6.5 13.5 Q7 14.5 8 14.5 Q9 14.5 9.5 13.5" />
      <path d="M8 2 L8 3.5" />
    </EsIcon>
  ),
  // ID card (verification)
  IdCard: (p) => (
    <EsIcon {...p}>
      <rect x="1.5" y="3.5" width="13" height="9" rx="1" />
      <circle cx="5" cy="7.5" r="1.5" />
      <path d="M2.5 11 Q2.5 9 5 9 Q7.5 9 7.5 11" />
      <path d="M9 6.5 L13 6.5" />
      <path d="M9 9 L12 9" />
    </EsIcon>
  ),
  // Redline (strikethrough + pen)
  Redline: (p) => (
    <EsIcon {...p}>
      <path d="M3 4 L12 4" />
      <path d="M3 7 L13 7" strokeDasharray="2 1.5" />
      <path d="M3 10 L10 10" />
      <path d="M11 9 L14 12 L12.5 13.5 L9.5 10.5 Z" />
    </EsIcon>
  ),
  // Phone (SMS nudge)
  Phone: (p) => (
    <EsIcon {...p}>
      <rect x="4.5" y="1.5" width="7" height="13" rx="1" />
      <path d="M4.5 4 L11.5 4" />
      <path d="M4.5 11.5 L11.5 11.5" />
      <circle cx="8" cy="13" r="0.3" fill={p && p.color ? p.color : 'currentColor'} />
    </EsIcon>
  ),
  // Witness (two people)
  Witness: (p) => (
    <EsIcon {...p}>
      <circle cx="5.5" cy="5" r="1.8" />
      <circle cx="10.5" cy="5" r="1.8" />
      <path d="M2 12.5 Q2 9 5.5 9 Q9 9 9 12.5" />
      <path d="M7 12.5 Q7 9 10.5 9 Q14 9 14 12.5" />
    </EsIcon>
  ),
};

window.EsIcons = EsIcons;