/* Rolo Marketing Wireframes — Variants top half (sections 1-5) * HeroVariants, PlatformVariants, ModulesVariants, OSVariants, DeployVariants */ const { useEffect, useRef, useState } = React; /* ============================================================ * 1. HERO * ============================================================ */ /* Robust hero background video. * React's `muted` JSX prop sets the property but not always the HTML * attribute — iOS Safari checks the attribute to allow autoplay. Below * we force the attribute via JS, explicitly call play(), retry on * canplay, and fall back to the next user tap on the document. * Together this covers: iOS Safari, Chrome Android, Safari with * autoplay rejected, and old iOS that needs webkit-playsinline. */ function HeroBackgroundVideo() { const ref = useRef(null); useEffect(() => { const v = ref.current; if (!v) return; // Force muted attribute + property + webkit-playsinline before any play attempt v.muted = true; v.defaultMuted = true; v.setAttribute('muted', ''); v.setAttribute('webkit-playsinline', 'true'); v.setAttribute('playsinline', 'true'); let cancelled = false; const tryPlay = () => { if (cancelled || !v) return; const p = v.play(); if (p && typeof p.catch === 'function') p.catch(() => {}); }; tryPlay(); // Retry once the file has enough data v.addEventListener('canplay', tryPlay); v.addEventListener('loadeddata', tryPlay); // Fallback: first user tap anywhere on the page unblocks autoplay const onTap = () => tryPlay(); document.addEventListener('touchstart', onTap, { passive: true, once: true }); document.addEventListener('click', onTap, { once: true }); return () => { cancelled = true; v.removeEventListener('canplay', tryPlay); v.removeEventListener('loadeddata', tryPlay); document.removeEventListener('touchstart', onTap); document.removeEventListener('click', onTap); }; }, []); // Direct click-to-play handler — covers Firefox configs where the doc-wide // first-tap listener gets swallowed by the video element itself. const onTapVideo = () => { const v = ref.current; if (v && v.paused) { const p = v.play(); if (p && typeof p.catch === 'function') p.catch(() => {}); } }; return (