// These show what a gift is equal to, not where it goes: the board decides how funds are used.
window.IMPACT={100:'Helps with classroom and program supplies.',250:'Equal to the CCU credit fee for one course.',500:'Equal to tuition for one half-credit course.',1000:'Equal to tuition for one full-credit course.',2500:'Equal to two dual credit courses, with tuition and credit fees.'};
function useWide(bp){const q=bp||900;const [w,setW]=React.useState(window.innerWidth>=q);React.useEffect(()=>{const f=()=>setW(window.innerWidth>=q);window.addEventListener('resize',f);return()=>window.removeEventListener('resize',f)},[q]);return w}
const NAV=[
 {label:'Who we are',items:[['about','Program overview'],['instructors','Instructors'],['mentors','Mentor team'],['faith','Statement of faith']]},
 {label:'Courses',items:[['courses','26–27 course offerings'],['schedules','Weekly schedules']]},
 {label:'FAQ',to:'faq'},{label:'Contact',to:'contact'},{label:'My giving',to:'account'}
];
function NavDrop({group,page}){
  const [o,setO]=React.useState(false);
  const active=group.items.some(i=>i[0]===page);
  return <div onMouseEnter={()=>setO(true)} onMouseLeave={()=>setO(false)} style={{position:'relative'}}>
    <button type="button" className="sm-navlink" aria-expanded={o} aria-current={active?'page':undefined} onClick={()=>setO(!o)}>{group.label}<HM.Icon name="chevron-down" size={14}></HM.Icon></button>
    {o&&<div className="sm-drop"><div className="sm-drop-in">{group.items.map(([k,l])=><a key={k} href={'#/'+k} aria-current={page===k?'page':undefined} onClick={()=>setO(false)}>{l}</a>)}</div></div>}
  </div>;
}
function SiteHeader({page,go}){
  const {Button,Logo,IconButton}=HM;
  const wide=useWide(1080);
  const [m,setM]=React.useState(false);
  const [solid,setSolid]=React.useState(false);
  React.useEffect(()=>setM(false),[page]);
  React.useEffect(()=>{const f=()=>setSolid(window.scrollY>60);f();window.addEventListener('scroll',f,{passive:true});return()=>window.removeEventListener('scroll',f)},[]);
  return <header className={'sm-head'+(solid||m?' solid':'')}>
    <div className="sm-head-in">
      <a href="#/" style={{display:'flex'}} aria-label="High Mountain home"><Logo variant="full" tone="light" height={44} basePath="assets/logo"></Logo></a>
      {wide?<nav className="sm-nav">
        {NAV.map(g=>g.items?<NavDrop key={g.label} group={g} page={page}></NavDrop>:<a key={g.to} href={'#/'+g.to} className="sm-navlink" aria-current={page===g.to?'page':undefined}>{g.label}</a>)}
        <div style={{display:'flex',gap:10}}><Button size="sm" variant="outlineInverse" onClick={()=>go('apply')}>Apply</Button><Button size="sm" variant="accent" iconLeft="heart" onClick={()=>go('give')}>Give</Button></div>
      </nav>:<div style={{display:'flex',gap:8,alignItems:'center'}}><Button size="sm" variant="accent" onClick={()=>go('give')}>Give</Button><IconButton icon={m?'x':'menu'} label="Menu" variant="inverse" onClick={()=>setM(!m)}></IconButton></div>}
    </div>
    {m&&!wide&&<nav className="sm-mnav">
      {NAV.map(g=>g.items?<div key={g.label} style={{padding:'14px 0',borderBottom:'1px solid rgba(246,242,236,.14)'}}><HM.Eyebrow tone="inverse">{g.label}</HM.Eyebrow>{g.items.map(([k,l])=><a key={k} href={'#/'+k}>{l}</a>)}</div>:<a key={g.to} href={'#/'+g.to} style={{padding:'16px 0',borderBottom:'1px solid rgba(246,242,236,.14)'}}>{g.label}</a>)}
      <div style={{paddingTop:20}}><Button fullWidth variant="outlineInverse" onClick={()=>go('apply')}>Apply</Button></div>
    </nav>}
  </header>;
}
function SiteFooter({go}){
  const {Logo,Button}=HM;
  const col=(t,items)=><div style={{display:'flex',flexDirection:'column',gap:12}}><span className="sm-k" style={{color:'var(--hm-aspen-500)',fontSize:12}}>{t}</span>{items.map(([k,l])=><a key={l} href={'#/'+k}>{l}</a>)}</div>;
  return <footer className="sm-foot" style={{background:'#281E1E',color:'var(--hm-snow)',padding:'96px var(--gutter) 36px'}}><div className="sm-wrap">
    <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:32,flexWrap:'wrap',paddingBottom:64,borderBottom:'1px solid rgba(246,242,236,.15)'}}><p className="sm-h1" style={{fontSize:'clamp(44px,6vw,96px)'}}>Help a student <b>climb higher.</b></p><Button variant="accent" size="lg" iconLeft="heart" onClick={()=>go('give')}>Give today</Button></div>
    <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(180px,1fr))',gap:40,paddingTop:56}}>
      <div style={{display:'flex',flexDirection:'column',gap:20,minWidth:0}}><Logo variant="full" tone="light" height={48} basePath="assets/logo"></Logo><p style={{fontSize:15,lineHeight:1.6,opacity:.75,maxWidth:340}}>Developing future leaders in faith, character and wisdom. Buena Vista, Colorado.</p></div>
      {col('Who we are',[['about','Program overview'],['instructors','Instructors'],['mentors','Mentor team'],['faith','Statement of faith']])}
      {col('Courses',[['courses','26–27 course offerings'],['schedules','Schedules'],['faq','FAQ']])}
      {col('Get involved',[['apply','Apply'],['give','Give'],['account','My giving'],['contact','Contact']])}
    </div>
    <div style={{marginTop:56,paddingTop:20,borderTop:'1px solid rgba(246,242,236,.15)',display:'flex',flexWrap:'wrap',gap:12,justifyContent:'space-between',fontSize:13,opacity:.6}}><span>© 2026 High Mountain Secondary School Enrichment</span><span>Dual credit through Colorado Christian University &amp; Bryan College</span></div>
  </div></footer>;
}
function Section({children,bg,style,narrow,dark}){return <section className={dark?'sm-dark':''} style={{background:bg||undefined,padding:'clamp(72px,9vw,140px) var(--gutter)',...style}}><div style={{maxWidth:narrow?820:'var(--content-max)',margin:'0 auto'}}>{children}</div></section>}
function PageIntro({eyebrow,title,lead,image,pos}){
  return <section className="sm-intro sm-dark" style={{backgroundImage:'url(assets/images/'+(image||'hero-home.jpg')+')',backgroundPosition:'center '+(pos||'50%')}}>
    <div className="sm-wrap" style={{display:'flex',flexDirection:'column',gap:28}}>
      <span className="sm-k sm-rule">{eyebrow}</span>
      <h1 className="sm-h1" style={{maxWidth:1100}}>{title}</h1>
      {lead&&<p className="sm-lead" style={{maxWidth:680}}>{lead}</p>}
    </div>
  </section>;
}
function GiveDock({go,compact}){
  const {Tabs,Button}=HM;
  const [amt,setAmt]=React.useState(250);
  const [freq,setFreq]=React.useState('One-time');
  return <div className="sm-dock sm-light">
    <Tabs variant="segmented" tabs={['One-time','Monthly']} value={freq} onChange={setFreq}></Tabs>
    <div style={{display:'flex',flexDirection:'column',gap:8,minWidth:0}}><div className="sm-chips">{[100,250,500,1000,2500].map(a=><button key={a} type="button" className="sm-chip" aria-pressed={a===amt} onClick={()=>setAmt(a)}>{'$'+a.toLocaleString()}</button>)}</div><span style={{fontSize:14,color:'var(--text-2)'}}>{IMPACT[amt]}</span></div>
    <Button variant="accent" size="lg" iconLeft="heart" onClick={()=>go('give',{amount:amt,freq})}>{'Give $'+amt.toLocaleString()+(freq==='Monthly'?'/mo':'')}</Button>
  </div>;
}
function GiveBand({go,img}){
  const {Button}=HM;
  return <section className="sm-band sm-dark">
    <div className="sm-ph" style={{backgroundImage:'url(assets/images/'+(img||'students-1.jpg')+')'}}></div>
    <div className="sm-chtxt"><span className="sm-k sm-rule">Partner with us</span><div style={{display:'flex',flexDirection:'column',gap:24}}><h2>Help a family <i>say yes.</i></h2><p>Scholarships put dual credit, mentorship and adventure within reach for more students in the Valley.</p></div><div style={{display:'flex',gap:12,flexWrap:'wrap'}}><Button size="lg" variant="accent" iconLeft="heart" onClick={()=>go('give')}>Give today</Button><Button size="lg" variant="outlineInverse" onClick={()=>go('give',{freq:'Monthly'})}>Give monthly</Button></div></div>
  </section>;
}
const grid=(min,gap)=>({display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax('+min+'px,1fr))',gap:gap||32});
Object.assign(window,{useWide,SiteHeader,SiteFooter,Section,PageIntro,GiveDock,GiveBand,grid});