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

const ROWS=[
  ["Questions ordered by what moves a grade",false,true],
  ["Mark scheme printed beside every question",false,true],
  ["Examiner notes on the marks students actually drop",false,true],
  ["Worked exemplar at grade 7 and grade 9 standard",false,true],
  ["Common-error box written from our own marked papers",false,true],
  ["Earlier topics deliberately revisited on a schedule",false,true],
  ["Difficulty ladder inside each topic",false,true],
  ["Written by the specialists who teach the sessions",false,true],
  ["Free to download",true,false]];

function GenericPage(){
  return <div style={{position:"absolute",inset:0,background:"var(--white)",padding:"22px 24px",overflow:"hidden"}}>
    <div style={{height:9,width:"34%",background:"var(--neutral-200)",borderRadius:3,marginBottom:18}}/>
    <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:14}}>
      {Array.from({length:18}).map((_,i)=><div key={i} style={{display:"flex",flexDirection:"column",gap:6}}>
        <div style={{height:7,width:(58+((i*13)%36))+"%",background:"var(--neutral-150)",borderRadius:3}}/>
        <div style={{height:7,width:(28+((i*7)%26))+"%",background:"var(--neutral-150)",borderRadius:3}}/>
      </div>)}
    </div>
  </div>;
}

function KinroPage(){
  return <div style={{position:"absolute",inset:0,background:"var(--white)",padding:"22px 24px",overflow:"hidden"}}>
    <div style={{position:"absolute",left:0,top:0,bottom:0,width:5,background:"var(--gradient-brand)"}}/>
    <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14,gap:12}}>
      <span style={{fontFamily:"var(--font-display)",fontSize:11,fontWeight:700,letterSpacing:"var(--tracking-wide)",
        textTransform:"uppercase",color:"var(--violet-600)",whiteSpace:"nowrap"}}>Quadratics · ladder step 3 of 5</span>
      <Badge tone="coral">Grade 6 → 8</Badge>
    </div>
    <p style={{fontFamily:"var(--font-math)",fontSize:15,margin:"0 0 10px",lineHeight:1.5}}>
      <strong>4.</strong> Solve <em>x</em>² − 7<em>x</em> + 10 = 0. <strong>(3)</strong>
    </p>
    <div style={{display:"flex",gap:8,flexWrap:"wrap",marginBottom:12}}>
      {[["M1","factorise to (x−2)(x−5)"],["A1","x = 2"],["A1","x = 5"]].map(([m,d],i)=>
        <span key={i} style={{display:"flex",gap:6,alignItems:"baseline",padding:"4px 8px",borderRadius:4,
          background:"var(--status-correct-soft)",fontSize:12}}>
          <strong style={{fontFamily:"var(--font-display)",color:"var(--green-500)"}}>{m}</strong>
          <span style={{fontFamily:"var(--font-math)"}}>{d}</span></span>)}
    </div>
    <div style={{display:"flex",gap:8,padding:"8px 10px",borderRadius:4,background:"var(--surface-coral-soft)",
      marginBottom:12,alignItems:"flex-start"}}>
      <Icon name="alert-triangle" size="sm" color="var(--coral-600)" style={{flexShrink:0}}/>
      <span style={{fontSize:12,color:"var(--text-body)",lineHeight:1.45}}>
        Most dropped mark here: giving only one root. Both values are paid for separately.</span>
    </div>
    <div style={{padding:"10px 12px",borderRadius:4,background:"var(--surface-sunken)",marginBottom:12}}>
      <span style={{fontFamily:"var(--font-display)",fontSize:10,fontWeight:700,letterSpacing:"var(--tracking-eyebrow)",
        textTransform:"uppercase",color:"var(--text-subtle)"}}>Grade 9 exemplar</span>
      <p style={{fontFamily:"var(--font-math)",fontSize:14,margin:"6px 0 0",lineHeight:1.6}}>
        (x − 2)(x − 5) = 0<br/>x = 2 or x = 5</p>
    </div>
    <div style={{display:"flex",gap:6,alignItems:"center"}}>
      <Icon name="repeat" size="sm" color="var(--violet-600)"/>
      <span style={{fontSize:12,color:"var(--text-muted)"}}>Revisits: week 4 and week 10</span>
    </div>
  </div>;
}

