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

const STEPS=["Read the question","The student's answer","The real mark scheme","What it scored"];

const SCHEME=[
  {text:"rotation",tone:"ok",note:"accept “turn”"},
  {text:"90° clockwise",tone:"ok",note:"or 270° anticlockwise"},
  {text:"about centre (0, 1)",tone:"ok",note:"coordinates must be stated"},
  {text:"ignore “to the right”",tone:"no",note:"direction must be named"},
  {text:"do not credit if a second transformation is also given",tone:"no",note:"“single” is examined"}];

const TOP_NOTES=[
  ["Command word. “Describe fully” means every part of the transformation, not just the name.","↘"],
  ["Three marks. Three separate pieces of information are being paid for.","↘"]];
const VERDICT_NOTE="Rotation named, 90° stated. Direction not named and centre missing. Two marks gone on a question the student understood.";

function Note({text,arrow,tone,align}){
  const c=tone==="coral"?"var(--coral-600)":"var(--violet-600)";
  return <div style={{display:"flex",gap:8,alignItems:"flex-start",justifyContent:align==="right"?"flex-end":"flex-start"}}>
    <span style={{fontFamily:"var(--font-display)",fontSize:18,fontWeight:800,lineHeight:1,color:c}}>{arrow}</span>
    <span style={{fontFamily:"var(--font-display)",fontSize:12,fontWeight:600,lineHeight:1.45,color:c,maxWidth:"34ch"}}>{text}</span>
  </div>;
}

function Paper({stage}){
  const hl=(t,on,tone)=><span style={{background:on?(tone==="no"?"var(--status-incorrect-soft)":"var(--status-correct-soft)"):"transparent",
    borderRadius:3,padding:on?"1px 3px":0,transition:"background .4s"}}>{t}</span>;
  return <div style={{position:"relative",padding:"var(--space-8)",borderRadius:"var(--radius-md)",
    background:"var(--white)",border:"1px solid var(--border-subtle)",minHeight:330,overflow:"hidden"}}>
    <div style={{position:"absolute",inset:0,backgroundImage:"repeating-linear-gradient(transparent,transparent 37px,var(--neutral-150) 37px,var(--neutral-150) 38px)",
      opacity:.9}}/>
    <div className="lp-grid lp-2" style={{position:"relative",gap:"var(--space-5)",marginBottom:"var(--space-6)",
      minHeight:52,opacity:stage>=1?1:0,transition:"opacity .45s"}}>
      {TOP_NOTES.map(([t,ar],i)=><Note key={i} text={t} arrow={ar} tone="violet" align={i?"right":"left"}/>)}
    </div>
    <div style={{position:"relative",display:"flex",gap:12,alignItems:"flex-start"}}>
      <span style={{fontFamily:"var(--font-math)",fontSize:17,color:"var(--text-muted)"}}>(a)</span>
      <p style={{fontFamily:"var(--font-math)",fontSize:17,margin:0,lineHeight:"36px",maxWidth:"44ch"}}>
        <span style={{border:stage>=1?"2px solid var(--violet-500)":"2px solid transparent",borderRadius:4,
          padding:"1px 4px",transition:"border-color .4s"}}>Describe fully</span>
        {" the "}
        <span style={{borderBottom:stage>=1?"2px solid var(--coral-500)":"2px solid transparent",transition:"border-color .4s"}}>single transformation</span>
        {" that maps shape "}<strong>A</strong>{" onto shape "}<strong>B</strong>.
      </p>
      <span style={{marginLeft:"auto",fontFamily:"var(--font-math)",fontSize:17,
        border:stage>=1?"2px solid var(--violet-500)":"2px solid transparent",borderRadius:4,padding:"1px 5px",
        transition:"border-color .4s"}}>(3)</span>
    </div>
    <div style={{position:"relative",marginTop:22,minHeight:76,opacity:stage>=2?1:0,
      transform:stage>=2?"none":"translateY(8px)",transition:"opacity .5s,transform .5s"}}>
      <p style={{fontFamily:"var(--font-math)",fontStyle:"italic",fontSize:19,margin:0,lineHeight:"38px",color:"var(--ink-700)"}}>
        {hl("Rotated",stage>=3,"ok")} {hl("90 degrees",stage>=3,"ok")} {hl("to the right",stage>=3,"no")}
      </p>
      <p style={{fontFamily:"var(--font-math)",fontStyle:"italic",fontSize:19,margin:0,lineHeight:"38px",color:"var(--ink-700)"}}>
        {stage>=3&&<span style={{fontFamily:"var(--font-display)",fontSize:13,fontWeight:700,
          color:"var(--status-incorrect)",letterSpacing:"var(--tracking-wide)"}}>NO CENTRE OF ROTATION GIVEN</span>}
      </p>
    </div>
    {stage>=3&&<div style={{position:"relative",marginTop:"var(--space-6)",animation:"lp-tick .4s ease-out"}}>
      <Note text={VERDICT_NOTE} arrow="↖" tone="coral"/>
    </div>}
  </div>;
}

