function AboutPage({go}){
  const {Button}=HM;
  const d=[['Engagement with great ideas','Students read from the Great Books curriculum, wrestle with how to be active both as members in the kingdom of God and citizens of the United States, and learn to reason critically yet respectfully in response to opposing points of view.'],['Technology in its proper place','Students learn to think first for themselves rather than letting algorithms do the thinking — when not to use technology in place of reason, and how to thoughtfully use AI to save time. Cell phones are not allowed in classrooms.'],['Opportunity for career engagement','Mondays are off for internships, entrepreneurship and other paid work that inspire students with vision, experience and skills for their future.'],['Expeditionary learning through STEM aviation','STEM teachers partner with local aviation experts to make abstract scientific and mathematical principles relevant to a growing career field.'],['Christ-centered character and leadership','Through outdoor expeditions, mentorship and engaging coursework, we help students gain vision and purpose.']];
  return <div>
    <PageIntro eyebrow="Program overview" title={<>Re-imagining <b>high school.</b></>} lead="We see the high school years as a time of dynamic growth, where the challenges of becoming an adult meet the energy and wonder of youth." image="program-overview.jpg"></PageIntro>
    <Section dark><div style={{display:'flex',flexDirection:'column',gap:56}}>
      <div style={{display:'flex',flexDirection:'column',gap:20,maxWidth:860}}><span className="sm-k sm-rule">Our distinctives</span><h2 className="sm-h2">Education, mentorship and character — <i>to maximize each student’s potential.</i></h2></div>
      <div>{d.map(([t,b],i)=><div key={t} className="sm-idx"><span className="sm-k" style={{color:'var(--hm-aspen-500)'}}>{'0'+(i+1)}</span><h3>{t}</h3><p>{b}</p></div>)}</div>
    </div></Section>
    <section className="sm-band sm-dark"><div className="sm-ph" style={{backgroundImage:'url(assets/images/kids-at-school.jpg)'}}></div><div className="sm-chtxt"><span className="sm-k sm-rule">Tuesday–Friday</span><div style={{display:'flex',flexDirection:'column',gap:24}}><h2>College credit, <i>by grade level.</i></h2><p>Courses are taught Tuesday–Friday and offer college credit depending on grade level. Have questions? Send us a quick note and let’s figure things out together.</p></div><div style={{display:'flex',gap:12,flexWrap:'wrap'}}><Button variant="accent" onClick={()=>go('courses')}>View courses</Button><Button variant="outlineInverse" onClick={()=>go('contact')}>Reach out</Button></div></div></section>
    <GiveBand go={go} img="students-2.jpg"></GiveBand>
  </div>;
}
function InstructorsPage({go}){
  return <div>
    <PageIntro eyebrow="Who we are" title={<>The people <b>you support.</b></>} lead="Local instructors who also serve as university faculty for our dual credit courses." image="students-2.jpg" pos="35%"></PageIntro>
    <Section dark style={{paddingTop:24}}><div>{INSTRUCTORS.map(p=><article key={p.name} className="sm-person"><img src={p.img} alt={p.name}></img><div style={{display:'flex',flexDirection:'column',gap:18}}><span className="sm-k" style={{color:'var(--hm-aspen-500)'}}>{p.subjects}</span><h2 className="sm-h2" style={{fontSize:'clamp(40px,4.6vw,68px)'}}>{p.name}</h2><p style={{color:'var(--text-2)',fontSize:18,maxWidth:'var(--prose-max)'}}>{p.bio}</p></div></article>)}</div></Section>
    <GiveBand go={go}></GiveBand>
  </div>;
}
function MentorsPage({go}){
  const {Button}=HM;
  return <div>
    <PageIntro eyebrow="Who we are" title={<>Mentor <b>team.</b></>} lead="Each student can connect with an individual from our curated team of mentors, each of whom has experienced remarkable professional success in his or her field." image="course-leadership.jpg"></PageIntro>
    <Section dark narrow><div style={{display:'flex',flexDirection:'column',gap:24,alignItems:'flex-start'}}>
      <span className="sm-k" style={{color:'var(--hm-aspen-500)'}}>Coming soon</span><h2 className="sm-h2">Mentor bios are <i>on their way.</i></h2>
      <p className="sm-lead" style={{color:'var(--text-2)'}}>Students are responsible for reaching out and establishing a professional mentoring relationship to gain wisdom and insight into possible college or career paths.</p>
      <p className="sm-lead" style={{color:'var(--text-2)'}}>Interested in mentoring a High Mountain student? We’d love to hear from you.</p>
      <Button variant="accent" iconRight="arrow-right" onClick={()=>go('contact')}>Become a mentor</Button>
    </div></Section>
  </div>;
}
const CREED=[['We believe in one God,','the Father, the Almighty,','maker of heaven and earth,','of all that is, seen and unseen.'],['We believe in one Lord, Jesus Christ,','the only Son of God,','eternally begotten of the Father,','God from God, Light from Light,','true God from true God,','begotten, not made,','of one Being with the Father.','Through him all things were made.'],['For us and for our salvation','he came down from heaven:','by the power of the Holy Spirit','he became incarnate from the Virgin Mary,','and was made man.'],['For our sake he was crucified under Pontius Pilate;','he suffered death and was buried.','On the third day he rose again','in accordance with the Scriptures;','he ascended into heaven','and is seated at the right hand of the Father.'],['He will come again in glory to judge the living and the dead,','and his kingdom will have no end.'],['We believe in the Holy Spirit, the Lord, the giver of life,','who proceeds from the Father and the Son.','With the Father and the Son he is worshiped and glorified.','He has spoken through the Prophets.','We believe in one holy catholic and apostolic Church.','We acknowledge one baptism for the forgiveness of sins.','We look for the resurrection of the dead,','and the life of the world to come.']];
function FaithPage(){
  return <div>
    <PageIntro eyebrow="Statement of faith" title={<>The Nicene <b>Creed.</b></>} image="faith.jpg"></PageIntro>
    <Section dark narrow><div className="sm-creed" style={{display:'flex',flexDirection:'column',gap:28}}>{CREED.map((s,i)=><p key={i}>{s.map((l,j)=><React.Fragment key={j}>{l}<br></br></React.Fragment>)}</p>)}<p style={{fontStyle:'italic',fontWeight:600}}>Amen.</p></div></Section>
  </div>;
}
function CoursesPage({go}){
  const {Tabs,Button,Tooltip}=HM;
  const [subj,setSubj]=React.useState('All');
  const [creditOnly,setCreditOnly]=React.useState(false);
  const list=COURSES.filter(c=>(subj==='All'||c.subject===subj)&&(!creditOnly||c.credit));
  return <div>
    <PageIntro eyebrow="Courses and schedules" title={<>2026–27 <b>courses.</b></>} lead="Small, discussion-driven classes — most are not lecture-based. Students 15 and older can take many courses for college credit." image="course-british-lit.jpg"></PageIntro>
    <Section dark style={{paddingTop:24}}>
      <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:24,flexWrap:'wrap',marginBottom:32}}>
        <div style={{overflowX:'auto',flex:'1 1 420px'}}><Tabs tabs={['All','Humanities','STEM','Bible','Elective']} value={subj} onChange={setSubj}></Tabs></div>
        <div style={{display:'flex',gap:10,alignItems:'center',paddingBottom:8}}><button type="button" className="sm-chip" aria-pressed={creditOnly} onClick={()=>setCreditOnly(!creditOnly)} style={{fontSize:13,padding:'8px 14px'}}>College credit only</button><Tooltip content="Through CCU (HLC-accredited). Students must be 15+."><HM.Icon name="info" size={18} color="var(--text-3)"></HM.Icon></Tooltip></div>
      </div>
      <div>{list.map(c=><article key={c.title} className="sm-crow">{c.image?<img className="img" src={c.image} alt=""></img>:<span className="img" style={{display:'grid',placeItems:'center'}}><img src="assets/logo/hm-mark-white.png" alt="" style={{width:'36%',opacity:.4}}></img></span>}<div style={{display:'flex',flexDirection:'column',gap:12}}><h2 style={{fontSize:'clamp(28px,2.8vw,42px)',lineHeight:1.06}}>{c.title}</h2><p style={{color:'var(--text-2)',maxWidth:'var(--prose-max)'}}>{c.summary}</p></div><div className="meta" style={{display:'flex',flexDirection:'column',gap:10,fontSize:15}}>{c.credit&&<span className="sm-k" style={{fontSize:12,color:'var(--hm-aspen-500)'}}>College credit</span>}<span className="sm-k" style={{fontSize:12,color:'var(--text-3)'}}>{c.subject}</span><span style={{fontWeight:500}}>{c.instructor}</span><span style={{color:'var(--text-2)'}}>{c.schedule}</span></div></article>)}</div>
      {!list.length&&<p style={{color:'var(--text-3)',padding:'40px 0'}}>No courses match those filters.</p>}
      <div style={{marginTop:48,display:'flex',gap:12,flexWrap:'wrap'}}><Button variant="outlineInverse" iconLeft="calendar-days" onClick={()=>go('schedules')}>Weekly schedules</Button><Button variant="accent" onClick={()=>go('apply')}>Apply</Button></div>
    </Section>
    <GiveBand go={go} img="course-physics-aviation.jpg"></GiveBand>
  </div>;
}
function SchedulesPage({go}){
  const {Tabs,Button}=HM;
  const [t,setT]=React.useState('Grades 9/10');
  return <div>
    <PageIntro eyebrow="Courses and schedules" title={<>The week, <b>Tuesday to Friday.</b></>} lead="Mondays are reserved for internships, entrepreneurship and paid work." image="kids-at-school.jpg"></PageIntro>
    <Section><div style={{display:'flex',flexDirection:'column',gap:28}}>
      <Tabs tabs={['Grades 9/10','Grades 11/12']} value={t} onChange={setT}></Tabs>
      <img src={t==='Grades 9/10'?'assets/images/schedule-9-10.png':'assets/images/schedule-11-12.png'} alt={t+' schedule'} style={{width:'100%',display:'block'}}></img>
      <p style={{fontSize:14,color:'var(--text-3)'}}>Schedule shown as published on the current site. Rebuild as an HTML table once the 26–27 grid is final.</p>
      <div><Button variant="secondary" iconRight="arrow-right" onClick={()=>go('courses')}>Course descriptions</Button></div>
    </div></Section>
  </div>;
}
function FaqPage({go}){
  const {Accordion,Button}=HM;
  return <div>
    <PageIntro eyebrow="FAQ" title={<>Questions <b>families ask.</b></>} image="students-1.jpg" pos="30%"></PageIntro>
    <Section dark style={{paddingTop:24}}><div style={{display:'flex',flexWrap:'wrap',gap:64,alignItems:'flex-start'}}>
      <Accordion items={FAQS} defaultOpen={0} style={{flex:'2 1 480px',minWidth:0}}></Accordion>
      <aside style={{flex:'1 1 280px',borderTop:'1.5px solid var(--hm-snow)',paddingTop:24,display:'flex',flexDirection:'column',gap:16,position:'sticky',top:110}}>
        <span className="sm-k" style={{color:'var(--hm-aspen-500)'}}>Still wondering?</span><h3 style={{fontSize:32,lineHeight:1.1}}>Reach out — we’d love to talk.</h3><p style={{color:'var(--text-2)'}}>If cost feels out of reach for your family, please ask. We have some scholarships available.</p><div><Button variant="accent" iconRight="arrow-right" onClick={()=>go('contact')}>Contact us</Button></div>
      </aside>
    </div></Section>
  </div>;
}
Object.assign(window,{AboutPage,InstructorsPage,MentorsPage,FaithPage,CoursesPage,SchedulesPage,FaqPage});