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

const STATS=[
  {key:"grade",value:94,suffix:"%",label:"Improved by a grade or more",detail:"Students completing two terms, 2024–25."},
  {key:"gain",value:2.1,dec:1,label:"Average grades gained",detail:"Across students with us for a full year."},
  {key:"taught",value:1200,suffix:"+",label:"Students taught since 2019"},
  {key:"rating",value:4.9,dec:1,label:"Parent rating",detail:"317 reviews."}];

const CHARTS={
  grade:{title:"Grade movement after two terms",note:"Percentage of students by grades gained.",
    rows:[["No change",6],["+1 grade",38],["+2 grades",41],["+3 grades or more",15]],max:45,unit:"%"},
  gain:{title:"Median finishing grade by starting grade",note:"Students completing two full terms.",
    rows:[["Started grade 3",4],["Started grade 4",5],["Started grade 5",6],["Started grade 6",7],["Started grade 7",8]],max:9,unit:""},
  taught:{title:"Students taught per year",note:"Cohorts have grown every year since we started.",
    rows:[["2019–20",64],["2020–21",112],["2021–22",168],["2022–23",214],["2023–24",283],["2024–25",341]],max:360,unit:""},
  rating:{title:"Review distribution",note:"317 verified parent reviews.",
    rows:[["5 star",89],["4 star",8],["3 star",2],["2 star",1],["1 star",0]],max:90,unit:"%"}};

function StatTile({s,on,onClick,run}){
  const v=useCountUp(s.value,run);
  return <button onClick={onClick} style={{textAlign:"left",cursor:"pointer",padding:"var(--space-7)",
    borderRadius:"var(--radius-lg)",display:"flex",flexDirection:"column",gap:8,
    background:on?"var(--white)":"transparent",
    border:on?"1px solid var(--violet-100)":"1px solid var(--border-subtle)",
    boxShadow:on?"var(--shadow-md)":"none",transition:"all .28s",transform:on?"translateY(-2px)":"none"}}>
    <span style={{fontFamily:"var(--font-display)",fontSize:"var(--size-display-3)",fontWeight:800,
      letterSpacing:"var(--tracking-display)",lineHeight:1,
      background:"var(--gradient-brand)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent"}}>
      {v.toFixed(s.dec||0)}{s.suffix||""}</span>
    <strong style={{fontFamily:"var(--font-display)",fontSize:15,color:"var(--text-strong)"}}>{s.label}</strong>
    {s.detail&&<span style={{fontSize:13,color:"var(--text-subtle)"}}>{s.detail}</span>}
  </button>;
}

function StatChart({k}){
  const c=CHARTS[k];
  return <div key={k} style={{display:"flex",flexDirection:"column",gap:"var(--space-6)",animation:"lp-tick .4s ease-out"}}>
    <div>
      <Eyebrow>{c.title}</Eyebrow>
      <p style={{margin:"8px 0 0",fontSize:14,color:"var(--text-muted)"}}>{c.note}</p>
    </div>
    <div style={{display:"flex",flexDirection:"column",gap:"var(--space-5)"}}>
      {c.rows.map(([label,val],i)=><div key={label} style={{display:"grid",gridTemplateColumns:"140px 1fr",
        gap:"var(--space-5)",alignItems:"center"}}>
        <span style={{fontSize:14,color:"var(--text-muted)"}}>{label}</span>
        <div style={{height:28,borderRadius:"var(--radius-sm)",background:"var(--surface-sunken)",overflow:"hidden"}}>
          <div style={{height:"100%",width:((val/c.max)*100)+"%",borderRadius:"var(--radius-sm)",
            background:"var(--gradient-brand)",display:"flex",alignItems:"center",justifyContent:"flex-end",
            paddingRight:10,fontFamily:"var(--font-display)",fontWeight:700,fontSize:13,color:"var(--white)",
            animation:`lp-grow .8s cubic-bezier(.2,.7,.2,1) ${i*90}ms both`,transformOrigin:"left"}}>
            {val}{c.unit}</div>
        </div>
      </div>)}
    </div>
  </div>;
}

function InteractiveStats(){
  const {i,setI,ref:cycRef,bind}=useAutoCycle(STATS.length,4200);
  const k=STATS[i].key;
  const [ref,inv]=useInView();
  return <div ref={ref} {...bind} className="lp-split" style={{alignItems:"start"}}>
    <div className="lp-grid lp-2" ref={cycRef}>
      {STATS.map((s,n)=><StatTile key={s.key} s={s} on={k===s.key} run={inv} onClick={()=>setI(n)}/>)}
    </div>
    <Card padding="var(--space-9)">{inv&&<StatChart k={k}/>}</Card>
  </div>;
}

