// Hand-authored SVG glyphs — matches the existing Chekbooks site exactly.
// No icon font, no Lucide. Each icon is a small functional component.

const CheckStroke = ({ size = 14, color = '#3F8074' }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M2 7L5.5 10.5L12 3.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const CheckFilled = ({ size = 16, color = '#3F8074' }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none" style={{flexShrink:0}}>
    <circle cx="8" cy="8" r="8" fill={color}/>
    <path d="M4.5 8L7 10.5L11.5 6" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const XMark = ({ size = 14, color = '#b84040' }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" style={{flexShrink:0}}>
    <path d="M3 3L11 11M11 3L3 11" stroke={color} strokeWidth="2" strokeLinecap="round"/>
  </svg>
);

const Star = ({ size = 16, color = '#C4924A' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={color}>
    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
  </svg>
);

const Plus = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M5 12h14M12 5v14" stroke="#3F8074" strokeWidth="2.5" strokeLinecap="round"/>
  </svg>
);

const Minus = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M5 12h14" stroke="#3F8074" strokeWidth="2.5" strokeLinecap="round"/>
  </svg>
);

const ArrowRight = ({ size = 14, color = '#fff' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M5 12h14M13 6l6 6-6 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Phone = ({ size = 16, color = '#cce0de' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const Mail = ({ size = 16, color = '#cce0de' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <rect x="2" y="4" width="20" height="16" rx="2" stroke={color} strokeWidth="1.7"/>
    <path d="M2 7l10 6 10-6" stroke={color} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// Pain-point resolution check (10x10, used inside Sound Familiar card)
const TinyCheck = () => (
  <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
    <polyline points="1.5,5.5 4,8 8.5,2" stroke="#3F8074" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

Object.assign(window, { CheckStroke, CheckFilled, XMark, Star, Plus, Minus, ArrowRight, Phone, Mail, TinyCheck });
