const ctaStyles = {
  wrap:{padding:"120px 40px"},
  inner:{
    maxWidth:1360, margin:"0 auto",
    background:"var(--ink)", color:"#fff",
    borderRadius:32, padding:"80px 60px",
    position:"relative", overflow:"hidden"
  },
  kicker:{fontFamily:'"JetBrains Mono",monospace', fontSize:12, letterSpacing:"0.18em", textTransform:"uppercase", color:"var(--teal)", marginBottom:20, position:"relative", zIndex:2},
  h2:{fontSize:"clamp(48px, 7vw, 104px)", lineHeight:0.95, letterSpacing:"-0.04em", fontWeight:700, margin:"0 0 36px", position:"relative", zIndex:2, maxWidth:900, textWrap:"balance"},
  ctas:{display:"flex", gap:12, flexWrap:"wrap", position:"relative", zIndex:2},
  primary:{padding:"18px 28px", background:"#fff", color:"var(--ink)", borderRadius:999, fontWeight:700, fontSize:16, display:"inline-flex", alignItems:"center", gap:10},
  ghost:{padding:"18px 28px", color:"#fff", borderRadius:999, fontWeight:600, fontSize:16, border:"1px solid rgba(255,255,255,0.24)"},
  bg:{
    position:"absolute", inset:0, zIndex:1, pointerEvents:"none",
    background:"radial-gradient(circle at 85% 40%, rgba(156,116,235,0.35) 0%, transparent 50%), radial-gradient(circle at 10% 90%, rgba(10,226,195,0.15) 0%, transparent 45%)"
  },
  words:{
    position:"absolute", bottom:32, right:60, fontSize:13, fontFamily:'"JetBrains Mono",monospace', color:"rgba(255,255,255,0.4)", letterSpacing:"0.1em", zIndex:2
  }
};

function CTA(){
  return (
    <section id="signup" style={ctaStyles.wrap}>
      <div style={ctaStyles.inner}>
        <div style={ctaStyles.bg}/>
        <div style={ctaStyles.kicker}>Ready?</div>
        <h2 style={ctaStyles.h2}>Sooner. <em style={{color:"var(--accent)", fontStyle:"italic"}}>Not later.</em></h2>
        <div style={ctaStyles.ctas}>
          <a href="#" style={ctaStyles.primary}>
            Sign up to trade
            <svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M2 8h11M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
          <a href="#" style={ctaStyles.ghost}>Log in</a>
        </div>
        <div style={ctaStyles.words}>THE FASTER WAY TO BETTER BROKING</div>
      </div>
    </section>
  );
}

window.CTA = CTA;