const QUOTES=[
  ["She went from crying over past papers to explaining circle theorems to her brother. The group was the part I was worried about and it turned out to be the reason it worked.","Naomi B.","Parent of a Year 11 student, Leeds","4 → 7"],
  ["He always said he understood it. The marked papers showed exactly where the marks were going, and within a month he had stopped doing it.","Adeel R.","Parent of a Year 10 student, Birmingham","5 → 8"],
  ["The monthly report is the thing. One page, no jargon, and I could see precisely which topics had moved.","Claire T.","Parent of a Year 11 student, Bristol","3 → 6"],
  ["Two years of a private tutor and nothing shifted. One term here and she was correcting her own working before she handed it in.","Priya S.","Parent of a Year 11 student, Harrow","4 → 7"],
  ["The mark scheme sessions were the turning point. He finally understood what the examiner is actually paying for.","Daniel O.","Parent of a Year 11 student, Manchester","5 → 7"],
  ["My son is quiet and I assumed a group would swallow him. He ended up being the one explaining it to everyone else.","Fatima A.","Parent of a Year 10 student, Luton","3 → 6"],
  ["She sat the mock in November predicted a 4 and came out with a 7 in the summer. I still have the report.","Jonathan H.","Parent of a Year 11 student, Reading","4 → 7"],
  ["Workbooks arrive already marked up with the examiner notes. Nothing else we tried came close to that level of detail.","Ruth M.","Parent of a Year 11 student, Glasgow","6 → 9"],
  ["Booked the call expecting a sales pitch. Got fifteen minutes of straight talk about which topics were costing her marks.","Tom W.","Parent of a Year 10 student, Cardiff","5 → 8"]];

function QuoteCard({q,n,r,jump}){
  return <div style={{width:340,flexShrink:0,padding:"var(--space-7)",borderRadius:"var(--radius-lg)",
    background:"var(--white)",border:"1px solid var(--border-subtle)",boxShadow:"var(--shadow-sm)",
    display:"flex",flexDirection:"column",gap:"var(--space-5)",whiteSpace:"normal"}}>
    <div style={{display:"flex",alignItems:"center",justifyContent:"space-between"}}>
      <div style={{display:"flex",gap:3}}>{[0,1,2,3,4].map(s=><span key={s} style={{color:"var(--amber-500)",fontSize:15,lineHeight:1}}>★</span>)}</div>
      <Badge tone="accent">{jump}</Badge>
    </div>
    <p style={{fontSize:15,color:"var(--text-body)",lineHeight:"var(--leading-relaxed)",margin:0}}>“{q}”</p>
    <div style={{marginTop:"auto",paddingTop:"var(--space-5)",borderTop:"1px solid var(--border-subtle)",
      display:"flex",alignItems:"center",gap:10}}>
      <span style={{width:34,height:34,borderRadius:"50%",flexShrink:0,display:"grid",placeItems:"center",
        background:"var(--gradient-brand-soft)",fontFamily:"var(--font-display)",fontSize:13,fontWeight:700,
        color:"var(--violet-600)"}}>{n[0]}</span>
      <div>
        <strong style={{fontFamily:"var(--font-display)",fontSize:14,display:"block"}}>{n}</strong>
        <span style={{fontSize:13,color:"var(--text-subtle)"}}>{r}</span>
      </div>
      <Icon name="badge-check" size="sm" color="var(--green-500)" style={{marginLeft:"auto"}}/>
    </div>
  </div>;
}

function ReviewRow({items,reverse,dur}){
  const [paused,setPaused]=React.useState(false);
  const row=[...items,...items];
  return <div onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>setPaused(false)}
    style={{overflow:"hidden",maskImage:"linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)",
      WebkitMaskImage:"linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)"}}>
    <div style={{display:"flex",gap:"var(--space-5)",width:"max-content",alignItems:"stretch",
      animation:`${reverse?"lp-marquee-r":"lp-marquee"} ${dur}s linear infinite`,
      animationPlayState:paused?"paused":"running"}}>
      {row.map((q,i)=><QuoteCard key={i} q={q[0]} n={q[1]} r={q[2]} jump={q[3]}/>)}
    </div>
  </div>;
}

