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

const LOGOS=[
  ["Harris Westminster Sixth Form","universities/harris-westminster.webp"],
  ["University of Oxford","universities/oxford.webp"],
  ["University of Cambridge","universities/cambridge.webp"],
  ["Imperial College London","universities/imperial.webp"],
  ["UCL","universities/ucl.webp"],
  ["LSE","universities/lse.webp"],
  ["University of Warwick","universities/warwick.webp"],
  ["Durham University","universities/durham.webp"],
  ["King’s College London","universities/kings.webp"],
  ["University of Bristol","universities/bristol.svg"],
  ["University of Birmingham","universities/birmingham.webp"],
  ["University of St Andrews","universities/st-andrews.webp"],
  ["Westminster School","universities/westminster-school.webp"],
  ["Winchester College","universities/winchester.webp"],
  ["Concord College","universities/concord.webp"],
  ["Cardiff Sixth Form College","universities/cardiff-sixth.webp"],
  ["Brampton Manor Academy","universities/brampton-manor.webp"]
];

function Plate({name,file,active,onEnter}){
  return <span onMouseEnter={onEnter} style={{
    flexShrink:0,
    display:"grid",
    placeItems:"center",
    width:210,
    height:96,
    cursor:"default",
    padding:"12px 20px"
  }}>
    <img
      src={LP_A+file}
      alt={name}
      loading="lazy"
      decoding="async"
      style={{
        display:"block",
        width:"100%",
        height:"100%",
        maxWidth:150,
        maxHeight:68,
        objectFit:"contain",
        objectPosition:"center",
        filter:active?"none":"saturate(.94)",
        opacity:active?1:.9,
        transform:active?"scale(1.08)":"scale(1)",
        transition:"transform .25s ease, opacity .25s ease, filter .25s ease"
      }}
    />
  </span>;
}

function Row({items,dur,active,setActive}){
  const [paused,setPaused]=React.useState(false);
  const row=[...items,...items];
  return <div onMouseEnter={()=>setPaused(true)} onMouseLeave={()=>{setPaused(false);setActive(null)}}
    style={{
      overflow:"hidden",
      maskImage:"linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)",
      WebkitMaskImage:"linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)"
    }}>
    <div style={{
      display:"flex",
      gap:8,
      width:"max-content",
      alignItems:"center",
      animation:`lp-marquee ${dur}s linear infinite`,
      animationPlayState:paused?"paused":"running"
    }}>
      {row.map(([name,file],i)=>
        <Plate
          key={`${name}-${i}`}
          name={name}
          file={file}
          active={active===name}
          onEnter={()=>setActive(name)}
        />
      )}
    </div>
  </div>;
}

function Destinations(){
  const [active,setActive]=React.useState(null);
  return <section style={{
    padding:"var(--space-11) 0",
    background:"var(--surface-page)",
    borderTop:"1px solid var(--border-subtle)",
    borderBottom:"1px solid var(--border-subtle)"
  }}>
    <div className="lp-wrap" style={{
      paddingBottom:"var(--space-8)",
      display:"flex",
      alignItems:"flex-end",
      justifyContent:"space-between",
      gap:"var(--space-7)",
      flexWrap:"wrap"
    }}>
      <div style={{display:"flex",flexDirection:"column",gap:10}}>
        <Eyebrow>Where our students end up</Eyebrow>
        <h3 style={{fontSize:"var(--size-heading-2)",lineHeight:"var(--leading-snug)",maxWidth:"34ch"}}>
          A grade in maths is a door. Plenty of ours have walked through these.
        </h3>
      </div>
      <div style={{
        minHeight:52,
        display:"flex",
        alignItems:"center",
        gap:12,
        padding:"12px 18px",
        borderRadius:"var(--radius-lg)",
        background:"var(--gradient-brand-soft)",
        border:"1px solid var(--border-subtle)",
        maxWidth:"42ch"
      }}>
        <Icon name="graduation-cap" size="sm" color="var(--violet-600)"/>
        <span key={active||"idle"} style={{fontSize:14,color:"var(--text-body)",animation:"lp-tick .35s ease-out"}}>
          {active?`Kinro students have progressed on to ${active}.`
                 :"Hover any logo. These are destinations former Kinro students have progressed on to."}
        </span>
      </div>
    </div>
    <Row items={LOGOS} dur={72} active={active} setActive={setActive}/>
  </section>;
}

Object.assign(window,{Destinations,LOGOS});