function HomePage({go}){
  const {Button}=HM;
  const [use,setUse]=React.useState(GIFT_USES[0].id);
  const u=GIFT_USES.find(x=>x.id===use);
  const chapters=[
    ['01','College credit','College credit <i>before graduation.</i>','Most courses are dual credit through Colorado Christian University and Bryan College, both HLC-accredited. With diligence, students can finish a 60-hour associate’s degree.','students-1.jpg'],
    ['02','Great Books','Homer to Orwell, <i>argued out loud.</i>','Close reading and real discussion around a table make students excellent thinkers, eloquent writers and confident speakers.','course-ancient-lit.jpg'],
    ['03','Adventure','Character is built <i>on the mountain.</i>','Multiple expeditions a year, with opportunities like climbing certification and wilderness first aid along the way.','program-overview.jpg']
  ];
  return <div>
    <section className="sm-hero sm-dark" style={{backgroundImage:'url(assets/images/hero-home.jpg)'}}>
      <div style={{padding:'calc(var(--header-h) + 64px) var(--gutter) clamp(32px,4vw,56px)'}}><div className="sm-wrap" style={{display:'flex',flexDirection:'column',gap:44}}>
        <div className="sm-hero-grid">
          <h1 className="sm-display">Every student<br></br><b>deserves a summit.</b></h1>
          <p className="sm-lead" style={{paddingBottom:12}}>Christ-centered enrichment for grades 9–12 in the Collegiate Peaks. Your gift keeps the path open for more families in the Valley.</p>
        </div>
        <GiveDock go={go}></GiveDock>
      </div></div>
    </section>
    <section className="sm-dark" style={{padding:'0 var(--gutter) clamp(56px,6vw,96px)'}}><div className="sm-wrap sm-facts">
      {[['Dual credit','Colorado Christian University'],['Bible credit','Bryan College · HLC-accredited'],['Tuesday–Friday','Mondays free for real work'],['Grades 9–12','Buena Vista, Colorado']].map(([b,s])=><div key={b}><b>{b}</b><span>{s}</span></div>)}
    </div></section>
    {chapters.map(([n,k,h,p,img],i)=><section key={n} className={'sm-chapter sm-dark'+(i%2?' flip':'')}>
      <div className="sm-ph" style={{backgroundImage:'url(assets/images/'+img+')'}}></div>
      <div className="sm-chtxt"><span className="sm-k sm-rule">{'Chapter '+n+' · '+k}</span><div style={{display:'flex',flexDirection:'column',gap:28}}><h2 dangerouslySetInnerHTML={{__html:h}}></h2><p>{p}</p></div><div><Button variant="outlineInverse" iconRight="arrow-right" onClick={()=>go('give')}>Give</Button></div></div>
    </section>)}
    <section className="sm-sec sm-dark"><div className="sm-wrap" style={{display:'flex',flexDirection:'column',gap:56}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:32,flexWrap:'wrap'}}><h2 className="sm-h2" style={{maxWidth:760}}>And everything <i>around the classroom.</i></h2><button type="button" className="hm-textlink" style={{color:'var(--hm-snow)'}} onClick={()=>go('about')}>Program overview<HM.Icon name="arrow-right" size={16}></HM.Icon></button></div>
      <div className="sm-trio">{[['Mentors by name','Every student can connect with a mentor from our curated team, plus private college counseling and SAT/ACT instruction.','students-2.jpg'],['Real work on Mondays','Classes run Tuesday–Friday so Mondays are free for internships, entrepreneurship and paid work.','course-entrepreneurship.jpg'],['STEM aviation','Physics brought to life through model aircraft and flight-based experiments with local aviation experts.','course-physics-aviation.jpg']].map(([t,b,img])=><figure key={t}><img src={'assets/images/'+img} alt=""></img><h3>{t}</h3><p>{b}</p></figure>)}</div>
    </div></section>
    <section className="sm-sec sm-dark sm-ink"><div className="sm-wrap sm-eq">
      <span className="sm-k" style={{color:'var(--hm-aspen-500)'}}>One student · one course · one year</span>
      <div className="sm-big">$1,250</div>
      <div className="sm-eqparts"><span><b>$1,000</b>Course tuition</span><span style={{fontFamily:'var(--font-serif)',fontSize:44,color:'var(--hm-snow)'}}>+</span><span><b>$250</b>CCU credit fee</span></div>
      <p className="sm-lead" style={{maxWidth:640,color:'var(--text-2)'}}>That’s the cost of one dual credit course. The board awards scholarships from donated funds as needs arise.</p>
      <Button variant="accent" size="lg" iconLeft="heart" onClick={()=>go('give',{amount:1250})}>Give $1,250</Button>
    </div></section>
    <section className="sm-sec sm-dark"><div className="sm-wrap">
      <div style={{display:'flex',flexDirection:'column',gap:20,marginBottom:56}}><span className="sm-k sm-rule">Where gifts go</span><h2 className="sm-h2">What your gift <i>supports.</i></h2><p className="sm-lead" style={{maxWidth:680,color:'var(--text-2)'}}>The board and administration decide how funds are used as needs arise, including when to award scholarships.</p></div>
      <div className="sm-funds">
        <div>{GIFT_USES.map((x,i)=><button key={x.id} type="button" className="sm-fundrow" aria-current={x.id===use?'true':'false'} onMouseEnter={()=>setUse(x.id)} onFocus={()=>setUse(x.id)} onClick={()=>setUse(x.id)}><span className="sm-k" style={{fontSize:12}}>{'0'+(i+1)}</span><span className="sm-fundrow-t">{x.title}</span></button>)}</div>
        <div className="sm-fundmedia"><img src={'assets/images/'+u.image} alt=""></img><p style={{fontSize:18,color:'var(--text-2)'}}>{u.body}</p><div><Button variant="accent" iconLeft="heart" onClick={()=>go('give')}>Give today</Button></div></div>
      </div>
    </div></section>
    <section className="sm-dark" style={{padding:'0 0 clamp(72px,9vw,140px)'}}>
      <div className="sm-wrap" style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:24,flexWrap:'wrap',padding:'0 var(--gutter) 40px'}}><div style={{display:'flex',flexDirection:'column',gap:20}}><span className="sm-k" style={{color:'var(--hm-aspen-500)'}}>Inside the classroom · 2026–27</span><h2 className="sm-h2">What you’re funding.</h2></div><button type="button" className="hm-textlink" style={{color:'var(--hm-snow)'}} onClick={()=>go('courses')}>All courses<HM.Icon name="arrow-right" size={16}></HM.Icon></button></div>
      <div className="sm-rail">{COURSES.filter(c=>c.image).map(c=><button key={c.title} type="button" className="sm-course" onClick={()=>go('courses')}><span className="ph"><img src={c.image} alt=""></img></span><span className="sm-k" style={{fontSize:12,color:'var(--hm-aspen-500)'}}>{c.subject+(c.credit?' · College credit':'')}</span><h3>{c.title}</h3><span style={{fontSize:15,color:'var(--text-2)'}}>{c.instructor}</span></button>)}</div>
    </section>
    <section className="sm-faces sm-dark">{INSTRUCTORS.map(p=><figure key={p.name}><img src={p.img} alt={p.name}></img><figcaption><b style={{fontWeight:500}}>{p.name}</b><br></br><span style={{opacity:.8,fontSize:13}}>{p.subjects}</span></figcaption></figure>)}</section>
    <section className="sm-mission sm-dark" style={{padding:'clamp(120px,14vw,220px) var(--gutter)'}}><div style={{maxWidth:1100,margin:'0 auto',display:'flex',flexDirection:'column',alignItems:'center',textAlign:'center',gap:36}}><img src="assets/logo/hm-mark-white.png" alt="" style={{height:32}}></img><p className="sm-h1" style={{fontSize:'clamp(40px,5.4vw,80px)',lineHeight:1.06}}>Developing future leaders in <b>faith, character and wisdom.</b></p><span className="sm-k" style={{color:'var(--hm-aspen-500)'}}>Our mission</span></div></section>
  </div>;
}
window.HomePage=HomePage;
