/* ─────────────────────────────────────────────────────────── SIZZLE — HeroReel: the dish video inside a card (box) in the phone, with a peeking next-dish box (clipped by the bottom) to show it scrolls. ─────────────────────────────────────────────────────────── */ function HeroReel({ brandName = "Foodish" }) { const tr = useI18n(); const videoRef = useRef(null); useEffect(() => { const v = videoRef.current; if (!v) return; const tryPlay = () => v.play().catch(() => {}); tryPlay(); const io = new IntersectionObserver((es) => { es.forEach((e) => { e.isIntersecting ? tryPlay() : v.pause(); }); }, { threshold: 0.25 }); io.observe(v); return () => io.disconnect(); }, []); return (
{/* ── main dish card: the box holding the video ── */}
{tr.reel.name}
{tr.reel.price}
{tr.reel.kcal}
{tr.reel.tag}
{/* ── peeking next box: clipped by the phone bottom → shows it scrolls ── */}
{tr.reel.nextName}
{tr.reel.nextDesc}
{/* scroll affordance — small chip pinned to the bottom edge */}
{tr.phone.scroll}
{/* fade the clipped box into the phone bottom */}
); } Object.assign(window, { HeroReel }); /* ── VideoTile: a real looping video inside a framed tile (side frames) ── */ function VideoTile({ src, ratio = "4 / 5", radius = 12, label, tag, style = {} }) { const ref = useRef(null); useEffect(() => { const v = ref.current; if (!v) return; const tryPlay = () => v.play().catch(() => {}); tryPlay(); const io = new IntersectionObserver((es) => { es.forEach((e) => { e.isIntersecting ? tryPlay() : v.pause(); }); }, { threshold: 0.2 }); io.observe(v); return () => io.disconnect(); }, []); return (
); } Object.assign(window, { HeroReel, VideoTile });