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

function StudentBand(){
  const y=useScrollY();
  const [ref,inv]=useInView();
  return <section ref={ref} 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)",
    padding:"var(--section-y) 0"}}>
    <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 style={{position:"absolute",top:-160,right:"22%",width:520,height:520,borderRadius:"50%",
      background:"var(--gradient-brand-diagonal)",filter:"blur(150px)",opacity:.16}}/>
    <div style={{position:"absolute",left:0,right:0,top:0,height:1,background:"var(--gradient-brand)",opacity:.6}}/>
    <div className="lp-wrap lp-media" style={{position:"relative"}}>
      <div style={{display:"flex",flexDirection:"column",gap:"var(--space-6)",alignItems:"flex-start"}}>
        <GradientRule width="88px"/>
        <Eyebrow>Every answer, marked</Eyebrow>
        <blockquote style={{margin:0,fontFamily:"var(--font-display)",fontWeight:700,
          fontSize:"var(--size-heading-1)",lineHeight:"var(--leading-snug)",color:"var(--text-strong)",maxWidth:"26ch"}}>
          “She stopped guessing what the examiner wanted and started writing for the marks.”
        </blockquote>
        <p style={{fontSize:"var(--size-body-lg)",color:"var(--text-muted)",lineHeight:"var(--leading-body)",maxWidth:"40ch",margin:0}}>
          Students work every question themselves, on screen, while a specialist watches the working go down line by line. Nothing is marked later. It is marked as it happens.
        </p>
        <div style={{display:"flex",gap:"var(--space-7)",flexWrap:"wrap",marginTop:"var(--space-3)"}}>
          {[["14,000+","questions marked to the scheme"],["48 hrs","turnaround on set homework"]]
            .map(([v,l])=><div key={l} style={{display:"flex",flexDirection:"column",gap:4}}>
              <span style={{fontFamily:"var(--font-display)",fontSize:"var(--size-heading-2)",fontWeight:800,
                letterSpacing:"var(--tracking-heading)",background:"var(--gradient-brand)",
                WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent"}}>{v}</span>
              <span style={{fontSize:13,color:"var(--text-subtle)",maxWidth:"20ch"}}>{l}</span>
            </div>)}
        </div>
      </div>
      <div style={{position:"relative",transform:`translateY(${Math.max(-26,Math.min(26,(y-1200)*0.02))}px)`,willChange:"transform"}}>
        <div className="lp-hide-mob" style={{position:"absolute",left:-26,top:-26,width:120,height:120,
          borderTop:"2px solid var(--coral-500)",borderLeft:"2px solid var(--coral-500)",
          borderTopLeftRadius:"var(--radius-2xl)",opacity:inv?.9:0,transition:"opacity .7s .2s"}}/>
        <div className="lp-hide-mob" style={{position:"absolute",right:-26,bottom:-26,width:120,height:120,
          borderBottom:"2px solid var(--violet-500)",borderRight:"2px solid var(--violet-500)",
          borderBottomRightRadius:"var(--radius-2xl)",opacity:inv?.9:0,transition:"opacity .7s .35s"}}/>
        <div style={{position:"relative",borderRadius:"var(--radius-2xl)",overflow:"hidden",
          boxShadow:"var(--shadow-lg)"}}>
          <KinroPhoto file="student-algebra.webp"
            alt="Kinro Academy student working through a GCSE maths question"
            objectPosition="center center"
            style={{width:"100%",aspectRatio:"4/3"}}/>
          <div style={{position:"absolute",left:0,right:0,bottom:0,height:5,background:"var(--gradient-brand)"}}/>
        </div>
        <div style={{position:"absolute",left:"var(--space-6)",bottom:"var(--space-6)",display:"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-lg)"}}>
          <Icon name="pencil" size="sm" color="var(--violet-600)"/>
          <span style={{fontFamily:"var(--font-display)",fontSize:13,fontWeight:600,color:"var(--text-strong)"}}>
            Working shown, marks earned</span>
        </div>
      </div>
    </div>
  </section>;
}

Object.assign(window,{StudentBand});