// Image placeholder — now accepts a real src. Falls back to striped bg with caption.
const Placeholder = ({ id, label, desc, light = false, aspect, style = {}, src, alt, children }) => {
  const resolvedSrc = src || (window.__IMG_MAP && window.__IMG_MAP[id]);
  if (resolvedSrc) {
    return (
      <div style={{ position: 'relative', overflow: 'hidden', aspectRatio: aspect, ...style }}>
        <img
          src={resolvedSrc}
          alt={alt || label || id}
          loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
        {children}
      </div>
    );
  }
  return (
    <div
      className={`ph ${light ? 'ph--light' : ''}`}
      style={{ aspectRatio: aspect, ...style }}
    >
      <div className="ph__label">
        <span className="ph__id">IMG · {id}</span>
        <span>
          <strong style={{ fontWeight: 600, display: 'block', marginBottom: 4, letterSpacing: '0.14em' }}>{label}</strong>
          {desc}
        </span>
      </div>
      {children}
    </div>
  );
};

// Global id → src map, populated in index HTML
window.__IMG_MAP = window.__IMG_MAP || {};
window.Placeholder = Placeholder;