/* Inline SVG icon set */
const Icon = ({ name, ...p }) => {
  const I = {
    target: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.4" fill="currentColor"/></>,
    heart: <path d="M12 20s-7-4.6-9.2-9C1.3 7.6 3 4.5 6.2 4.5c1.9 0 3.2 1.1 3.8 2.2C10.6 5.6 11.9 4.5 13.8 4.5 17 4.5 18.7 7.6 21.2 11 19 15.4 12 20 12 20z"/>,
    users: <><circle cx="9" cy="8" r="3.2"/><path d="M3.5 19c0-3 2.5-5 5.5-5s5.5 2 5.5 5"/><path d="M16 5.2A3 3 0 0 1 16 11"/><path d="M21 19c0-2.4-1.6-4.2-3.8-4.8"/></>,
    pin: <><path d="M12 21s-6.5-5.6-6.5-10.5A6.5 6.5 0 0 1 12 4a6.5 6.5 0 0 1 6.5 6.5C18.5 15.4 12 21 12 21z"/><circle cx="12" cy="10.5" r="2.3"/></>,
    phone: <path d="M6.5 4h3l1.5 4-2 1.5a12 12 0 0 0 5.5 5.5L16 17l4 1.5v3a2 2 0 0 1-2 2A16 16 0 0 1 4 6.5 2 2 0 0 1 6.5 4z"/>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 5.5L20 7"/></>,
    clock: <><circle cx="12" cy="12" r="8.5"/><path d="M12 7.5V12l3 2"/></>,
    arrow: <><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></>,
    arrowsm: <><path d="M5 12h12"/><path d="m12 6 6 6-6 6"/></>,
    play: <path d="M7 5.5v13l11-6.5z" fill="currentColor" stroke="none"/>,
    star: <path d="M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 17l-5.2 2.6 1-5.8L3.5 9.7l5.9-.9z" fill="currentColor" stroke="none"/>,
    camera: <><rect x="3" y="6.5" width="18" height="13" rx="3"/><circle cx="12" cy="13" r="3.5"/><path d="M8 6.5l1.2-2h5.6L16 6.5"/></>,
    leaf: <><path d="M5 20c0-8 5-13 14-13 0 9-5 14-14 13z"/><path d="M5 20c3-5 6-7 10-8.5"/></>,
    tiktok: <path d="M16.5 3c.3 2.2 1.7 3.8 3.8 4.1v2.7c-1.4.1-2.7-.3-3.9-1v6.1c0 3.4-2.6 5.6-5.7 5.1-2.4-.4-4.2-2.5-4.2-5 0-3 2.6-5.3 5.7-4.9v2.8c-.4-.1-.9-.2-1.4-.1-1.2.2-2 1.2-1.9 2.5.1 1.2 1.1 2.1 2.4 2 1.2-.1 2-1.1 2-2.4V3h3.1z" fill="currentColor" stroke="none"/>,
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.2" cy="6.8" r="1.1" fill="currentColor" stroke="none"/></>,
    facebook: <path d="M14 8.5h2.2V5.5H14c-2 0-3.3 1.3-3.3 3.4V11H8.5v3h2.2v6.5H14V14h2.2l.5-3H14V9.2c0-.5.2-.7.7-.7z" fill="currentColor" stroke="none"/>,
    youtube: <><rect x="3" y="6" width="18" height="12" rx="3.5"/><path d="M10.5 9.5l4.5 2.5-4.5 2.5z" fill="currentColor" stroke="none"/></>,
    whatsapp: <path d="M12 3.5A8.4 8.4 0 0 0 4.7 16.2L4 20.5l4.4-1.1A8.4 8.4 0 1 0 12 3.5zm0 1.7a6.7 6.7 0 0 1 5.5 10.5l-.2.3.4 2.2-2.2-.6-.3.2A6.7 6.7 0 1 1 12 5.2zm-2.5 3c-.2 0-.5.1-.7.4-.2.3-.8.9-.8 2.1s.9 2.4 1 2.6c.1.2 1.7 2.8 4.3 3.8 2.1.8 2.6.7 3 .6.5-.1 1.4-.6 1.6-1.2.2-.6.2-1 .1-1.2 0-.1-.3-.2-.6-.4l-1.4-.7c-.2-.1-.4-.1-.5.1l-.6.8c-.1.2-.3.2-.5.1a5.4 5.4 0 0 1-1.7-1c-.6-.6-1-1.2-1.2-1.5-.1-.2 0-.3.1-.4l.4-.5c.1-.2.1-.3.2-.5 0-.1 0-.3-.1-.4l-.7-1.6c-.1-.3-.3-.3-.5-.3z" fill="currentColor" stroke="none"/>,
    check: <path d="M5 12.5l4.5 4.5L19 7.5"/>,
    bone: <path d="M7 17a2.2 2.2 0 1 1-2-2.6 2.2 2.2 0 0 1 1-3.2l5-5a2.2 2.2 0 0 1 3.2-1 2.2 2.2 0 1 1 2 2.6 2.2 2.2 0 0 1-1 3.2l-5 5a2.2 2.2 0 0 1-3.2 1z"/>,
    shield: <><path d="M12 3.5l7 2.5v5c0 4.5-3 8-7 9.5-4-1.5-7-5-7-9.5V6z"/><path d="M9 12l2 2 4-4"/></>,
  };
  return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      {I[name]}
    </svg>
  );
};

const Placeholder = ({ icon = "camera", label, dark }) => (
  <div className={"ph" + (dark ? " dark" : "")}>
    <Icon name={icon} />
    {label && <span className="ph-label">{label}</span>}
  </div>
);

window.Icon = Icon;
window.Placeholder = Placeholder;