function Slider(){
  const [pos,setPos]=React.useState(52);
  const [hover,setHover]=React.useState(false);
  const [ref,inv]=useInView();
  React.useEffect(()=>{
    if(!inv||hover)return;
    let raf,t0;
    const tick=t=>{if(!t0)t0=t;
      setPos(50+34*Math.sin((t-t0)/1900));
      raf=requestAnimationFrame(tick)};
    raf=requestAnimationFrame(tick);
    return()=>cancelAnimationFrame(raf);
  },[inv,hover]);
  return <div ref={ref} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
    style={{display:"flex",flexDirection:"column",gap:"var(--space-5)"}}>
    <div style={{position:"relative",height:400,borderRadius:"var(--radius-md)",overflow:"hidden",
      border:"1px solid var(--border-subtle)",boxShadow:"var(--shadow-sm)",userSelect:"none"}}>
      <GenericPage/>
      <div style={{position:"absolute",inset:0,clipPath:`inset(0 0 0 ${pos}%)`}}><KinroPage/></div>
      <span style={{position:"absolute",left:14,top:14,padding:"5px 10px",borderRadius:99,
        background:"var(--surface-sunken)",fontFamily:"var(--font-display)",fontSize:11,fontWeight:700,
        letterSpacing:"var(--tracking-wide)",textTransform:"uppercase",color:"var(--text-muted)",
        opacity:pos>18?1:0,transition:"opacity .2s"}}>Free worksheet</span>
      <span style={{position:"absolute",right:14,top:14,padding:"5px 10px",borderRadius:99,
        background:"var(--gradient-brand)",fontFamily:"var(--font-display)",fontSize:11,fontWeight:700,
        letterSpacing:"var(--tracking-wide)",textTransform:"uppercase",color:"var(--white)",
        opacity:pos<82?1:0,transition:"opacity .2s"}}>Kinro workbook</span>
      <div style={{position:"absolute",top:0,bottom:0,left:pos+"%",width:2,background:"var(--gradient-brand)",
        pointerEvents:"none"}}/>
      <div style={{position:"absolute",top:"50%",left:pos+"%",transform:"translate(-50%,-50%)",width:44,height:44,
        borderRadius:"50%",background:"var(--white)",boxShadow:"var(--shadow-md)",display:"grid",
        placeItems:"center",pointerEvents:"none"}}>
        <Icon name="chevrons-left-right" size="sm" color="var(--violet-600)"/>
      </div>
      <input type="range" min="0" max="100" value={pos} onChange={e=>setPos(+e.target.value)}
        aria-label="Compare the two workbooks"
        style={{position:"absolute",inset:0,width:"100%",height:"100%",opacity:0,cursor:"ew-resize",margin:0}}/>
    </div>
    <div style={{display:"flex",alignItems:"center",gap:"var(--space-5)",flexWrap:"wrap"}}>
      <span style={{display:"flex",alignItems:"center",gap:8,fontSize:14,color:"var(--text-muted)"}}>
        <Icon name="move-horizontal" size="sm" color="var(--violet-600)"/>{hover?"Drag across the page to compare":"Comparing automatically. Hover to take control"}</span>
      <div style={{marginLeft:"auto",display:"flex",gap:8}}>
        {[["All worksheet",0],["Split",52],["All workbook",100]].map(([l,v])=>
          <button key={l} onClick={()=>setPos(v)} style={{cursor:"pointer",padding:"7px 13px",borderRadius:99,
            fontFamily:"var(--font-display)",fontSize:13,fontWeight:600,transition:"all .2s",
            border:Math.round(pos)===v?"1px solid transparent":"1px solid var(--border-default)",
            background:Math.round(pos)===v?"var(--ink-900)":"var(--white)",
            color:Math.round(pos)===v?"var(--white)":"var(--text-body)"}}>{l}</button>)}
      </div>
    </div>
  </div>;
}

