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

const OXFORD=[
  ["Prepared work comes to the table","Nothing is taught cold. Students arrive having attempted the problem set, so the session is spent on the reasoning rather than the reading."],
  ["A small, deliberately matched group","Students are grouped by grade and by the specific gaps in their papers, not by age or by who signed up that month."],
  ["You defend your reasoning out loud","The tutorial is an argument, not a lecture. Saying the method aloud is where the misconception surfaces."],
  ["Corrected on the spot, in writing","Feedback lands in the same hour, against the mark scheme, on the student’s own working."]];

const RESEARCH=[
  ["Mastery learning","Bloom, 1984 · Educational Researcher",
   "Students required to reach a threshold on each topic before moving on substantially outperformed students taught the same content on a fixed timetable.",
   "No student leaves a topic until they can produce full-mark answers on it. The group follows a sequence; individuals move on evidence."],
  ["Spaced practice","Cepeda et al., 2006 · Psychological Bulletin",
   "A meta-analysis of 254 studies found the same total study time spread across sessions produced markedly better retention than the same time massed together.",
   "Topics return on a deliberate schedule: week 1, week 4, week 10, instead of being taught once and abandoned."],
  ["Deliberate practice","Ericsson, Krampe & Tesch-Römer, 1993",
   "Improvement comes from sustained work at the edge of current ability with immediate, specific feedback, not from volume of practice alone.",
   "Homework is set at the grade above, marked against real boundaries, returned inside 48 hours with the mark codes attached."],
  ["Feedback quality","Hattie & Timperley, 2007 · Review of Educational Research",
   "Feedback ranks among the highest-impact influences on achievement, but only when it tells the student what to do differently rather than how they scored.",
   "Every annotation names the habit, not the mark. “Round on the answer line only” beats “minus one” every time."]];

