// Icon set — simple geometric strokes, drawn inline (SVG)
const Icon = ({name, size = 20, color = "currentColor", strokeWidth = 1.5}) => {
  const p = {width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth, strokeLinecap: "round", strokeLinejoin: "round"};
  switch (name) {
    case "grid": return <svg {...p}><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"/></svg>;
    case "scan": return <svg {...p}><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><path d="M7 8v8M11 8v8M15 8v8"/></svg>;
    case "card": return <svg {...p}><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h4"/></svg>;
    case "box": return <svg {...p}><path d="M21 8v13H3V8"/><path d="M1 3h22v5H1z"/><path d="M10 12h4"/></svg>;
    case "pass": return <svg {...p}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></svg>;
    case "cloud": return <svg {...p}><path d="M17.5 19a4.5 4.5 0 1 0-1-8.9A6 6 0 0 0 5.4 12.1 4 4 0 0 0 6.5 20h11"/></svg>;
    case "arrow": return <svg {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case "arrow-up-right": return <svg {...p}><path d="M7 17L17 7M8 7h9v9"/></svg>;
    case "check": return <svg {...p}><path d="M5 12l4 4L19 6"/></svg>;
    case "plus": return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
    case "minus": return <svg {...p}><path d="M5 12h14"/></svg>;
    case "menu": return <svg {...p}><path d="M4 7h16M4 12h16M4 17h16"/></svg>;
    case "close": return <svg {...p}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case "phone": return <svg {...p}><path d="M22 16.9v3a2 2 0 0 1-2.2 2A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.4 2.1L8 9.7a16 16 0 0 0 6.3 6.3l1.3-1.3a2 2 0 0 1 2.1-.4c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/></svg>;
    case "map-pin": return <svg {...p}><path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 1 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case "chevron-right": return <svg {...p}><path d="M9 6l6 6-6 6"/></svg>;
    case "chevron-down": return <svg {...p}><path d="M6 9l6 6 6-6"/></svg>;
    case "play": return <svg {...p}><path d="M6 4l14 8-14 8V4z" fill={color}/></svg>;
    case "sparkle": return <svg {...p}><path d="M12 3l2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/></svg>;
    case "shield": return <svg {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/></svg>;
    case "clock": return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "search": return <svg {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>;
    case "globe": return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>;
    case "chart": return <svg {...p}><path d="M3 3v18h18"/><path d="M7 14l3-3 3 3 5-6"/></svg>;
    default: return null;
  }
};

// Striped placeholder with label
const Placeholder = ({label, aspect = "4/3", className = "", style = {}}) => {
  const t = window.__pasTheme || {};
  return (
    <div className={`pas-placeholder ${className}`} style={{aspectRatio: aspect, ...style}}>
      <div className="pas-placeholder-stripes"/>
      <div className="pas-placeholder-label">{label}</div>
    </div>
  );
};

const AssetImage = ({src, alt = "", aspect = "4/3", className = "", style = {}}) => {
  const [failed, setFailed] = React.useState(false);

  if (!src || failed) {
    return <Placeholder label={alt || "image"} aspect={aspect} className={className} style={style}/>;
  }

  return (
    <div className={`pas-media ${className}`} style={{aspectRatio: aspect, ...style}}>
      <img
        className="pas-media-img"
        src={src}
        alt={alt}
        loading="lazy"
        onError={() => setFailed(true)}
      />
    </div>
  );
};

// Logo mark — PAS monogram
const Logo = ({size = 28, color}) => {
  return (
    <div className="pas-logo" style={{height: size}}>
      <svg width={size * 1.15} height={size} viewBox="0 0 32 28" fill="none">
        <path d="M4 4h10a6 6 0 0 1 0 12H8v8H4V4zm4 4v4h6a2 2 0 0 0 0-4H8z" fill={color || "currentColor"}/>
        <circle cx="24" cy="8" r="3" fill={color || "currentColor"}/>
      </svg>
      <span className="pas-logo-word" style={{color: color || "currentColor"}}>PAS</span>
    </div>
  );
};

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