const { Button, ProgressBar, Nav } = window.PissCancerOffDesignSystem_99f843;
function Photo({label, src, fit='cover', style, ...rest}){
const [ok,setOk]=React.useState(true);
if(src && ok) return setOk(false)} {...rest} style={{display:'block',width:'100%',objectFit:fit,borderRadius:6,...style}} />;
return ; }
const NAVY='20,38,95'; // --pco-navy-deep, used for the scrim over the hero photo
const fill={position:'absolute',top:0,right:0,bottom:0,left:0};
const textShadow='0 1px 3px rgba(0,0,0,.45)';
// The hero photo plus a navy gradient ("scrim") that keeps white text readable over it. Both layers fill their parent,
// which must be position:relative. Contrast floor: the ProgressBar's small labels need at least ~.9 navy behind them.
function HeroPhoto({position, scrim}){
return <>
;
}
// Phone menu: a three-line button at the top right of the hero that opens a full-screen navy menu.
const MENU_LINKS=[{label:'The overview',href:'#overview'},{label:'The why',href:'#why'},{label:'Ways to give',href:'#give'},{label:'My training stats',href:'#stats'},{label:'Follow along',href:'#stats'}];
const iconBtn={position:'absolute',top:10,right:6,width:44,height:44,display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:6,background:'transparent',border:0,padding:0,cursor:'pointer',zIndex:3};
const bar3={display:'block',width:26,height:3,borderRadius:2,background:'#fff',boxShadow:'0 1px 2px rgba(0,0,0,.35)'};
function MobileMenu(){
const [open,setOpen]=React.useState(false);
React.useEffect(()=>{ if(!open) return;
const prev=document.body.style.overflow; document.body.style.overflow='hidden';
const onKey=e=>{ if(e.key==='Escape') setOpen(false); }; window.addEventListener('keydown',onKey);
return ()=>{ document.body.style.overflow=prev; window.removeEventListener('keydown',onKey); }; },[open]);
return <>
{/* Portalled to : the hero photo box is its own stacking context, which would otherwise keep the menu under the sticky bar. */}
{open && ReactDOM.createPortal(
, document.body)}
;
}
const STICKY_BAR_H=73; // mobile "Ways to give" bar in sections.jsx: 12px padding + 48px button + 12px padding + 1px border
const NAV_H_MOBILE=64;
function Hero({mobile, raised, goal, givingUrl, onDonate}){
const nav=;
const headline=
I'm running 100 miles to piss cancer off.
;
const bar=;
if(mobile) return
{/* The photo fills the first screen above the sticky "Ways to give" bar and runs up behind the transparent nav,
fading into navy at the very top. Browsers without svh ignore the height and fall back to minHeight. */}
{nav}
{headline}{bar}
;
return
{nav}
{/* Copy stays in the left ~60% so the shirt on the right of the photo is never covered, even on tablets. */}
