/* =========================================================
   BACKGROUND IMAGE — uses the user-provided photo collage.
   Swaps between desktop & mobile image via CSS media query.
   ========================================================= */

function BgPhoto({ variant = "home", reveal = true }) {
  return (
    <div className={`bgphoto bgphoto-${variant} ${reveal ? "show" : ""}`}>
      <div className="bg-base" role="presentation"></div>
      <div className={`bgphoto-wash ${variant}`}></div>
    </div>
  );
}

/* The full loading image (BG + text card baked in). Used for the
   delayed cross-fade so the title card appears "later" than the bg. */
function LoadingCard({ show }) {
  return (
    <div className={`loading-card ${show ? "show" : ""}`}></div>
  );
}

window.BgPhoto = BgPhoto;
window.LoadingCard = LoadingCard;