const {Button,Logo,Icon,GradientRule,Badge}=window.KinroAcademyDesignSystem_f0472d;
const LP_A=(window.KINRO_THEME_URI||"")+"/assets/";

function Reveal({children,delay=0,style}){
  const ref=React.useRef(null);
  const [seen,setSeen]=React.useState(false);
  React.useEffect(()=>{
    const el=ref.current;if(!el)return;
    const io=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting){setSeen(true);io.disconnect()}})},{threshold:.12});
    io.observe(el);return()=>io.disconnect();
  },[]);
  return <div ref={ref} className={"lp-rev"+(seen?" in":"")} style={{transitionDelay:delay+"ms",...style}}>{children}</div>;
}

function useInView(){
  const ref=React.useRef(null);const [inv,setInv]=React.useState(false);
  React.useEffect(()=>{const el=ref.current;if(!el)return;
    const io=new IntersectionObserver(es=>es.forEach(e=>{if(e.isIntersecting){setInv(true);io.disconnect()}}),
      {threshold:0,rootMargin:"0px 0px -12% 0px"});
    io.observe(el);return()=>io.disconnect()},[]);
  return [ref,inv];
}

function useScrollY(){
  const [y,setY]=React.useState(0);
  React.useEffect(()=>{
    let raf=null;
    const f=()=>{if(raf)return;raf=requestAnimationFrame(()=>{setY(window.scrollY);raf=null})};
    window.addEventListener("scroll",f,{passive:true});f();
    return()=>{window.removeEventListener("scroll",f);if(raf)cancelAnimationFrame(raf)};
  },[]);
  return y;
}

function useCountUp(target,run,dur=1100){
  const [v,setV]=React.useState(0);
  React.useEffect(()=>{
    if(!run)return;let raf,t0;
    const tick=t=>{if(!t0)t0=t;const p=Math.min(1,(t-t0)/dur);setV(target*(1-Math.pow(1-p,3)));if(p<1)raf=requestAnimationFrame(tick)};
    raf=requestAnimationFrame(tick);return()=>cancelAnimationFrame(raf);
  },[target,run,dur]);
  return v;
}

function useAutoCycle(count,ms=3600){
  const [i,setI]=React.useState(0);
  const [paused,setPaused]=React.useState(false);
  const [ref,inv]=useInView();
  React.useEffect(()=>{
    if(!inv||paused||count<2)return;
    const t=setInterval(()=>setI(v=>(v+1)%count),ms);
    return()=>clearInterval(t);
  },[inv,paused,count,ms]);
  return {i,setI,ref,paused,
    bind:{onMouseEnter:()=>setPaused(true),onMouseLeave:()=>setPaused(false)}};
}

function Eyebrow({children,light}){
  return <span className="k-eyebrow" style={{color:light?"rgba(255,255,255,0.55)":"var(--text-accent)"}}>{children}</span>;
}

function SectionHead({eyebrow,title,lead,light,align="left",max="52ch"}){
  return <div style={{display:"flex",flexDirection:"column",gap:"var(--space-6)",maxWidth:max,
    marginBottom:"var(--space-11)",alignItems:align==="center"?"center":"flex-start",
    textAlign:align,marginLeft:align==="center"?"auto":0,marginRight:align==="center"?"auto":0}}>
    <GradientRule width="88px"/>
    {eyebrow&&<Eyebrow light={light}>{eyebrow}</Eyebrow>}
    {title&&<h2 style={{fontSize:"var(--size-display-3)",lineHeight:"var(--leading-snug)",color:light?"var(--white)":"var(--text-strong)"}}>{title}</h2>}
    {lead&&<p style={{fontSize:"var(--size-body-lg)",color:light?"rgba(255,255,255,0.7)":"var(--text-muted)",lineHeight:"var(--leading-body)"}}>{lead}</p>}
  </div>;
}

function GuaranteePill({tone="light"}){
  const dark=tone==="dark";
  return <span style={{display:"inline-flex",width:"fit-content",maxWidth:"100%",flex:"0 0 auto",alignSelf:"flex-start",alignItems:"center",gap:10,padding:"8px 16px 8px 12px",
    borderRadius:99,background:dark?"rgba(255,255,255,0.10)":"var(--white)",
    border:dark?"1px solid rgba(255,255,255,0.18)":"1px solid var(--border-subtle)",
    boxShadow:dark?"none":"var(--shadow-sm)"}}>
    <Icon name="shield-check" size="sm" color={dark?"var(--coral-400)":"var(--violet-600)"}/>
    <span style={{fontFamily:"var(--font-display)",fontSize:13,fontWeight:600,
      color:dark?"rgba(255,255,255,0.85)":"var(--text-strong)"}}>14-day no-risk money-back guarantee</span>
  </span>;
}

