// Inline SVG icons — sized to match the brand. All take size + color.

const Icon = {
  // Trash bin with tilted lid + handle ridges
  Bin: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M5.5 8.5l1 11.5a2 2 0 002 1.8h7a2 2 0 002-1.8l1-11.5" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
      <path d="M3.5 8.5h17M9 5.5h6" stroke={c} strokeWidth="1.7" strokeLinecap="round"/>
      <path d="M9 5.5l-.7-2A1 1 0 019.3 2h5.4a1 1 0 011 1.5l-.7 2" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/>
      <path d="M10 12.5v5M14 12.5v5" stroke={c} strokeWidth="1.5" strokeLinecap="round"/>
    </svg>
  ),
  // Pressure-washer wand with droplet spray
  Spray: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M3 13.5h7l3-3v6l-3-3" stroke={c} strokeWidth="1.7" strokeLinejoin="round" strokeLinecap="round"/>
      <path d="M5 11v5" stroke={c} strokeWidth="1.7" strokeLinecap="round"/>
      <circle cx="17" cy="8" r="1.2" fill={c}/>
      <circle cx="20" cy="11" r="1" fill={c}/>
      <circle cx="17.5" cy="14" r="1.4" fill={c}/>
      <circle cx="20.5" cy="16.5" r="0.9" fill={c}/>
      <circle cx="15" cy="17.5" r="1" fill={c}/>
    </svg>
  ),
  // House with chimney + door
  House: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M3 11l9-7 9 7v9a1 1 0 01-1 1H4a1 1 0 01-1-1v-9z" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/>
      <path d="M10 21v-5a2 2 0 014 0v5" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/>
      <path d="M16 6V3.5h2V8" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  // Driveway: car icon (replaces zigzag)
  Drive: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M3 14l1.4-4.5A2 2 0 016.3 8h11.4a2 2 0 011.9 1.5L21 14v4a1 1 0 01-1 1h-1.5a1 1 0 01-1-1v-1H6.5v1a1 1 0 01-1 1H4a1 1 0 01-1-1v-4z" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/>
      <path d="M3.5 14h17" stroke={c} strokeWidth="1.5" strokeLinecap="round"/>
      <circle cx="7.5" cy="14" r="1" fill={c}/>
      <circle cx="16.5" cy="14" r="1" fill={c}/>
    </svg>
  ),
  Calendar: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <rect x="3" y="5" width="18" height="16" rx="2.5" stroke={c} strokeWidth="1.7"/>
      <path d="M3 10h18M8 3v4M16 3v4" stroke={c} strokeWidth="1.7" strokeLinecap="round"/>
      <circle cx="8" cy="14" r="1" fill={c}/>
      <circle cx="12" cy="14" r="1" fill={c}/>
      <circle cx="16" cy="14" r="1" fill={c}/>
      <circle cx="8" cy="17.5" r="1" fill={c}/>
      <circle cx="12" cy="17.5" r="1" fill={c}/>
    </svg>
  ),
  Pin: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M12 22s7-7.5 7-13a7 7 0 10-14 0c0 5.5 7 13 7 13z" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/>
      <circle cx="12" cy="9.5" r="2.5" fill={c}/>
    </svg>
  ),
  Check: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M5 12.5l4.5 4.5L19 7" stroke={c} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Arrow: ({s=22, c='currentColor', dir='right'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" style={{transform: dir==='left'?'rotate(180deg)':'none'}}>
      <path d="M5 12h14M13 6l6 6-6 6" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Chevron: ({s=18, c='currentColor', dir='right'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none" style={{transform: dir==='left'?'rotate(180deg)':dir==='down'?'rotate(90deg)':dir==='up'?'rotate(-90deg)':'none'}}>
      <path d="M9 6l6 6-6 6" stroke={c} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  // Pickup truck (replaces box truck)
  Truck: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M2 16V8a1 1 0 011-1h9v9" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/>
      <path d="M12 10h4l4 3.5V16" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/>
      <path d="M2 16h3M9 16h6M19 16h2" stroke={c} strokeWidth="1.7" strokeLinecap="round"/>
      <circle cx="7" cy="17.5" r="2" stroke={c} strokeWidth="1.7" fill="#fff"/>
      <circle cx="17" cy="17.5" r="2" stroke={c} strokeWidth="1.7" fill="#fff"/>
    </svg>
  ),
  Clock: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9" stroke={c} strokeWidth="1.7"/>
      <path d="M12 7v5l3.5 2" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Plus: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M12 5v14M5 12h14" stroke={c} strokeWidth="2.4" strokeLinecap="round"/>
    </svg>
  ),
  Minus: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M5 12h14" stroke={c} strokeWidth="2.4" strokeLinecap="round"/>
    </svg>
  ),
  Repeat: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M3 9.5l3-3 3 3M6 6.5v9a3 3 0 003 3h6.5M21 14.5l-3 3-3-3M18 17.5v-9a3 3 0 00-3-3H8.5" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  // Shield with checkmark
  Shield: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M12 2.5l8 3v6c0 5-3.5 8.5-8 9.5-4.5-1-8-4.5-8-9.5v-6l8-3z" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/>
      <path d="M8.5 12l2.5 2.5L15.5 10" stroke={c} strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  Star: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}>
      <path d="M12 2l2.9 6.9 7.4.6-5.6 4.9 1.7 7.3L12 17.8 5.6 21.7l1.7-7.3L1.7 9.5l7.4-.6L12 2z"/>
    </svg>
  ),
  // Phone-with-message bubble
  Phone: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M5 4h4l2 5-3 2a12 12 0 005 5l2-3 5 2v4a2 2 0 01-2 2A17 17 0 013 6a2 2 0 012-2z" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/>
    </svg>
  ),
  // Water droplet with highlight
  Drop: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill="none">
      <path d="M12 3.5C12 3.5 5 11 5 15.5a7 7 0 0014 0C19 11 12 3.5 12 3.5z" stroke={c} strokeWidth="1.7" strokeLinejoin="round"/>
      <path d="M9 15.5a3 3 0 003 3" stroke={c} strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
    </svg>
  ),
  Lightning: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}>
      <path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/>
    </svg>
  ),
  // 4-point sparkle
  Sparkle: ({s=22, c='currentColor'}) => (
    <svg width={s} height={s} viewBox="0 0 24 24" fill={c}>
      <path d="M12 3c.5 4 2 5.5 6 6-4 .5-5.5 2-6 6-.5-4-2-5.5-6-6 4-.5 5.5-2 6-6z"/>
      <path d="M19 14c.3 2 1 2.7 3 3-2 .3-2.7 1-3 3-.3-2-1-2.7-3-3 2-.3 2.7-1 3-3z" opacity="0.6"/>
    </svg>
  ),
};

window.Icon = Icon;
