// Hero — video bg / split / full-bleed photo variants.
// Headlines: 3 variations toggled via tweaks.
const HEADLINES = {
"transform": {
render:
<>
Transformyour body.Elevate your life.
,
sub: "Private coaching for busy professionals who expect a lot of themselves. We build the strength, energy, and resilience that keep you at your best."
},
"operator": {
render:
<>
Trainlike anoperator.
,
sub: "For more than twenty years, executives, founders, and on-screen talent have trusted Charles to keep them strong, sharp, and ready for anything."
},
"edge": {
render:
<>
The edgeyour peersdon't have.
,
sub: "Private training in Tribeca and tailored remote programs for people who take their health as seriously as their work."
}
};
function Hero({ layout, headlineKey }) {
const h = HEADLINES[headlineKey] || HEADLINES["transform"];
// Force-remount on layout/headline change so animations replay
const [animKey, setAnimKey] = React.useState(0);
React.useEffect(() => {setAnimKey((k) => k + 1);}, [layout, headlineKey]);
// Parallax on hero media
const mediaRef = React.useRef(null);
React.useEffect(() => {
const onScroll = () => {
if (!mediaRef.current) return;
const y = window.scrollY;
mediaRef.current.style.transform = `translate3d(0, ${y * 0.3}px, 0) scale(${1 + y * 0.0003})`;
};
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
const HERO_VIDEO = "assets/Coop_Edit_2bit.mp4";
const HERO_POSTER = "assets/hero-opt.jpg";
const HERO_PHOTO = "assets/hero-opt.jpg";
const SPLIT_PHOTO = "assets/jksimmons3-opt.jpg";
// --- Media element by layout ---
let mediaEl = null;
if (layout === "video") {
mediaEl =
;
} else if (layout === "photo") {
mediaEl =
;
}
// SPLIT layout: text left, image right
if (layout === "split") {
return (
{/* Left: text */}