// Icons.jsx — small lucide-style icon set used across the LP
const Icon = {
  ArrowDown: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
  ),
  ArrowRight: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
  ),
  Close: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
  ),
  Play: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
  ),
  Check: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
  ),
  UserPlus: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>
  ),
  School: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 22v-4a2 2 0 0 0-2-2h-0a2 2 0 0 0-2 2v4"/><path d="M18 5v17"/><path d="M6 5v17"/><path d="m4 6 8-4 8 4"/><path d="M3 10h18"/></svg>
  ),
  Network: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="2" width="6" height="6" rx="1"/><rect x="3" y="16" width="6" height="6" rx="1"/><rect x="15" y="16" width="6" height="6" rx="1"/><path d="M12 8v4"/><path d="M6 16v-2h12v2"/></svg>
  ),
  MapPin: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M20 10c0 7-8 12-8 12s-8-5-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
  ),
  Heart: ({ size = 28 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><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"/></svg>
  ),
  Whatsapp: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.2-.2.3-.7.9-.9 1.1-.2.2-.3.2-.6.1-1.7-.8-2.8-1.5-3.9-3.4-.3-.5.3-.5.8-1.5.1-.2 0-.4 0-.5l-1-2.4c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1 2.9 1.2 3.1c.1.2 2 3.1 4.9 4.4 1.8.7 2.5.8 3.4.7.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3M12 22a10 10 0 0 1-5.1-1.4L2 22l1.4-4.8A10 10 0 1 1 12 22m0-18a8 8 0 0 0-6.8 12.2l.2.4-.8 2.9 3-.8.3.2A8 8 0 1 0 12 4"/></svg>
  ),
  Pix: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="m12 2 3.5 3.5L12 9 8.5 5.5zM2 12l3.5-3.5L9 12l-3.5 3.5zm10 10-3.5-3.5L12 15l3.5 3.5zm10-10-3.5 3.5L15 12l3.5-3.5zM7.5 7.5 11 11 7.5 14.5 4 11zm9 0L20 11l-3.5 3.5L13 11z"/></svg>
  ),
  CreditCard: ({ size = 22 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg>
  ),
  Copy: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
  ),
  Quote: ({ size = 32 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M3 21V12c0-3.3 1.7-6.7 6-9l1 2c-2.7 1.5-4 3.7-4 6h3v10H3zm11 0V12c0-3.3 1.7-6.7 6-9l1 2c-2.7 1.5-4 3.7-4 6h3v10h-6z"/></svg>
  ),
};
window.Icon = Icon;

// Grafismo — manual rule: rectangle + ¼ circle + small connector circle
const Grafismo = ({ size = 120, color = '#511865', stroke = 3, variant = 'outline', accent = null }) => {
  const padding = 4;
  const unit = 60;
  const rectFill = variant === 'filled' ? color : 'none';
  const arcFill = variant === 'filled' ? (accent || color) : 'none';
  return (
    <svg width={size} height={size * 0.55} viewBox="0 0 220 120" style={{ display: 'block' }}>
      <rect x={padding} y={padding} width={unit} height={unit} fill={rectFill} stroke={color} strokeWidth={stroke} />
      <path
        d={`M ${padding + unit + 8} ${padding} A ${unit} ${unit} 0 0 1 ${padding + unit + 8 + unit} ${padding + unit} L ${padding + unit + 8} ${padding + unit} Z`}
        fill={arcFill} stroke={color} strokeWidth={stroke}
      />
      <circle cx={padding + unit + 8} cy={padding + unit} r={9} fill="#fff" stroke={color} strokeWidth={stroke} />
    </svg>
  );
};
window.Grafismo = Grafismo;
