const {Card,Icon,Button,Logo,GradientRule,Badge}=window.KinroAcademyDesignSystem_f0472d;

const FAQS=[
  ["Isn’t a group just a smaller version of a school class?","No. A class of thirty makes individual feedback impossible; a targeted group makes it the whole point of the hour. Students are matched by grade and by the specific gaps in their papers, every question is attempted by everyone before anyone speaks, and nobody moves past a topic they cannot produce marks on. The research is consistent on this: Springer, Stanne and Donovan’s 1999 meta-analysis of small-group learning in science and maths found effect sizes of 0.51 on achievement against students taught individually or by lecture."],
  ["My child is shy. Will they be lost in a group?","This is the most common worry and the one that reverses fastest. Answers go on private boards first, so nobody is put on the spot cold, and the teacher sees every attempt at once. Being one of several also removes the pressure of an adult’s undivided stare for an hour, which is what anxious students actually find hardest. If it genuinely is not working, the 14-day guarantee covers you."],
  ["What is the 14-day money-back guarantee?","Two full weeks of sessions, marked homework and workbooks. If you do not think your child is better off, tell us inside 14 days and we refund you in full. No form, no notice period, no argument."],
  ["What if they need help with something the group isn’t covering?","Workbook pages are set individually off each week’s exit check, so two students in the same group can be working on different topics that night. Parents also get a direct line to their child’s teacher between sessions."],
  ["Who will actually teach my child?","Your child is assigned to one of our specialist GCSE maths teachers, matched to their grade and their gaps. Every teacher is a subject specialist, DBS checked, and trained on our mark scheme method and our workbooks before they take a session."],
  ["Which exam boards and tiers do you cover?","AQA, Edexcel and OCR, Higher and Foundation. GCSE maths is the only thing we teach, which is the point."],
  ["What happens on the fifteen-minute call?","We ask about your child’s last mock, what has been tried already, and what grade you need. Then we tell you whether we can get there and roughly how long it should take. There is no presentation and no second call to “discuss options”."],
  ["Are sessions recorded? What if we miss one?","Every session is recorded and available for the term, so a missed week is caught up rather than lost."]];

function FaqSection({onBook}){
  const [open,setOpen]=React.useState(0);
  return <>
  <CtaBand onBook={onBook} title="Still deciding? That is exactly what the call is for."
    lead="Fifteen minutes, a straight answer on whether we can move your child’s grade, and no follow-up sales call." cta="See if your child qualifies"/>
  <section className="lp-sec" style={{background:"var(--surface-page)",paddingTop:0}}>
    <div className="lp-wrap lp-split-r">
      <Reveal><div className="lp-sticky" style={{display:"flex",flexDirection:"column",gap:"var(--space-6)"}}>
        <GradientRule width="88px"/>
        <Eyebrow>Straight answers</Eyebrow>
        <h2 style={{fontSize:"var(--size-display-3)",lineHeight:"var(--leading-snug)"}}>The questions parents actually ask.</h2>
        <p style={{fontSize:"var(--size-body-lg)",color:"var(--text-muted)",lineHeight:"var(--leading-body)"}}>
          If yours is not here, ask it on the call. You will get a yes or a no, not a brochure.
        </p>
        <Button variant="accent" size="lg" iconRight="arrow-right" style={{alignSelf:"flex-start"}} onClick={onBook}>See if your child qualifies</Button>
        <GuaranteePill/>
      </div></Reveal>
      <div style={{display:"flex",flexDirection:"column",gap:"var(--space-4)"}}>
        {FAQS.map(([q,a],i)=>{const on=open===i;
          return <Reveal key={q} delay={i*50}><div onClick={()=>setOpen(on?-1:i)}
            style={{cursor:"pointer",padding:"var(--space-7)",borderRadius:"var(--radius-lg)",
              background:on?"var(--surface-accent-soft)":"var(--surface-card)",
              border:on?"1px solid var(--violet-100)":"1px solid var(--border-subtle)",transition:"all .28s"}}>
            <div style={{display:"flex",alignItems:"center",gap:"var(--space-6)"}}>
              <h4 style={{fontSize:"var(--size-body-lg)",lineHeight:"var(--leading-heading)",margin:0,flex:1}}>{q}</h4>
              <span style={{width:30,height:30,borderRadius:"50%",flexShrink:0,display:"grid",placeItems:"center",
                background:on?"var(--gradient-brand)":"var(--surface-sunken)",transition:"background .28s"}}>
                <Icon name={on?"minus":"plus"} size="sm" color={on?"var(--white)":"var(--ink-600)"}/></span>
            </div>
            <div style={{maxHeight:on?460:0,opacity:on?1:0,overflow:"hidden",
              transition:"max-height .45s cubic-bezier(.2,.7,.2,1),opacity .3s"}}>
              <p style={{fontSize:15,color:"var(--text-body)",lineHeight:"var(--leading-relaxed)",margin:"var(--space-5) 0 0",maxWidth:"64ch"}}>{a}</p>
            </div>
          </div></Reveal>;})}
      </div>
    </div>
  </section>
  </>;
}

function LpFooter(){
  return <footer style={{background:"var(--gradient-ink)",color:"var(--white)",paddingBottom:110}}>
    <div className="lp-wrap" style={{paddingTop:"var(--space-12)",paddingBottom:"var(--space-9)"}}>
      <div className="lp-grid lp-3">
        <div style={{display:"flex",flexDirection:"column",gap:"var(--space-6)"}}>
          <Logo variant="light" height={34} assetBase={LP_A} style={{alignSelf:"flex-start",width:"fit-content"}}/>
          <p style={{fontSize:14,color:"rgba(255,255,255,0.62)",maxWidth:"36ch",lineHeight:"var(--leading-body)"}}>
            Specialist GCSE maths tuition in targeted online groups, built on the Oxford small-group method and marked against the real mark scheme.
          </p>
          <GradientRule width="72px"/>
        </div>
        {[["Company",["About Kinro","Our results","Our teachers","Safeguarding","Contact"]],
          ["Parents",["FAQ","14-day guarantee","Privacy","Terms"]]]
          .map(([h,items])=><div key={h} style={{display:"flex",flexDirection:"column",gap:"var(--space-5)"}}>
            <span className="k-eyebrow" style={{color:"rgba(255,255,255,0.5)"}}>{h}</span>
            {items.map(i=><a key={i} href="#" style={{fontSize:14,color:"rgba(255,255,255,0.78)",textDecoration:"none"}}>{i}</a>)}
          </div>)}
      </div>
      <div style={{marginTop:"var(--space-12)",paddingTop:"var(--space-7)",borderTop:"1px solid rgba(255,255,255,0.10)",
        display:"flex",justifyContent:"space-between",fontSize:13,color:"rgba(255,255,255,0.45)",gap:"var(--space-7)",flexWrap:"wrap"}}>
        <span>© 2026 Kinro Academy Ltd</span>
        <span>Full research citations available on request.</span>
      </div>
    </div>
  </footer>;
}

Object.assign(window,{FaqSection,LpFooter,FAQS});