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

const DIMS=[
  {key:"active",chip:"Active thinking time",
   claim:"A tutor talking at your child is not your child doing maths.",
   one:{metric:"Mostly listening",note:"The hour is comfortable. The tutor explains, the student nods, and very little is produced under pressure. Nobody in the room notices.",dots:1,active:1,bar:24},
   grp:{metric:"Answering constantly",note:"Every question is attempted by every student on their own board, on a timer, before anyone speaks. Several answers land at once and the teacher can see exactly who is stuck and why.",dots:5,active:5,bar:86},
   cite:["Freeman et al., 2014 · PNAS","A meta-analysis of 225 studies found active-learning formats raised exam scores by about 6 percentage points and cut failure rates from 34% to 22% versus passive instruction."]},
  {key:"bench",chip:"Knowing where they stand",
   claim:"A GCSE grade is a rank. You cannot rank against one adult.",
   one:{metric:"No comparison",note:"“She’s doing well” is a feeling. There is no cohort, so nothing calibrates it, and the truth arrives in August.",dots:1,active:0,bar:10},
   grp:{metric:"Ranked weekly",note:"The same paper, sat by the whole group, marked against the real boundaries. You see the gap in week one, not results week.",dots:5,active:4,bar:90},
   cite:["Roediger & Karpicke, 2006 · Psychological Science","Repeated testing produced far more durable retention than restudying for the same time. Frequent low-stakes tests are only practical when a group sits them together."]},
  {key:"methods",chip:"Seeing more than one method",
   claim:"The fastest exam method is rarely the first one taught.",
   one:{metric:"One method",note:"Whatever the tutor prefers. If it does not click, the fallback is the same method again, slower and louder.",dots:1,active:1,bar:18},
   grp:{metric:"Several, compared",note:"Different approaches surface in the room and get compared out loud. We then name the one that costs the fewest marks and the least time in the exam.",dots:5,active:3,bar:78},
   cite:["Crouch & Mazur, 2001 · American Journal of Physics","Ten years of peer instruction at Harvard: students who committed to an answer, argued it with a peer, then answered again showed conceptual gains roughly double those of traditional instruction."]},
  {key:"explain",chip:"Explaining it out loud",
   claim:"Explaining a method is the largest free gain available to a GCSE student.",
   one:{metric:"Almost never",note:"The adult is always the expert, so the student rarely has to construct the explanation, which is the part that exposes the gap.",dots:1,active:0,bar:14},
   grp:{metric:"Every session",note:"A student walks the group through their working while the teacher corrects the mathematical language, not just the answer.",dots:5,active:2,bar:88},
   cite:["Fiorella & Mayer, 2013 · Contemporary Educational Psychology","Students who learned material in order to explain it, and then explained it, substantially outperformed students who studied the same material to be tested on it."]},
  {key:"momentum",chip:"Motivation and momentum",
   claim:"Fifteen-year-olds work for their peers long before they work for an adult.",
   one:{metric:"One adult watching",note:"An hour of undivided adult attention is stressful for an anxious student and easy to coast through for a confident one.",dots:1,active:1,bar:30},
   grp:{metric:"A cohort pulling",note:"A group moving at pace makes effort normal. No spotlight, nowhere to hide, and visible progress alongside people in the same position.",dots:5,active:5,bar:84},
   cite:["Springer, Stanne & Donovan, 1999 · Review of Educational Research","Meta-analysis of small-group learning in science and maths: effect sizes of 0.51 on achievement, 0.55 on attitudes and 0.46 on persistence, compared with students taught individually or in lectures."]},
  {key:"load",chip:"Handling harder problems",
   claim:"A group can hold a harder problem in its head than one student can.",
   one:{metric:"One working memory",note:"Multi-step problems get simplified down to what a single student can carry, so the hardest marks are never really practised.",dots:1,active:1,bar:26},
   grp:{metric:"Shared load",note:"Grade 8–9 problems are broken across the group, then reassembled. Students routinely work above the level they could reach alone, then take that ceiling home.",dots:5,active:4,bar:82},
   cite:["Kirschner, Paas & Kirschner, 2009 · Educational Psychology Review","Groups can distribute working-memory load across members, allowing them to process more complex material than individuals working alone, with better later retention."]}];

function DotScene({dots,active,tone,run}){
  const R=54;
  const pos=Array.from({length:dots},(_,i)=>{
    const a=dots===1?-Math.PI/2:(-Math.PI*0.9)+(i*(Math.PI*0.8)/(dots-1));
    return [Math.cos(a)*R*1.5,Math.sin(a)*R*0.7];
  });
  const idle=tone==="grp"?"var(--violet-400)":"var(--neutral-300)";
  const on=tone==="grp"?"var(--coral-500)":"var(--ink-400)";
  return <div style={{position:"relative",height:126,display:"grid",placeItems:"center"}}>
    <div style={{position:"absolute",bottom:6,width:44,height:44,borderRadius:"var(--radius-md)",
      background:tone==="grp"?"var(--gradient-brand-diagonal)":"var(--ink-700)",display:"grid",placeItems:"center"}}>
      <Icon name="presentation" size="sm" color="var(--white)"/>
    </div>
    {pos.map(([x,y],i)=>{
      const lit=i<active;
      return <div key={i} style={{position:"absolute",left:"50%",bottom:28,transform:`translate(${x}px,${y}px)`,
        transition:"transform .5s cubic-bezier(.2,.7,.2,1)"}}>
        <div style={{width:24,height:24,borderRadius:"50%",background:lit?on:idle,
          border:"2px solid var(--surface-card)",boxShadow:lit?"0 0 0 4px rgba(143,82,249,0.12)":"none",
          transition:"background .4s"}}/>
        {lit&&run&&<div style={{position:"absolute",inset:0,borderRadius:"50%",border:`2px solid ${on}`,
          animation:`lp-pulse 2.4s ease-out ${i*0.22}s infinite`}}/>}
      </div>;
    })}
  </div>;
}