function SocialProof(){
  const [ref,inv]=useInView();
  const dist=[["5",89],["4",8],["3",2],["2",1],["1",0]];
  return <div ref={ref} style={{display:"flex",flexDirection:"column",gap:"var(--space-8)"}}>
    <div className="lp-split-r" style={{alignItems:"center"}}>
      <Card padding="var(--space-8)" style={{display:"flex",flexDirection:"column",gap:"var(--space-6)"}}>
        <div style={{display:"flex",alignItems:"center",gap:"var(--space-6)"}}>
          <span style={{fontFamily:"var(--font-display)",fontSize:"var(--size-display-2)",fontWeight:800,lineHeight:1,
            background:"var(--gradient-brand)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent"}}>4.9</span>
          <div style={{display:"flex",flexDirection:"column",gap:4}}>
            <div style={{display:"flex",gap:3}}>{[0,1,2,3,4].map(s=><span key={s} style={{color:"var(--amber-500)",fontSize:15,lineHeight:1}}>★</span>)}</div>
            <span style={{fontSize:14,color:"var(--text-muted)"}}>317 verified parent reviews</span>
          </div>
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:6}}>
          {dist.map(([s,pct],i)=><div key={s} style={{display:"grid",gridTemplateColumns:"22px 1fr 38px",
            gap:10,alignItems:"center"}}>
            <span style={{fontSize:13,color:"var(--text-subtle)"}}>{s}★</span>
            <div style={{height:7,borderRadius:99,background:"var(--surface-sunken)",overflow:"hidden"}}>
              <div style={{height:"100%",width:inv?pct+"%":0,borderRadius:99,background:"var(--gradient-brand)",
                transition:`width .8s cubic-bezier(.2,.7,.2,1) ${i*80}ms`}}/></div>
            <span style={{fontSize:13,color:"var(--text-subtle)",textAlign:"right"}}>{pct}%</span>
          </div>)}
        </div>
        <div style={{display:"flex",gap:8,flexWrap:"wrap",paddingTop:"var(--space-5)",borderTop:"1px solid var(--border-subtle)"}}>
          {["Google","Trustpilot","Facebook groups","Word of mouth"].map(p=>
            <span key={p} style={{padding:"6px 12px",borderRadius:99,background:"var(--surface-sunken)",
              fontFamily:"var(--font-display)",fontSize:12,fontWeight:600,color:"var(--text-muted)"}}>{p}</span>)}
        </div>
      </Card>
      <div className="lp-grid lp-2">
        {[["heart-handshake","72%","of new students come from a parent referral"],
          ["repeat","9 in 10","families stay for a second term"],
          ["file-check","14,000+","exam questions marked against the mark scheme"],
          ["calendar-check","98%","session attendance across the last cohort"]]
          .map(([ic,v,l])=><div key={l} style={{padding:"var(--space-7)",borderRadius:"var(--radius-lg)",
            background:"var(--white)",border:"1px solid var(--border-subtle)",display:"flex",
            flexDirection:"column",gap:8}}>
            <Icon name={ic} size="lg" color="var(--violet-600)"/>
            <span style={{fontFamily:"var(--font-display)",fontSize:"var(--size-heading-1)",fontWeight:800,
              letterSpacing:"var(--tracking-heading)"}}>{v}</span>
            <span style={{fontSize:14,color:"var(--text-muted)",lineHeight:"var(--leading-body)"}}>{l}</span>
          </div>)}
      </div>
    </div>
    <div style={{display:"flex",flexDirection:"column",gap:"var(--space-5)"}}>
      <ReviewRow items={QUOTES.slice(0,5)} dur={58}/>
      <ReviewRow items={QUOTES.slice(4)} reverse dur={66}/>
    </div>
  </div>;
}

