const fieldLabel={display:'block',fontFamily:'var(--font-label)',fontSize:12,fontWeight:500,letterSpacing:'.14em',textTransform:'uppercase',color:'var(--text-2)',marginBottom:10};
function ContactPage({go,toast}){
  const {Input,Select,Button,Eyebrow}=HM;
  return <div>
    <PageIntro eyebrow="Contact" title={<>Have questions? <b>Reach out.</b></>} lead="Send us a quick note and let’s figure things out together." image="course-culture.jpg"/>
    <section style={{padding:'0 var(--gutter) var(--section-y)'}}><div style={{maxWidth:'var(--content-max)',margin:'0 auto',...grid(320,64),alignItems:'start'}}>
      <form onSubmit={e=>{e.preventDefault();e.target.reset();toast('Message sent','Thanks — we’ll be in touch soon.')}} style={{display:'flex',flexDirection:'column',gap:20}}>
        <div style={grid(220,16)}><Input label="Name" required/><Input label="Email" type="email" required/></div>
        <Select label="I’m interested in" options={['Applying for 26–27','Scheduling a visit','Scholarships','Mentoring a student','Giving','Something else']}/>
        <Input label="Message" multiline rows={6} required/>
        <div><Button type="submit" iconRight="send">Send message</Button></div>
      </form>
      <img src="assets/images/students-1.jpg" alt="" style={{width:'100%',aspectRatio:'4 / 5',objectFit:'cover',borderRadius:'var(--radius-card)'}}/>
    </div></section>
  </div>;
}
function ApplyPage({go,toast}){
  const {Input,Select,Radio,Checkbox,Button,Eyebrow,Dialog}=HM;
  const [g,setG]=React.useState('9');
  const [picks,setPicks]=React.useState([]);
  const [sent,setSent]=React.useState(false);
  const toggle=t=>setPicks(p=>p.includes(t)?p.filter(x=>x!==t):[...p,t]);
  const block=(n,t,c)=><fieldset style={{border:0,padding:'36px 0 0',margin:0,borderTop:'1px solid var(--border-2)',display:'flex',flexDirection:'column',gap:20}}><legend style={{display:'contents'}}/><div style={{display:'flex',gap:16,alignItems:'baseline'}}><span style={{fontFamily:'var(--font-serif)',fontSize:28,fontWeight:600,color:'var(--hm-granite-500)'}}>{n}</span><h2 style={{fontSize:30}}>{t}</h2></div>{c}</fieldset>;
  return <div>
    <PageIntro eyebrow="Apply · 2026–27" title={<>Ready to <b>apply?</b></>} lead="Students complete the application — parents can advise, but please allow students to form independent thoughts so we know they are invested. Answer all questions in complete sentences and be as honest as possible." image="apply.jpg"/>
    <Section narrow>
      <form onSubmit={e=>{e.preventDefault();setSent(true)}} style={{display:'flex',flexDirection:'column',gap:40}}>
        {block('01','About the student',<>
          <div style={grid(220,16)}><Input label="First name" required/><Input label="Last name" required/></div>
          <div style={grid(220,16)}><Input label="Student email" type="email" required/><Input label="Date of birth" type="date" hint="CCU requires students to be 15 when a course starts for college credit."/></div>
          <div><span style={fieldLabel}>Grade entering in fall 2026</span><Radio name="grade" direction="row" options={['9','10','11','12']} value={g} onChange={setG}/></div>
          <Input label="Current or previous school" hint="Transferring in? Not a problem — we’ll build on credits already earned."/>
        </>)}
        {block('02','Parent or guardian',<>
          <div style={grid(220,16)}><Input label="Parent name" required/><Input label="Parent email" type="email" required/></div>
          <Input label="Phone" type="tel"/>
        </>)}
        {block('03','Courses of interest',<div style={grid(260,12)}>{COURSES.map(c=><Checkbox key={c.title} label={c.title} description={c.schedule+(c.credit?' · college credit':'')} checked={picks.includes(c.title)} onChange={()=>toggle(c.title)}/>)}</div>)}
        {block('04','In your own words',<>
          <Input label="Why do you want to attend High Mountain?" multiline rows={5} required/>
          <Input label="What are you passionate about outside of school?" multiline rows={4}/>
          <Input label="Describe a time you showed leadership or overcame a challenge." multiline rows={4}/>
          <p style={{fontSize:14,color:'var(--text-3)'}}>Application questions are placeholders — replace with High Mountain’s official prompts.</p>
        </>)}
        <div style={{display:'flex',gap:16,alignItems:'center',flexWrap:'wrap'}}><Button type="submit" size="lg" iconRight="arrow-right">Submit application</Button><span style={{fontSize:14,color:'var(--text-3)'}}>Need financial help? <a href="#/contact">Ask about scholarships</a>.</span></div>
      </form>
    </Section>
    <Dialog open={sent} title="Application received" onClose={()=>setSent(false)} actions={<Button onClick={()=>{setSent(false);go('home')}}>Back to home</Button>}>Thank you for applying to High Mountain. We’ll review your answers and reach out to schedule a conversation with your family.</Dialog>
  </div>;
}
Object.assign(window,{ContactPage,ApplyPage});