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

function Problems({onBook}){
  const items=[
    ["alert-triangle","“She revises for hours and the grade doesn’t move.”",
      "Re-reading notes feels like work and produces almost nothing measurable. Without retrieval practice and marking against the real boundaries, effort and progress come apart."],
    ["help-circle","“He understands it in the lesson, then blanks in the exam.”",
      "Following an explanation is not the same as producing an answer under time pressure. The gap only shows up in a marked paper, and school rarely marks enough of them."],
    ["clock","“School has thirty in a class and no time for questions.”",
      "Thirty students gives your child about a minute of attention a lesson. Nobody notices which topic quietly broke in Year 9, and it stays broken."],
    ["scissors","“She knew how to do it, she just made a silly mistake.”",
      "Rounding too early, dropping units, unsimplified answers, method not shown. These are not silly and they are not random. They are habits, and they are the marks between a 5 and a 7."]];
  return <div>
    <div>
      <Reveal><SectionHead eyebrow="Sound familiar?"
        title="Parents arrive with the same four sentences."
        lead="If two of these are true in your house, the call is worth fifteen minutes. If none of them are, we will tell you that too."/></Reveal>
      <div className="lp-grid lp-2">
        {items.map(([ic,q,a],i)=><Reveal key={q} delay={i*90}>
          <Card interactive style={{height:"100%",display:"flex",flexDirection:"column",gap:"var(--space-5)"}}>
            <div style={{display:"flex",alignItems:"center",gap:"var(--space-5)"}}>
              <span style={{width:38,height:38,borderRadius:"var(--radius-md)",background:"var(--surface-coral-soft)",display:"grid",placeItems:"center",flexShrink:0}}>
                <Icon name={ic} size="sm" color="var(--coral-600)"/></span>
              <h4 style={{fontSize:"var(--size-body-lg)",lineHeight:"var(--leading-heading)"}}>{q}</h4>
            </div>
            <p style={{fontSize:15,color:"var(--text-muted)",lineHeight:"var(--leading-body)"}}>{a}</p>
          </Card></Reveal>)}
      </div>
      <Reveal delay={120}><div style={{marginTop:"var(--space-9)",display:"flex",alignItems:"center",
        gap:"var(--space-6)",padding:"var(--space-7)",borderRadius:"var(--radius-lg)",
        background:"var(--gradient-brand-soft)",border:"1px solid var(--border-subtle)",flexWrap:"wrap"}}>
        <Icon name="target" size="lg" color="var(--violet-600)"/>
        <p style={{fontSize:"var(--size-body-lg)",fontFamily:"var(--font-display)",fontWeight:600,maxWidth:"50ch",margin:0}}>
          Every one of those is a marks problem, not an intelligence problem. So we start from the mark scheme and work backwards.
        </p>
        <Button variant="accent" iconRight="arrow-right" style={{marginLeft:"auto"}} onClick={onBook}>See if your child qualifies</Button>
      </div></Reveal>
    </div>
  </div>;
}

Object.assign(window,{Problems});