function Method({onBook}){
  const {i:open,setI:setOpen,ref:cref,bind}=useAutoCycle(RESEARCH.length,4600);
  return <>
  <section className="lp-sec" style={{position:"relative",overflow:"hidden",
    background:"linear-gradient(165deg,#FFF3F3 0%,#FBF7FF 46%,#F6F1FF 100%)",
    borderTop:"1px solid var(--border-subtle)",borderBottom:"1px solid var(--border-subtle)"}}>
    <div style={{position:"absolute",inset:0,backgroundImage:
      "linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px)",
      backgroundSize:"var(--grid-cell) var(--grid-cell)"}}/>
    <div className="lp-wrap" style={{position:"relative"}}>
      <div className="lp-split-media" style={{alignItems:"center",marginBottom:"var(--space-11)"}}>
        <Reveal><SectionHead eyebrow="The Oxford group method" max="58ch"
          title="Nothing in our method is invented. All of it is chosen."
          lead="Four features of the Oxford tutorial, rebuilt around a GCSE mark scheme, then four findings from education research that decide how the hour actually runs."/>
        </Reveal>
        <Reveal delay={90}><div style={{position:"relative"}}>
          <div className="lp-hide-mob" style={{position:"absolute",left:-22,bottom:-22,width:130,height:130,
            borderBottom:"2px solid var(--coral-500)",borderLeft:"2px solid var(--coral-500)",
            borderBottomLeftRadius:"var(--radius-2xl)",opacity:.85}}/>
          <div style={{position:"relative",borderRadius:"var(--radius-2xl)",overflow:"hidden",
            border:"1px solid var(--border-subtle)",boxShadow:"var(--shadow-lg)"}}>
            <KinroPhoto file="specialist-team.webp"
              alt="Kinro Academy specialist GCSE maths teaching team"
              objectPosition="center center"
              style={{width:"100%",aspectRatio:"16/11"}}/>
            <div style={{position:"absolute",left:0,right:0,bottom:0,height:5,background:"var(--gradient-brand)"}}/>
            <span style={{position:"absolute",left:"var(--space-6)",bottom:"var(--space-7)",display:"inline-flex",
              alignItems:"center",gap:10,padding:"9px 15px",borderRadius:99,background:"var(--surface-panel)",
              backdropFilter:"var(--blur-panel)",border:"1px solid var(--border-subtle)",boxShadow:"var(--shadow-md)"}}>
              <Icon name="users" size="sm" color="var(--violet-600)"/>
              <span style={{fontFamily:"var(--font-display)",fontSize:13,fontWeight:600,color:"var(--text-strong)"}}>
                GCSE maths specialists, all day, every day</span>
            </span>
          </div>
        </div></Reveal>
      </div>
      <div className="lp-grid lp-4" style={{marginBottom:"var(--space-11)"}}>
        {OXFORD.map(([t,d],i)=><Reveal key={t} delay={i*80}>
          <div style={{height:"100%",padding:"var(--space-7)",borderRadius:"var(--radius-lg)",
            background:"var(--white)",border:"1px solid var(--border-subtle)",boxShadow:"var(--shadow-sm)",
            display:"flex",flexDirection:"column",gap:"var(--space-5)"}}>
            <span style={{fontFamily:"var(--font-display)",fontSize:13,fontWeight:700,color:"var(--coral-600)",
              letterSpacing:"var(--tracking-wide)"}}>{"0"+(i+1)}</span>
            <h4 style={{fontSize:"var(--size-body-lg)",lineHeight:"var(--leading-heading)",margin:0}}>{t}</h4>
            <p style={{fontSize:14,color:"var(--text-muted)",lineHeight:"var(--leading-body)",margin:0}}>{d}</p>
          </div></Reveal>)}
      </div>
      <div className="lp-grid lp-2" ref={cref} {...bind}>
        {RESEARCH.map(([t,src,finding,us],k)=>{
          const on=open===k;
          return <Reveal key={t} delay={k*70}>
            <div onClick={()=>setOpen(k)} style={{cursor:"pointer",height:"100%",
              padding:"var(--space-7)",borderRadius:"var(--radius-lg)",background:"var(--white)",
              border:on?"1px solid var(--violet-400)":"1px solid var(--border-subtle)",
              boxShadow:on?"var(--shadow-md)":"var(--shadow-sm)",
              transition:"all .3s",display:"flex",flexDirection:"column",gap:"var(--space-5)"}}>
              <div style={{display:"flex",alignItems:"center",gap:"var(--space-5)"}}>
                <h4 style={{fontSize:"var(--size-body-lg)",margin:0}}>{t}</h4>
                <span style={{marginLeft:"auto",width:28,height:28,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>
              <span style={{fontFamily:"var(--font-display)",fontSize:12,fontWeight:700,
                letterSpacing:"var(--tracking-wide)",color:"var(--violet-600)"}}>{src}</span>
              <p style={{fontSize:15,color:"var(--text-muted)",lineHeight:"var(--leading-body)",margin:0}}>{finding}</p>
              <div style={{maxHeight:on?320:0,opacity:on?1:0,overflow:"hidden",
                transition:"max-height .45s cubic-bezier(.2,.7,.2,1),opacity .3s"}}>
                <div style={{display:"flex",gap:"var(--space-5)",padding:"var(--space-6)",borderRadius:"var(--radius-md)",
                  background:"var(--status-correct-soft)",border:"1px solid var(--green-500)"}}>
                  <Icon name="check" size="sm" color="var(--green-500)" style={{flexShrink:0}}/>
                  <div>
                    <span className="k-eyebrow" style={{color:"var(--green-500)"}}>In a Kinro session</span>
                    <p style={{fontSize:15,color:"var(--text-strong)",lineHeight:"var(--leading-body)",margin:"6px 0 0"}}>{us}</p>
                  </div>
                </div>
              </div>
            </div></Reveal>;
        })}
      </div>
      <Reveal delay={140}><div className="lp-row" style={{marginTop:"var(--space-9)",alignItems:"center"}}>
        <p style={{fontSize:15,color:"var(--text-muted)",maxWidth:"48ch",margin:0}}>
          We run our own numbers too. Every marked paper across every cohort goes into one place, which is how we know which topics move a grade fastest and in what order to teach them.
        </p>
        <Button variant="accent" iconRight="arrow-right" style={{marginLeft:"auto"}} onClick={onBook}>See if your child qualifies</Button>
      </div></Reveal>
    </div>
  </section>
  <Anatomy/>
  </>;
}

function Anatomy(){
  const steps=[["timer","0–8 min","Recall starter","Six questions on older topics, on the timer, marked live. We see what has decayed since last week."],
    ["pencil","8–25 min","New method, then immediate attempt","Short teach, then every student works the example on their own board before anyone speaks."],
    ["users","25–45 min","Reasoning out loud","Commit to an answer, compare it, defend it, answer again. Disagreement is the point."],
    ["mic","45–55 min","A student explains","One student narrates the full working. The teacher corrects the mathematical language, not just the answer."],
    ["clipboard-check","55–60 min","Exit check + workbook set","Two exam-standard questions. The result decides which workbook pages each student is set that night."]];
  return <section className="lp-sec" style={{background:"var(--surface-page)"}}>
    <div className="lp-wrap">
      <Reveal><SectionHead eyebrow="Inside the hour" title="A session, minute by minute."
        lead="Your child is not paying for a chat. This is the same shape every week, taught by specialists who do this all day, which is why it compounds."/></Reveal>
      <div className="lp-split-media" style={{alignItems:"start"}}>
        <Reveal><div className="lp-sticky" style={{top:0}}>
          <div className="lp-hide-mob" style={{position:"absolute",left:18,right:-18,top:18,bottom:-18,
            borderRadius:"var(--radius-2xl)",background:"var(--gradient-brand-soft)",
            border:"1px solid var(--border-subtle)"}}/>
          <div style={{position:"relative",borderRadius:"var(--radius-2xl)",overflow:"hidden",
            border:"1px solid var(--border-subtle)",boxShadow:"var(--shadow-lg)"}}>
            <KinroPhoto file="live-online-session.webp"
              alt="Kinro Academy specialist teaching a live online GCSE maths session"
              objectPosition="center center"
              style={{width:"100%",aspectRatio:"3/2"}}/>
            <span style={{position:"absolute",left:14,top:14,display:"flex",alignItems:"center",gap:8,
              padding:"6px 12px",borderRadius:99,background:"rgba(18,18,26,0.62)",backdropFilter:"blur(6px)"}}>
              <span style={{width:8,height:8,borderRadius:"50%",background:"var(--coral-500)",
                animation:"lp-float 2.4s ease-in-out infinite"}}/>
              <span style={{fontFamily:"var(--font-display)",fontSize:11,fontWeight:700,
                letterSpacing:"var(--tracking-wide)",textTransform:"uppercase",color:"var(--white)"}}>Live now</span>
            </span>
            <div style={{position:"absolute",left:0,right:0,bottom:0,height:5,background:"var(--gradient-brand)"}}/>
          </div>
          <p style={{position:"relative",margin:"var(--space-6) auto 0",fontSize:13,color:"var(--text-subtle)",
            maxWidth:"44ch",textAlign:"center"}}>Thursday grade-push cohort.</p>
        </div></Reveal>
        <div style={{position:"relative",paddingLeft:"var(--space-8)"}}>
          <div style={{position:"absolute",left:23,top:14,bottom:24,width:2,
            background:"var(--gradient-brand)",opacity:.28}}/>
          <div style={{display:"flex",flexDirection:"column",gap:"var(--space-8)"}}>
            {steps.map(([ic,time,t,d],i)=><Reveal key={t} delay={i*90}>
              <div style={{display:"grid",gridTemplateColumns:"42px 1fr",gap:"var(--space-6)",
                alignItems:"start"}}>
                <span style={{position:"relative",zIndex:1,width:42,height:42,borderRadius:"50%",background:"var(--white)",
                  border:"2px solid var(--violet-500)",display:"grid",placeItems:"center",
                  marginLeft:-21,boxShadow:"var(--shadow-sm)"}}>
                  <Icon name={ic} size="sm" color="var(--violet-600)"/></span>
                <div style={{display:"flex",flexDirection:"column",gap:6,paddingTop:2}}>
                  <span className="k-eyebrow" style={{color:"var(--coral-600)"}}>{time}</span>
                  <h4 style={{fontSize:"var(--size-body-lg)",lineHeight:"var(--leading-heading)",margin:0}}>{t}</h4>
                  <p style={{fontSize:14,color:"var(--text-muted)",lineHeight:"var(--leading-body)",margin:0,maxWidth:"52ch"}}>{d}</p>
                </div>
              </div></Reveal>)}
          </div>
        </div>
      </div>
    </div>
  </section>;
}

Object.assign(window,{Method,Anatomy,RESEARCH,OXFORD});