function WorkbookBand(){
  const [ref,inv]=useInView();
  return <div ref={ref} style={{position:"relative",marginBottom:"var(--space-11)"}}>
    <div style={{position:"relative",borderRadius:"var(--radius-2xl)",overflow:"hidden",
      border:"1px solid var(--border-subtle)",boxShadow:"var(--shadow-lg)"}}>
      <KinroPhoto file="workbook-session.webp"
        alt="Students working through Kinro Academy GCSE maths workbooks"
        objectPosition="center center"
        style={{width:"100%",height:"clamp(280px,38vw,460px)"}}/>
      <div style={{position:"absolute",inset:0,
        background:"linear-gradient(90deg,rgba(18,18,26,0.86) 0%,rgba(18,18,26,0.55) 38%,rgba(18,18,26,0) 66%)"}}/>
      <div style={{position:"absolute",left:0,top:0,bottom:0,width:5,background:"var(--gradient-brand)"}}/>
      <div style={{position:"absolute",left:"clamp(24px,4vw,56px)",top:0,bottom:0,display:"flex",
        flexDirection:"column",justifyContent:"center",gap:"var(--space-5)",maxWidth:"40ch",paddingRight:24}}>
        <div style={{width:inv?72:0,height:3,borderRadius:2,background:"var(--gradient-brand)",
          transition:"width .7s cubic-bezier(.2,.7,.2,1) .15s"}}/>
        <strong style={{fontFamily:"var(--font-display)",fontSize:"var(--size-heading-1)",fontWeight:800,
          lineHeight:"var(--leading-snug)",color:"var(--white)",letterSpacing:"var(--tracking-heading)"}}>
          The workbook on the table is the same one we teach from.</strong>
        <span style={{fontSize:15,color:"rgba(255,255,255,0.72)",lineHeight:"var(--leading-body)"}}>
          One book per topic, printed and posted, annotated in the session and set for the week ahead.</span>
        <div style={{display:"flex",gap:8,flexWrap:"wrap",marginTop:"var(--space-3)"}}>
          {["Printed and posted","Marked in session","Set every week"].map(t=>
            <span key={t} style={{padding:"6px 12px",borderRadius:99,background:"rgba(255,255,255,0.10)",
              border:"1px solid rgba(255,255,255,0.18)",fontFamily:"var(--font-display)",fontSize:12,
              fontWeight:600,color:"rgba(255,255,255,0.86)",whiteSpace:"nowrap"}}>{t}</span>)}
        </div>
      </div>
    </div>
  </div>;
}

function Workbooks({onBook}){
  const [ref,inv]=useInView();
  return <section 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">
      <Reveal><SectionHead eyebrow="Our workbooks" max="58ch"
        title="The free worksheet you found online was not written for your child."
        lead="It was written to fill a page. Ours are written by the specialists who teach the sessions, from the papers we have actually marked. Drag the handle across and see the difference on one question."/></Reveal>
      <WorkbookBand/>
      <div className="lp-split" ref={ref} style={{alignItems:"start"}}>
        <Reveal><Slider/></Reveal>
        <Reveal delay={100}>
          <Card padding="var(--space-8)" style={{display:"flex",flexDirection:"column",gap:"var(--space-6)"}}>
            <h3 style={{fontSize:"var(--size-heading-2)",maxWidth:"26ch"}}>Side by side</h3>
            <div style={{display:"flex",flexDirection:"column",gap:2}}>
              <div style={{display:"grid",gridTemplateColumns:"1fr 74px 74px",gap:8,paddingBottom:8,
                borderBottom:"1px solid var(--border-subtle)"}}>
                <span/>
                <span style={{fontFamily:"var(--font-display)",fontSize:11,fontWeight:700,letterSpacing:"var(--tracking-wide)",
                  textTransform:"uppercase",color:"var(--text-subtle)",textAlign:"center"}}>Generic</span>
                <span style={{fontFamily:"var(--font-display)",fontSize:11,fontWeight:700,letterSpacing:"var(--tracking-wide)",
                  textTransform:"uppercase",color:"var(--violet-600)",textAlign:"center"}}>Kinro</span>
              </div>
              {ROWS.map(([label,g,k],i)=><div key={label} style={{display:"grid",gridTemplateColumns:"1fr 74px 74px",
                gap:8,alignItems:"center",padding:"11px 0",borderBottom:"1px solid var(--border-subtle)",
                opacity:inv?1:0,transform:inv?"none":"translateY(8px)",
                transition:`opacity .5s ease ${i*70}ms,transform .5s ease ${i*70}ms`}}>
                <span style={{fontSize:14,color:"var(--text-body)"}}>{label}</span>
                <span style={{display:"grid",placeItems:"center"}}>
                  <Icon name={g?"check":"x"} size="sm" color={g?"var(--green-500)":"var(--neutral-300)"}/></span>
                <span style={{display:"grid",placeItems:"center"}}>
                  <Icon name={k?"check":"x"} size="sm" color={k?"var(--green-500)":"var(--neutral-300)"}/></span>
              </div>)}
            </div>
            <Button variant="accent" iconRight="arrow-right" onClick={onBook} style={{alignSelf:"flex-start"}}>See if your child qualifies</Button>
          </Card>
        </Reveal>
      </div>
    </div>
  </section>;
}

Object.assign(window,{Workbooks,WorkbookBand,Slider,ROWS});