/* ===== Angel's Spa — Icons (SVG components) ===== */

const Icon = {
  Search: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>),
  User: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>),
  Bag: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z"/><path d="M3 6h18"/><path d="M16 10a4 4 0 0 1-8 0"/></svg>),
  Menu: ({size=20}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>),
  Close: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>),
  ArrowRight: ({size=16}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>),
  ArrowLeft: ({size=16}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 12H5M11 5l-7 7 7 7"/></svg>),
  Sparkle: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 2 13.5 8.5 20 10l-6.5 1.5L12 18l-1.5-6.5L4 10l6.5-1.5L12 2z"/></svg>),
  Calendar: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M16 2v4M8 2v4M3 10h18"/></svg>),
  Clock: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>),
  Mail: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-10 5L2 7"/></svg>),
  Lock: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="18" height="11" x="3" y="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>),
  Phone: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><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.72c.13.96.37 1.9.7 2.81a2 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-.45c.91.33 1.85.57 2.81.7a2 2 0 0 1 1.72 2.03Z"/></svg>),
  MapPin: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>),
  Heart: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 21s-7-4.5-9.5-9C1 9 2.5 5 6.5 5c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3 4 0 5.5 4 4 7-2.5 4.5-9.5 9-9.5 9z"/></svg>),
  Star: ({size=14}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="m12 2 3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.27 5.82 22 7 14.14l-5-4.87 6.91-1.01L12 2z"/></svg>),
  Plus: ({size=16}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>),
  ChevronLeft: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m15 18-6-6 6-6"/></svg>),
  ChevronRight: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>),
  Instagram: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="20" x="2" y="2" rx="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>),
  Facebook: ({size=18}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-2c-.55 0-1 .45-1 1v2h3v3h-3v6.95c5.05-.5 9-4.76 9-9.95z"/></svg>),
  Whatsapp: ({size=28}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-1.9-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5C9.4 9 8.9 7.5 8.7 7c-.2-.6-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2 0 1.3.9 2.6 1 2.7.1.2 1.8 2.7 4.3 3.8.6.3 1.1.4 1.4.5.6.2 1.2.2 1.6.1.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.1-1.2 0-.1-.2-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.3 4.8L2 22l5.3-1.3c1.4.8 2.9 1.2 4.7 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.3c-1.5 0-2.9-.4-4.2-1.2l-.3-.2-3.1.8.8-3-.2-.3c-.8-1.3-1.3-2.8-1.3-4.4 0-4.5 3.7-8.2 8.2-8.2s8.2 3.7 8.2 8.2-3.6 8.3-8.1 8.3z"/></svg>),
  Send: ({size=16}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m22 2-7 20-4-9-9-4Z"/><path d="M22 2 11 13"/></svg>),
  Logout: ({size=16}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5M21 12H9"/></svg>),
  Bell: ({size=16}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>),
  Check: ({size=14}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5L20 7"/></svg>),
  Navigation: ({size=16}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="3,11 22,2 13,21 11,13 3,11"/></svg>),
  Wifi: ({size=14}) => (<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 13a10 10 0 0 1 14 0"/><path d="M8.5 16.5a5 5 0 0 1 7 0"/><circle cx="12" cy="20" r="1"/></svg>),
};

// ===== Product illustrations =====
const ProductGlyph = ({ kind, color }) => {
  const c = color || "#B83A6B";
  switch (kind) {
    case "oil":
      return (<svg viewBox="0 0 100 100"><ellipse cx="50" cy="95" rx="34" ry="4" fill="#00000010"/><path d="M40 28h20v-6a3 3 0 0 0-3-3H43a3 3 0 0 0-3 3z" fill={c} opacity="0.9"/><rect x="44" y="14" width="12" height="6" rx="2" fill={c}/><path d="M30 90c0-22 8-32 20-50 12 18 20 28 20 50a8 8 0 0 1-8 8H38a8 8 0 0 1-8-8z" fill={c} opacity="0.25"/><path d="M30 90c0-22 8-32 20-50 12 18 20 28 20 50a8 8 0 0 1-8 8H38a8 8 0 0 1-8-8z" fill="none" stroke={c} strokeWidth="2"/><ellipse cx="44" cy="70" rx="6" ry="3" fill="white" opacity="0.5"/></svg>);
    case "candle":
      return (<svg viewBox="0 0 100 100"><ellipse cx="50" cy="95" rx="32" ry="3" fill="#00000010"/><rect x="32" y="35" width="36" height="55" rx="3" fill={c} opacity="0.85"/><ellipse cx="50" cy="35" rx="18" ry="4" fill={c}/><ellipse cx="50" cy="35" rx="14" ry="3" fill={c} opacity="0.6"/><circle cx="50" cy="35" r="1.5" fill="#333"/><path d="M50 32c-1 0-2-2-1-4 1-2 0-3 0-4 2 2 3 4 2 6-0.5 1 0 2-1 2z" fill="#FFB04A"/><circle cx="50" cy="28" r="3" fill="#FFE08A" opacity="0.7"/></svg>);
    case "gift":
      return (<svg viewBox="0 0 100 100"><ellipse cx="50" cy="95" rx="32" ry="3" fill="#00000010"/><rect x="20" y="42" width="60" height="44" rx="3" fill={c}/><rect x="20" y="42" width="60" height="10" fill={c} opacity="0.7"/><rect x="46" y="42" width="8" height="44" fill="white" opacity="0.85"/><path d="M30 30c0-6 4-10 10-10 6 0 10 4 10 12 0-8 4-12 10-12 6 0 10 4 10 10 0 7-10 12-20 12s-20-5-20-12z" fill="none" stroke={c} strokeWidth="3"/><ellipse cx="50" cy="42" rx="20" ry="3" fill={c} opacity="0.4"/></svg>);
    case "box":
      return (<svg viewBox="0 0 100 100"><ellipse cx="50" cy="95" rx="32" ry="3" fill="#00000010"/><path d="M22 38l28-12 28 12-28 12z" fill={c} opacity="0.8"/><path d="M22 38v40l28 12V50z" fill={c} opacity="0.6"/><path d="M78 38v40l-28 12V50z" fill={c} opacity="0.9"/><path d="M22 38l28 12 28-12" fill="none" stroke="white" strokeWidth="1.5"/></svg>);
    case "cream":
      return (<svg viewBox="0 0 100 100"><ellipse cx="50" cy="95" rx="32" ry="3" fill="#00000010"/><rect x="28" y="38" width="44" height="50" rx="4" fill={c} opacity="0.85"/><rect x="32" y="28" width="36" height="14" rx="3" fill={c}/><rect x="36" y="55" width="28" height="2" fill="white" opacity="0.6"/><ellipse cx="50" cy="38" rx="22" ry="4" fill={c} opacity="0.4"/></svg>);
    case "salts":
      return (<svg viewBox="0 0 100 100"><ellipse cx="50" cy="95" rx="32" ry="3" fill="#00000010"/><path d="M28 38h44l-4 50a4 4 0 0 1-4 4H36a4 4 0 0 1-4-4z" fill={c} opacity="0.7"/><rect x="32" y="30" width="36" height="10" rx="2" fill={c}/><circle cx="40" cy="55" r="2" fill="white" opacity="0.7"/><circle cx="55" cy="62" r="1.5" fill="white" opacity="0.6"/><circle cx="46" cy="70" r="1" fill="white" opacity="0.7"/><circle cx="58" cy="76" r="2" fill="white" opacity="0.6"/><circle cx="42" cy="80" r="1.5" fill="white" opacity="0.7"/></svg>);
    default: return null;
  }
};

// ===== Social post illustration =====
const SocialGlyph = ({ icon, color }) => {
  const bg = color || "#B83A6B";
  return (<svg viewBox="0 0 100 100" style={{position:"absolute",inset:0,width:"100%",height:"100%"}}><defs><linearGradient id={`g-${icon}-${bg.replace('#','')}`} x1="0" y1="0" x2="1" y2="1"><stop offset="0" stopColor={bg}/><stop offset="1" stopColor="#2A1020"/></linearGradient></defs><rect width="100" height="100" fill={`url(#g-${icon}-${bg.replace('#','')})`}/>{
    icon === "heart" ? <path d="M50 78s-22-13-22-30C28 39 35 33 42 33c3 0 6 1 8 4 2-3 5-4 8-4 7 0 14 6 14 15 0 17-22 30-22 30z" fill="white" opacity="0.9"/> :
    icon === "cake" ? <g fill="white" opacity="0.9"><rect x="28" y="55" width="44" height="20" rx="2"/><rect x="28" y="48" width="44" height="10" rx="2" opacity="0.85"/><circle cx="40" cy="45" r="2"/><circle cx="50" cy="42" r="2"/><circle cx="60" cy="45" r="2"/><path d="M40 38v8M50 35v9M60 38v8" stroke="white" strokeWidth="1.5"/></g> :
    icon === "leaf" ? <g fill="white" opacity="0.9"><path d="M30 70C30 50 45 30 70 28 68 50 50 70 30 70z"/><path d="M30 70c8-12 22-22 36-32" stroke={bg} strokeWidth="1.5" fill="none"/></g> :
    icon === "spark" ? <g fill="white" opacity="0.9"><path d="M50 25 53 45 73 50 53 55 50 75 47 55 27 50 47 45z"/></g> :
    icon === "face" ? <g fill="white" opacity="0.9"><circle cx="50" cy="50" r="22"/><circle cx="42" cy="46" r="2" fill={bg}/><circle cx="58" cy="46" r="2" fill={bg}/><path d="M42 58c3 3 13 3 16 0" stroke={bg} strokeWidth="2" fill="none" strokeLinecap="round"/></g> :
    icon === "gift" ? <g fill="white" opacity="0.9"><rect x="28" y="48" width="44" height="28" rx="2"/><rect x="28" y="46" width="44" height="8"/><rect x="46" y="46" width="8" height="30" fill={bg}/><path d="M38 38c0-4 4-6 6-4l6 6 6-6c2-2 6 0 6 4 0 5-8 6-12 6s-12-1-12-6z" fill="white"/></g> :
    icon === "drink" ? <g fill="white" opacity="0.9"><path d="M32 35h36l-12 22v15h6v3H38v-3h6V57z"/><circle cx="68" cy="32" r="3"/><path d="M68 32c0-4-3-7-3-10" stroke="white" fill="none" strokeWidth="1.5"/></g> :
    icon === "stone" ? <g fill="white" opacity="0.85"><ellipse cx="40" cy="56" rx="14" ry="6"/><ellipse cx="58" cy="50" rx="12" ry="5"/><ellipse cx="50" cy="64" rx="10" ry="4"/></g> :
    null
  }<circle cx="78" cy="22" r="3" fill="white" opacity="0.6"/></svg>);
};

window.Icon = Icon;
window.ProductGlyph = ProductGlyph;
window.SocialGlyph = SocialGlyph;
