// PhotoOverlay
// Drop-in <img> overlay that gracefully falls back to whatever placeholder
// is already in the parent (gradient, SVG texture, etc).
//
// Usage:
//   <div style={{position: "relative", background: "linear-gradient(...)"}}>
//     <PhotoOverlay src="path/to/photo.jpg" alt="..."/>
//     {/* any text/badges that should sit ON TOP of the photo */}
//   </div>
//
// If the image is missing, the gradient/placeholder shows; nothing breaks.
// Photos sit underneath any sibling content (z-index 0; siblings get z-index 1).
function PhotoOverlay({ src, alt = "", objectPosition = "center" }) {
  const { useState } = React;
  const [failed, setFailed] = useState(false);
  if (failed || !src) return null;
  return (
    <img
      src={src}
      alt={alt}
      loading="lazy"
      onError={() => setFailed(true)}
      style={{
        position: "absolute",
        inset: 0,
        width: "100%",
        height: "100%",
        objectFit: "cover",
        objectPosition,
        display: "block",
        zIndex: 0,
      }}
    />
  );
}
window.PhotoOverlay = PhotoOverlay;