function SchemePanel({stage}){
  return <div style={{padding:"var(--space-7)",borderRadius:"var(--radius-md)",background:"var(--surface-sunken)",
    border:"1px solid var(--border-subtle)",display:"flex",flexDirection:"column",gap:"var(--space-5)",
    opacity:stage>=3?1:.35,transition:"opacity .5s"}}>
    <div style={{display:"flex",alignItems:"center",gap:10}}>
      <Icon name="scroll-text" size="sm" color="var(--ink-600)"/>
      <span style={{fontFamily:"var(--font-display)",fontSize:12,fontWeight:700,letterSpacing:"var(--tracking-eyebrow)",
        textTransform:"uppercase",color:"var(--text-strong)"}}>Mark scheme analysis</span>
      <Badge tone="neutral" style={{marginLeft:"auto"}}>3 marks</Badge>
    </div>
    {SCHEME.map((s,i)=><div key={i} style={{display:"flex",gap:10,alignItems:"baseline",flexWrap:"wrap",
      opacity:stage>=3?1:.3,transition:`opacity .45s ease ${i*90}ms`}}>
      <span style={{fontFamily:"var(--font-body)",fontSize:15,padding:"2px 6px",borderRadius:3,
        background:s.tone==="ok"?"var(--status-correct-soft)":"var(--status-incorrect-soft)",
        color:"var(--text-strong)"}}>{s.text}</span>
      <span style={{fontStyle:"italic",fontSize:14,color:"var(--text-subtle)"}}>{s.note}</span>
    </div>)}
  </div>;
}

function ExamCard(){
  const [ref,inv]=useInView();
  const [stage,setStage]=React.useState(0);
  const [paused,setPaused]=React.useState(false);
  const HOLD=[900,3000,3200,4600];
  React.useEffect(()=>{
    if(!inv||paused)return;
    const t=setTimeout(()=>setStage(s=>s>=4?1:s+1),HOLD[Math.max(0,Math.min(3,stage-1))]||900);
    return()=>clearTimeout(t);
  },[stage,inv,paused]);
  return <Card padding="var(--space-8)" style={{display:"flex",flexDirection:"column",gap:"var(--space-6)"}}>
    <div ref={ref} onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>setPaused(false)}
      style={{display:"flex",gap:6,padding:4,borderRadius:99,background:"var(--surface-sunken)",flexWrap:"wrap"}}>
      {STEPS.map((s,i)=>{const on=stage===i+1,done=stage>i+1;
        return <button key={s} onClick={()=>setStage(i+1)} style={{position:"relative",flex:"1 1 120px",cursor:"pointer",
          padding:"9px 10px",borderRadius:99,border:"none",overflow:"hidden",fontFamily:"var(--font-display)",
          fontSize:13,fontWeight:600,transition:"all .25s",
          background:on?"var(--ink-900)":done?"var(--white)":"transparent",
          color:on?"var(--white)":done?"var(--text-strong)":"var(--text-muted)"}}>
          {on&&<span style={{position:"absolute",left:0,bottom:0,height:3,width:"100%",
            background:"var(--gradient-brand)",transformOrigin:"left",
            animation:`lp-grow ${(HOLD[i]||900)}ms linear both`,
            animationPlayState:paused?"paused":"running"}}/>}
          <span style={{position:"relative"}}>{i+1}. {s}</span>
        </button>})}
    </div>
    <Paper stage={stage}/>
    <SchemePanel stage={stage}/>
    <div style={{display:"flex",alignItems:"center",gap:"var(--space-6)",paddingTop:"var(--space-5)",
      borderTop:"1px solid var(--border-subtle)",flexWrap:"wrap"}}>
      <div style={{display:"flex",alignItems:"baseline",gap:8}}>
        <span style={{fontFamily:"var(--font-display)",fontSize:"var(--size-heading-1)",fontWeight:800,
          color:stage>=4?"var(--status-incorrect)":"var(--text-subtle)",transition:"color .4s"}}>{stage>=4?"1":"?"}</span>
        <span style={{fontFamily:"var(--font-display)",fontSize:19,fontWeight:700,color:"var(--text-subtle)"}}>/ 3 marks</span>
      </div>
      <span style={{fontSize:14,color:"var(--text-muted)",maxWidth:"44ch"}}>
        {stage>=4?"The student knew it was a rotation of 90 degrees. Naming the direction and the centre is what the other two marks were for, and nobody had ever shown her that."
                 :"This is exactly how we mark every paper your child sits."}
      </span>
      <span style={{marginLeft:"auto",display:"flex",alignItems:"center",gap:8,fontSize:12,
        color:"var(--text-subtle)",fontFamily:"var(--font-display)",fontWeight:600}}>
        <span style={{width:7,height:7,borderRadius:"50%",background:paused?"var(--neutral-300)":"var(--coral-500)"}}/>
        {paused?"Paused":"Hover the steps to pause"}</span>
    </div>
  </Card>;
}

