const awardStyles = {
  wrap:{padding:"80px 0", borderTop:"1px solid var(--line)", borderBottom:"1px solid var(--line)", background:"var(--paper)", overflow:"hidden"},
  inner:{maxWidth:1360, margin:"0 auto", padding:"0 40px"},
  head:{display:"flex", alignItems:"flex-end", justifyContent:"space-between", marginBottom:40, flexWrap:"wrap", gap:40},
  kicker:{fontFamily:'"JetBrains Mono",monospace', fontSize:12, letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--accent)", marginBottom:12},
  h2:{fontSize:"clamp(32px, 4vw, 56px)", lineHeight:1.05, letterSpacing:"-0.03em", fontWeight:700, margin:0, maxWidth:560, flex:"1 1 400px"},
  accreds:{display:"flex", flexDirection:"column", gap:8, fontSize:13, color:"var(--ink)", opacity:0.7, flex:"0 0 auto", textAlign:"right"},
  marquee:{position:"relative", width:"100%", overflow:"hidden", mask:"linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)", WebkitMask:"linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)"},
  track:{display:"flex", gap:16, animation:"iuwMarquee 55s linear infinite", width:"max-content"},
  card:{
    padding:"20px 24px", border:"1px solid var(--line)", borderRadius:14, minWidth:300,
    display:"flex", flexDirection:"column", gap:6, background:"#fff"
  },
  y:{fontSize:11, fontFamily:'"JetBrains Mono",monospace', letterSpacing:"0.14em", color:"var(--accent)"},
  body:{fontWeight:600, fontSize:15, letterSpacing:"-0.01em"},
  label:{fontSize:13, color:"var(--ink)", opacity:0.65}
};

function Awards(){
  const list = [...window.IUW.AWARDS, ...window.IUW.AWARDS];
  return (
    <section id="recognition" style={awardStyles.wrap}>
      <style>{`@keyframes iuwMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }`}</style>
      <div style={awardStyles.inner}>
        <div style={awardStyles.head}>
          <div>
            <div style={awardStyles.kicker}>Recognition</div>
            <h2 style={awardStyles.h2}>17 nominations since 2018. And we're only just getting started.</h2>
          </div>
          <div style={awardStyles.accreds}>
            <span>◉ Coverholder at Lloyd's</span>
            <span>◉ Member of the MGAA</span>
          </div>
        </div>
      </div>
      <div style={awardStyles.marquee}>
        <div style={awardStyles.track}>
          {list.map((a,i)=>(
            <div key={i} style={awardStyles.card}>
              <div style={awardStyles.y}>{a.y}</div>
              <div style={awardStyles.body}>{a.body}</div>
              <div style={awardStyles.label}>{a.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Awards = Awards;