// AgenticX v3 — Ascone-style icons. Thin stroke, currentColor.
const Icon = ({ children, size = 24, className = '', stroke = 1.5, ...rest }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
    stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
    className={className} {...rest}>{children}</svg>
);

const IArrow   = (p) => <Icon {...p}><path d="M5 12h14M13 5l7 7-7 7"/></Icon>;
const IArrowUR = (p) => <Icon {...p}><path d="M7 17 17 7M8 7h9v9"/></Icon>;
const IPlus    = (p) => <Icon {...p}><path d="M12 5v14M5 12h14"/></Icon>;
const IChevR   = (p) => <Icon {...p}><path d="m9 6 6 6-6 6"/></Icon>;
const IStar    = (p) => <Icon {...p}><path d="m12 2 3.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.01z" fill="currentColor" stroke="none"/></Icon>;
const IMenu    = (p) => <Icon {...p}><path d="M3 6h18M3 12h18M3 18h18"/></Icon>;
const IX       = (p) => <Icon {...p}><path d="M18 6 6 18M6 6l12 12"/></Icon>;
const ICheck   = (p) => <Icon {...p}><path d="M20 6 9 17l-5-5"/></Icon>;
const IArrowUp = (p) => <Icon {...p}><path d="M12 19V5M5 12l7-7 7 7"/></Icon>;
const IMail    = (p) => <Icon {...p}><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 7L2 7"/></Icon>;
const IChat    = (p) => <Icon {...p}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></Icon>;
const IPhone   = (p) => <Icon {...p}><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"/></Icon>;
const IClock   = (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></Icon>;
const IShield  = (p) => <Icon {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></Icon>;
const IGlobeSimple = (p) => <Icon {...p}><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></Icon>;
const IBrain   = (p) => <Icon {...p}><path d="M12 5a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0-2 5 3 3 0 0 0 1 5 3 3 0 0 0 3 4 3 3 0 0 0 4 0 3 3 0 0 0 4 0 3 3 0 0 0 3-4 3 3 0 0 0 1-5 3 3 0 0 0-2-5 3 3 0 0 0-3-3 3 3 0 0 0-3 3"/><path d="M12 5v17"/></Icon>;
const IRoute   = (p) => <Icon {...p}><circle cx="6" cy="19" r="3"/><circle cx="18" cy="5" r="3"/><path d="M9 19h6a3 3 0 0 0 3-3V8"/></Icon>;
const ILayers  = (p) => <Icon {...p}><path d="m12 2 9 5-9 5-9-5 9-5zM3 12l9 5 9-5M3 17l9 5 9-5"/></Icon>;

// WhatsApp glyph (filled)
const IWA = ({ size = 18, className = '' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" className={className} fill="currentColor" aria-hidden="true">
    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
  </svg>
);

// 4-point concave sparkle (Ascone signature)
const Sparkle = ({ size = 40, className = '', color = 'currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 100 100" className={className} aria-hidden="true">
    <path d="M50 0 C53 32 68 47 100 50 C68 53 53 68 50 100 C47 68 32 53 0 50 C32 47 47 32 50 0Z" fill={color}/>
  </svg>
);

// Wireframe globe (lat/long lines)
const GlobeWire = ({ size = 96, className = '', color = '#1C3F3A', stroke = 1 }) => (
  <svg width={size} height={size} viewBox="0 0 120 120" className={className} fill="none" stroke={color} strokeWidth={stroke} aria-hidden="true">
    <circle cx="60" cy="60" r="52"/>
    <ellipse cx="60" cy="60" rx="52" ry="20"/>
    <ellipse cx="60" cy="60" rx="52" ry="38"/>
    <ellipse cx="60" cy="60" rx="20" ry="52"/>
    <ellipse cx="60" cy="60" rx="38" ry="52"/>
    <line x1="8" y1="60" x2="112" y2="60"/>
    <line x1="60" y1="8" x2="60" y2="112"/>
  </svg>
);

Object.assign(window, {
  IconV3: Icon,
  IArrow, IArrowUR, IPlus, IChevR, IStar, IMenu, IX, ICheck, IArrowUp,
  IMail, IChat, IPhone, IClock, IShield, IGlobeSimple, IBrain, IRoute, ILayers,
  IWA, Sparkle, GlobeWire,
});