function Panel({side,data,run}){
  const grp=side==="grp";
  return <div style={{flex:"1 1 280px",minWidth:0,padding:"var(--space-8)",borderRadius:"var(--radius-xl)",
    background:grp?"var(--surface-accent-soft)":"var(--surface-sunken)",
    border:grp?"1px solid var(--violet-100)":"1px solid var(--border-subtle)",
    display:"flex",flexDirection:"column",gap:"var(--space-5)"}}>
    <div style={{display:"flex",alignItems:"center",gap:"var(--space-4)"}}>
      <Badge tone={grp?"accent":"neutral"}>{grp?"Kinro targeted group session":"Private one-to-one"}</Badge>
      {grp&&<Icon name="check" size="sm" color="var(--green-500)"/>}
    </div>
    <DotScene dots={data.dots} active={data.active} tone={side} run={run}/>
    <span style={{fontFamily:"var(--font-display)",fontSize:"var(--size-heading-2)",fontWeight:800,
      color:grp?"var(--violet-600)":"var(--text-subtle)",letterSpacing:"var(--tracking-heading)"}}>{data.metric}</span>
    <div style={{height:8,borderRadius:99,background:grp?"rgba(143,82,249,0.14)":"var(--neutral-200)",overflow:"hidden"}}>
      <div style={{height:"100%",width:data.bar+"%",borderRadius:99,
        background:grp?"var(--gradient-brand)":"var(--neutral-300)",transition:"width .7s cubic-bezier(.2,.7,.2,1)"}}/>
    </div>
    <p style={{fontSize:15,color:"var(--text-body)",lineHeight:"var(--leading-body)",margin:0}}>{data.note}</p>
  </div>;
}

function Versus({onBook}){
  const {i,setI,ref,bind}=useAutoCycle(DIMS.length,5200);
  const d=DIMS[i];
  return <section id="versus" className="lp-sec" style={{background:"var(--surface-page)"}}>
    <div className="lp-wrap" ref={ref} {...bind}>
      <Reveal><SectionHead eyebrow="One-to-one vs a targeted group" max="60ch"
        title="Oxford does not teach its mathematicians one-to-one. Nor do we."
        lead="The Oxford tutorial is a small group: prepared work brought to the table, reasoning defended out loud, corrected on the spot. We built our sessions on that shape, and the research on why it outperforms solo tuition is not thin. Pick any factor below."/></Reveal>
      <Reveal delay={80}>
        <div className="lp-row" style={{gap:"var(--space-4)",marginBottom:"var(--space-8)"}}>
          {DIMS.map((dd,k)=><button key={dd.key} onClick={()=>setI(k)}
            style={{cursor:"pointer",padding:"10px 16px",borderRadius:99,fontFamily:"var(--font-display)",
              fontSize:14,fontWeight:600,transition:"all .25s",
              border:k===i?"1px solid transparent":"1px solid var(--border-default)",
              background:k===i?"var(--ink-900)":"var(--white)",
              color:k===i?"var(--white)":"var(--text-body)"}}>{dd.chip}</button>)}
        </div>
      </Reveal>
      <Reveal delay={140}>
        <Card padding="var(--space-9)" style={{display:"flex",flexDirection:"column",gap:"var(--space-8)"}}>
          <div style={{display:"flex",alignItems:"center",gap:"var(--space-5)"}}>
            <span style={{width:6,height:38,borderRadius:99,background:"var(--gradient-brand)",flexShrink:0}}/>
            <p key={d.key} style={{fontFamily:"var(--font-display)",fontSize:"var(--size-heading-2)",fontWeight:600,
              lineHeight:"var(--leading-snug)",margin:0,maxWidth:"54ch",animation:"lp-tick .35s ease-out"}}>{d.claim}</p>
          </div>
          <div className="lp-row">
            <Panel side="one" data={d.one} run={false}/>
            <div className="lp-hide-mob" style={{alignSelf:"center",display:"flex",flexDirection:"column",alignItems:"center",gap:8}}>
              <Icon name="arrow-right" size="lg" color="var(--violet-500)"/>
              <span className="k-eyebrow" style={{color:"var(--text-subtle)"}}>Kinro</span>
            </div>
            <Panel side="grp" data={d.grp} run={true}/>
          </div>
          <div key={d.key+"-cite"} style={{display:"flex",gap:"var(--space-5)",alignItems:"flex-start",
            padding:"var(--space-6)",borderRadius:"var(--radius-md)",background:"var(--surface-sunken)",
            animation:"lp-tick .35s ease-out"}}>
            <Icon name="book-open" size="sm" color="var(--ink-600)"/>
            <div>
              <span style={{fontFamily:"var(--font-display)",fontSize:13,fontWeight:700,color:"var(--text-strong)",
                letterSpacing:"var(--tracking-wide)"}}>{d.cite[0]}</span>
              <p style={{margin:"6px 0 0",fontSize:14,color:"var(--text-muted)",lineHeight:"var(--leading-body)",maxWidth:"84ch"}}>{d.cite[1]}</p>
            </div>
          </div>
        </Card>
      </Reveal>
      <Reveal delay={120}><div style={{marginTop:"var(--space-8)",display:"flex",flexDirection:"column",
        alignItems:"center",gap:"var(--space-5)"}}>
        <Button size="lg" variant="accent" iconRight="arrow-right" onClick={onBook}>See if your child qualifies</Button>
        <div style={{display:"flex"}}><GuaranteePill/></div>
      </div></Reveal>
    </div>
  </section>;
}

Object.assign(window,{Versus,DIMS});
