/* global React */
// ---------------------------------------------------------------
// STERLING — Imagery primitives
// Frames, captions, and stylized placeholders for hero/proof shots
// ---------------------------------------------------------------
const { useRef, useState, useEffect, useCallback } = React;
// Real Unsplash photos load grayscale with a subtle contrast filter.
// If they fail, the underlying placeholder still reads beautifully.
function Frame({ children, caption, className = "", style = {} }) {
return (
{children}
{caption ? {caption} : null}
);
}
// Stylized "before" — dark, moody, with subtle streaks suggesting residue
function PlaceholderBefore() {
return (
{/* drips / streaks via SVG, very restrained */}
);
}
// Stylized "after" — bright, clean, with soft water glints
function PlaceholderAfter() {
return (
);
}
// Hero side image — placeholder of a Charlotte residential exterior.
// Uses an Unsplash architectural shot, grayscale.
function HeroSidePlaceholder() {
// Composition: house silhouette + driveway, drawn in restrained SVG so it
// reads as "tasteful editorial placeholder" rather than clipart.
return (
);
}
// Editorial portrait-orientation placeholder (used for proof secondary frames)
function MoodFrame({ tone = "dark" }) {
return (