function LpHeader({onBook}){
  const [solid,setSolid]=React.useState(false);
  React.useEffect(()=>{const f=()=>setSolid(window.scrollY>40);window.addEventListener("scroll",f,{passive:true});return()=>window.removeEventListener("scroll",f)},[]);
  return <header style={{position:"sticky",top:0,zIndex:40,
    background:solid?"var(--surface-panel)":"transparent",backdropFilter:solid?"var(--blur-panel)":"none",
    borderBottom:solid?"1px solid var(--border-subtle)":"1px solid transparent",transition:"background .3s,border-color .3s"}}>
    <div className="lp-wrap" style={{paddingTop:12,paddingBottom:12,display:"flex",alignItems:"center",gap:"var(--space-6)"}}>
      <Logo variant="dark" height={18} assetBase={LP_A}/>
      <span className="lp-hide-mob" style={{fontFamily:"var(--font-display)",fontSize:13,fontWeight:600,color:"var(--text-muted)"}}>GCSE Mathematics Specialists</span>
      <div style={{marginLeft:"auto",display:"flex",alignItems:"center",gap:"var(--space-5)"}}>
        <span className="lp-hide-mob" style={{display:"flex",alignItems:"center",gap:8,fontFamily:"var(--font-display)",fontSize:13,fontWeight:600,color:"var(--text-muted)"}}>
          <span style={{position:"relative",width:8,height:8,flexShrink:0}}>
            <span style={{position:"absolute",inset:0,borderRadius:"50%",background:"var(--coral-500)"}}/>
            <span style={{position:"absolute",inset:0,borderRadius:"50%",background:"var(--coral-500)",animation:"lp-pulse 2s ease-out infinite"}}/>
          </span>
          <span style={{animation:"lp-urgent 2.6s ease-in-out infinite"}}>Autumn cohort · limited places</span>
        </span>
        <Button size="sm" variant="accent" iconRight="arrow-right" onClick={onBook}>See if your child qualifies</Button>
      </div>
    </div>
  </header>;
}

function StickyCTA({onBook}){
  const [show,setShow]=React.useState(false);
  React.useEffect(()=>{
    const f=()=>{const b=document.getElementById("book");
      const past=window.scrollY>window.innerHeight*0.9;
      const atForm=b&&window.scrollY+window.innerHeight>b.offsetTop+220;
      setShow(past&&!atForm)};
    window.addEventListener("scroll",f,{passive:true});f();return()=>window.removeEventListener("scroll",f);
  },[]);
  return <div style={{position:"fixed",left:0,right:0,bottom:0,zIndex:50,paddingTop:12,paddingBottom:12,
    background:"var(--ink-900)",color:"var(--white)",
    transform:show?"none":"translateY(115%)",transition:"transform .45s cubic-bezier(.2,.7,.2,1)",
    boxShadow:"0 -12px 40px rgba(0,0,0,0.25)"}}>
    <div style={{position:"absolute",left:0,right:0,top:0,height:3,background:"var(--gradient-brand)"}}/>
    <div className="lp-wrap" style={{display:"flex",alignItems:"center",gap:"var(--space-6)"}}>
      <div className="lp-hide-mob" style={{display:"flex",flexDirection:"column",gap:2}}>
        <strong style={{fontFamily:"var(--font-display)",fontSize:16}}>Find out how many marks your child is leaving on the table.</strong>
        <span style={{fontSize:13,color:"rgba(255,255,255,0.6)"}}>15-minute call · 14-day money-back guarantee · no obligation</span>
      </div>
      <div style={{marginLeft:"auto",display:"flex",alignItems:"center",gap:"var(--space-5)",flexShrink:0}}>
        <Button variant="accent" iconRight="arrow-right" onClick={onBook}>See if your child qualifies</Button>
      </div>
    </div>
  </div>;
}


function KinroPhoto({file,alt="",style,objectPosition="center",loading="lazy"}){
  return <img
    src={LP_A+file}
    alt={alt}
    loading={loading}
    decoding="async"
    style={{display:"block",width:"100%",height:"100%",objectFit:"cover",objectPosition,...style}}
  />;
}

function PhotoPlaceholder({icon="image",label,style}){
  return <div style={{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",
    background:"var(--gradient-brand-soft)",overflow:"hidden",...style}}>
    <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:"relative",display:"flex",flexDirection:"column",alignItems:"center",gap:10,padding:24}}>
      <span style={{width:56,height:56,borderRadius:"50%",background:"var(--white)",display:"grid",placeItems:"center",boxShadow:"var(--shadow-md)"}}>
        <Icon name={icon} size="lg" color="var(--violet-600)"/>
      </span>
      {label&&<span style={{fontFamily:"var(--font-display)",fontSize:12,fontWeight:600,color:"var(--text-subtle)",textAlign:"center",maxWidth:"28ch"}}>{label}</span>}
    </div>
  </div>;
}

function CtaBand({onBook,title,lead,cta="See if your child qualifies"}){
  return <section id="book" style={{padding:"var(--space-12) clamp(24px,4vw,72px) var(--space-13)"}}>
    <Reveal><div className="lp-wrap lp-cta-band" style={{background:"var(--gradient-brand-diagonal)",borderRadius:"var(--radius-2xl)",
      padding:"var(--space-11)",color:"var(--white)",display:"flex",alignItems:"center",
      justifyContent:"space-between",gap:"var(--space-9)",flexWrap:"wrap"}}>
      <div className="lp-cta-copy" style={{display:"flex",flexDirection:"column",gap:"var(--space-4)",maxWidth:"40ch"}}>
        <h3 style={{color:"var(--white)",fontSize:"var(--size-heading-1)",lineHeight:"var(--leading-snug)"}}>{title}</h3>
        <p style={{fontSize:"var(--size-body)",color:"rgba(255,255,255,0.85)"}}>{lead}</p>
      </div>
      <div className="lp-cta-actions" style={{display:"flex",flexDirection:"column",gap:"var(--space-5)",alignItems:"flex-start"}}>
        <Button size="lg" style={{background:"var(--white)",color:"var(--ink-900)"}} iconRight="arrow-right" onClick={onBook}>{cta}</Button>
        <GuaranteePill tone="dark"/>
      </div>
    </div></Reveal>
  </section>;
}

Object.assign(window,{Reveal,useInView,useScrollY,useCountUp,useAutoCycle,Eyebrow,SectionHead,LpHeader,StickyCTA,CtaBand,GuaranteePill,PhotoPlaceholder,KinroPhoto,LP_A});