// Reusable portrait video highlight: muted autoplay + loop + a sound toggle.
// Defaults to sound OFF and auto-playing (required for browser autoplay);
// the speaker button unmutes. Used for the Bulk Shoot reel and the
// model-swap demo. `flip` puts the video on the left, text on the right.
function PSVideoHighlight({ id, eyebrow, headline, body, src }) {
const ref = React.useRef(null);
const [muted, setMuted] = React.useState(true);
// Lazy: don't download the video until it scrolls into view, then play it
// (and pause when it leaves). Keeps first paint light, big LCP win.
React.useEffect(() => {
const v = ref.current;
if (!v) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) v.play().catch(() => {});
else v.pause();
});
}, { threshold: 0.2 });
io.observe(v);
return () => io.disconnect();
}, []);
const toggleSound = () => {
const v = ref.current;
if (!v) return;
const next = !v.muted;
v.muted = next;
setMuted(next);
if (!next) { v.play().catch(() => {}); }
};
const flip = id === 'model-swap';
const text = (
{eyebrow}
{headline}
{body}
);
const video = (
);
return (
{flip ? [video, text] : [text, video]}
);
}
Object.assign(window, { PSVideoHighlight });