function Teachers({onBook}){
  return <Reveal><Card padding="var(--space-10)" tone="sunken" style={{display:"flex",flexDirection:"column",gap:"var(--space-9)"}}>
    <div className="lp-split-r" style={{alignItems:"center"}}>
      <div style={{display:"flex",flexDirection:"column",gap:"var(--space-6)"}}>
        <GradientRule width="72px"/>
        <Eyebrow>Who teaches your child</Eyebrow>
        <h3 style={{fontSize:"var(--size-display-3)",lineHeight:"var(--leading-snug)"}}>Expert teachers who make an hour of maths worth watching.</h3>
        <div style={{position:"relative",marginTop:"var(--space-3)",width:"100%",maxWidth:250,
          borderRadius:"var(--radius-lg)",overflow:"hidden",border:"1px solid var(--border-subtle)",
          boxShadow:"var(--shadow-md)"}}>
          <KinroPhoto file="teacher-female.webp"
            alt="Kinro Academy specialist GCSE maths teacher"
            objectPosition="center 24%"
            style={{width:"100%",aspectRatio:"1/1"}}/>
          <div style={{position:"absolute",left:0,right:0,bottom:0,height:4,background:"var(--gradient-brand)"}}/>
        </div>
      </div>
      <div style={{display:"flex",flexDirection:"column",gap:"var(--space-6)"}}>
        <p style={{fontSize:"var(--size-body-lg)",color:"var(--text-muted)",lineHeight:"var(--leading-body)"}}>
          Your child is assigned to one of our specialist GCSE maths teachers, matched to their grade and to the gaps in their papers. Every teacher is a subject specialist, DBS checked, and trained on our method and our workbooks before they take a session. They teach one specification, all day, every day, which is why they can tell you what an examiner will do with a line of working before your child has finished writing it.
        </p>
        <div className="lp-grid lp-3">
          {[["Subject specialists","GCSE maths only, no generalist tutors"],
            ["Trained on our method","Mark scheme analysis, ladders, workbooks"],
            ["DBS checked","Safeguarding policy available before you book"]]
            .map(([a,b])=><div key={a} style={{display:"flex",flexDirection:"column",gap:4}}>
              <strong style={{fontFamily:"var(--font-display)",fontSize:15}}>{a}</strong>
              <span style={{fontSize:13,color:"var(--text-subtle)"}}>{b}</span></div>)}
        </div>
        <div style={{display:"flex",flexDirection:"column",gap:"var(--space-5)",alignItems:"flex-start"}}>
          <Button variant="accent" size="lg" iconRight="arrow-right" onClick={onBook}>See if your child qualifies</Button>
          <GuaranteePill/>
        </div>
      </div>
    </div>
  </Card></Reveal>;
}

function Guarantee(){
  return <Reveal><div style={{display:"grid",gridTemplateColumns:"auto 1fr",gap:"var(--space-8)",
    alignItems:"center",padding:"var(--space-9)",borderRadius:"var(--radius-2xl)",
    background:"var(--gradient-brand-soft)",border:"1px solid var(--border-subtle)"}}>
    <span style={{width:64,height:64,borderRadius:"50%",background:"var(--white)",display:"grid",placeItems:"center",
      boxShadow:"var(--shadow-md)"}}><Icon name="shield-check" size="xl" color="var(--violet-600)"/></span>
    <div style={{display:"flex",flexDirection:"column",gap:8}}>
      <h3 style={{fontSize:"var(--size-heading-1)",lineHeight:"var(--leading-snug)"}}>14 days, no risk. If it is not working, you get your money back.</h3>
      <p style={{fontSize:"var(--size-body-lg)",color:"var(--text-muted)",maxWidth:"64ch",margin:0}}>
        Two full weeks of sessions, marked homework and workbooks. If you do not think your child is better off, tell us inside 14 days and we refund you in full. No form to fill in, no notice period, no argument.
      </p>
    </div>
  </div></Reveal>;
}

function Proof(){
  return <section className="lp-sec" style={{background:"var(--surface-page)"}}>
    <div className="lp-wrap" style={{display:"flex",flexDirection:"column",gap:"var(--space-11)"}}>
      <Reveal><SectionHead eyebrow="The results" max="58ch"
        title="Judge us on the numbers, then hear it from the parents."
        lead="Every figure here comes from marked papers in our own cohorts, not a survey. Tap any number to see what sits behind it, then read what the families said."/></Reveal>
      <InteractiveStats/>
      <SocialProof/>
    </div>
  </section>;
}

function Assurance({onBook}){
  return <section className="lp-sec" style={{background:"var(--surface-page)"}}>
    <div className="lp-wrap" style={{display:"flex",flexDirection:"column",gap:"var(--space-11)"}}>
      <Guarantee/>
      <Teachers onBook={onBook}/>
    </div>
  </section>;
}

Object.assign(window,{Proof,Assurance,InteractiveStats,SocialProof,ReviewRow,Teachers,Guarantee,QUOTES,STATS});
