/* global React */
// Rayu — Hero section
// Editorial-magazine treatment with full-bleed video bg, oversized serif headline,
// store CTAs at bottom-left, fine-print marquee at the bottom edge.
const { useState, useEffect, useRef } = React;
// Magnetize button — particles scatter around the label and snap to center on
// hover/touch (a native-React + CSS adaptation of the framer-motion original).
function MagnetizeButton({ href, children, className = "", particleCount = 14 }) {
const [attracting, setAttracting] = useState(false);
const particles = useRef(
Array.from({ length: particleCount }, () => ({
x: Math.random() * 130 - 65,
y: Math.random() * 70 - 35,
}))
);
return (
setAttracting(true)}
onMouseLeave={() => setAttracting(false)}
onTouchStart={() => setAttracting(true)}
onTouchEnd={() => setAttracting(false)}
>
{particles.current.map((p, i) => (
))}
{children}
);
}
function useScrolled(threshold = 40) {
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const on = () => setScrolled(window.scrollY > threshold);
on();
window.addEventListener("scroll", on, { passive: true });
return () => window.removeEventListener("scroll", on);
}, [threshold]);
return scrolled;
}
function Nav() {
const scrolled = useScrolled(80);
return (
DESIGNED N IRELAND
);
}
function StoreBtn({ store }) {
if (store === "apple") {
return (
Download on the
App Store);
}
return (
GET IT ON
Google Play);
}
// Resolve a source against inlined offline blobs (used by the standalone bundle).
function resolveHeroSrc(src) {
if (typeof window === "undefined" || !window.__resources) return src;
if (src === "assets/hero.mp4" && window.__resources.heroVideo) return window.__resources.heroVideo;
if (src === "assets/hero-2.mp4" && window.__resources.heroVideo2) return window.__resources.heroVideo2;
return src;
}
function Hero({ videoUrl }) {
const videoRef = useRef(null);
const heroRef = useRef(null);
const [videoOk, setVideoOk] = useState(false);
// Carousel of hero clips — plays each through, then advances to the next and loops.
const playlist = ["assets/hero-2.mp4", videoUrl];
const [clip, setClip] = useState(0);
const resolvedUrl = resolveHeroSrc(playlist[clip] || videoUrl);
// Reset to the first clip whenever the tweakable first video changes.
useEffect(() => {setClip(0);}, [videoUrl]);
useEffect(() => {
if (!videoRef.current) return;
const v = videoRef.current;
v.playbackRate = 0.75;
v.muted = true;
v.volume = 0;
const onPlay = () => setVideoOk(true);
const onErr = () => {
// Skip a broken clip rather than stalling the carousel.
if (playlist.length > 1) setClip((c) => (c + 1) % playlist.length);else
setVideoOk(false);
};
const onRate = () => {if (v.playbackRate !== 0.75) v.playbackRate = 0.75;};
const onEnded = () => setClip((c) => (c + 1) % playlist.length);
v.addEventListener("playing", onPlay);
v.addEventListener("error", onErr);
v.addEventListener("loadedmetadata", onRate);
v.addEventListener("ended", onEnded);
// Load + play the freshly-set source.
v.load();
const r = v.play();
if (r && r.catch) r.catch(() => {});
return () => {
v.removeEventListener("playing", onPlay);
v.removeEventListener("error", onErr);
v.removeEventListener("loadedmetadata", onRate);
v.removeEventListener("ended", onEnded);
};
}, [resolvedUrl]);
// Pause the hero clip when it scrolls off-screen — frees the video decoder
// for the heavy scroll-scrub clip further down the page (and saves power).
// Uses scroll position rather than IntersectionObserver, which is unreliable
// in some embedded webviews.
useEffect(() => {
const v = videoRef.current;
const el = heroRef.current;
if (!v || !el) return undefined;
let offscreen = false;
const onScroll = () => {
const rect = el.getBoundingClientRect();
const isOff = rect.bottom <= 0 || rect.top >= window.innerHeight;
if (isOff && !offscreen) {
offscreen = true;
try { v.pause(); } catch (e) { /* noop */ }
} else if (!isOff && offscreen) {
offscreen = false;
const r = v.play();
if (r && r.catch) r.catch(() => {});
}
};
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
return (
{resolvedUrl ?
:
null}
{!videoOk &&
VIDEO · drop hero footage here
}
The nutritionist
that's always with you.
The tailored AI & wearable, supporting you with your nutrition to hit
those health goals. Everything your diet coach provides and much more,
with you 24/7.
