// Striped SVG placeholder with monospace caption
function Placeholder({ label, w = '100%', h = 240, tone = 'paper', rounded = 16, style = {} }) {
  const bg = tone === 'blue' ? '#E8EEF6' : tone === 'sand' ? '#F2EADB' : '#EFEBDF';
  const stripe = tone === 'blue' ? '#DCE5F0' : tone === 'sand' ? '#E8DCC4' : '#E4E0D6';
  const ink = tone === 'blue' ? '#1D4E89' : '#5B6573';
  return (
    <div style={{
      width: w, height: h, borderRadius: rounded, overflow: 'hidden',
      position: 'relative', background: bg,
      backgroundImage: `repeating-linear-gradient(135deg, ${stripe} 0 1px, transparent 1px 12px)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      border: `1px solid ${stripe}`,
      ...style
    }}>
      <span className="mono" style={{ fontSize: 11, color: ink, letterSpacing: '0.04em', textTransform: 'uppercase', background: bg, padding: '4px 10px', borderRadius: 4 }}>
        {label}
      </span>
    </div>
  );
}

// Simple icon drawing, geometric only
function Icon({ name, size = 20, color = 'currentColor', stroke = 1.5 }) {
  const p = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    arrow: <><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></>,
    check: <path d="M5 12l4 4 10-10"/>,
    plus: <><path d="M12 5v14"/><path d="M5 12h14"/></>,
    minus: <path d="M5 12h14"/>,
    star: <path d="M12 3l2.6 5.6 6 .7-4.4 4.2 1.2 6-5.4-3-5.4 3 1.2-6L3.4 9.3l6-.7L12 3z"/>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    shield: <><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z"/><path d="M9 12l2 2 4-4"/></>,
    users: <><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5"/><circle cx="17" cy="9" r="2.5"/><path d="M21 19c0-2-2-3.5-4-3.5"/></>,
    target: <><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5"/></>,
    chat: <path d="M4 5h16v11H8l-4 4V5z"/>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></>,
    pen: <><path d="M14 4l6 6-10 10H4v-6L14 4z"/><path d="M13 5l6 6"/></>,
    chart: <><path d="M4 20V8"/><path d="M10 20V4"/><path d="M16 20v-8"/><path d="M22 20H2"/></>,
    sparkle: <><path d="M12 3v4"/><path d="M12 17v4"/><path d="M3 12h4"/><path d="M17 12h4"/><path d="M6 6l2.5 2.5"/><path d="M15.5 15.5L18 18"/><path d="M6 18l2.5-2.5"/><path d="M15.5 8.5L18 6"/></>,
    briefcase: <><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2"/><path d="M3 12h18"/></>,
    link: <><path d="M10 14a4 4 0 005.66 0l3-3a4 4 0 00-5.66-5.66l-1 1"/><path d="M14 10a4 4 0 00-5.66 0l-3 3a4 4 0 005.66 5.66l1-1"/></>,
    settings: <><circle cx="12" cy="12" r="2.8"/><path d="M19.4 14.6a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V20a2 2 0 01-4 0v-.09a1.65 1.65 0 00-1-1.51 1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H4a2 2 0 010-4h.09a1.65 1.65 0 001.51-1 1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H10a1.65 1.65 0 001-1.51V4a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V10a1.65 1.65 0 001.51 1H20a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></>,
  };
  return <svg {...p}>{paths[name]}</svg>;
}

Object.assign(window, { Placeholder, Icon });