/* Hero — editorial magazine layout. Cream page, an inset looping video panel on the right, and the couple's names set large on the left, overlapping the top of the video. Label, date, place, and RSVP sit lower-left on the cream. Text/content unchanged; only the arrangement is new. */ const { useEffect: useHeroEffect, useRef: useHeroRef } = React; function Hero() { const videoRef = useHeroRef(null); useHeroEffect(() => { const v = videoRef.current; if (!v) return; // React's `muted` prop is unreliable; force the DOM property so iOS/Safari // will honor autoplay. Also set the attribute for good measure. v.muted = true; v.defaultMuted = true; v.setAttribute('muted', ''); const tryPlay = () => { const p = v.play(); if (p && p.catch) p.catch(() => {}); }; // Force the element to (re)load its sources, then attempt playback. try { v.load(); } catch (e) {} if (v.readyState >= 2) tryPlay();else v.addEventListener('loadeddata', tryPlay, { once: true }); v.addEventListener('canplay', tryPlay, { once: true }); // Retry once the page becomes visible / on first touch anywhere / on tap of // the video itself (iOS autoplay + Low Power Mode fallbacks). const onVisible = () => { if (!document.hidden) tryPlay(); }; document.addEventListener('visibilitychange', onVisible); window.addEventListener('touchstart', tryPlay, { once: true, passive: true }); v.addEventListener('click', tryPlay); return () => { v.removeEventListener('loadeddata', tryPlay); v.removeEventListener('canplay', tryPlay); v.removeEventListener('click', tryPlay); document.removeEventListener('visibilitychange', onVisible); window.removeEventListener('touchstart', tryPlay); }; }, []); return (

{/* Inset looping video — right panel. Wrapper gives the RSVP call-out a positioning context so it sits in the video's corner on every size. */}

{/* Tilted RSVP call-out, bottom-right corner of the video */} Join Us? rsvp here

{/* Names — large, left, overlapping the video */} Sydney & Andrés

{/* Caption over the video — label, date, place */}

you’re invited

APRIL 30 - MAY 2

Tepoztlán·Morelos·México

{/* Page numbers — 20 / 27 in the bottom corners */}

); } window.Hero = Hero;