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

function VideoStage(){
  const [playing,setPlaying]=React.useState(false);
  const [failed,setFailed]=React.useState(false);
  const videoUrl=(window.KINRO_VIDEO_URL||"").trim();
  const hasVideo=Boolean(videoUrl);
  return <div className="lp-hero-v" style={{position:"relative",borderRadius:"var(--radius-2xl)",overflow:"hidden",
    border:"1px solid var(--border-subtle)",background:"var(--ink-800)",aspectRatio:"16/10",
    boxShadow:"0 40px 90px -40px rgba(30,30,41,0.45)"}}>
    {playing&&hasVideo&&!failed
      ? <video controls autoPlay playsInline onError={()=>setFailed(true)}
          style={{width:"100%",height:"100%",objectFit:"cover",display:"block"}}
          src={videoUrl}/>
      : <div onClick={()=>{if(hasVideo)setPlaying(true)}} style={{position:"absolute",inset:0,cursor:hasVideo?"pointer":"default",
          background:"var(--gradient-ink)",display:"flex",flexDirection:"column",
          alignItems:"center",justifyContent:"center",gap:"var(--space-6)"}}>
          <div style={{position:"absolute",inset:0,backgroundImage:
            "linear-gradient(var(--grid-line-inverse) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line-inverse) 1px,transparent 1px)",
            backgroundSize:"var(--grid-cell) var(--grid-cell)",opacity:.8}}/>
          <div style={{position:"absolute",width:220,height:220,borderRadius:"50%",
            background:"var(--gradient-brand-diagonal)",filter:"blur(90px)",opacity:.55}}/>
          <div style={{position:"relative",width:72,height:72,borderRadius:"50%",background:"var(--white)",
            display:"grid",placeItems:"center",animation:"lp-float 4s ease-in-out infinite"}}>
            <div style={{position:"absolute",inset:-14,borderRadius:"50%",border:"2px solid rgba(255,255,255,0.5)",animation:"lp-pulse 2.6s ease-out infinite"}}/>
            <Icon name="play" size="lg" color="var(--ink-900)"/>
          </div>
          <div style={{position:"relative",textAlign:"center",display:"flex",flexDirection:"column",gap:6,padding:"0 24px"}}>
            <strong style={{fontFamily:"var(--font-display)",fontSize:18,color:"var(--white)"}}>
              {failed?"Video unavailable":hasVideo?"Watch this first · 2 min 40":"Video coming soon"}
            </strong>
            <span style={{fontSize:14,color:"rgba(255,255,255,0.62)",maxWidth:"38ch"}}>
              {failed
                ? "Please try again shortly."
                : hasVideo
                  ? "How we turn “knows it but loses the marks” into a grade on the certificate."
                  : "Your VSL can be added later from Appearance → Kinro Settings in WordPress."}
            </span>
          </div>
        </div>}
    <div style={{position:"absolute",left:0,right:0,bottom:0,height:5,background:"var(--gradient-brand)"}}/>
  </div>;
}

function Hero({onBook}){
  const y=useScrollY();
  const [hh,setHh]=React.useState(58);
  React.useEffect(()=>{
    const m=()=>{const h=document.querySelector("header");if(h)setHh(h.offsetHeight)};
    m();window.addEventListener("resize",m);return()=>window.removeEventListener("resize",m);
  },[]);
  const trust=["Targeted group sessions, grouped by grade and gap","Expert, engaging specialist teachers","Built on methods with real evidence, that works."];
  return <section style={{position:"relative",overflow:"hidden",marginTop:-hh,paddingTop:hh,
    minHeight:"100vh",display:"flex",flexDirection:"column",justifyContent:"center",
    background:"linear-gradient(165deg,#FFF3F3 0%,#FBF7FF 46%,#F6F1FF 100%)"}}>
    <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)",
      transform:`translateY(${y*0.12}px)`,willChange:"transform"}}/>
    <div style={{position:"absolute",top:-140,right:-120,width:560,height:560,borderRadius:"50%",
      background:"var(--gradient-brand-diagonal)",filter:"blur(150px)",opacity:.22,
      transform:`translate3d(0,${y*0.28}px,0)`,willChange:"transform"}}/>
    <div style={{position:"absolute",bottom:-180,left:-140,width:480,height:480,borderRadius:"50%",
      background:"var(--gradient-brand)",filter:"blur(160px)",opacity:.16,
      transform:`translate3d(0,${y*-0.18}px,0)`,willChange:"transform"}}/>
    <div style={{position:"relative",padding:"var(--space-10) clamp(24px,4vw,72px)",width:"100%"}}>
      <div className="lp-hero">
        <div style={{display:"flex",flexDirection:"column",gap:"var(--space-6)",
          transform:`translateY(${y*-0.05}px)`}}>
          <Badge tone="coral" style={{alignSelf:"flex-start"}}>GCSE maths only · online</Badge>
          <h1 style={{fontSize:"var(--size-display-2)",lineHeight:"var(--leading-tight)"}}>
            Revising hard and<br/>still losing marks to<br/>silly mistakes?
          </h1>
          <p style={{fontSize:"var(--size-body-lg)",color:"var(--text-body)",maxWidth:"46ch",lineHeight:"var(--leading-body)"}}>
            That is precisely what we specialise in. Kinro runs targeted GCSE maths tuition with line-by-line mark scheme analysis on every paper your child sits.
          </p>
          <div style={{display:"flex",gap:"var(--space-5)",flexWrap:"wrap",marginTop:"var(--space-3)"}}>
            <Button variant="accent" size="lg" iconRight="arrow-right" onClick={onBook}>See if your child qualifies</Button>
            <Button variant="secondary" size="lg"
              onClick={()=>{const el=document.getElementById("marks");if(el)window.scrollTo({top:el.offsetTop-70,behavior:"smooth"})}}>
              See our method
            </Button>
          </div>
          <GuaranteePill/>
          <div style={{display:"flex",flexDirection:"column",gap:"var(--space-4)",marginTop:"var(--space-3)"}}>
            {trust.map(t=><span key={t} style={{display:"flex",alignItems:"center",gap:10,fontSize:14,color:"var(--text-muted)"}}>
              <Icon name="check" size="sm" color="var(--coral-500)"/>{t}</span>)}
          </div>
        </div>
        <VideoStage/>
      </div>
    </div>
  </section>;
}

Object.assign(window,{Hero,VideoStage});