const CATS=[
  ["Rounding too early",23,"We teach a fixed rule: full accuracy on the working line, round only on the answer line, and write the unrounded value first so the method mark survives."],
  ["Units and notation",19,"Every answer line gets a unit check before the pen leaves the page. It becomes automatic in about three weeks."],
  ["Method not shown",21,"Examiners award M marks for visible reasoning. We drill the minimum written line that secures each one."],
  ["Incomplete descriptions",14,"“Describe fully”, “give reasons”, “explain”. Each command word has a checklist, and students learn to count the marks before they write."],
  ["Misread the question",23,"Annotate first, then solve: underline the command word, circle the accuracy instruction, box the units."]];

function Categories(){
  const {i,setI,ref:cref,bind}=useAutoCycle(CATS.length,3200);
  const [ref,inv]=useInView();
  return <Card padding="var(--space-8)" style={{display:"flex",flexDirection:"column",gap:"var(--space-6)"}}>
    <div ref={ref}>
      <Eyebrow>Where the marks actually go</Eyebrow>
      <h3 style={{fontSize:"var(--size-heading-2)",marginTop:8,maxWidth:"32ch"}}>Avoidable marks lost, by cause</h3>
    </div>
    <div ref={cref} {...bind} style={{display:"flex",flexDirection:"column",gap:"var(--space-5)"}}>
      {CATS.map(([name,pct],k)=>{const on=k===i;
        return <div key={name} onClick={()=>setI(k)} style={{cursor:"pointer",display:"grid",gap:6}}>
          <div style={{display:"flex",justifyContent:"space-between",gap:12}}>
            <span style={{fontFamily:"var(--font-display)",fontSize:15,fontWeight:on?700:500,
              color:on?"var(--text-strong)":"var(--text-muted)"}}>{name}</span>
            <span style={{fontFamily:"var(--font-display)",fontSize:15,fontWeight:700,
              color:on?"var(--violet-600)":"var(--text-subtle)"}}>{pct}%</span>
          </div>
          <div style={{height:on?12:8,borderRadius:99,background:"var(--surface-sunken)",overflow:"hidden",transition:"height .2s"}}>
            <div style={{height:"100%",width:inv?(pct/25*100)+"%":0,borderRadius:99,
              background:on?"var(--gradient-brand)":"var(--neutral-300)",
              transition:`width .9s cubic-bezier(.2,.7,.2,1) ${k*110}ms,background .25s`}}/>
          </div>
        </div>;})}
    </div>
    <div style={{padding:"var(--space-6)",borderRadius:"var(--radius-md)",background:"var(--surface-sunken)",
      display:"flex",gap:"var(--space-5)",alignItems:"flex-start"}}>
      <Icon name="wrench" size="sm" color="var(--coral-600)"/>
      <div>
        <span className="k-eyebrow" style={{color:"var(--text-subtle)"}}>How we fix it</span>
        <p key={i} style={{margin:"6px 0 0",fontSize:15,color:"var(--text-body)",lineHeight:"var(--leading-body)",
          animation:"lp-tick .3s ease-out"}}>{CATS[i][2]}</p>
      </div>
    </div>
    <span style={{fontSize:13,color:"var(--text-subtle)"}}>Share of avoidable marks lost across papers marked in our own cohorts. Percentages are ours, not a published figure.</span>
  </Card>;
}

function MarkScheme({onBook}){
  return <section id="marks" className="lp-sec" style={{background:"var(--surface-page-alt)",
    borderTop:"1px solid var(--border-subtle)",borderBottom:"1px solid var(--border-subtle)"}}>
    <div className="lp-wrap">
      <Problems onBook={onBook}/>
      <div style={{height:"var(--space-13)"}}/>
      <Reveal><SectionHead eyebrow="Mark scheme analysis" max="58ch"
        title="We do not mark work right or wrong. We mark it the way an examiner does."
        lead="Every paper your child sits comes back annotated against the real mark scheme: which mark, why it was lost, and the habit that will stop it happening again. Here is one, marked in front of you."/></Reveal>
      <div className="lp-split" style={{alignItems:"start"}}>
        <Reveal delay={60}><ExamCard/></Reveal>
        <Reveal delay={120}><Categories/></Reveal>
      </div>
      <Reveal delay={120}><div style={{marginTop:"var(--space-9)",display:"flex",flexDirection:"column",
        gap:"var(--space-5)",alignItems:"center"}}>
        <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,{MarkScheme,ExamCard,Categories,Paper,SchemePanel,Note});
