/* Cantinho Kids — ícones inline (estilo Lucide, traço 2px, pontas redondas)
   + a marca cabide-coração desenhada em SVG (pra decorar e animar).      */

const ICON_PATHS = {
  menu:        '<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>',
  x:           '<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>',
  heart:       '<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z"/>',
  sparkles:    '<path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2 2M16 16l2 2M18 6l-2 2M8 16l-2 2"/>',
  recycle:     '<path d="M7 19H4.8a2 2 0 0 1-1.7-3l1.5-2.6"/><path d="M9.3 4.7 11 2l1.7 2.7 2.6 4.4"/><path d="M14 16.5h3.2a2 2 0 0 0 1.7-3l-1.4-2.4"/><path d="m18.5 13 .8-2.9 2.9.8"/><path d="m6 13-2.9.8.8 2.9"/><path d="m12 22 2.1-2.1-2.1-2.1"/>',
  wallet:      '<path d="M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/><path d="M21 11h-5a2 2 0 0 0 0 4h5a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1Z"/>',
  shirt:       '<path d="M20.4 7.5 16 4l-1.5 1A3 3 0 0 1 12 6a3 3 0 0 1-2.5-1L8 4 3.6 7.5a1 1 0 0 0-.3 1.2l1.4 2.7a1 1 0 0 0 1.3.4L7 11v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-8l1 .8a1 1 0 0 0 1.3-.4l1.4-2.7a1 1 0 0 0-.3-1.2Z"/>',
  star:        '<path d="M12 2.5 14.9 8.6l6.6.7-4.9 4.5 1.3 6.5L12 17.8 6.1 20.8l1.3-6.5L2.5 9.3l6.6-.7Z" fill="currentColor" stroke="none"/>',
  chevronLeft: '<polyline points="15 18 9 12 15 6"/>',
  chevronRight:'<polyline points="9 18 15 12 9 6"/>',
  arrowRight:  '<line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/>',
  arrowDown:   '<line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/>',
  calendar:    '<rect x="3" y="4" width="18" height="18" rx="3"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>',
  clock:       '<circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/>',
  mapPin:      '<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>',
  navigation:  '<polygon points="3 11 22 2 13 21 11 13 3 11"/>',
  check:       '<polyline points="20 6 9 17 4 12"/>',
  checkCircle: '<path d="M22 11.1V12a10 10 0 1 1-5.9-9.1"/><polyline points="22 4 12 14.01 9 11.01"/>',
  camera:      '<path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3Z"/><circle cx="12" cy="13" r="3.5"/>',
  send:        '<path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4 20-7Z"/>',
  lock:        '<rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
  info:        '<circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><circle cx="12" cy="8" r=".6" fill="currentColor"/>',
  tag:         '<path d="M3 7v5.2a2 2 0 0 0 .6 1.4l7.8 7.8a2 2 0 0 0 2.8 0l4.8-4.8a2 2 0 0 0 0-2.8L11.2 5.6A2 2 0 0 0 9.8 5H4a1 1 0 0 0-1 1Z"/><circle cx="7.5" cy="9.5" r="1.3"/>',
  smile:       '<circle cx="12" cy="12" r="9"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/>',
};

function Icon({ name, className, style, strokeWidth = 2 }) {
  const filled = name === 'star';
  return (
    <svg className={className} style={style} viewBox="0 0 24 24" aria-hidden="true"
         fill={filled ? 'currentColor' : 'none'} stroke={filled ? 'none' : 'currentColor'}
         strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round"
         dangerouslySetInnerHTML={{ __html: ICON_PATHS[name] || '' }} />
  );
}

/* glifos de marca (preenchidos) */
function BrandIcon({ name, className, style }) {
  const paths = {
    whatsapp: '<path d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.91-7.02ZM12.04 20.15h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.11.82.83-3.04-.2-.31a8.2 8.2 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.24-8.23a8.2 8.2 0 0 1 8.23 8.24c0 4.54-3.7 8.23-8.24 8.23Zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01a.92.92 0 0 0-.67.31c-.23.25-.88.86-.88 2.1 0 1.24.9 2.43 1.03 2.6.12.17 1.77 2.7 4.3 3.79.6.26 1.07.41 1.43.53.6.19 1.15.16 1.58.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28Z" fill="currentColor" stroke="none"/>',
    instagram: '<rect x="2.5" y="2.5" width="19" height="19" rx="5.5" ry="5.5"/><circle cx="12" cy="12" r="4.2"/><circle cx="17.4" cy="6.6" r="1.1" fill="currentColor" stroke="none"/>',
  };
  return (
    <svg className={className} style={style} viewBox="0 0 24 24" aria-hidden="true"
         fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"
         dangerouslySetInnerHTML={{ __html: paths[name] || '' }} />
  );
}

/* Marca: cabide com coração (linha verde + coração coral) */
function HangerHeart({ className, style, heartColor = 'var(--brand-coral)', lineColor = 'var(--brand-green)' }) {
  return (
    <svg className={className} style={style} viewBox="0 0 120 100" fill="none" aria-hidden="true">
      <path d="M60 30c0-6 5-11 11-11s11 5 11 11" stroke={lineColor} strokeWidth="5" strokeLinecap="round" fill="none" transform="translate(-11 -2)"/>
      <path d="M60 28v6l-38 24a5 5 0 0 0 2.8 9.1h70.4A5 5 0 0 0 98 58L60 34"
            stroke={lineColor} strokeWidth="5" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
      <path d="M68 60c1.9-1.7 4-3.4 4-6.1a3.6 3.6 0 0 0-6.6-2c-.6-.7-1.4-1.5-2.7-1.5a3.6 3.6 0 0 0-3.6 3.6c0 2.6 2.1 4.3 4 6l2.5 2.4Z"
            fill={heartColor} stroke="none" transform="translate(-2 -2)"/>
    </svg>
  );
}

/* doodles soltos (coração, estrela, pontinho, costura) */
function Doodle({ kind = 'heart' }) {
  const d = {
    heart: '<path d="M16 28c7-6 14-11 14-18A8 8 0 0 0 16 6 8 8 0 0 0 2 10c0 7 7 12 14 18Z"/>',
    star:  '<path d="M16 2l3.5 8.5L28 12l-6.5 5.5L23 26l-7-4.5L9 26l1.5-8.5L4 12l8.5-1.5Z"/>',
    spark: '<path d="M16 2v9M16 21v9M2 16h9M21 16h9"/>',
    loop:  '<path d="M4 16c0-7 6-12 12-12s12 5 12 12-6 12-12 12"/>',
  };
  return (
    <svg viewBox="0 0 32 32" fill="none" stroke="currentColor" strokeWidth="2.4"
         strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"
         dangerouslySetInnerHTML={{ __html: d[kind] }} />
  );
}

Object.assign(window, { Icon, BrandIcon, HangerHeart, Doodle });
